876 lines
22 KiB
Vue
876 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <div class="top-group">
|
||
<el-button type="primary">查看全部</el-button>
|
||
</div> -->
|
||
<div class="whole-wrapper">
|
||
<!-- 左边的聊天列表 -->
|
||
<div class="left_whole_wrapper">
|
||
<!-- 搜索框 -->
|
||
<div class="search">
|
||
<el-input placeholder="搜索联系人" suffix-icon="el-icon-search" v-model="userName" clearable
|
||
@change="changeSearch" @input="searchChange"></el-input>
|
||
</div>
|
||
<!-- 聊天列表 -->
|
||
<div class="left_wrapper" style="overflow-y: auto" v-if="chatList">
|
||
<div class="left-item" style="position: relative; cursor: pointer"
|
||
v-bind:class="{ blue: index == current }" v-for="(item, index) in chatList" :key="index"
|
||
@click="clickItem(item, index)">
|
||
<div class="left-item-left">
|
||
<div class="left-item-head" v-if="item.avatar == null || item.avatar == ''">
|
||
<img src="~@/assets/img/head.png" />
|
||
</div>
|
||
<div class="left-item-head" v-else><img :src="item.avatar" /></div>
|
||
<div class="left-item-info">
|
||
<div class="left-item-info_title">{{ item.userName }}</div>
|
||
<div class="left-item-info_content">{{ item.content }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="left-item-time">
|
||
<div class="left-item-time-time" v-if="item.messageTime == null"></div>
|
||
<div class="left-item-time-time" v-else>
|
||
{{ item.messageTime.substring(11, 16) }}
|
||
</div>
|
||
<div class="left-item-time-number" style="position: absolute; left: 59px; top: 8px"
|
||
v-if="item.storeCount">
|
||
{{ item.storeCount }}
|
||
</div>
|
||
<div class="" @click="deletes(item)" style="position: relative; top: 6px"
|
||
v-if="isAuth('vueMchat:delete')">
|
||
<img src="~@/assets/img/delete.png" alt="" width="25" height="25" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 中间的对话-->
|
||
<div class="center_whole_wrapper">
|
||
<div class="center_wrapper">
|
||
<!-- 上面的表头 -->
|
||
<div class="center_wrapper_top">
|
||
<div class="center_wrapper_top_name">{{ name }}</div>
|
||
<el-button v-if="name" size="mini"
|
||
style="top: 30px; right: 20px; border-radius: 4px; position: absolute"
|
||
@click="updates(userId)">用户详情
|
||
</el-button>
|
||
</div>
|
||
<!-- 中间的聊天框，尝试模拟数据 -->
|
||
<div class="center_wrapper_center" id="ele" style="overflow-y: auto" ref="dialogue_box">
|
||
<!-- <div class="item loading">{{loadText}}<span>{{"第" + pageNum + "页"}}</span></div> -->
|
||
<div v-for="(item, index) in dialogueList" :key="index" :class="
|
||
item.userId == 0
|
||
? center_wrapper_center_item_reserve
|
||
: center_wrapper_center_item
|
||
">
|
||
<div class="left-item-head">
|
||
<img v-if="item.avatar != null && item.avatar !=''" :src="item.avatar" />
|
||
<img v-else src="~@/assets/img/avatar.png" />
|
||
</div>
|
||
<!-- 文字 -->
|
||
<div class="center-item-info_wrapper" v-if="item.messageType==1">
|
||
<div class="center-item-tip">
|
||
<div class="center-item-info">
|
||
{{ item.content }}
|
||
</div>
|
||
</div>
|
||
<div class="center-item-time">{{ item.createTime }}</div>
|
||
</div>
|
||
<!-- 图片 -->
|
||
<div class="center-item-info_wrapper" v-else-if="item.messageType==2">
|
||
<div class="center-item-tip">
|
||
<div>
|
||
<el-popover placement="top-start" title="" trigger="hover">
|
||
<img style="width: 100px; height: 100px" :src="item.content" alt=""
|
||
slot="reference" />
|
||
<img style="width: 300px; height: 300px" :src="item.content" alt="" />
|
||
</el-popover>
|
||
<!-- <img :src="item.content" alt="" width="100" height="100"> -->
|
||
</div>
|
||
</div>
|
||
<div class="center-item-time">{{ item.createTime }}</div>
|
||
</div>
|
||
<!-- 订单 -->
|
||
<div class="center-item-info_wrapper" v-if="item.type == 3">
|
||
<div class="center-item-tip" style="background-color: #fff;cursor: pointer;padding: 10px;border-radius: 4px;">
|
||
<div class="" @click="orderDetails(item.content.split(',')[2])">
|
||
<div style="display: flex">
|
||
<img :src="item.content.split(',')[0]" alt="" width="40" height="40" />
|
||
<div style="
|
||
width: 145px;
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
margin-left: 5px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
">
|
||
{{ item.content.split(",")[1] }}
|
||
</div>
|
||
</div>
|
||
<p class="hoverp" style="font-size: 13px; color: #999999">
|
||
订单编号: {{ item.content.split(",")[3] }}
|
||
</p>
|
||
<p style="font-size: 13px; color: #999999">
|
||
创建时间:{{ item.content.split(",")[4] }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="center-item-time">{{ item.createTime }}</div>
|
||
</div>
|
||
<!-- 商品 -->
|
||
<div class="center-item-info_wrapper" v-if="item.type == 4">
|
||
<div class="center-item-tip"
|
||
style="background-color: #fff; padding: 10px; border-radius: 4px">
|
||
<div class="">
|
||
<img :src="item.content.split(',')[0]" alt="" width="160" height="120" />
|
||
<p style="width: 160px; line-height: 20px; margin-bottom: 0">
|
||
{{ item.content.split(",")[1] }}
|
||
</p>
|
||
<p style="color: #f56c6c; margin-bottom: 0">
|
||
¥{{ item.content.split(",")[2] }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="center-item-time">{{ item.createTime }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- <a id="mao2"></a> -->
|
||
</div>
|
||
<!-- 下面的输入框，发送 -->
|
||
<div class="center_wrapper_right">
|
||
<div class="icon-list">
|
||
<!-- 表情 -->
|
||
<!-- <div class="icon-item" title="表情">
|
||
<el-popover v-model="emojiShow" placement="top-start" width="400" trigger="click" class="emoBox">
|
||
<div class="emotionList">
|
||
<a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{{item}}</a>
|
||
</div>
|
||
<el-button
|
||
style="background: transparent;border: none;"
|
||
class="emotionSelect"
|
||
icon="iconfont icon-biaoqing"
|
||
slot="reference"
|
||
>??</el-button>
|
||
</el-popover>
|
||
</div> -->
|
||
<!-- 上传文件 -->
|
||
<div class="icon-item">
|
||
<el-upload class="avatar-uploader" v-model="coverImg"
|
||
:action="uploadUrl"
|
||
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||
<div class="icon-item" title="发送文件">
|
||
<img class="icon-item-img" src="~@/assets/img/wenjian.png" />
|
||
</div>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
<el-input type="textarea" id="textarea" :rows="2" placeholder="请输入内容" v-model="content"
|
||
@keyup.enter.native="sendTextarea(1)"></el-input>
|
||
<el-button type="primary" style="font-size: 12px" v-if="content" @click="sendTextarea(1)">发送1
|
||
</el-button>
|
||
<el-button type="primary" style="font-size: 12px" v-else disabled @click="sendTextarea(1)">发送2
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { serverPaths } from '@/utils/enumData'
|
||
export default {
|
||
data() {
|
||
return {
|
||
uploadUrl: serverPaths.uploadUrl,
|
||
chatList: [],
|
||
page: 1,
|
||
size: 5,
|
||
storeId: 0,
|
||
targetId: "",
|
||
userName: "",
|
||
userId: "",
|
||
chatId: "",
|
||
type: "",
|
||
current: 0,
|
||
coverImg: "",
|
||
sendType: "2",
|
||
// 表情包列表
|
||
faceList: [],
|
||
// 发送文字
|
||
content: "",
|
||
// 模拟对话
|
||
name: "",
|
||
userHead: "",
|
||
numlist: {},
|
||
info: {
|
||
stockDate: this.getNowTime(), //日期
|
||
},
|
||
emojiShow: false,
|
||
dialogueInfo: {},
|
||
dialogueList: [],
|
||
loadText: "加载中...",
|
||
pageNum: 1,
|
||
loadText1: "加载中...",
|
||
pageNum1: 1,
|
||
center_wrapper_center_item: "center_wrapper_center_item",
|
||
center_wrapper_center_item_reserve: "center_wrapper_center_item_reserve",
|
||
};
|
||
},
|
||
created() {
|
||
this.loadEmojis();
|
||
},
|
||
watch: {
|
||
$route: function(to, from) {
|
||
if (to.name == "vueMchat") {
|
||
let ele = document.getElementById("ele");
|
||
this.$nextTick(() => {
|
||
ele.scrollTop = ele.scrollHeight;
|
||
});
|
||
}
|
||
},
|
||
},
|
||
activated() {
|
||
let {
|
||
userId,
|
||
userName
|
||
} = this.$route.query;
|
||
if (userId && userName) {
|
||
this.userName = userName;
|
||
this.current = 0;
|
||
} else {
|
||
this.userName = "";
|
||
}
|
||
this.dataSelect();
|
||
this.initWebSocket();
|
||
},
|
||
methods: {
|
||
initWebSocket() {
|
||
|
||
this.websock = new WebSocket(
|
||
this.$http.adornWss("chatSocket/0"));
|
||
// "ws://192.168.1.17:8180/sqx_fast/websocket/0"); //这个连接ws://固定，后面的根据自己的IP和端口进行改变，我设置监听的就是8081
|
||
// this.websock = new WebSocket("ws://yungameadmin.xianmxkj.com/ws/websocket/0");
|
||
this.websock.onmessage = this.websocketonmessage;
|
||
this.websock.onerror = this.websocketonerror;
|
||
this.websock.onopen = this.websocketonopen;
|
||
this.websock.onclose = this.websocketclose;
|
||
},
|
||
websocketonopen() {
|
||
// 连接建立之后执行send方法发送数据，这个和自己的后端沟通好需要传什么数据，我的是要进行token验证
|
||
console.log("WebSocket连接成功");
|
||
},
|
||
websocketonerror() {
|
||
//连接错误
|
||
console.log("WebSocket连接失败");
|
||
},
|
||
websocketonmessage(e) {
|
||
// 数据接收
|
||
let msg = JSON.parse(e.data);
|
||
this.dialogueList.push(msg);
|
||
console.log(this.dialogueList);
|
||
|
||
let ele = document.getElementById("ele");
|
||
this.dataSelect();
|
||
this.$nextTick(() => {
|
||
ele.scrollTop = ele.scrollHeight;
|
||
});
|
||
},
|
||
websocketclose(e) {
|
||
// 关闭连接
|
||
console.log("已关闭连接", e);
|
||
},
|
||
//加载表情，存放到表情列表中
|
||
loadEmojis() {
|
||
const appData = require("@/assets/img/emojis.json");
|
||
for (let i in appData) {
|
||
this.faceList.push(appData[i].char);
|
||
}
|
||
},
|
||
//处理默认选中当前日期
|
||
getNowTime() {
|
||
var now = new Date();
|
||
var year = now.getFullYear(); //得到年份
|
||
var month = now.getMonth(); //得到月份
|
||
var date = now.getDate(); //得到日期
|
||
var hour = now.getHours();
|
||
var minute = now.getMinutes();
|
||
var second = now.getSeconds();
|
||
month = month + 1;
|
||
month = month.toString().padStart(2, "0");
|
||
date = date.toString().padStart(2, "0");
|
||
var defaultDate = `${year}-${month}-${date} ${hour}:${minute}:${second}`;
|
||
return defaultDate;
|
||
this.$set(this.info, "stockDate", defaultDate);
|
||
},
|
||
// 详情跳转
|
||
updates(userId) {
|
||
this.$router.push({
|
||
path: "/userDetail",
|
||
query: {
|
||
userId: userId
|
||
}
|
||
});
|
||
},
|
||
// 订单详情跳转
|
||
orderDetails(id) {
|
||
this.$router.push({
|
||
path: "/orderDetails",
|
||
query: {
|
||
id: id
|
||
}
|
||
});
|
||
},
|
||
// 获取用户点击之后的标签 ，存放到输入框内
|
||
getEmo(index) {
|
||
var textArea = document.getElementById("textarea");
|
||
|
||
function changeSelectedText(obj, str) {
|
||
if (window.getSelection) {
|
||
// 非IE浏览器
|
||
textArea.setRangeText(str);
|
||
// 在未选中文本的情况下，重新设置光标位置
|
||
textArea.selectionStart += str.length;
|
||
textArea.focus();
|
||
} else if (document.selection) {
|
||
// IE浏览器
|
||
obj.focus();
|
||
var sel = document.selection.createRange();
|
||
sel.text = str;
|
||
}
|
||
}
|
||
changeSelectedText(textArea, this.faceList[index]);
|
||
this.description = textArea.value; // 要同步data中的数据
|
||
// console.log(this.faceList[index]);
|
||
this.emojiShow = false;
|
||
return;
|
||
},
|
||
changeSearch(e) {
|
||
if (!e) {
|
||
this.userName = ""
|
||
this.dataSelect();
|
||
}
|
||
},
|
||
searchChange() {
|
||
this.dataSelect();
|
||
},
|
||
// 点击聊天列表的某一项
|
||
clickItem(item, index) {
|
||
console.log(`🚀 ~ clickItem ~ item:`, item)
|
||
this.current = index;
|
||
this.userId = item.userId;
|
||
this.name = item.userName;
|
||
this.userHead = item.avatar;
|
||
this.chatId = item.chatConversationId;
|
||
this.chatList[index].storeCount = 0
|
||
this.clickItem2();
|
||
this.initWebSocket();
|
||
},
|
||
|
||
clickItem2() {
|
||
if(this.chatId != null && this.chatId != ''){
|
||
this.$http({
|
||
url: this.$http.adornUrl("chat/selectChatContent"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
chatConversationId: this.chatId,
|
||
page: 1,
|
||
limit: 10,
|
||
}),
|
||
}).then(({
|
||
data
|
||
}) => {
|
||
let returnData = data.data;
|
||
this.dialogueList = returnData.list.reverse();
|
||
let ele = document.getElementById("ele");
|
||
this.$nextTick(() => {
|
||
ele.scrollTop = ele.scrollHeight;
|
||
});
|
||
});
|
||
}
|
||
},
|
||
// 点击发送
|
||
sendTextarea(type) {
|
||
let data = {
|
||
content: this.content,
|
||
messageType: type,
|
||
createTime: this.info.stockDate,
|
||
sendType: this.sendType,
|
||
userId: 0,
|
||
storeId: this.storeId,
|
||
chatConversationId: this.chatId,
|
||
};
|
||
this.numlist = data;
|
||
data = JSON.stringify(data);
|
||
console.log(`🚀 ~ sendTextarea ~ data:`, data)
|
||
this.websock.send(data);
|
||
this.content = "";
|
||
// this.dialogueList.push(this.numlist);
|
||
let ele = document.getElementById("ele");
|
||
this.$nextTick(() => {
|
||
ele.scrollTop = ele.scrollHeight;
|
||
});
|
||
this.initWebSocket();
|
||
this.dataSelect();
|
||
// this.clickItem2()
|
||
},
|
||
//删除会话
|
||
deletes(item) {
|
||
this.$confirm(`确定删除聊天记录，删除后不能恢复?`, "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
this.$http({
|
||
url: this.$http.adornUrl(`chats/delete/?id=${item.chatId}`),
|
||
method: "get",
|
||
params: this.$http.adornParams({}),
|
||
}).then(({
|
||
data
|
||
}) => {
|
||
this.$message({
|
||
message: "删除成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.dataSelect();
|
||
},
|
||
});
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
// 上传成功
|
||
handleAvatarSuccess(file, fileList) {
|
||
this.coverImg = file.data;
|
||
this.content = this.coverImg;
|
||
this.sendTextarea(2);
|
||
},
|
||
// 获取左边实时聊天用户列表
|
||
dataSelect() {
|
||
this.tableDataLoading = true;
|
||
this.$http({
|
||
url: this.$http.adornUrl("chat/selectChatConversationPage"),
|
||
method: "get",
|
||
params: this.$http.adornParams({
|
||
nickName: this.userName,
|
||
storeId: this.storeId,
|
||
page: 1,
|
||
limit: 10,
|
||
}),
|
||
}).then(({
|
||
data
|
||
}) => {
|
||
this.tableDataLoading = false;
|
||
let returnData = data.data;
|
||
this.chatList = returnData.list;
|
||
|
||
// this.clickItem(this.chatList[this.current], this.current);
|
||
});
|
||
},
|
||
// 验证只能上传音频
|
||
beforeAvatarUpload(file) {
|
||
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||
var extension;
|
||
if (testmsg == 'png'||testmsg == 'jpg'||testmsg == 'jpeg'||testmsg == 'gif'){
|
||
extension = testmsg
|
||
}
|
||
// const extension = testmsg==='png'
|
||
if (!extension) {
|
||
this.$message({
|
||
message: "只能上传图片！",
|
||
type: 'error'
|
||
})
|
||
}
|
||
return extension;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.dataSelect()
|
||
this.timer = window.setInterval(() => {
|
||
setTimeout(() => {
|
||
this.dataSelect();
|
||
this.clickItem2();
|
||
},0)
|
||
},4000)
|
||
},
|
||
destroyed() {
|
||
window.clearInterval(this.timer);
|
||
if (this.websock) {
|
||
this.websock.close(); // 页面销毁后断开websocket连接
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.whole-wrapper {
|
||
display: flex;
|
||
background: #fff;
|
||
height: 600px;
|
||
position: relative;
|
||
}
|
||
|
||
.top-group {
|
||
padding-bottom: 30px;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
/* 左边部分 */
|
||
.left_whole_wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 24%;
|
||
}
|
||
|
||
.left_wrapper {
|
||
flex: 1;
|
||
background-color: #ebe9e8;
|
||
}
|
||
|
||
.left-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 18px 24px;
|
||
background-color: #e9e7e6;
|
||
}
|
||
|
||
.left-item.blue {
|
||
background-color: #c3c3c4;
|
||
}
|
||
|
||
.active {
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.left-item-left {
|
||
display: flex;
|
||
}
|
||
|
||
.left-item-head>img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.left-item-info {
|
||
margin-left: 12px;
|
||
max-width: 135px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.left-item-info_title {
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
color: #292929;
|
||
/* 文字超出处理 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.left-item-info_content {
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
color: #909090;
|
||
margin-top: 4px;
|
||
/* 文字超出处理 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.left-item-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: right;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.left-item-time-time {
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: right;
|
||
color: #909090;
|
||
}
|
||
|
||
.left-item-time-number {
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
border-radius: 50%;
|
||
background: #ff4949;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.search {
|
||
padding: 46px 24px;
|
||
height: 5%;
|
||
background-color: #eeebe8;
|
||
}
|
||
|
||
/* 中间部分*/
|
||
.center_whole_wrapper {
|
||
flex: 1;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.center_wrapper {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.center_wrapper_top {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30px 24px;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.center_wrapper_top_name {
|
||
font-size: 18px;
|
||
font-family: PingFang SC, PingFang SC-Bold;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
color: #292929;
|
||
}
|
||
|
||
.center_wrapper_top_number {
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
color: #292929;
|
||
margin-left: 12px;
|
||
}
|
||
|
||
.center_wrapper_center {
|
||
flex: 10;
|
||
padding: 30px 24px 0px 24px;
|
||
border-top: 1px solid #ececec;
|
||
border-bottom: 1px solid #ececec;
|
||
}
|
||
|
||
.center_wrapper_center_item {
|
||
display: flex;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.center_wrapper_right {
|
||
flex: 4;
|
||
background-color: #ffffff;
|
||
padding: 20px 20px;
|
||
position: relative;
|
||
border-right: 1px solid #ececec;
|
||
border-bottom: 1px solid #ececec;
|
||
}
|
||
|
||
.center-item-info_wrapper {
|
||
margin: 0px 16px;
|
||
}
|
||
|
||
.center-item-tip {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.error-tip>img {
|
||
width: 20px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.center_wrapper_center_item .center-item-info {
|
||
background: #ffffff;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve .center-item-info {
|
||
background: #9eea6a;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.center-item-info {
|
||
max-width: 336px;
|
||
font-size: 14px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
color: #333333;
|
||
line-height: 22px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.center-item-time {
|
||
font-size: 12px;
|
||
font-family: PingFang SC, PingFang SC-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
color: #909090;
|
||
line-height: 22px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
/* 反向样式开始*/
|
||
.center_wrapper_center_item_reserve {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve .center-item-time {
|
||
text-align: right;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve .center-item-tip {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
align-items: center;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve .error-tip>img {
|
||
width: 20px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
/* 反向样式结束*/
|
||
|
||
/* 右边样式 */
|
||
.right_whole_wrapper {
|
||
background: #fff;
|
||
}
|
||
|
||
.right_wrapper {
|
||
flex: 1;
|
||
}
|
||
|
||
.right_wrapper_center {
|
||
border: none;
|
||
color: #909090;
|
||
}
|
||
|
||
.center-item-name {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.center-item-info {
|
||
word-wrap: bre省钱兄-word;
|
||
word-bre省钱兄: bre省钱兄-all;
|
||
}
|
||
|
||
.center-item-info_img {
|
||
width: 150px;
|
||
/* height: 100px; */
|
||
}
|
||
|
||
.center-item-info_img>img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 几个图标 */
|
||
.icon-list {
|
||
display: flex;
|
||
}
|
||
|
||
.icon-list>div:not(:first-child) {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.icon-item-img {
|
||
width: 25px;
|
||
}
|
||
|
||
/* 修改组件样式 */
|
||
.whole-wrapper>>>.el-input__inner {
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.whole-wrapper>>>.el-textarea__inner {
|
||
min-height: 80px;
|
||
resize: none;
|
||
border: none;
|
||
background: #ffffff;
|
||
padding: 5px 0px;
|
||
}
|
||
|
||
.whole-wrapper>>>.el-button--primary {
|
||
width: 100px;
|
||
height: 40px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
|
||
.loading {
|
||
text-align: center;
|
||
color: #909090;
|
||
}
|
||
|
||
.loading span {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve,
|
||
.center_wrapper_center_item {
|
||
position: relative;
|
||
}
|
||
|
||
.center_wrapper_center_item_reserve .center-item-info::after {
|
||
content: "";
|
||
position: absolute;
|
||
right: 55px;
|
||
top: 12px;
|
||
width: 0;
|
||
height: 0;
|
||
border: 5px solid #9eea6a;
|
||
border-top-color: transparent;
|
||
border-right-color: transparent;
|
||
border-bottom-color: transparent;
|
||
}
|
||
|
||
.center_wrapper_center_item .center-item-info::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 55px;
|
||
top: 12px;
|
||
width: 0;
|
||
height: 0;
|
||
border: 5px solid #ffffff;
|
||
border-top-color: transparent;
|
||
border-left-color: transparent;
|
||
border-bottom-color: transparent;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
/* el-popover是和app同级的，所以scoped的局部属性设置了无效 */
|
||
/* 需要设置全局style */
|
||
.el-popover {
|
||
height: 200px;
|
||
width: 400px;
|
||
overflow: scroll;
|
||
overflow-x: auto;
|
||
font-size: 20px;
|
||
}
|
||
</style>
|