Skip to content

P
pica-admin-IM
提交 2252a55a 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

代码修改

上级 401188a6
隐藏空白字符变更
内嵌 并排
正在显示 包含 855 行增加 和 51 行删除
src/components/IM/user-info.vue
浏览文件 @ 2252a55a
...@@ -25,13 +25,20 @@ ...@@ -25,13 +25,20 @@
<div class="icon"> <div class="icon">
<img src="../../assets/image/img.jpg" alt /> <img src="../../assets/image/img.jpg" alt />
</div> </div>
<span class="desc">无机构</span> <div class="icon-s">
<img src="../../assets/image/img.jpg" alt />
</div>
<span class="desc mr12">实名认证</span>
<div class="icon-s">
<img src="../../assets/image/img.jpg" alt />
</div>
<span class="desc">执业认证</span>
</article> </article>
<article class="other-info"> <article class="other-info">
<div class="icon"> <div class="icon">
<img src="../../assets/image/img.jpg" alt /> <img src="../../assets/image/img.jpg" alt />
</div> </div>
<span class="desc">无小店</span> <span class="desc">无机构</span>
</article> </article>
</section> </section>
<section class="qt-wrapper"> <section class="qt-wrapper">
...@@ -127,10 +134,17 @@ export default { ...@@ -127,10 +134,17 @@ export default {
margin: 10px 0; margin: 10px 0;
// align-items: center; // align-items: center;
.icon { .icon {
margin-right: 6px; margin-right: 8px;
& > img { & > img {
width: 12px; width: 16px;
height: 12px; height: 16px;
}
}
.icon-s {
margin-right: 4px;
& > img {
width: 11px;
height: 11px;
} }
} }
.desc { .desc {
...@@ -138,6 +152,9 @@ export default { ...@@ -138,6 +152,9 @@ export default {
line-height: 1; line-height: 1;
color: #000000; color: #000000;
opacity: 0.65; opacity: 0.65;
&.mr12 {
margin-right: 12px;
}
} }
} }
} }
......
src/views/IM/current-session/index copy.vue 0 → 100644
浏览文件 @ 2252a55a
<template>
<div class="current-session-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<section class="component-content screenSet" id="screenSet">
<article class="left">
<div class="l-header">
<span>我的任务(3)</span>
<span>再来一个</span>
</div>
<p class="c-num">当前等待会话：4个</p>
<ul class="session-list">
<li class="item current">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt />
<div class="num-wrapper">
<span class="num">222</span>
</div>
</div>
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
<li class="item">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt />
<div class="num-wrapper">
<span class="num">222</span>
</div>
</div>
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
<li class="item">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt />
<div class="num-wrapper">
<span class="num">222</span>
</div>
</div>
<div class="desc">
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
</ul>
</article>
<article class="center">
<section class="c-header">
<div class="c-header-l">
<img src="../../../assets/image/img.jpg" alt />
<span class="name">杨Song</span>
<span class="time-tip">当前会话时长：3分08秒</span>
</div>
<span class="close-btn">结束会话</span>
</section>
<section class="msg-content">
<article
class="msg-item"
:class="{'cr': item.sendOrReceive == 'send'}"
v-for="(item, index) in messageList"
:key="index"
>
<div class="msg-item-img">
<img src="../../../assets/image/img.jpg" alt />
</div>
<div class="msg-item-detail">
<span class="mid-time">1:16 pm</span>
<div
v-if="item.bizType == 1"
class="mid-text"
>不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计</div>
<div v-if="item.bizType == 2" class="mid-img">
<img src="../../../assets/image/img.jpg" alt />
<!-- <img :src="item.imgUrl" alt /> -->
</div>
<div v-if="item.bizType == 3" class="mid-pdf">
<div class="midp-left">
<span class="name">神奇宝贝图鉴皮卡丘杰尼龟小火龙胖丁超梦双蛋瓦斯…</span>
<span class="size">23.0 MB</span>
</div>
<div class="midp-icon">
<img src="../../../assets/image/img.jpg" alt />
</div>
</div>
<div v-if="item.bizType == 4" class="mid-text link">五分钟首页</div>
</div>
</article>
<!-- <article class="msg-item cr">
<div class="msg-item-img"><img src="../../../assets/image/img.jpg" alt /></div>
<div class="msg-item-detail">
<span class="mid-time">1:16 pm</span>
<div class="mid-text">不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计</div>
</div>
</article>-->
</section>
<section class="c-bottom">
<div class="tool-bar">
<img src="../../../assets/image/img.jpg" alt />
<img src="../../../assets/image/img.jpg" alt />
</div>
<el-input
v-model="text"
type="textarea"
placeholder="请输入"
size="normal"
clearable
></el-input>
<div class="send-btn">
<el-button type="primary" size="default" style="text-algin:right;" maxlength=500>发送</el-button>
</div>
</section>
</article>
<article class="right">
<UserInfo :userInfo="userInfo"></UserInfo>
</article>
</section>
</div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { validateWord } from "@/utils/validate.js";
import { openLoading, closeLoading } from "@/utils/utils";
import * as commonUtil from "@/utils/utils";
import UserInfo from "@/components/IM/user-info.vue";
let vm = null;
export default {
components: {
BreadCrumb,
UserInfo
},
data() {
return {
curmbFirst: "云鹊客服",
curmbSecond: "当前会话",
userInfo: {
name: "杨Song",
mobilePhone: "138****7261",
isShowCopyBtn: true
},
text: '',
// 消息列表 bizType 1: 文本(包括不支持的类型文案); 2: 图片; 3: PDF; 4: 链接;
messageList: [
{
bizType: 1,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "receive", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 2,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "receive", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 2,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 3,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 4,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
}
]
};
},
computed: {},
created() {},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
// 列表查询
}
};
</script>
<style lang="scss">
.current-session-wrap {
textarea {
border: 0px !important;
resize: none;
height: 100px;
padding: 5px 25px;
}
}
</style>
<style lang="scss" scoped>
.current-session-wrap {
.component-content {
display: flex;
flex-direction: row;
min-height: 600px;
min-width: 1200px;
font-size: 14px;
.left {
width: 270px;
// padding: 0 25px 15px;
border-right: 2px solid #f5f5f5;
.l-header {
display: flex;
flex-direction: row;
height: 52px;
justify-content: space-between;
align-items: center;
padding: 0 25px;
& > span:first-child {
font-size: 16px;
}
& > span:last-child {
color: #0d9078;
cursor: pointer;
}
}
.c-num {
padding: 0 25px;
height: 40px;
line-height: 40px;
background: #fffbe6;
}
.session-list {
width: 100%;
& > .item {
width: 100%;
display: flex;
height: 72px;
flex-direction: row;
align-items: center;
padding: 0 25px;
cursor: pointer;
.img-wrapper {
position: relative;
top: 0;
left: 0;
width: 40px;
height: 40px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.num-wrapper {
position: absolute;
top: 0;
right: -5px;
// padding: 2px 3px;
min-width: 14px;
height: 14px;
line-height: 14px;
.num {
display: inline-block;
min-width: 16px;
padding: 2px 3px;
border-radius: 8px;
text-align: center;
color: #ffffff;
background: #ff4d4f;
}
}
}
& > .desc {
flex: 1;
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
.name {
}
}
.bottom {
font-size: 12px;
color: #999999;
}
}
&.current {
background: #f8f9fa;
}
}
}
}
.center {
flex: 1;
.c-header {
padding: 0 25px;
height: 56px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f5f5f5;
& > .c-header-l {
flex: 1;
display: flex;
flex-direction: row;
& > img {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 12px;
margin-right: 8px;
}
& > .name {
margin-right: 25px;
color: #333333;
}
& > .time-tip {
font-size: 12px;
color: #999999;
}
}
.close-btn {
width: 100px;
color: #c7c8c9;
cursor: pointer;
}
}
.msg-content {
// width: 100%;
height: 300px;
overflow: scroll;
display: flex;
flex-direction: column;
margin: 10px 20px;
.msg-item {
display: flex;
flex-direction: row;
margin: 12px 0;
.msg-item-img {
width: 44px;
height: 44px;
margin-right: 8px;
& > img {
width: 100%;
height: 100%;
border-radius: 22px;
}
}
.msg-item-detail {
display: flex;
flex-direction: column;
text-align: left;
font-size: 13px;
& > :first-child {
color: #999999;
margin-bottom: 8px;
}
& > .mid-text {
padding: 12px 24px;
display: inline-block;
max-width: 300px;
border-radius: 8px;
background: #ebf5fc;
text-align: justify;
color: #333333;
&.link {
color: #2f86f6;
}
}
& > .mid-pdf {
max-width: 260px;
display: flex;
flex-direction: row;
text-align: left;
padding: 10px 15px;
background: #f0f1f2;
border-radius: 8px;
min-height: 80px;
.midp-left {
display: flex;
flex-direction: column;
justify-content: space-around;
.name {
font-size: 13px;
color: #333333;
}
.size {
font-size: 12px;
color: #999999;
}
}
.midp-icon {
width: 36px;
height: 44px;
& > img {
width: 36px;
height: 100%;
border-radius: 3px;
}
}
}
& > .mid-img {
width: 170px;
height: 108px;
& > img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
&.cr {
flex-direction: row-reverse;
.msg-item-img {
margin-right: 0;
margin-left: 8px;
}
.msg-item-detail {
text-align: right;
& > .mid-text {
background: #f0f1f2;
}
}
}
}
}
.c-bottom {
height: 160px;
border-top: 2px solid #f0f1f2;
.tool-bar {
display: flex;
margin: 10px 25px;
& > img {
width: 20px;
height: 20px;
margin-right: 20px;
cursor: pointer;
}
}
.send-btn {
text-align: right;
margin-right: 25px;
}
}
}
.right {
width: 240px;
border-left: 2px solid #f5f5f5;
}
background: #fff;
.time {
color: #999999;
}
.small {
font-size: 12px;
}
}
}
</style>
\ No newline at end of file
src/views/IM/current-session/index.vue
浏览文件 @ 2252a55a
...@@ -8,11 +8,13 @@ ...@@ -8,11 +8,13 @@
<span>再来一个</span> <span>再来一个</span>
</div> </div>
<p class="c-num">当前等待会话：4个</p> <p class="c-num">当前等待会话：4个</p>
<ul class="session-list"> <ul class="session-list" :style="{'height': (containerHeight - 248) + 'px'}">
<li class="item current"> <li class="item current">
<div class="img-wrapper"> <div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt=""> <img src="../../../assets/image/img.jpg" alt />
<div class="num-wrapper"><span class="num">222</span></div> <div class="num-wrapper">
<span class="num">222</span>
</div>
</div> </div>
<div class="desc"> <div class="desc">
<p class="top"> <p class="top">
...@@ -22,23 +24,12 @@ ...@@ -22,23 +24,12 @@
<p class="bottom">少即是多</p> <p class="bottom">少即是多</p>
</div> </div>
</li> </li>
<li class="item"> <li class="item" v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8]" :key="index">
<div class="img-wrapper"> <div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt=""> <img src="../../../assets/image/img.jpg" alt />
<div class="num-wrapper"><span class="num">222</span></div> <div class="num-wrapper">
</div> <span class="num">222</span>
<div class="desc"> </div>
<p class="top">
<span class="name">公华</span>
<span class="time small">19:20</span>
</p>
<p class="bottom">少即是多</p>
</div>
</li>
<li class="item">
<div class="img-wrapper">
<img src="../../../assets/image/img.jpg" alt="">
<div class="num-wrapper"><span class="num">222</span></div>
</div> </div>
<div class="desc"> <div class="desc">
<p class="top"> <p class="top">
...@@ -51,14 +42,64 @@ ...@@ -51,14 +42,64 @@
</ul> </ul>
</article> </article>
<article class="center"> <article class="center">
<div class="c-header"> <section class="c-header">
<div class="c-header-l"> <div class="c-header-l">
<img src="../../../assets/image/img.jpg" alt=""> <img src="../../../assets/image/img.jpg" alt />
<span class="name">这是一个用户名</span> <span class="name">杨Song</span>
<span class="time-tip">当前会话时长：3分08秒</span> <span class="time-tip">当前会话时长：3分08秒</span>
</div> </div>
<span class="close-btn">结束会话</span> <span class="close-btn">结束会话</span>
</div> </section>
<section class="msg-content">
<article
class="msg-item"
:class="{'cr': item.sendOrReceive == 'send'}"
v-for="(item, index) in messageList"
:key="index"
>
<div class="msg-item-img">
<img src="../../../assets/image/img.jpg" alt />
</div>
<div class="msg-item-detail">
<span class="mid-time">1:16 pm</span>
<div
v-if="item.bizType == 1"
class="mid-text"
>不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计</div>
<div v-if="item.bizType == 2" class="mid-img">
<img src="../../../assets/image/img.jpg" alt />
<!-- <img :src="item.imgUrl" alt /> -->
</div>
<div v-if="item.bizType == 3" class="mid-pdf">
<div class="midp-left">
<span class="name">神奇宝贝图鉴皮卡丘杰尼龟小火龙胖丁超梦双蛋瓦斯…</span>
<span class="size">23.0 MB</span>
</div>
<div class="midp-icon">
<img src="../../../assets/image/img.jpg" alt />
</div>
</div>
<div v-if="item.bizType == 4" class="mid-text link">五分钟首页</div>
</div>
</article>
<!-- <article class="msg-item cr">
<div class="msg-item-img"><img src="../../../assets/image/img.jpg" alt /></div>
<div class="msg-item-detail">
<span class="mid-time">1:16 pm</span>
<div class="mid-text">不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计不理解人，就无法理解什么是设计</div>
</div>
</article>-->
</section>
<section class="c-bottom">
<div class="tool-bar">
<img src="../../../assets/image/img.jpg" alt />
<img src="../../../assets/image/img.jpg" alt />
</div>
<el-input v-model="text" type="textarea" placeholder="请输入" size="normal" clearable></el-input>
<div class="send-btn">
<el-button type="primary" size="default" style="text-algin:right;" maxlength="500">发送</el-button>
</div>
</section>
</article> </article>
<article class="right"> <article class="right">
<UserInfo :userInfo="userInfo"></UserInfo> <UserInfo :userInfo="userInfo"></UserInfo>
...@@ -86,34 +127,141 @@ export default { ...@@ -86,34 +127,141 @@ export default {
curmbSecond: "当前会话", curmbSecond: "当前会话",
userInfo: { userInfo: {
name: "杨Song", name: "杨Song",
mobilePhone: '138****7261', mobilePhone: "138****7261",
isShowCopyBtn: true, isShowCopyBtn: true
}, },
// 消息列表 text: "",
containerHeight: '210',
// 消息列表 bizType 1: 文本(包括不支持的类型文案); 2: 图片; 3: PDF; 4: 链接;
messageList: [ messageList: [
{ {
bizType: 1,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "receive", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 2,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "receive", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1, type: 1,
from: '' extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 2,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 3,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
},
{
bizType: 4,
time: 1000,
showType: 1,
title: "测试title",
content: "测试content",
imgUrl: "https://file.yunqueyi.com/File/doctor_default.png",
sendOrReceive: "send", // send receive
displayTimeHeader: "4分20秒",
url: "https://file.yunqueyi.com/File/doctor_default.png",
file: "https://file.yunqueyi.com/File/doctor_default.png",
type: 1,
extData: "/pages/im/advisory/evalution",
sourceId: 1,
displayFlag: 1
} }
] ]
}; };
}, },
computed: { computed: {},
created() {},
},
created() {
},
// 挂载到Dom完成时 // 挂载到Dom完成时
mounted: function() { mounted: function() {
commonUtil.resizeHeight(); this.resizeHeight();
}, },
methods: { methods: {
// 列表查询 resizeHeight(
cMinusHeight = 152,
iMinuxHeight = 210,
refHeightId = "slidebar-container",
containerHeightId = "screenSet"
) {
let self = this;
let containerHeight =
this.p_getElm(refHeightId).getBoundingClientRect().height - 15;
this.p_getElm(containerHeightId).style.height =
containerHeight - cMinusHeight + "px";
window.onresize = function() {
containerHeight =
this.p_getElm(refHeightId).getBoundingClientRect().height - 15;
this.p_getElm(containerHeightId).style.height =
containerHeight - cMinusHeight + "px";
self.containerHeight = containerHeight;
};
self.containerHeight = containerHeight;
},
p_getElm(elmId) {
return document.getElementById(elmId);
}
// 列表查询
} }
}; };
</script> </script>
<style lang="scss">
.current-session-wrap {
textarea {
border: 0px !important;
resize: none;
height: 100px;
padding: 5px 25px;
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.current-session-wrap { .current-session-wrap {
.component-content { .component-content {
...@@ -125,7 +273,7 @@ export default { ...@@ -125,7 +273,7 @@ export default {
.left { .left {
width: 270px; width: 270px;
// padding: 0 25px 15px; // padding: 0 25px 15px;
border-right: 2px solid #F5F5F5; border-right: 2px solid #f5f5f5;
.l-header { .l-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -137,7 +285,7 @@ export default { ...@@ -137,7 +285,7 @@ export default {
font-size: 16px; font-size: 16px;
} }
& > span:last-child { & > span:last-child {
color: #0D9078; color: #0d9078;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -145,10 +293,12 @@ export default { ...@@ -145,10 +293,12 @@ export default {
padding: 0 25px; padding: 0 25px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background: #FFFBE6; background: #fffbe6;
} }
.session-list { .session-list {
width: 100%; width: 100%;
height: 100%;
overflow: scroll;
& > .item { & > .item {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -183,11 +333,10 @@ export default { ...@@ -183,11 +333,10 @@ export default {
padding: 2px 3px; padding: 2px 3px;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
color: #FFFFFF; color: #ffffff;
background: #FF4D4F; background: #ff4d4f;
} }
} }
} }
& > .desc { & > .desc {
flex: 1; flex: 1;
...@@ -196,7 +345,6 @@ export default { ...@@ -196,7 +345,6 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
.name { .name {
} }
} }
.bottom { .bottom {
...@@ -205,7 +353,7 @@ export default { ...@@ -205,7 +353,7 @@ export default {
} }
} }
&.current { &.current {
background: #F8F9FA; background: #f8f9fa;
} }
} }
} }
...@@ -219,7 +367,7 @@ export default { ...@@ -219,7 +367,7 @@ export default {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 2px solid #F5F5F5; border-bottom: 2px solid #f5f5f5;
& > .c-header-l { & > .c-header-l {
flex: 1; flex: 1;
display: flex; display: flex;
...@@ -242,14 +390,131 @@ export default { ...@@ -242,14 +390,131 @@ export default {
} }
.close-btn { .close-btn {
width: 100px; width: 100px;
color: #C7C8C9; color: #c7c8c9;
cursor: pointer; cursor: pointer;
} }
} }
.msg-content {
// width: 100%;
height: 300px;
overflow: scroll;
display: flex;
flex-direction: column;
margin: 10px 20px;
.msg-item {
display: flex;
flex-direction: row;
margin: 12px 0;
.msg-item-img {
width: 44px;
height: 44px;
margin-right: 8px;
& > img {
width: 100%;
height: 100%;
border-radius: 22px;
}
}
.msg-item-detail {
display: flex;
flex-direction: column;
text-align: left;
font-size: 13px;
& > :first-child {
color: #999999;
margin-bottom: 8px;
}
& > .mid-text {
padding: 12px 24px;
display: inline-block;
max-width: 300px;
border-radius: 8px;
background: #ebf5fc;
text-align: justify;
color: #333333;
&.link {
color: #2f86f6;
}
}
& > .mid-pdf {
max-width: 260px;
display: flex;
flex-direction: row;
text-align: left;
padding: 10px 15px;
background: #f0f1f2;
border-radius: 8px;
min-height: 80px;
.midp-left {
display: flex;
flex-direction: column;
justify-content: space-around;
.name {
font-size: 13px;
color: #333333;
}
.size {
font-size: 12px;
color: #999999;
}
}
.midp-icon {
width: 36px;
height: 44px;
& > img {
width: 36px;
height: 100%;
border-radius: 3px;
}
}
}
& > .mid-img {
width: 170px;
height: 108px;
& > img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
&.cr {
flex-direction: row-reverse;
.msg-item-img {
margin-right: 0;
margin-left: 8px;
}
.msg-item-detail {
text-align: right;
& > .mid-text {
background: #f0f1f2;
}
}
}
}
}
.c-bottom {
height: 160px;
border-top: 2px solid #f0f1f2;
.tool-bar {
display: flex;
margin: 10px 25px;
& > img {
width: 20px;
height: 20px;
margin-right: 20px;
cursor: pointer;
}
}
.send-btn {
text-align: right;
margin-right: 25px;
}
}
} }
.right { .right {
width: 240px; width: 240px;
border-left: 2px solid #F5F5F5; border-left: 2px solid #f5f5f5;
} }
background: #fff; background: #fff;
.time { .time {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或