|
|
@ -1,9 +1,12 @@ |
|
|
<template> |
|
|
<template> |
|
|
<el-dialog title="详情" width="80%" :visible.sync="visible" :close-on-click-modal="false" @close="closeModalDetail"> |
|
|
<el-dialog title="详情" width="80%" :visible.sync="visible" :close-on-click-modal="false" @close="closeModalDetail"> |
|
|
<div class="custom_info_page"> |
|
|
<div class="custom_info_page"> |
|
|
<h2>客户信息</h2> |
|
|
|
|
|
|
|
|
<div class="base_info"> |
|
|
<div class="custom_info"> |
|
|
<div class="custom_info"> |
|
|
<div class="info_item"> |
|
|
|
|
|
|
|
|
<div class="custom_title">客户信息</div> |
|
|
|
|
|
<div class="custom_info_content"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="info_img"> |
|
|
<img :src="userObj.headImage" alt> |
|
|
<img :src="userObj.headImage" alt> |
|
|
</div> |
|
|
</div> |
|
|
<div class="info_item"> |
|
|
<div class="info_item"> |
|
|
@ -17,42 +20,60 @@ |
|
|
</ul> |
|
|
</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> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="custom_data"> |
|
|
|
|
|
<h2>消费数据</h2> |
|
|
|
|
|
<div class="data_list"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="custom_info"> |
|
|
|
|
|
<div class="custom_title">消费数据</div> |
|
|
|
|
|
<div class="custom_info_content"> |
|
|
|
|
|
<div class="info_item"> |
|
|
|
|
|
<ul> |
|
|
|
|
|
<li> |
|
|
<p> |
|
|
<p> |
|
|
<span> |
|
|
|
|
|
下 单 数: |
|
|
|
|
|
<font>{{ userObj.orders }}</font> |
|
|
|
|
|
</span> |
|
|
|
|
|
支付成功数: |
|
|
|
|
|
<font>{{ userObj.pays }}</font> |
|
|
|
|
|
|
|
|
<span>下 单 数: </span> |
|
|
|
|
|
<span>{{ userObj.orders }}</span> |
|
|
</p> |
|
|
</p> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
<p> |
|
|
<p> |
|
|
<span> |
|
|
|
|
|
售后次数: |
|
|
|
|
|
<font>{{ userObj.afters }}</font> |
|
|
|
|
|
</span> |
|
|
|
|
|
售后单数: |
|
|
|
|
|
<font>{{ userObj.afterOrders }}</font> |
|
|
|
|
|
|
|
|
<span>支付成功数: </span> |
|
|
|
|
|
<span>{{ userObj.pays }}</span> |
|
|
|
|
|
</p> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
|
|
|
<p> |
|
|
|
|
|
<span>售后次数: </span> |
|
|
|
|
|
<span>{{ userObj.afters }}</span> |
|
|
</p> |
|
|
</p> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
|
|
|
<p> |
|
|
|
|
|
<span>售后单数: </span> |
|
|
|
|
|
<span>{{ userObj.afterOrders }}</span> |
|
|
|
|
|
</p> |
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
|
|
|
|
</ul> |
|
|
</div> |
|
|
</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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<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="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'"> |
|
|
<div v-if="componentName === 'order'"> |
|
|
<el-form :inline="true" :model="userForm" class="demo-form-inline"> |
|
|
<el-form :inline="true" :model="userForm" class="demo-form-inline"> |
|
|
<el-form-item label="订单编号"> |
|
|
<el-form-item label="订单编号"> |
|
|
@ -62,12 +83,8 @@ |
|
|
<el-button type="primary" plain @click="searchOrders">查询</el-button> |
|
|
<el-button type="primary" plain @click="searchOrders">查询</el-button> |
|
|
</el-form-item> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</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="orderFormid" label="订单编号" /> |
|
|
<el-table-column prop="shopName" label="店铺名称" /> |
|
|
<el-table-column prop="shopName" label="店铺名称" /> |
|
|
<el-table-column prop="products" label="商品数量"> |
|
|
<el-table-column prop="products" label="商品数量"> |
|
|
@ -88,12 +105,8 @@ |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="componentName === 'comment'"> |
|
|
<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="shopName" label="店铺名称" /> |
|
|
<el-table-column prop="productName" label="商品名称" /> |
|
|
<el-table-column prop="productName" label="商品名称" /> |
|
|
<el-table-column prop="comments" label="评论"> |
|
|
<el-table-column prop="comments" label="评论"> |
|
|
@ -104,12 +117,8 @@ |
|
|
</el-table> |
|
|
</el-table> |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="componentName === 'addressInfo'"> |
|
|
<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="receiveName" label="姓名" /> |
|
|
<el-table-column prop="receivePhone" label="电话" /> |
|
|
<el-table-column prop="receivePhone" label="电话" /> |
|
|
<el-table-column prop="receiveAdress" label="地址"> |
|
|
<el-table-column prop="receiveAdress" label="地址"> |
|
|
@ -121,14 +130,8 @@ |
|
|
</div> |
|
|
</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> |
|
|
<div> |
|
|
<!-- 表单搜索 --> |
|
|
<!-- 表单搜索 --> |
|
|
<el-form :inline="true" :model="tipsForm" class="demo-form-inline"> |
|
|
<el-form :inline="true" :model="tipsForm" class="demo-form-inline"> |
|
|
@ -144,12 +147,8 @@ |
|
|
</el-form> |
|
|
</el-form> |
|
|
<!-- 多选 --> |
|
|
<!-- 多选 --> |
|
|
<el-checkbox-group v-model="checkList"> |
|
|
<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> |
|
|
</el-checkbox-group> |
|
|
</div> |
|
|
</div> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
<span slot="footer" class="dialog-footer"> |
|
|
@ -158,15 +157,8 @@ |
|
|
</span> |
|
|
</span> |
|
|
</el-dialog> |
|
|
</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="pinStyle"> |
|
|
<div class="comment"> |
|
|
<div class="comment"> |
|
|
<div class="com_left">评论：</div> |
|
|
<div class="com_left">评论：</div> |
|
|
@ -175,12 +167,8 @@ |
|
|
<div v-if="commentDetails.images.length != 0" class="comment_imgList"> |
|
|
<div v-if="commentDetails.images.length != 0" class="comment_imgList"> |
|
|
<div class="img_left">图片：</div> |
|
|
<div class="img_left">图片：</div> |
|
|
<div class="imgList"> |
|
|
<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> |
|
|
</div> |
|
|
<div class="comment"> |
|
|
<div class="comment"> |
|
|
@ -190,12 +178,8 @@ |
|
|
<div v-if="commentDetails.addImages.length != 0" class="comment_imgList"> |
|
|
<div v-if="commentDetails.addImages.length != 0" class="comment_imgList"> |
|
|
<div class="img_left">图片</div> |
|
|
<div class="img_left">图片</div> |
|
|
<div class="imgList"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -205,6 +189,7 @@ |
|
|
<el-button type="primary" @click="delCom">删除</el-button> |
|
|
<el-button type="primary" @click="delCom">删除</el-button> |
|
|
</span> |
|
|
</span> |
|
|
</el-dialog> |
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
<el-button type="text" @click="doCancel">取消</el-button> |
|
|
<el-button type="text" @click="doCancel">取消</el-button> |
|
|
@ -388,27 +373,24 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
<style lang='scss' scoped> |
|
|
// 评论详情 |
|
|
|
|
|
.comment_manage_page { |
|
|
|
|
|
padding: 20px; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
.pinStyle { |
|
|
.pinStyle { |
|
|
.comment { |
|
|
.comment { |
|
|
margin-bottom: 20px; |
|
|
margin-bottom: 20px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.com_left { |
|
|
.com_left { |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
color: #333333; |
|
|
color: #333333; |
|
|
margin-right: 20px; |
|
|
margin-right: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.com_right { |
|
|
.com_right { |
|
|
font-size: 18px; |
|
|
font-size: 18px; |
|
|
color: #333333; |
|
|
color: #333333; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.comment_imgList { |
|
|
.comment_imgList { |
|
|
display: flex; |
|
|
display: flex; |
|
|
margin-bottom: 20px; |
|
|
margin-bottom: 20px; |
|
|
@ -420,11 +402,13 @@ export default { |
|
|
margin-right: 20px; |
|
|
margin-right: 20px; |
|
|
width: 60px; |
|
|
width: 60px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.imgList { |
|
|
.imgList { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: flex-start; |
|
|
justify-content: flex-start; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
.el-image { |
|
|
.el-image { |
|
|
width: 200px; |
|
|
width: 200px; |
|
|
height: 134px; |
|
|
height: 134px; |
|
|
@ -434,6 +418,7 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// .line { |
|
|
// .line { |
|
|
// width: 890px; |
|
|
// width: 890px; |
|
|
// height: 1px; |
|
|
// height: 1px; |
|
|
@ -447,59 +432,90 @@ export default { |
|
|
// margin-bottom: 20px; |
|
|
// margin-bottom: 20px; |
|
|
// } |
|
|
// } |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
label { |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// |
|
|
// |
|
|
h2 { |
|
|
|
|
|
font-size: 24px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.custom_info_page { |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
min-height: 500px; |
|
|
|
|
|
|
|
|
|
|
|
.base_info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
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; |
|
|
font-weight: 500; |
|
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
line-height: 16px; |
|
|
|
|
|
margin-bottom: 30px; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
|
|
|
&::before { |
|
|
&::before { |
|
|
content: ""; |
|
|
content: ""; |
|
|
height: 24px; |
|
|
|
|
|
|
|
|
height: 16px; |
|
|
width: 4px; |
|
|
width: 4px; |
|
|
background-color: #3a68f2; |
|
|
|
|
|
|
|
|
background-color: #183ECD; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: -10px; |
|
|
|
|
|
top: 2px; |
|
|
|
|
|
|
|
|
left: 0px; |
|
|
display: block; |
|
|
display: block; |
|
|
|
|
|
font-weight: 500; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.custom_info_page { |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
padding: 20px 100px; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
min-height: 500px; |
|
|
|
|
|
|
|
|
|
|
|
.custom_info { |
|
|
|
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
|
.custom_info_content { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
|
|
|
.info_item { |
|
|
|
|
|
&:nth-child(1) { |
|
|
|
|
|
height: 180px; |
|
|
|
|
|
width: 100px; |
|
|
|
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
align-items: flex-start; |
|
|
|
|
|
|
|
|
|
|
|
.info_img { |
|
|
|
|
|
height: 105px; |
|
|
|
|
|
width: 74px; |
|
|
|
|
|
margin-right: 15px; |
|
|
|
|
|
|
|
|
img { |
|
|
img { |
|
|
width: 100px; |
|
|
|
|
|
height: 100px; |
|
|
|
|
|
border-radius: 50px; |
|
|
|
|
|
|
|
|
width: 74px; |
|
|
|
|
|
height: 74px; |
|
|
|
|
|
border-radius: 37px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
margin-top: 40px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
&:nth-child(2) { |
|
|
|
|
|
margin-left: 100px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info_item { |
|
|
ul { |
|
|
ul { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
list-style: none; |
|
|
list-style: none; |
|
|
|
|
|
|
|
|
li { |
|
|
li { |
|
|
float: left; |
|
|
float: left; |
|
|
width: 50%; |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
p { |
|
|
p { |
|
|
font-size: 16px; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
span:nth-child(2) { |
|
|
|
|
|
color: #666; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
color: #404F64; |
|
|
|
|
|
line-height: 24px; |
|
|
|
|
|
margin-bottom: 7px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -508,10 +524,12 @@ h2 { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom_tag { |
|
|
.custom_tag { |
|
|
margin-bottom: 30px; |
|
|
|
|
|
|
|
|
width: 33%; |
|
|
|
|
|
|
|
|
.Tag { |
|
|
.Tag { |
|
|
padding-top: 20px; |
|
|
padding-top: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
p { |
|
|
p { |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
background-color: #d8e1fc; |
|
|
background-color: #d8e1fc; |
|
|
@ -521,63 +539,56 @@ h2 { |
|
|
// margin-right: 20px; |
|
|
// margin-right: 20px; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
padding: 8px 15px; |
|
|
padding: 8px 15px; |
|
|
|
|
|
|
|
|
&:last-child { |
|
|
&:last-child { |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
color: #3a68f2; |
|
|
color: #3a68f2; |
|
|
|
|
|
|
|
|
&:hover { |
|
|
&:hover { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom_data { |
|
|
|
|
|
.data_list { |
|
|
|
|
|
padding: 20px 0 40px 0; |
|
|
|
|
|
p { |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
font { |
|
|
|
|
|
color: #666; |
|
|
|
|
|
} |
|
|
|
|
|
span { |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab_list { |
|
|
.tab_list { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
margin-bottom: 20px; |
|
|
margin-bottom: 20px; |
|
|
|
|
|
|
|
|
p { |
|
|
p { |
|
|
float: left; |
|
|
float: left; |
|
|
padding: 0 50px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
|
padding: 0 45px; |
|
|
|
|
|
font-size: 14px; |
|
|
border: 1px #e0e5eb solid; |
|
|
border: 1px #e0e5eb solid; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
color: #999999; |
|
|
color: #999999; |
|
|
height: 48px; |
|
|
|
|
|
line-height: 48px; |
|
|
|
|
|
|
|
|
height: 36px; |
|
|
|
|
|
line-height: 36px; |
|
|
|
|
|
|
|
|
&:nth-child(-n + 2) { |
|
|
&:nth-child(-n + 2) { |
|
|
border-right: 0; |
|
|
border-right: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
&:nth-child(1) { |
|
|
border-radius: 4px 0 0 4px; |
|
|
border-radius: 4px 0 0 4px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&:nth-child(3) { |
|
|
&:nth-child(3) { |
|
|
border-radius: 0 4px 4px 0; |
|
|
border-radius: 0 4px 4px 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
&:hover { |
|
|
&:hover { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.active { |
|
|
.active { |
|
|
background-color: #3a68f2; |
|
|
|
|
|
|
|
|
background-color: #183ECD; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
border: 0; |
|
|
border: 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
</style> |
xh-pan1
3 years ago