|
|
@@ -1,520 +1,583 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-container class="chatBox">
|
|
|
- <el-header height='80px'>
|
|
|
- <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">
|
|
|
- <el-col class="tit nopd">
|
|
|
- <span @click="back()" class="back pointer"></span>
|
|
|
- <span>留言知识库</span>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-header>
|
|
|
- <el-conatiner class="cationer">
|
|
|
- <el-main class="">
|
|
|
- <div class="leaveCont">
|
|
|
- <div class=" head row">
|
|
|
- <el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- <el-input
|
|
|
- placeholder="请输入关键词"
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- v-model="crux"
|
|
|
- class="crux"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <div class="">
|
|
|
- <el-button type="primary" @click="search()" style="height:40px;width:100px;margin-left:10px;">查询</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="nav">
|
|
|
- <div class="list" v-for="item in problemType" :key="item.id" @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">
|
|
|
- <span>{{item.name}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 折叠面板 -->
|
|
|
- <div class="fold" v-if="noBase">
|
|
|
- <el-collapse accordion>
|
|
|
- <el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">
|
|
|
- <template slot="title">
|
|
|
- <div style="width:100%;" class="quesTit">
|
|
|
- <span>{{item.content}}</span>
|
|
|
- <span>{{item.add_time}}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <div>
|
|
|
- <div class="conversationBox">
|
|
|
- <div class="timer">
|
|
|
- {{item.add_time}}
|
|
|
- </div>
|
|
|
- <div class="customer row allAlignment">
|
|
|
- <div></div>
|
|
|
- <div class="row">
|
|
|
- <div class="cont right">
|
|
|
- <div>{{item.content}}</div>
|
|
|
- </div>
|
|
|
- <div class="headImg" style="margin-right:0">
|
|
|
- <img src="./../assets/st-img/user.png" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="conversationBox">
|
|
|
- <div class="timer">
|
|
|
- {{item.dealWith_time}}
|
|
|
- </div>
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div>{{item.reply_content}}</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- </div>
|
|
|
- <div v-if="!noBase">
|
|
|
- <div class="noBase">
|
|
|
- <span>暂无数据</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="launch">
|
|
|
- <el-button type="primary" @click="launchLeave">发起留言</el-button>
|
|
|
- </div>
|
|
|
- </el-main>
|
|
|
- </el-conatiner>
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
+ <div class="chatBox">
|
|
|
+ <el-header height='80px'>
|
|
|
+ <el-row type="flex" justify='space-between' align='middle' style="height:100%;">
|
|
|
+ <el-col class="tit nopd">
|
|
|
+ <span @click="back()" class="back pointer"></span>
|
|
|
+ <span>留言知识库</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <div class="cationer">
|
|
|
+ <el-main class="">
|
|
|
+ <div class="leaveCont">
|
|
|
+ <div class=" head row">
|
|
|
+ <el-select v-model="selt.label" @change="selectGet" class="selt" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入关键词"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="crux"
|
|
|
+ class="crux"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="">
|
|
|
+ <el-button type="primary" @click="search()"
|
|
|
+ style="height:40px;width:100px;margin-left:10px;">查询
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="nav">
|
|
|
+ <div class="list" v-for="item in problemType" :key="item.id"
|
|
|
+ @click="acty(item.id,item.name)" :class="activity == item.id?'listActy':''">
|
|
|
+ <span>{{item.name}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 折叠面板 -->
|
|
|
+ <div class="fold" v-if="noBase">
|
|
|
+ <el-collapse accordion>
|
|
|
+ <el-collapse-item class="list" v-for="item in knowLedgeBase" :key="item.id">
|
|
|
+ <template slot="title">
|
|
|
+ <div style="width:100%;" class="quesTit">
|
|
|
+ <span>{{item.content}}</span>
|
|
|
+ <span>{{item.add_time}}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <div class="conversationBox">
|
|
|
+ <div class="timer">
|
|
|
+ {{item.add_time}}
|
|
|
+ </div>
|
|
|
+ <div class="customer row allAlignment">
|
|
|
+ <div></div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="cont right">
|
|
|
+ <div>{{item.content}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="headImg" style="margin-right:0">
|
|
|
+ <img src="./../assets/st-img/user.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="conversationBox">
|
|
|
+ <div class="timer">
|
|
|
+ {{item.dealWith_time}}
|
|
|
+ </div>
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div>{{item.reply_content}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <div v-if="!noBase">
|
|
|
+ <div class="noBase">
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="launch">
|
|
|
+ <el-button type="primary" @click="launchLeave">发起留言</el-button>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import '../css/index.css'
|
|
|
-export default {
|
|
|
- name:'leaveMsg',
|
|
|
- data(){
|
|
|
- return{
|
|
|
- dialogImageUrl:'',
|
|
|
- selt:{value:'week',label:'最近一周'},//选中默认值
|
|
|
- seltValue:'', // 选中的值
|
|
|
- crux:'', //关键词
|
|
|
- activeNames:'', //折叠面板选中效果
|
|
|
- activity:'1', //活动列表选中状态
|
|
|
- options:[{
|
|
|
- value:'week',
|
|
|
- label:'最近一周'
|
|
|
- },
|
|
|
- {
|
|
|
- value:'oneMonth',
|
|
|
- label:'最近一个月'
|
|
|
- },
|
|
|
- {
|
|
|
- value:'threeMonth',
|
|
|
- label:'最近三个月'
|
|
|
- }],
|
|
|
- problemType:'', //类
|
|
|
- knowLedgeBase:'', //知识库问答数据
|
|
|
- problemName:'账号',//类名
|
|
|
- noBase : true //无数据状态
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- // 返回传值到父组件
|
|
|
- back(){
|
|
|
- this.$emit('value',10)
|
|
|
- },
|
|
|
- // 跳转发起留言
|
|
|
- launchLeave(){
|
|
|
- this.$emit('value',1000)
|
|
|
- },
|
|
|
- // 切换类
|
|
|
- acty(type,name){
|
|
|
- this.activity = type;
|
|
|
- this.problemName = name;
|
|
|
- },
|
|
|
- // 获取下拉框的值
|
|
|
- selectGet(value){
|
|
|
- // 获取下拉框的value值
|
|
|
- this.seltValue = value;
|
|
|
- },
|
|
|
- // 获取数据
|
|
|
- getLeave(data){
|
|
|
- this.$axios.post('/api/index/Message/index',data).then(res =>{
|
|
|
- if(res.data.status == 1){
|
|
|
- this.knowLedgeBase = res.data.data;
|
|
|
- if(this.knowLedgeBase.length >0){
|
|
|
- this.noBase = true;
|
|
|
- }else{
|
|
|
- this.noBase = false;
|
|
|
- }
|
|
|
- }
|
|
|
- console.log('res',this.knowLedgeBase)
|
|
|
- })
|
|
|
- },
|
|
|
- // 查询数据
|
|
|
- search(){
|
|
|
- let optionCont = '';
|
|
|
- if(this.seltValue == ''){
|
|
|
- optionCont = this.selt.value;
|
|
|
- }else{
|
|
|
- optionCont = this.seltValue;
|
|
|
- }
|
|
|
- let data ={
|
|
|
- time : optionCont,
|
|
|
- key: this.crux,
|
|
|
- type:this.problemName
|
|
|
- }
|
|
|
- this.getLeave(data)
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.activity = '1';
|
|
|
- this.$axios.post('/api/index/Message/type').then(res =>{
|
|
|
- if(res.data.status == 1){
|
|
|
- this.problemType = res.data.data;
|
|
|
- let optionCont = '';
|
|
|
- if(this.seltValue == ''){
|
|
|
- optionCont = this.selt.value;
|
|
|
- }else{
|
|
|
- optionCont = this.seltValue;
|
|
|
- }
|
|
|
- let data ={
|
|
|
- time : optionCont,
|
|
|
- key: this.crux,
|
|
|
- type:this.problemName
|
|
|
- }
|
|
|
- // console.log('1213',this.problemType)
|
|
|
- // 获取留言数据
|
|
|
- this.getLeave(data)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
+ import '../css/index.css'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'leaveMsg',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogImageUrl: '',
|
|
|
+ selt: {value: 'week', label: '最近一周'},//选中默认值
|
|
|
+ seltValue: '', // 选中的值
|
|
|
+ crux: '', //关键词
|
|
|
+ activeNames: '', //折叠面板选中效果
|
|
|
+ activity: '1', //活动列表选中状态
|
|
|
+ options: [{
|
|
|
+ value: 'week',
|
|
|
+ label: '最近一周'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'oneMonth',
|
|
|
+ label: '最近一个月'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'threeMonth',
|
|
|
+ label: '最近三个月'
|
|
|
+ }],
|
|
|
+ problemType: '', //类
|
|
|
+ knowLedgeBase: '', //知识库问答数据
|
|
|
+ problemName: '账号',//类名
|
|
|
+ noBase: true //无数据状态
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回传值到父组件
|
|
|
+ back() {
|
|
|
+ this.$emit('value', 10)
|
|
|
+ },
|
|
|
+ // 跳转发起留言
|
|
|
+ launchLeave() {
|
|
|
+ this.$emit('value', 1000)
|
|
|
+ },
|
|
|
+ // 切换类
|
|
|
+ acty(type, name) {
|
|
|
+ this.activity = type;
|
|
|
+ this.problemName = name;
|
|
|
+ },
|
|
|
+ // 获取下拉框的值
|
|
|
+ selectGet(value) {
|
|
|
+ // 获取下拉框的value值
|
|
|
+ this.seltValue = value;
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ getLeave(data) {
|
|
|
+ this.$axios.post('/api/index/Message/index', data).then(res => {
|
|
|
+ if (res.data.status === 1) {
|
|
|
+ this.knowLedgeBase = res.data.data;
|
|
|
+ if (this.knowLedgeBase.length > 0) {
|
|
|
+ this.noBase = true;
|
|
|
+ } else {
|
|
|
+ this.noBase = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('res', this.knowLedgeBase)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查询数据
|
|
|
+ search() {
|
|
|
+ let optionCont = '';
|
|
|
+ if (this.seltValue == '') {
|
|
|
+ optionCont = this.selt.value;
|
|
|
+ } else {
|
|
|
+ optionCont = this.seltValue;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ time: optionCont,
|
|
|
+ key: this.crux,
|
|
|
+ type: this.problemName
|
|
|
+ }
|
|
|
+ this.getLeave(data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.activity = '1';
|
|
|
+ this.$axios.post('/api/index/Message/type').then(res => {
|
|
|
+ if (res.data.status === 1) {
|
|
|
+ this.problemType = res.data.data;
|
|
|
+ let optionCont = '';
|
|
|
+ if (this.seltValue == '') {
|
|
|
+ optionCont = this.selt.value;
|
|
|
+ } else {
|
|
|
+ optionCont = this.seltValue;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ time: optionCont,
|
|
|
+ key: this.crux,
|
|
|
+ type: this.problemName
|
|
|
+ }
|
|
|
+ // console.log('1213',this.problemType)
|
|
|
+ // 获取留言数据
|
|
|
+ this.getLeave(data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .chatBox{
|
|
|
- width: 700px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-header{
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
- .tit{
|
|
|
- height: 100%;
|
|
|
- line-height: 80px;
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- .tit span{
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .el-col span{
|
|
|
- font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .imgBox{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .imgBox img{
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .imgBox img:nth-last-child(1){
|
|
|
- margin-right: 0
|
|
|
- }
|
|
|
- .el-main{
|
|
|
- background: #fff;
|
|
|
- width: 445px;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .el-aside{
|
|
|
- background: #F5F5F5;
|
|
|
- width: 255px;
|
|
|
- }
|
|
|
- .cationer,.artificial{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- /* align-items: center; */
|
|
|
- }
|
|
|
- .rt{
|
|
|
- width: 255px;
|
|
|
- box-sizing:inherit;
|
|
|
- }
|
|
|
- .artificial{
|
|
|
- /* width: 150px; */
|
|
|
- /* padding:0 20px; */
|
|
|
- margin-top: 23px;
|
|
|
- margin-bottom: 9px;
|
|
|
- vertical-align: middle;
|
|
|
- /* flex-direction: column;*/
|
|
|
-
|
|
|
- }
|
|
|
- .infor div{
|
|
|
- margin-bottom: 3px;
|
|
|
- }
|
|
|
- .infor div span,.autograph span{
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- font-weight:400;
|
|
|
- }
|
|
|
- .infor div span:nth-child(2),.autograph span:nth-child(2){
|
|
|
- color: #666666;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- .headPortrait{
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- .autograph{
|
|
|
- margin-bottom: 11px;
|
|
|
- }
|
|
|
- .advent{
|
|
|
- border-top: 1px solid #DDDDDD;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .advent img{
|
|
|
- width: 215px;
|
|
|
- height: 350px;
|
|
|
- }
|
|
|
- .pd{
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .pd20{
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-/* 留言框 */
|
|
|
-.el-main{
|
|
|
- position: relative;
|
|
|
- height: 600px;
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-.el-main .leaveCont{
|
|
|
- box-sizing: border-box;
|
|
|
- height: 510px;
|
|
|
- padding: 20px 20px 13px;
|
|
|
-}
|
|
|
-label{
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.star{
|
|
|
- color: #F04992;
|
|
|
- vertical-align: middle;
|
|
|
-
|
|
|
-}
|
|
|
-.tips{
|
|
|
- font-size: 12px;
|
|
|
- color: #F04992;
|
|
|
- margin-left: 20px;
|
|
|
-}
|
|
|
-.addPhoto{
|
|
|
- margin: 20px 0 0;
|
|
|
-}
|
|
|
-.addPhoto label{
|
|
|
- margin-bottom: 14px;
|
|
|
-}
|
|
|
-.el-textarea{
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.btn{
|
|
|
- position: absolute;
|
|
|
- /* bottom: 23px; */
|
|
|
- right: 20px;
|
|
|
-}
|
|
|
-.el-button{
|
|
|
- width: 120px;
|
|
|
- height: 48px;
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- border-radius:10px;
|
|
|
-}
|
|
|
-.back{
|
|
|
- display: inline-block;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- background: url("./../assets/st-img/back.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- vertical-align: middle;
|
|
|
-}
|
|
|
-.nopd{
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-.pointer{
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.selt{
|
|
|
- margin-right: 15px;
|
|
|
- width: 160px;
|
|
|
-}
|
|
|
-.cationer .head{
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-.crux{
|
|
|
- width: 230px;
|
|
|
-}
|
|
|
- /* 主体 */
|
|
|
-.nav{
|
|
|
- height: 40px;
|
|
|
- background: #5EA0F7;
|
|
|
- border-radius:5px 5px 0px 0px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10px 10px 0;
|
|
|
-}
|
|
|
-.nav .list{
|
|
|
- width: 90px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.nav .list span{
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.listActy{
|
|
|
- background: #fff;
|
|
|
- border-radius:5px 5px 0px 0px;
|
|
|
-
|
|
|
-}
|
|
|
-.listActy span{
|
|
|
- color: #5EA0F7!important;
|
|
|
-}
|
|
|
-.list .quesTit{
|
|
|
- height: 40px;;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.list .el-collapse-item__header {
|
|
|
- color: #666666!important;
|
|
|
-}
|
|
|
-.list .quesTit span{
|
|
|
- color: #666666;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.list .quesTit span:nth-last-child(1){
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
- /* 会话 */
|
|
|
-.conversationBox{
|
|
|
- margin-top: 26px;
|
|
|
-}
|
|
|
-.timer{
|
|
|
- text-align: center;
|
|
|
- margin: 10px 0;
|
|
|
- color: #999999;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-.headImg{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-right: 13px;
|
|
|
-}
|
|
|
-.headImg img{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
-}
|
|
|
-.conversation .cont,.customer .cont{
|
|
|
- background: #ffffff;
|
|
|
- padding: 9px 8px 12px 10px;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid rgba(223, 223, 223, 1);
|
|
|
- border-radius: 5px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.left::after{
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- left: -4px;
|
|
|
- top: 5px;
|
|
|
- width: 5px;
|
|
|
- height: 9px;
|
|
|
- background: #fff;
|
|
|
- -webkit-transform: skewX(30deg);
|
|
|
- transform: skewX(30deg);
|
|
|
- /* z-index: -1; */
|
|
|
- border-left: 1px solid #dfdfdf;
|
|
|
- border-top: 1px solid #dfdfdf;
|
|
|
-}
|
|
|
-div.noafter::after{
|
|
|
- content: '';
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- display: inline;
|
|
|
- position: relative;
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-.conversation .cont div,.customer .cont div{
|
|
|
- color: #666666;
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
- .customer{
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.customer .cont{
|
|
|
- margin-right: 13px;
|
|
|
- border: 0;
|
|
|
- background: #5EA0F7;
|
|
|
-}
|
|
|
-.customer .cont div{
|
|
|
- color: #FFFFFF;
|
|
|
-}
|
|
|
- .right::after{
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- right: -3px;
|
|
|
- top: 6px;
|
|
|
- width: 5px;
|
|
|
- height: 9px;
|
|
|
- background: #5ea0f7;
|
|
|
- -webkit-transform: skewX(-30deg);
|
|
|
- transform: skewX(-30deg);
|
|
|
- border-left: 1px solid #5ea0f7;
|
|
|
- border-top: 1px solid #5ea0f7;
|
|
|
-}
|
|
|
- .col{
|
|
|
- color: #999999;
|
|
|
-}
|
|
|
-.change{
|
|
|
- color: #5ea0f7;
|
|
|
-}
|
|
|
-.launch{
|
|
|
- box-sizing: border-box;
|
|
|
- border-top: 1px solid #DDDDDD;
|
|
|
- padding: 16px 20px 0 0;
|
|
|
- position: relative;
|
|
|
- height: 80px;
|
|
|
-}
|
|
|
-.launch button{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
-}
|
|
|
-.noBase{
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- background: #e0e0e0;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
+ .chatBox {
|
|
|
+ width: 700px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-header {
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit span {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img:nth-last-child(1) {
|
|
|
+ margin-right: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ background: #fff;
|
|
|
+ width: 445px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-aside {
|
|
|
+ background: #F5F5F5;
|
|
|
+ width: 255px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cationer, .artificial {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ /* align-items: center; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .rt {
|
|
|
+ width: 255px;
|
|
|
+ box-sizing: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ .artificial {
|
|
|
+ /* width: 150px; */
|
|
|
+ /* padding:0 20px; */
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-bottom: 9px;
|
|
|
+ vertical-align: middle;
|
|
|
+ /* flex-direction: column;*/
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span, .autograph span {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span:nth-child(2), .autograph span:nth-child(2) {
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headPortrait {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .autograph {
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent {
|
|
|
+ border-top: 1px solid #DDDDDD;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent img {
|
|
|
+ width: 215px;
|
|
|
+ height: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd20 {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 留言框 */
|
|
|
+ .el-main {
|
|
|
+ position: relative;
|
|
|
+ height: 600px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main .leaveCont {
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 510px;
|
|
|
+ padding: 20px 20px 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .star {
|
|
|
+ color: #F04992;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #F04992;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addPhoto {
|
|
|
+ margin: 20px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addPhoto label {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ /* bottom: 23px; */
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 120px;
|
|
|
+ height: 48px;
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background: url("./../assets/st-img/back.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nopd {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pointer {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selt {
|
|
|
+ margin-right: 15px;
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cationer .head {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .crux {
|
|
|
+ width: 230px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 主体 */
|
|
|
+ .nav {
|
|
|
+ height: 40px;
|
|
|
+ background: #5EA0F7;
|
|
|
+ border-radius: 5px 5px 0px 0px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav .list {
|
|
|
+ width: 90px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav .list span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .listActy {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px 5px 0px 0px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .listActy span {
|
|
|
+ color: #5EA0F7 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list .quesTit {
|
|
|
+ height: 40px;;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list .el-collapse-item__header {
|
|
|
+ color: #666666 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list .quesTit span {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list .quesTit span:nth-last-child(1) {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 会话 */
|
|
|
+ .conversationBox {
|
|
|
+ margin-top: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timer {
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headImg {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headImg img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conversation .cont, .customer .cont {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 9px 8px 12px 10px;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid rgba(223, 223, 223, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ left: -4px;
|
|
|
+ top: 5px;
|
|
|
+ width: 5px;
|
|
|
+ height: 9px;
|
|
|
+ background: #fff;
|
|
|
+ -webkit-transform: skewX(30deg);
|
|
|
+ transform: skewX(30deg);
|
|
|
+ /* z-index: -1; */
|
|
|
+ border-left: 1px solid #dfdfdf;
|
|
|
+ border-top: 1px solid #dfdfdf;
|
|
|
+ }
|
|
|
+
|
|
|
+ div.noafter::after {
|
|
|
+ content: '';
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ display: inline;
|
|
|
+ position: relative;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conversation .cont div, .customer .cont div {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer .cont {
|
|
|
+ margin-right: 13px;
|
|
|
+ border: 0;
|
|
|
+ background: #5EA0F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer .cont div {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ right: -3px;
|
|
|
+ top: 6px;
|
|
|
+ width: 5px;
|
|
|
+ height: 9px;
|
|
|
+ background: #5ea0f7;
|
|
|
+ -webkit-transform: skewX(-30deg);
|
|
|
+ transform: skewX(-30deg);
|
|
|
+ border-left: 1px solid #5ea0f7;
|
|
|
+ border-top: 1px solid #5ea0f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ color: #5ea0f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .launch {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: 1px solid #DDDDDD;
|
|
|
+ padding: 16px 20px 0 0;
|
|
|
+ position: relative;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .launch button {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .noBase {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: #e0e0e0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
</style>
|
