css聊天布局,CSS实现聊天布局

• 
• 
• 
• 





• 

  hmy66

  吃饭了么吗吃饭了吗

hmy666



{{item.contentWord}}







Send

export default {

name:'chat',

data() {

return {

chatContent: [

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'吃饭了么？'

},

{

fromUser:'nome',

from_nickname:'大可爱',

avatar:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1275343176,638979170&fm=26&gp=0.jpg',

contentWord:'没有啊!'

},

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'那要去哪里吃啊？'

},

{

fromUser:'nome',

from_nickname:'大可爱',

avatar:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1275343176,638979170&fm=26&gp=0.jpg',

contentWord:'吃屎啊!'

},

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'666666666666666666666666666666666666666666666!'

},

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行'

},

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'abababababababababababababababababababababaab'

},

{

fromUser:'me',

from_nickname:'小仙女',

avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6f1c492cbdfe3c24aae44e935a796d5a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622200020&t=a8f31f8ed10a7d1e6bddbf8402f71590',

contentWord:'ab ab ab ab ababa bababab abababa babababa babababaab'

},

]

}

},

methods: {

nohave(){

innerWidth > 768

? this.$message({

message: "功 能 未 开 放 !",

duration: 1500,

type: 'warning'

})

: this.$toast.show("功 能 未 开 放 !", 1500);

}

},

}

*{

margin: 0;

padding: 0;

box-sizing: border-box;

list-style: none;

}

ul{

margin-block-start: 0em;

margin-block-end: 0em;

margin-inline-start: 0px;

margin-inline-end: 0px;

padding-inline-start: 0px;

}

// 容器

.chatContainer{

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

background: url("https://ncdn.camarts.cn/c9ed9ea1.jpg") center;

background-size: cover;

}

// 聊天窗口

// 左侧导航

.chat{

width: 95%;

height: 90%;

border-radius: 10px;

background-color: rgba(255, 255, 255, 0.1);

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

backdrop-filter: blur(4px);

display: grid;

grid-template-columns: 70px 1fr 2fr;

justify-content: center;

align-items: center;

overflow: hidden;

.nav{

width: 70px;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

display: grid;

grid-template-rows: 30px 1fr;

.btn{

width: 100%;

height: 30px;

display: grid;

grid-template-columns: repeat(3,1fr);

align-items: center;

padding: 0 4px;

.item{

width: 12px;

height: 12px;

border-radius: 50%;

margin: auto;

}

.item:nth-child(1){

background-color: #eb5a56;

}

.item:nth-child(2){

background-color: #f8bc33;

}

.item:nth-child(3){

background-color: #62cb44;

}

}

.menu{

display: grid;

grid-template-rows: 1fr 50px;

justify-content: center;

.menu-top{

width: 100%;

display: flex;

.avatar img{

width: 1rem;

border-radius: 5%;

}

ul li{

padding: 10px 0 20px;

text-align: center;

}

ul li .iconfont{

font-size: 0.8rem;

color: rgba(255, 255, 255, 0.9);

}

}

}

}

.chatlist::-webkit-scrollbar {

/*滚动条整体样式*/

width : 10px; /*高宽分别对应横竖滚动条的尺寸*/

height: 1px;

}

.chatlist::-webkit-scrollbar-thumb {

/*滚动条里面小方块*/

border-radius : 10px;

background-color: skyblue;

background-image: -webkit-linear-gradient(

45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

);

}

.chatlist::-webkit-scrollbar-track {

/*滚动条里面轨道*/

box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);

background : #ededed;

border-radius: 10px;

}

.chatlist{

position: relative;

overflow-y: scroll;

overflow-x: hidden;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.5);

display: grid;

grid-template-rows: 70px 1fr;

justify-content: center;

align-items: center;

.search{

position: relative;

overflow: hidden;

width: 6rem;

height: 1rem;

border-radius: 5px;

background-color: rgba(255, 255, 255, 0.7);

display: flex;

align-items: center;

// justify-content: flex-end;

font-size: 0.5rem;

padding-right: 14px;

.icon-search{

font-size: 0.5rem;

position: absolute;

right: 3%;

}

}

