短视频平台源码，CSS实现聊天布局 - 云豹科技

短视频平台源码，CSS实现聊天布局

<template>
<!-- 外部容器 --><div class="chatContainer"><!-- 聊天窗口 --><div class="chat"><!-- 左侧导航 --><div class="nav"><div class="btn"><div class="item"></div><div class="item"></div><div class="item"></div></div><div class="menu"><div class="menu-top"><ul><li class="avatar"><img src="https://pic.cnblogs.com/avatar/2354315/20210416231335.png" alt=""></li><li @click="nohave"><span class="iconfont icon-chat">&#xe622;</span></li><li @click="nohave"><span class="iconfont icon-renqun">&#xe718;</span></li><li @click="nohave"><span class="iconfont icon-wenjian">&#xe621;</span></li></ul></div><div @click="nohave" class="menu-bot"><span class="iconfont icon-caidan">&#xe61f;</span></div></div></div><!-- 对话列表模块 --><div class="chatlist"><!-- 搜索框 --><div contenteditable="true" class="search"><span class="iconfont icon-search">&#xe624;</span></div><!-- 对话列表 --><div class="list-con"><ul><li v-for="(item,index) in [1,2,3,4,5,6,7,8,9]" :key="index"><!-- 对话 --><div class="list-item"><!-- 对话者的头像 --><div class="list-avatar"><img src="https://pic.cnblogs.com/avatar/2354315/20210416231335.png" alt=""></div><!-- 对话者的信息 --><div class="list-info"><h3 class="list-nickname">hmy66</h3><div class="list-brief">吃饭了么吗吃饭了吗</div></div></div></li></ul></div></div><!-- 聊天内容 --><div class="Content"><div class="Content_top"><p class="nickname">hmy666</p><span @click="nohave" class="iconfont">&#xe626;</span></div><div class="chatContent"><div class="chatItem" v-for="(item,index) in chatContent" :key="index" :class="item.fromUser=='me' ? 'reverse' : ''"><div class="avatar"><!-- 头像 --><img style="width:100%;" :src="item.avatar" alt=""></div><div class="chatItemContent">{{item.contentWord}}</div></div></div><div class="input"><div class="input-icon"><span @click="nohave" class="iconfont icon-biaoqin">&#xe7df;</span><span @click="nohave" class="iconfont icon-shipin">&#xe638;</span><span @click="nohave" class="iconfont icon-wenjian">&#xe66f;</span></div><div class="send">Send</div><textarea placeholder="input your words" name="chatTextarea" id="chatTextarea" ></textarea></div></div></div></div>
</template><script>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);}},}
</script><style lang="less" scoped>
*{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;}}}
}
</style>

以上就是短视频平台源码，CSS实现聊天布局， 更多内容欢迎关注之后的文章