parent
b439d7d5e1
commit
7137f882d8
@ -0,0 +1,229 @@
|
|||||||
|
.chat-totallayout{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 85%;
|
||||||
|
width: 100%;
|
||||||
|
/* flex-grow: 0;
|
||||||
|
flex-shrink: 0; */
|
||||||
|
/* background-color: aqua; */
|
||||||
|
}
|
||||||
|
.chat-leftlayout{
|
||||||
|
/* background-color: azure; */
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.chat-middlelayout{
|
||||||
|
background: linear-gradient(to top, #fff9a1 65%, #fcdcd7);
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.chat-rightlayout{
|
||||||
|
/* background-color: red; */
|
||||||
|
position: relative;
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
/**************整体布局***************/
|
||||||
|
/*************左边************** *****/
|
||||||
|
/* 第一行 */
|
||||||
|
.chat-leftline1{
|
||||||
|
display: flex;
|
||||||
|
/* background-color: antiquewhite; */
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.chat-leftlayout :nth-child(1){
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.chat-leftline1 :nth-child(2){
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgb(61, 243, 243);
|
||||||
|
margin-left: 15px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/* 第二行 */
|
||||||
|
.chat-leftline2{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#chatSearchImg{
|
||||||
|
height: 16px;
|
||||||
|
position: relative;
|
||||||
|
left: 23px;
|
||||||
|
top: -18px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#chatSearchInput{
|
||||||
|
outline: none;
|
||||||
|
height: 30px;
|
||||||
|
width: 300px;
|
||||||
|
border: 2px solid #E44B9D;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding-left: 30px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: -18px;
|
||||||
|
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
#chatSearchInput:focus{
|
||||||
|
border-color: #fdadd8;
|
||||||
|
}
|
||||||
|
/* 第三行 */
|
||||||
|
.chat-leftline3{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* align-items: center; */
|
||||||
|
}
|
||||||
|
.chat-friends{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid rgb(222, 222, 222);
|
||||||
|
/* background-color: #E44B9D; */
|
||||||
|
height: 70px;
|
||||||
|
width: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
/* transition: all 0.2ss; */
|
||||||
|
}
|
||||||
|
.chat-friends:hover{
|
||||||
|
background-color: #fff2f9;
|
||||||
|
}
|
||||||
|
.chat-friends:active{
|
||||||
|
background-color: #fcb8dd;
|
||||||
|
}
|
||||||
|
.chat-friend-text{
|
||||||
|
position: relative;
|
||||||
|
width: 60%;
|
||||||
|
/* background-color: #E44B9D; */
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
#chatIconImg{
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
/* .chat-friend-text{
|
||||||
|
background-color: aliceblue;
|
||||||
|
} */
|
||||||
|
#chatFriendName{
|
||||||
|
font-size: medium;
|
||||||
|
color: black;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
#chatFriendMsg{
|
||||||
|
font-size: small;
|
||||||
|
font-weight: 300;
|
||||||
|
color: gray;
|
||||||
|
/* line-height: 0px; */
|
||||||
|
}
|
||||||
|
#chatTime{
|
||||||
|
font-size: small;
|
||||||
|
font-weight: 300;
|
||||||
|
color: gray;
|
||||||
|
/* background-color: #fdadd8; */
|
||||||
|
}
|
||||||
|
/*****************中间****************** */
|
||||||
|
.send-msg{
|
||||||
|
align-self: center;
|
||||||
|
justify-self: flex-end;
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5%;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
#send-msg-input{
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid #E44B9D;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 90%;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.search-btn{
|
||||||
|
background-image: url("@/assets/pictures/chat/SendBtn.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.search-btn:active{
|
||||||
|
background-image: url("@/assets/pictures/chat/SendBtn.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #a75efb;
|
||||||
|
}
|
||||||
|
/*****************右边***************************/
|
||||||
|
.friend-information{
|
||||||
|
width: 75%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: gray;
|
||||||
|
position: relative;
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
.friend-information p{
|
||||||
|
position: relative;
|
||||||
|
top: -31%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-special-btn{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 85%;
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
.chat-home-tree-btn{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.chat-home-page-btn{
|
||||||
|
background-color: #f85096;
|
||||||
|
background-image: url('../../pictures/chat/portrait.png');
|
||||||
|
background-size: 60% 60%;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 60px;width: 60px; border: none; border-radius: 50%;
|
||||||
|
}
|
||||||
|
.chat-tree-btn{
|
||||||
|
background-color: #a75efb;
|
||||||
|
background-image: url('../../pictures/chat/tree.png');
|
||||||
|
background-size: 60% 60%;
|
||||||
|
background-position: center center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 60px;width: 60px; border: none; border-radius: 50%;
|
||||||
|
}
|
||||||
|
.chat-connection{
|
||||||
|
display: flex;
|
||||||
|
width: 62%;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.chat-recomend{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/* 给圆形定义关键帧 */
|
|
||||||
@keyframes switch {
|
|
||||||
0% {
|
|
||||||
left: calc(4px * 0.2);
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left:calc(4px * 0.2);
|
|
||||||
width: calc(112px * 0.2);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
left: calc(104px * 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes reverse_switch {
|
|
||||||
0% {
|
|
||||||
left: calc(104px * 0.2);
|
|
||||||
|
|
||||||
}
|
|
||||||
60%{
|
|
||||||
left: calc(74px * 0.2);
|
|
||||||
width: calc(112px * 0.2);
|
|
||||||
}
|
|
||||||
100%{
|
|
||||||
left: calc(4px * 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,4 +1,15 @@
|
|||||||
const { defineConfig } = require('@vue/cli-service')
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
|
devServer:{
|
||||||
|
host: 'localhost',
|
||||||
|
port: 8080,
|
||||||
|
https: false,
|
||||||
|
proxy:{
|
||||||
|
'/auth/login':{
|
||||||
|
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
|
||||||
|
changeOrigin : true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
transpileDependencies: true
|
transpileDependencies: true
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in new issue