|
|
|
@ -1,58 +1,79 @@ |
|
|
|
<template> |
|
|
|
<el-dialog title="详情" width="80%" :visible.sync="visible" :close-on-click-modal="false" @close="closeModalDetail"> |
|
|
|
<div class="custom_info_page"> |
|
|
|
<h2>客户信息</h2> |
|
|
|
<div class="custom_info"> |
|
|
|
<div class="info_item"> |
|
|
|
<img :src="userObj.headImage" alt> |
|
|
|
<div class="base_info"> |
|
|
|
<div class="custom_info"> |
|
|
|
<div class="custom_title">客户信息</div> |
|
|
|
<div class="custom_info_content"> |
|
|
|
|
|
|
|
<div class="info_img"> |
|
|
|
<img :src="userObj.headImage" alt> |
|
|
|
</div> |
|
|
|
<div class="info_item"> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in infoList" :key="index"> |
|
|
|
<p> |
|
|
|
<span>{{ item.name }}: </span> |
|
|
|
<span>{{ item.value }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="info_item"> |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in infoList" :key="index"> |
|
|
|
<p> |
|
|
|
<span>{{ item.name }} :</span> |
|
|
|
<span>{{ item.value }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="custom_info"> |
|
|
|
<div class="custom_title">消费数据</div> |
|
|
|
<div class="custom_info_content"> |
|
|
|
<div class="info_item"> |
|
|
|
<ul> |
|
|
|
<li> |
|
|
|
<p> |
|
|
|
<span>下 单 数: </span> |
|
|
|
<span>{{ userObj.orders }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p> |
|
|
|
<span>支付成功数: </span> |
|
|
|
<span>{{ userObj.pays }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p> |
|
|
|
<span>售后次数: </span> |
|
|
|
<span>{{ userObj.afters }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p> |
|
|
|
<span>售后单数: </span> |
|
|
|
<span>{{ userObj.afterOrders }}</span> |
|
|
|
</p> |
|
|
|
</li> |
|
|
|
|
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="custom_tag"> |
|
|
|
<h2>客户标签</h2> |
|
|
|
<div class="Tag"> |
|
|
|
<p v-for="(item, index) in tagList" :key="index">{{ item.tagName }}</p> |
|
|
|
<p @click="addTag">贴标签</p> |
|
|
|
|
|
|
|
<div class="custom_info"> |
|
|
|
<div class="custom_title">客户标签</div> |
|
|
|
<div class="custom_info_content"> |
|
|
|
<div class="custom_info_content"> |
|
|
|
<div class="info_item"> |
|
|
|
<p v-for="(item, index) in tagList" :key="index">{{ item.tagName }}</p> |
|
|
|
<p @click="addTag" style="color:#183ECD">贴标签</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="custom_data"> |
|
|
|
<h2>消费数据</h2> |
|
|
|
<div class="data_list"> |
|
|
|
<p> |
|
|
|
<span> |
|
|
|
下 单 数: |
|
|
|
<font>{{ userObj.orders }}</font> |
|
|
|
</span> |
|
|
|
支付成功数: |
|
|
|
<font>{{ userObj.pays }}</font> |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
<span> |
|
|
|
售后次数: |
|
|
|
<font>{{ userObj.afters }}</font> |
|
|
|
</span> |
|
|
|
售后单数: |
|
|
|
<font>{{ userObj.afterOrders }}</font> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="tab_list"> |
|
|
|
<p |
|
|
|
v-for="(item, index) in tabList" |
|
|
|
:key="index" |
|
|
|
:class="[{ active: componentName === item.componentName }]" |
|
|
|
@click="changeTab(item)" |
|
|
|
>{{ item.tabName }}</p> |
|
|
|
</div> |
|
|
|
<div class="tab_list"> |
|
|
|
<p v-for="(item, index) in tabList" :key="index" :class="[{ active: componentName === item.componentName }]" |
|
|
|
@click="changeTab(item)">{{ item.tabName }}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="componentName === 'order'"> |
|
|
|
<el-form :inline="true" :model="userForm" class="demo-form-inline"> |
|
|
|
<el-form-item label="订单编号"> |
|
|
|
@ -62,17 +83,13 @@ |
|
|
|
<el-button type="primary" plain @click="searchOrders">查询</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table |
|
|
|
:data="userObj.orderList" |
|
|
|
border |
|
|
|
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table :data="userObj.orderList" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column prop="orderFormid" label="订单编号" /> |
|
|
|
<el-table-column prop="shopName" label="店铺名称" /> |
|
|
|
<el-table-column prop="products" label="商品数量"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{scope.row.products}}</span> |
|
|
|
<span>{{ scope.row.products }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="price" label="订单金额(元)" /> |
|
|
|
@ -88,12 +105,8 @@ |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div v-if="componentName === 'comment'"> |
|
|
|
<el-table |
|
|
|
:data="userObj.comments" |
|
|
|
border |
|
|
|
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table :data="userObj.comments" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column prop="shopName" label="店铺名称" /> |
|
|
|
<el-table-column prop="productName" label="商品名称" /> |
|
|
|
<el-table-column prop="comments" label="评论"> |
|
|
|
@ -104,31 +117,21 @@ |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div v-if="componentName === 'addressInfo'"> |
|
|
|
<el-table |
|
|
|
:data="userObj.receives" |
|
|
|
border |
|
|
|
:header-cell-style="{ background: '#EEF3FF', color: '#333333' }" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-table :data="userObj.receives" border :header-cell-style="{ background: '#F6F8FB', color: '#404F64' }" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column prop="receiveName" label="姓名" /> |
|
|
|
<el-table-column prop="receivePhone" label="电话" /> |
|
|
|
<el-table-column prop="receiveAdress" label="地址"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<span>{{scope.row.receiveAdress}}{{scope.row.address}}</span> |
|
|
|
<span>{{ scope.row.receiveAdress }}{{ scope.row.address }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<!-- *************对话框开始************* --> |
|
|
|
<!-- 打标签 --> |
|
|
|
<el-dialog |
|
|
|
title="选择标签" |
|
|
|
:visible.sync="addFormDialog" |
|
|
|
width="30%" |
|
|
|
append-to-body |
|
|
|
center |
|
|
|
:close-on-click-modal="false" |
|
|
|
> |
|
|
|
<el-dialog title="选择标签" :visible.sync="addFormDialog" width="30%" append-to-body center |
|
|
|
:close-on-click-modal="false"> |
|
|
|
<div> |
|
|
|
<!-- 表单搜索 --> |
|
|
|
<el-form :inline="true" :model="tipsForm" class="demo-form-inline"> |
|
|
|
@ -144,12 +147,8 @@ |
|
|
|
</el-form> |
|
|
|
<!-- 多选 --> |
|
|
|
<el-checkbox-group v-model="checkList"> |
|
|
|
<el-checkbox |
|
|
|
v-for="(item, index) in tipsList" |
|
|
|
:key="index" |
|
|
|
class="checkBoxStyle" |
|
|
|
:label="item.buyerLabelId" |
|
|
|
>{{ item.labelName }}</el-checkbox> |
|
|
|
<el-checkbox v-for="(item, index) in tipsList" :key="index" class="checkBoxStyle" |
|
|
|
:label="item.buyerLabelId">{{ item.labelName }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
@ -158,15 +157,8 @@ |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
<!-- 查看评论弹框 --> |
|
|
|
<el-dialog |
|
|
|
title="评论详情" |
|
|
|
:visible.sync="comDialogVisible" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:before-close="handleClose" |
|
|
|
width="60%" |
|
|
|
center |
|
|
|
:append-to-body="true" |
|
|
|
> |
|
|
|
<el-dialog title="评论详情" :visible.sync="comDialogVisible" :close-on-click-modal="false" :before-close="handleClose" |
|
|
|
width="60%" center :append-to-body="true"> |
|
|
|
<div class="pinStyle"> |
|
|
|
<div class="comment"> |
|
|
|
<div class="com_left">评论：</div> |
|
|
|
@ -175,27 +167,19 @@ |
|
|
|
<div v-if="commentDetails.images.length != 0" class="comment_imgList"> |
|
|
|
<div class="img_left">图片：</div> |
|
|
|
<div class="imgList"> |
|
|
|
<el-image |
|
|
|
v-for="(item,index) in commentDetails.images" |
|
|
|
:key="index" |
|
|
|
:src="item" |
|
|
|
:preview-src-list="commentDetails.images" |
|
|
|
/> |
|
|
|
<el-image v-for="(item, index) in commentDetails.images" :key="index" :src="item" |
|
|
|
:preview-src-list="commentDetails.images" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="comment"> |
|
|
|
<div v-if="commentDetails.addComment !=''" class="com_left">追评：</div> |
|
|
|
<div v-if="commentDetails.addComment != ''" class="com_left">追评：</div> |
|
|
|
<div class="com_right">{{ commentDetails.addComment }}</div> |
|
|
|
</div> |
|
|
|
<div v-if="commentDetails.addImages.length != 0" class="comment_imgList"> |
|
|
|
<div class="img_left">图片</div> |
|
|
|
<div class="imgList"> |
|
|
|
<el-image |
|
|
|
v-for="(item,index) in commentDetails.addImages" |
|
|
|
:key="index" |
|
|
|
:src="item" |
|
|
|
:preview-src-list="commentDetails.addImages" |
|
|
|
/> |
|
|
|
<el-image v-for="(item, index) in commentDetails.addImages" :key="index" :src="item" |
|
|
|
:preview-src-list="commentDetails.addImages" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -205,6 +189,7 @@ |
|
|
|
<el-button type="primary" @click="delCom">删除</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="text" @click="doCancel">取消</el-button> |
|
|
|
@ -217,7 +202,7 @@ |
|
|
|
import { customerMageGetById, getLabels, customerSaveUserLabel } from '@/api/customerMage' |
|
|
|
import { commentSysGetById, commentSysUpdate, commentSysDelete, commentAllow } from '@/api/comment' |
|
|
|
export default { |
|
|
|
data () { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
visible: false, |
|
|
|
infoList: [ |
|
|
|
@ -260,7 +245,7 @@ export default { |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
// 允许展示 |
|
|
|
async toShow () { |
|
|
|
async toShow() { |
|
|
|
const res = await commentAllow({ |
|
|
|
commentId: this.commentId, |
|
|
|
state: 1 |
|
|
|
@ -273,7 +258,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 隐藏 |
|
|
|
async noneShow () { |
|
|
|
async noneShow() { |
|
|
|
const res = await commentSysUpdate({ |
|
|
|
commentId: this.commentId, |
|
|
|
state: 0 |
|
|
|
@ -286,7 +271,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除 |
|
|
|
async delCom () { |
|
|
|
async delCom() { |
|
|
|
const res = await commentSysDelete({ |
|
|
|
commentId: this.commentId |
|
|
|
}) |
|
|
|
@ -297,42 +282,42 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 评论详情 |
|
|
|
async seeComment (commentId) { |
|
|
|
async seeComment(commentId) { |
|
|
|
this.comDialogVisible = true |
|
|
|
const res = await commentSysGetById({ commentId: commentId }) |
|
|
|
this.commentId = commentId |
|
|
|
this.commentDetails = res.data |
|
|
|
}, |
|
|
|
handleClose () { |
|
|
|
handleClose() { |
|
|
|
this.comDialogVisible = false |
|
|
|
}, |
|
|
|
closeModalDetail () { |
|
|
|
closeModalDetail() { |
|
|
|
this.comState = 1 |
|
|
|
this.componentName = 'order' |
|
|
|
}, |
|
|
|
// 贴标签 |
|
|
|
addTag () { |
|
|
|
addTag() { |
|
|
|
this.addFormDialog = true |
|
|
|
this.getSelect({ labelName: this.tipsForm.labelName }) |
|
|
|
}, |
|
|
|
// 查询订单 |
|
|
|
searchOrders () { |
|
|
|
searchOrders() { |
|
|
|
this.user.orderFormid = this.userForm.orderFormid |
|
|
|
this.getUser(this.user) |
|
|
|
}, |
|
|
|
// 查询标签 |
|
|
|
searchTips () { |
|
|
|
searchTips() { |
|
|
|
console.log(this.tipsForm) |
|
|
|
this.getSelect({ labelName: this.tipsForm.labelName }) |
|
|
|
}, |
|
|
|
// 跳转标签页面 |
|
|
|
runTips () { |
|
|
|
runTips() { |
|
|
|
this.$router.push({ |
|
|
|
path: '/member/tips' |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 打标签 |
|
|
|
async saveTips (row) { |
|
|
|
async saveTips(row) { |
|
|
|
console.log(this.checkList) |
|
|
|
const res = await customerSaveUserLabel({ |
|
|
|
buyerUserId: this.user.buyerUserId, |
|
|
|
@ -347,11 +332,11 @@ export default { |
|
|
|
this.addFormDialog = false |
|
|
|
} |
|
|
|
}, |
|
|
|
changeTab (item) { |
|
|
|
changeTab(item) { |
|
|
|
this.componentName = item.componentName |
|
|
|
}, |
|
|
|
// 客户详情 |
|
|
|
async getUser (obj) { |
|
|
|
async getUser(obj) { |
|
|
|
this.user = obj |
|
|
|
const res = await customerMageGetById({ |
|
|
|
buyerUserId: obj.buyerUserId, |
|
|
|
@ -362,7 +347,7 @@ export default { |
|
|
|
this.getInfoList(this.userObj) |
|
|
|
}, |
|
|
|
// 获取客户信息 |
|
|
|
getInfoList (ob) { |
|
|
|
getInfoList(ob) { |
|
|
|
this.infoList.map(item => { |
|
|
|
console.log(item) |
|
|
|
item.value = ob[item.fields] || '' |
|
|
|
@ -372,14 +357,14 @@ export default { |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 初始化查询所有标签 |
|
|
|
async getSelect (name) { |
|
|
|
async getSelect(name) { |
|
|
|
const res = await getLabels(name) |
|
|
|
this.tipsList = res.data |
|
|
|
}, |
|
|
|
doCancel () { |
|
|
|
doCancel() { |
|
|
|
this.visible = false |
|
|
|
}, |
|
|
|
doSubmit () { |
|
|
|
doSubmit() { |
|
|
|
this.visible = false |
|
|
|
this.$emit('reset') |
|
|
|
}, |
|
|
|
@ -388,27 +373,24 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
// 评论详情 |
|
|
|
.comment_manage_page { |
|
|
|
padding: 20px; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 10px; |
|
|
|
} |
|
|
|
.pinStyle { |
|
|
|
.comment { |
|
|
|
margin-bottom: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.com_left { |
|
|
|
font-size: 20px; |
|
|
|
color: #333333; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.com_right { |
|
|
|
font-size: 18px; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.comment_imgList { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20px; |
|
|
|
@ -420,11 +402,13 @@ export default { |
|
|
|
margin-right: 20px; |
|
|
|
width: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.imgList { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
.el-image { |
|
|
|
width: 200px; |
|
|
|
height: 134px; |
|
|
|
@ -434,6 +418,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// .line { |
|
|
|
// width: 890px; |
|
|
|
// height: 1px; |
|
|
|
@ -447,137 +432,163 @@ export default { |
|
|
|
// margin-bottom: 20px; |
|
|
|
// } |
|
|
|
} |
|
|
|
// |
|
|
|
h2 { |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 500; |
|
|
|
position: relative; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
height: 24px; |
|
|
|
width: 4px; |
|
|
|
background-color: #3a68f2; |
|
|
|
position: absolute; |
|
|
|
left: -10px; |
|
|
|
top: 2px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
label { |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
// |
|
|
|
|
|
|
|
.custom_info_page { |
|
|
|
margin-top: 20px; |
|
|
|
padding: 20px 100px; |
|
|
|
background-color: #fff; |
|
|
|
min-height: 500px; |
|
|
|
|
|
|
|
.custom_info { |
|
|
|
margin-bottom: 30px; |
|
|
|
.base_info { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.info_item { |
|
|
|
&:nth-child(1) { |
|
|
|
height: 180px; |
|
|
|
width: 100px; |
|
|
|
img { |
|
|
|
width: 100px; |
|
|
|
height: 100px; |
|
|
|
border-radius: 50px; |
|
|
|
text-align: center; |
|
|
|
margin-top: 40px; |
|
|
|
flex-direction: row; |
|
|
|
align-content: flex-start; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
.custom_info { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
-webkit-box-align: center; |
|
|
|
-ms-flex-align: center; |
|
|
|
align-items: flex-start; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
flex-wrap: nowrap; |
|
|
|
|
|
|
|
.custom_title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
padding-left: 10px; |
|
|
|
line-height: 16px; |
|
|
|
margin-bottom: 30px; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
height: 16px; |
|
|
|
width: 4px; |
|
|
|
background-color: #183ECD; |
|
|
|
position: absolute; |
|
|
|
left: 0px; |
|
|
|
display: block; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(2) { |
|
|
|
margin-left: 100px; |
|
|
|
ul { |
|
|
|
overflow: hidden; |
|
|
|
list-style: none; |
|
|
|
li { |
|
|
|
float: left; |
|
|
|
width: 50%; |
|
|
|
p { |
|
|
|
font-size: 16px; |
|
|
|
color: #333; |
|
|
|
line-height: 40px; |
|
|
|
span:nth-child(2) { |
|
|
|
color: #666; |
|
|
|
|
|
|
|
.custom_info_content { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
.info_img { |
|
|
|
height: 105px; |
|
|
|
width: 74px; |
|
|
|
margin-right: 15px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 74px; |
|
|
|
height: 74px; |
|
|
|
border-radius: 37px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.info_item { |
|
|
|
ul { |
|
|
|
overflow: hidden; |
|
|
|
list-style: none; |
|
|
|
|
|
|
|
li { |
|
|
|
float: left; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
p { |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #404F64; |
|
|
|
line-height: 24px; |
|
|
|
margin-bottom: 7px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.custom_tag { |
|
|
|
margin-bottom: 30px; |
|
|
|
.Tag{ |
|
|
|
padding-top: 20px ; |
|
|
|
} |
|
|
|
p { |
|
|
|
display: inline-block; |
|
|
|
background-color: #d8e1fc; |
|
|
|
font-size: 16px; |
|
|
|
color: #333; |
|
|
|
text-align: center; |
|
|
|
// margin-right: 20px; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 8px 15px; |
|
|
|
&:last-child { |
|
|
|
background-color: #fff; |
|
|
|
color: #3a68f2; |
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.custom_tag { |
|
|
|
width: 33%; |
|
|
|
|
|
|
|
.Tag { |
|
|
|
padding-top: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.custom_data { |
|
|
|
.data_list { |
|
|
|
padding: 20px 0 40px 0; |
|
|
|
p { |
|
|
|
display: inline-block; |
|
|
|
background-color: #d8e1fc; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 40px; |
|
|
|
font { |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
span { |
|
|
|
display: inline-block; |
|
|
|
width: 200px; |
|
|
|
color: #333; |
|
|
|
text-align: center; |
|
|
|
// margin-right: 20px; |
|
|
|
border-radius: 4px; |
|
|
|
padding: 8px 15px; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
background-color: #fff; |
|
|
|
color: #3a68f2; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tab_list { |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 20px; |
|
|
|
p { |
|
|
|
float: left; |
|
|
|
padding: 0 50px; |
|
|
|
font-size: 16px; |
|
|
|
border: 1px #e0e5eb solid; |
|
|
|
box-sizing: border-box; |
|
|
|
color: #999999; |
|
|
|
height: 48px; |
|
|
|
line-height: 48px; |
|
|
|
&:nth-child(-n + 2) { |
|
|
|
border-right: 0; |
|
|
|
} |
|
|
|
&:nth-child(1) { |
|
|
|
border-radius: 4px 0 0 4px; |
|
|
|
} |
|
|
|
&:nth-child(3) { |
|
|
|
border-radius: 0 4px 4px 0; |
|
|
|
} |
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab_list { |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
p { |
|
|
|
float: left; |
|
|
|
padding: 0 45px; |
|
|
|
font-size: 14px; |
|
|
|
border: 1px #e0e5eb solid; |
|
|
|
box-sizing: border-box; |
|
|
|
color: #999999; |
|
|
|
height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
|
|
|
|
&:nth-child(-n + 2) { |
|
|
|
border-right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
border-radius: 4px 0 0 4px; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-child(3) { |
|
|
|
border-radius: 0 4px 4px 0; |
|
|
|
} |
|
|
|
.active { |
|
|
|
background-color: #3a68f2; |
|
|
|
color: #fff; |
|
|
|
border: 0; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.active { |
|
|
|
background-color: #183ECD; |
|
|
|
color: #fff; |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
xh-pan1
2 years ago