.list-con{

user-select: none;

width: 100%;

height:100%;

.list-item{

border-top: 1px solid rgba(0, 0, 0, 0.1);

position: relative;

cursor: pointer;

width: 100%;

height: 1.2rem;

display: grid;

grid-template-columns: 1.2rem 1fr;

align-items: center;

justify-content: center;

box-sizing: content-box;

padding-bottom: 10px;

padding-top: 10px;

.list-avatar{

width: 1.2rem;

height: 1.2rem;

img{

width: 100%;

border-radius: 4px;

}

}

.list-info{

// overflow: hidden;

}

.list-info .list-nickname{

font-size: 14px;

font-weight: 600;

padding-left:10px;

line-height: 1.8;

}

.list-info .list-brief{

font-size: 14px;

font-weight: 400;

padding-left: 10px;

width: 80%;

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

}

}

.list-item:hover{

background-color: rgba(0, 0, 0, 0.1);

}

}

}

.Content{

position: relative;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255, 0.2);

display: grid;

grid-template-rows: 70px 1fr 160px;

align-items: center;

.Content_top{

color: #303030;

display: flex;

justify-content: space-between;

padding-left: 20px;

padding-right: 20px;

border-bottom: solid 1px rgba(255, 255, 255, 0.1);

.nickname{

line-height:2rem;

}

span{

line-height: 2rem;

}

}

.chatContent::-webkit-scrollbar{

width: 0px;

}

.chatContent{

position: absolute;

top: 2rem;

width: 100%;

height: calc(100% - 6rem);

overflow-x: hidden;

overflow-y: scroll;

.reverse{

flex-direction: row-reverse;

.chatItemContent{

margin-right: 8px;

border-bottom-left-radius: 5px ;

border-bottom-right-radius: 5px ;

border-top-left-radius: 5px ;

border-top-right-radius: 0px ;

}

.chatItemContent::after{

content: '';

position: absolute;

top: 10%;

right: -5px;

height: 0px;

width: 0px;

border-left:5px solid rgba(0, 0, 0, 0.5);

border-top:5px solid transparent ;

border-bottom:5px solid transparent;

}

.chatItemContent::before{

display: none;

}

}

.chatItem{

margin: 10px;

display: flex;

.avatar{

width: 1.1rem;

height: 1.1rem;

border-radius: 50%;

overflow: hidden;

}

.chatItemContent{

font-size: 0.6rem;

padding: 5px;

border-bottom-left-radius: 5px ;

border-bottom-right-radius: 5px ;

border-top-right-radius: 5px ;

max-width: 50%;

overflow-wrap: break-word;

position: relative;

margin-left: 8px ;

color: #ffffff;

background-color: rgba(0, 0, 0, 0.5);

}

.chatItemContent::before{

content: '';

position: absolute;

top: 10%;

left: -5px;

height: 0px;

width: 0px;

border-right:5px solid rgba(0, 0, 0, 0.5);

border-top:5px solid transparent ;

border-bottom:5px solid transparent;

}

}

}

.input{

position: absolute;

bottom: 0%;

background-color: #ffffff;

width: 100%;

height: 4rem;

font-size: 0.6rem;

.send{

cursor: pointer;

border-radius: 5px;

bottom: 5%;

z-index: 2;

right: 3%;

box-sizing: content-box;

color: #ffffff;

background-color: skyblue;

font-size: 0.5rem;

padding: 3px 6px;

line-height: 0.5rem;

text-align: center;

position: absolute;

}

.send:hover{

background-color: rgb(63, 163, 230);

}

.input-icon{

margin-left: 10px;

color: #666666;

.iconfont{

margin-right: 8px;

font-size: 0.8rem;

}

}

#chatTextarea::-webkit-scrollbar {

/*滚动条整体样式*/

width : 10px; /*高宽分别对应横竖滚动条的尺寸*/

height: 1px;

}

#chatTextarea::-webkit-scrollbar-thumb {

/*滚动条里面小方块*/

border-radius : 10px;

background-color: skyblue;

background-image: -webkit-linear-gradient(

45deg,

rgba(255, 255, 255, 0.2) 25%,

transparent 25%,

transparent 50%,

rgba(255, 255, 255, 0.2) 50%,

rgba(255, 255, 255, 0.2) 75%,

transparent 75%,

transparent

);

}

#chatTextarea::-webkit-scrollbar-track {

/*滚动条里面轨道*/

box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);

background : #ededed;

border-radius: 10px;

}

#chatTextarea{

position: relative;

border: 0px;

overflow-y: scroll;

resize: none;

width: 100%;

height: 3rem;

outline:none;

padding-top: 8px;

padding-left: 10px;

}

}

}

}