<script> import '@/assets/css/scrool.css' import '@/assets/fonts/iconfont.js'; export default { name: "friend", data() { return { list: [ {msg: '赵客缦胡缨，吴钩霜雪明'}, {msg: '银鞍照白马，飒沓如流星'}, {msg: '十步杀一人，千里不留行'}, {msg: '事了拂衣去，深藏身与名'}, {msg: '闲过信陵饮，脱剑膝前横。'}, {msg: '将炙啖朱亥，持觞劝侯嬴。'}, {msg: '三杯吐然诺，五岳倒为轻'}, {msg: '眼花耳热后，意气素霓生。'}, {msg: '救赵挥金槌，邯郸先震惊。'}, {msg: '千秋二壮士，烜赫大梁城。'}, {msg: '纵死侠骨香，不惭世上英。'}, {msg: '谁能书阁下，白首太玄经。'}, {msg: '是唐代大诗人李白借乐府古题创作的一首诗。此诗开头四句从侠客的装束、兵刃、坐骑刻画侠客的形象；第二个四句描写侠客高超的武术和淡泊名利的行藏；第三个四句引入信'}, ], msg: '', number:8, messageScroll:false } }, mounted() { this.$nextTick(function () { this.$refs.ele.scrollTop = this.$refs.ele.scrollHeight }) }, methods: { showMessageScrolls(){ this.messageScroll = true; }, hideMessageScrolls(){ this.messageScroll = false; }, inputMsg(e) { this.msg = e.target.innerHTML; }, sendMsg(e) { this.list.push({msg: this.msg}); this.msg = ''; this.$refs.input.innerHTML = ''; setTimeout(() => { this.$refs.ele.scrollTop = this.$refs.ele.scrollHeight; }, 200); e.preventDefault(); } } } </script>
样式代码
.friend_window { position: absolute; width: 100%; height: 100%; background-image: url("../img/main_1.jpg"); border-radius: 4px; -webkit-user-select: none; background-size: 100% 100%; header { height: 40px; background-color: rgba(0, 0, 0, 0.3); -webkit-app-region: drag; border-radius: 4px 4px 0 0; display: flex; justify-content: space-between; .nickname { color: #FFF; line-height: 40px; font-size: 20px; margin: auto; padding-left: 40px } .buttons { i { display: inline-block; color: #FFF; width: 40px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; -webkit-app-region: no-drag; &:hover { background-color: rgba(255, 255, 255, 0.3); } } } } aside { height: calc(100% - 40px); border-radius: 0 0 4px 4px; display: flex; } nav { width: 240px; position: relative; background-size: 100% 100%; overflow-y: auto; &:after { display: inline-block; content: ''; width: 5px; cursor: e-resize; position: absolute; right: -2px; top: 0; height: 100%; } ul { li.active { background-color: rgba(255, 255, 255, 0.2); } li { list-style: none; height: 60px; padding-left: 10px; cursor: pointer; display: flex; overflow: hidden; align-items: flex-start; &:hover { background-color: rgba(255, 255, 255, 0.2); } .push_right { padding-right: 10px; text-align: center; align-self: center; .time { font-size: 13px; color: #CFD3DA; } .number { display: inline-block; background-color: #e4393c; color: #fff; min-width: 15px; min-height: 15px; padding: 0 2px; line-height: 15px; border-radius: 50%; text-align: center; font-size: 12px; } } .msg_box { align-self: center; flex: 1; color: #EFF1F3; .messages { color: #CFD3DA; } } .avatar { width: 45px; height: 45px; align-self: center; margin-right: 10px; img { width: 100%; height: 100%; border-radius: 50%; } } } } } main { background-color: #fff; width: calc(100% - 240px); border-radius: 0 0 4px 0; .message_main { height: calc(100% - 35%); overflow-y: auto; &::-webkit-scrollbar { display: block !important; } .mes_box { display: flex; margin-bottom: 10px; margin-top: 10px; padding: 10px; .avatar { width: 40px; height: 40px; margin-right: 10px; img { width: 100%; height: 100%; border-radius: 50%; } } .message_box { background-color: #FFFFFF; color: #333; padding: 10px; border-radius: 5px; max-width: 72%; position: relative; border: 1px solid #D4D4D4; &::before { content: ''; display: block; position: absolute; width: 10px; height: 10px; border: 1px solid #D4D4D4; border-right: none; border-top: none; background-color: #FFFFFF; border-radius: 3px; transform: rotate(44deg); left: -6px; top: 14px; } } } .me { display: flex; justify-content: flex-end; .message_box { background-color: #A0E759; color: #333; border: 1px solid #77BF41; &::before { display: none; } &::after { content: ''; display: block; position: absolute; width: 10px; height: 10px; border: 1px solid #77BF41; border-bottom: none; border-left: none; border-radius: 3px; background-color: #A0E759; transform: rotate(45deg); right: -6px; top: 14px; } } .avatar { order: 2; margin-left: 10px; } } } .input_box { border-top: 1px solid #ccc; height: calc(100% - 65%); .menubar { height: 30px; width: 100%; display: flex; align-items: center; .icon { display: inline-block; padding: 2px; width: 25px; height: 25px; cursor: pointer; margin-right: 5px; margin-left: 5px; &:hover { background-color: rgba(0, 0, 0, 0.1); } } } .footerbar { display: flex; height: 70px; align-items: center; justify-content: flex-end; padding-right: 20px; button { margin: 0 10px; padding-left: 30px; padding-right: 30px; } } .input { font-size: 16px; padding: 4px 8px; overflow-y: auto; height: calc(100% - 70px - 30px); background-color: #fff; &::-webkit-scrollbar { display: block !important; } } } } } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }
声明
代码只为学习使用,如果有个人或者机构使用该代码带来的侵权行为,与本人无关
如果代码有不合理之处请大家提出
遗留问题
有一个问题就是左侧的列表是没法拉伸的 不过已经做了样式了 如果不想要的可以去掉这个css代码
&:after { display: inline-block; content: ''; width: 5px; cursor: e-resize; position: absolute; right: -2px; top: 0; height: 100%; }