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')
|
||||
module.exports = defineConfig({
|
||||
devServer:{
|
||||
host: 'localhost',
|
||||
port: 8080,
|
||||
https: false,
|
||||
proxy:{
|
||||
'/auth/login':{
|
||||
target : 'https://911fb0525ms3.vicp.fun/loveforest/api',
|
||||
changeOrigin : true,
|
||||
},
|
||||
}
|
||||
},
|
||||
transpileDependencies: true
|
||||
})
|
||||
|
||||
Loading…
Reference in new issue