Skip to content

P
pica-admin-consultation
提交 1eab52c4 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

添加图标等

上级 d6bd3764
隐藏空白字符变更
内嵌 并排
正在显示 包含 57 行增加 和 560 行删除
src/components/IM/user-info.vue
浏览文件 @ 1eab52c4
......@@ -17,26 +17,28 @@
<section class="other-info-wrapper">
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
<img src="../../assets/image/IM/icon-contacts.png" alt />
</div>
<span class="desc">医生</span>
</article>
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
<img src="../../assets/image/IM/icon-id-card.png" alt />
</div>
<div class="icon-s">
<img src="../../assets/image/img.jpg" alt />
<img v-if="true" src="../../assets/image/IM/check-yes.png" alt />
<img v-else src="../../assets/image/IM/check-no.png" alt />
</div>
<span class="desc mr12">实名认证</span>
<div class="icon-s">
<img src="../../assets/image/img.jpg" alt />
<img v-if="false" src="../../assets/image/IM/check-yes.png" alt />
<img v-else src="../../assets/image/IM/check-no.png" alt />
</div>
<span class="desc">执业认证</span>
</article>
<article class="other-info">
<div class="icon">
<img src="../../assets/image/img.jpg" alt />
<img src="../../assets/image/IM/icon-org.png" alt />
</div>
<span class="desc">无机构</span>
</article>
......@@ -131,9 +133,11 @@ export default {
.other-info {
display: flex;
flex-direction: row;
margin: 10px 0;
// align-items: center;
margin: 12px 0;
align-items: center;
.icon {
width: 16px;
height: 16px;
margin-right: 8px;
& > img {
width: 16px;
......@@ -141,10 +145,12 @@ export default {
}
}
.icon-s {
width: 12px;
height: 12px;
margin-right: 4px;
& > img {
width: 11px;
height: 11px;
width: 12px;
height: 12px;
}
}
.desc {
......
src/views/IM/current-session/index copy.vue 已删除 100644 → 0
浏览文件 @ d6bd3764
<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
浏览文件 @ 1eab52c4
......@@ -76,28 +76,24 @@
<span class="size">23.0 MB</span>
</div>
<div class="midp-icon">
<img src="../../../assets/image/img.jpg" alt />
<img src="../../../assets/image/IM/icon-pdf.png" 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>
<el-input
placeholder="请输入内容"
v-model="text">
<div slot="suffix" class="cb-icon-wrapper">
<img src="../../../assets/image/IM/icon-folder-open.png" alt />
<img src="../../../assets/image/IM/icon-link.png" alt />
</div>
</el-input>
<div class="send-btn">
<el-button type="primary" size="default" style="text-algin:right;" maxlength="500">发送</el-button>
<img src="../../../assets/image/IM/send-no.png" alt />
</div>
</section>
</article>
......@@ -131,7 +127,7 @@ export default {
isShowCopyBtn: true
},
text: "",
containerHeight: '210',
containerHeight: '740',
// 消息列表 bizType 1: 文本(包括不支持的类型文案); 2: 图片; 3: PDF; 4: 链接;
messageList: [
{
......@@ -221,7 +217,7 @@ export default {
created() {},
// 挂载到Dom完成时
mounted: function() {
this.resizeHeight();
// this.resizeHeight();
// commonUtil.resizeHeight();
},
methods: {
......@@ -257,12 +253,16 @@ export default {
</script>
<style lang="scss">
.current-session-wrap {
textarea {
border: 0px !important;
resize: none;
height: 100px;
padding: 5px 25px;
.el-input__inner {
height: 44px;
line-height: 44px;
}
// textarea {
// border: 0px !important;
// resize: none;
// height: 100px;
// padding: 5px 25px;
// }
}
</style>
<style lang="scss" scoped>
......@@ -399,7 +399,7 @@ export default {
}
.msg-content {
// width: 100%;
height: 300px;
// height: 300px;
overflow: scroll;
display: flex;
flex-direction: column;
......@@ -497,21 +497,34 @@ export default {
}
}
.c-bottom {
height: 160px;
border-top: 2px solid #f0f1f2;
.tool-bar {
display: flex;
flex-direction: row;
margin: 16px 12px 16px 25px;
.cb-icon-wrapper {
display: flex;
margin: 10px 25px;
align-items: center;
height: 44px;
& > img {
width: 20px;
height: 20px;
margin-right: 20px;
margin-right: 16px;
cursor: pointer;
}
}
.send-btn {
text-align: right;
margin-right: 25px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60px;
height: 44px;
background: #F3F6F7;
margin-left: 12px;
border-radius: 8px;
& > img {
width: 24px;
height: 24px;
}
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或