|
@@ -0,0 +1,656 @@ |
|
|
|
|
|
<template> |
|
|
|
|
|
<div class="mainBox"> |
|
|
|
|
|
<div class="headers"> |
|
|
|
|
|
<div class="lside"> |
|
|
|
|
|
<div class="level">A</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="rside"> |
|
|
|
|
|
<div class="customer-name"> |
|
|
|
|
|
<span class="names">先生</span> |
|
|
|
|
|
<span class="tag">初次到访</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="adviser"> |
|
|
|
|
|
<span>负责顾问</span> |
|
|
|
|
|
<span class="trans">转交</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="customer-bottom"> |
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
<span class="tops">80%</span> |
|
|
|
|
|
<span class="btms">销讲执行</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
<span class="tops">3次</span> |
|
|
|
|
|
<span class="btms">来访次数</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
<span class="tops">155min</span> |
|
|
|
|
|
<span class="btms">到访时长</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
<span class="tops">3</span> |
|
|
|
|
|
<span class="btms">画像标签</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="item"> |
|
|
|
|
|
<span class="tops">3</span> |
|
|
|
|
|
<span class="btms">违禁触达</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="body-container"> |
|
|
|
|
|
<el-menu |
|
|
|
|
|
:default-active="activeIndex" |
|
|
|
|
|
class="el-menu-demo" |
|
|
|
|
|
mode="horizontal" |
|
|
|
|
|
@select="handleSelect" |
|
|
|
|
|
> |
|
|
|
|
|
<el-menu-item index="1">历史记录</el-menu-item> |
|
|
|
|
|
<el-menu-item index="2">客户资料</el-menu-item> |
|
|
|
|
|
<el-menu-item index="3">客户意向</el-menu-item> |
|
|
|
|
|
<el-menu-item index="4">销讲执行</el-menu-item> |
|
|
|
|
|
<el-menu-item index="5">违禁触达</el-menu-item> |
|
|
|
|
|
</el-menu> |
|
|
|
|
|
<!-- 历史记录 --> |
|
|
|
|
|
<template v-if="activeIndex == 1"> |
|
|
|
|
|
<div class="activeIndex1"> |
|
|
|
|
|
<div class="select"> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="(data, index) in selectList" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
@click="selectTap(data, index)" |
|
|
|
|
|
class="s-items" |
|
|
|
|
|
:class="{act: index == activeindex1act}" |
|
|
|
|
|
>{{ data.title }}</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 历史记录列表 --> |
|
|
|
|
|
<div class="activeList"> |
|
|
|
|
|
<div class="a-items"> |
|
|
|
|
|
<div class="a-lside">A</div> |
|
|
|
|
|
<div class="a-rside"> |
|
|
|
|
|
<div class="a-top"> |
|
|
|
|
|
<span class="a-name">李佳佳</span> |
|
|
|
|
|
<span class="tag">首次到访</span> |
|
|
|
|
|
<span class="line"> | </span> |
|
|
|
|
|
<span class="tag">未标注</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="a-time">2022-05-20 18:00:00</div> |
|
|
|
|
|
<div class="a-type"> |
|
|
|
|
|
<span class="time">录音时长:90分钟</span> |
|
|
|
|
|
<span class="percent">执行率:86%</span> |
|
|
|
|
|
<span class="getcent">质检得分:75</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="details-box"> |
|
|
|
|
|
<div class="details">查看详情</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="activeIndex == 2"> |
|
|
|
|
|
<div class="activeIndex2"> |
|
|
|
|
|
<div class="baseInfo"> |
|
|
|
|
|
<img class="base-img" src="/img/base.png" alt /> |
|
|
|
|
|
基本信息 |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">客户姓名</div> |
|
|
|
|
|
<div class="b-rside">刘佳</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">性别</div> |
|
|
|
|
|
<div class="b-rside">女</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">手机</div> |
|
|
|
|
|
<div class="b-rside">17551333886</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">微信账号</div> |
|
|
|
|
|
<div class="b-rside">-</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">客户等级</div> |
|
|
|
|
|
<div class="b-rside">A级</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">客户来源</div> |
|
|
|
|
|
<div class="b-rside">其他</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">资讯业务</div> |
|
|
|
|
|
<div class="b-rside">一期住宅 二期住宅</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">添加人</div> |
|
|
|
|
|
<div class="b-rside">访客登记</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">添加时间</div> |
|
|
|
|
|
<div class="b-rside">-</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">备注</div> |
|
|
|
|
|
<div class="b-rside">-</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="activeIndex == 3"> |
|
|
|
|
|
<div class="activeIndex2"> |
|
|
|
|
|
<div style="height: 8px;"></div> |
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">置业需求</div> |
|
|
|
|
|
<div class="b-rside">投资、养老</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">意向面积</div> |
|
|
|
|
|
<div class="b-rside">90~100、120~140</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">预算</div> |
|
|
|
|
|
<div class="b-rside">100~160万</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">关注点</div> |
|
|
|
|
|
<div class="b-rside">学校</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="base-items"> |
|
|
|
|
|
<div class="b-lside">认知途径</div> |
|
|
|
|
|
<div class="b-rside">广告</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-if="activeIndex == 4"> |
|
|
|
|
|
<!-- 执行总览 --> |
|
|
|
|
|
<div class="all-screen"> |
|
|
|
|
|
<div class="tops"> |
|
|
|
|
|
<div class="tops-title">执行总览</div> |
|
|
|
|
|
<div class="p-box"> |
|
|
|
|
|
<div class="items" style="margin-left: 144px;"> |
|
|
|
|
|
<span class="p-i-titles">3</span> |
|
|
|
|
|
<span style="margin-top: 6px;">到访次数</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="items" style="margin-left: 200px;"> |
|
|
|
|
|
<div class="circle"> |
|
|
|
|
|
<el-progress :width="56" color="#4FC78F" type="circle" :percentage="0"></el-progress> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span style="margin-top: 6px;">销讲执行率</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="items" style="margin-left: 200px;"> |
|
|
|
|
|
<span class="p-i-titles">3155</span> |
|
|
|
|
|
<span style="margin-top: 6px;">接待时长(分)</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 指标内容 --> |
|
|
|
|
|
<div class="contents"> |
|
|
|
|
|
<div class="head"> |
|
|
|
|
|
<span style="margin-left: 96px;">指标</span> |
|
|
|
|
|
<span style="margin-left: 582px;">执行</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<el-collapse v-model="activeName" accordion> |
|
|
|
|
|
<el-collapse-item title="区位介绍" name="1"> |
|
|
|
|
|
<template slot="title"> |
|
|
|
|
|
区位介绍 |
|
|
|
|
|
<el-progress |
|
|
|
|
|
style="margin: 0 153px 0 80px;width: 363px;" |
|
|
|
|
|
color="#4FC78F" |
|
|
|
|
|
:stroke-width="16" |
|
|
|
|
|
:percentage="70" |
|
|
|
|
|
></el-progress> |
|
|
|
|
|
</template> |
|
|
|
|
|
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div> |
|
|
|
|
|
<div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div> |
|
|
|
|
|
</el-collapse-item> |
|
|
|
|
|
<el-collapse-item title="品牌介绍" name="2"> |
|
|
|
|
|
<template slot="title"> |
|
|
|
|
|
品牌介绍 |
|
|
|
|
|
<el-progress |
|
|
|
|
|
style="margin: 0 153px 0 80px;width: 363px;" |
|
|
|
|
|
color="#4FC78F" |
|
|
|
|
|
:stroke-width="16" |
|
|
|
|
|
:percentage="70" |
|
|
|
|
|
></el-progress> |
|
|
|
|
|
</template> |
|
|
|
|
|
<div>控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;</div> |
|
|
|
|
|
<div>页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。</div> |
|
|
|
|
|
</el-collapse-item> |
|
|
|
|
|
</el-collapse> |
|
|
|
|
|
<div style="height: 54px;"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<template v-if="activeIndex == 5"> |
|
|
|
|
|
<div class="all-screen"> |
|
|
|
|
|
<div class="tops"> |
|
|
|
|
|
<div class="tops-title">执行总览</div> |
|
|
|
|
|
<div class="p-box"> |
|
|
|
|
|
<div class="items" style="margin-left: 144px;"> |
|
|
|
|
|
<span class="p-i-titles">3</span> |
|
|
|
|
|
<span style="margin-top: 6px;">到访次数</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="items" style="margin-left: 200px;"> |
|
|
|
|
|
<div class="circle"> |
|
|
|
|
|
<el-progress :width="56" color="#E51B1B" type="circle" :percentage="50"></el-progress> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span style="margin-top: 6px;">销讲执行率</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="items" style="margin-left: 200px;"> |
|
|
|
|
|
<span class="p-i-titles">3155</span> |
|
|
|
|
|
<span style="margin-top: 6px;">接待时长(分)</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 列表 --> |
|
|
|
|
|
<div class="p-content"> |
|
|
|
|
|
<div class="p-items"> |
|
|
|
|
|
<span class="p-i-lside">红包</span> |
|
|
|
|
|
|
|
|
|
|
|
<span class="p-i-rside">1次</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="p-items"> |
|
|
|
|
|
<span class="p-i-lside">收红包</span> |
|
|
|
|
|
<span class="p-i-rside">1次</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
export default { |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
activeIndex: "1", // 大的tab |
|
|
|
|
|
activeindex1act: 0, // 筛选条件下标 |
|
|
|
|
|
selectList: [ |
|
|
|
|
|
// 选中 |
|
|
|
|
|
{ |
|
|
|
|
|
title: "全部", |
|
|
|
|
|
id: "" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "接待记录", |
|
|
|
|
|
id: "1" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "通话记录", |
|
|
|
|
|
id: "2" |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: "跟进记录", |
|
|
|
|
|
id: "3" |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
activeName: 1 // 折叠面板选中项 |
|
|
|
|
|
}; |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
// 历史记录筛选 |
|
|
|
|
|
handleSelect(key, keyPath) { |
|
|
|
|
|
console.log(key, keyPath); |
|
|
|
|
|
this.activeIndex = key; |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 筛选历史记录类型 |
|
|
|
|
|
selectTap(data, index) { |
|
|
|
|
|
this.activeindex1act = index; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.mainBox { |
|
|
|
|
|
padding: 0 28px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
min-width: 1200px; |
|
|
|
|
|
min-height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
// 顶端样式 |
|
|
|
|
|
.headers { |
|
|
|
|
|
padding: 20px 20px 0 20px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 172px; |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
|
|
.lside { |
|
|
|
|
|
width: 68px; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-items: flex-end; |
|
|
|
|
|
|
|
|
|
|
|
.level { |
|
|
|
|
|
width: 36px; |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.rside { |
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
|
|
|
|
.customer-name { |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.names { |
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
|
padding: 1px 12px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
background: rgba($color: #2671e2, $alpha: 0.2); |
|
|
|
|
|
color: #2671e2; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.adviser { |
|
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
|
|
|
|
.trans { |
|
|
|
|
|
margin-left: 24px; |
|
|
|
|
|
color: #2671e2; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.customer-bottom { |
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 84px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-content: center; |
|
|
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
|
padding: 0 60px; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
|
|
.tops { |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btms { |
|
|
|
|
|
margin-top: 4px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.body-container { |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
padding: 0 20px; |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
|
|
|
|
.activeIndex1 { |
|
|
|
|
|
.select { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 56px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
|
|
|
|
|
|
|
|
.s-items { |
|
|
|
|
|
padding: 2px 8px; |
|
|
|
|
|
margin-right: 40px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
border: 1px solid #fff; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.act { |
|
|
|
|
|
border-color: #2671e2; |
|
|
|
|
|
color: #2671e2; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.activeList { |
|
|
|
|
|
.a-items { |
|
|
|
|
|
padding: 16px 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 118px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
|
|
|
|
|
|
|
|
.a-lside { |
|
|
|
|
|
margin-right: 12px; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
width: 36px; |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.a-rside { |
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
|
|
|
|
|
|
.a-top { |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.a-name { |
|
|
|
|
|
margin-right: 24px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.a-time { |
|
|
|
|
|
margin-top: 4px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.a-type { |
|
|
|
|
|
margin-top: 6px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
|
|
|
|
.time { |
|
|
|
|
|
margin-right: 32px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.percent { |
|
|
|
|
|
margin-right: 27px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.details-box { |
|
|
|
|
|
margin-right: 80px; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.details { |
|
|
|
|
|
width: 82px; |
|
|
|
|
|
height: 30px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
background: #2671e2; |
|
|
|
|
|
border-radius: 2px; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.activeIndex2 { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
.baseInfo { |
|
|
|
|
|
padding: 16px 0 8px 0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.base-img { |
|
|
|
|
|
margin-right: 2px; |
|
|
|
|
|
width: 14px; |
|
|
|
|
|
height: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.base-items { |
|
|
|
|
|
padding: 8px 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.b-lside { |
|
|
|
|
|
width: 96px; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
color: #585858; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.b-rside { |
|
|
|
|
|
flex-grow: 1; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.all-screen { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
.tops { |
|
|
|
|
|
margin: 16px 0; |
|
|
|
|
|
padding: 16px 20px 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 154px; |
|
|
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
|
|
|
|
|
|
|
|
.tops-title { |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.p-box { |
|
|
|
|
|
margin-top: 16px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
|
|
|
|
.items { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
.circle { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
.p-i-titles { |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.p-content { |
|
|
|
|
|
margin-top: -16px; |
|
|
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
|
|
border-top: none; |
|
|
|
|
|
|
|
|
|
|
|
.p-items { |
|
|
|
|
|
padding: 0 0 0 80px; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 58px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
|
|
|
|
|
|
|
|
|
.p-i-lside { |
|
|
|
|
|
width: 43%; |
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
} |
|
|
|
|
|
.p-i-rside { |
|
|
|
|
|
padding: 2px 23px; |
|
|
|
|
|
color: #E51B1B; |
|
|
|
|
|
background: rgba($color: #E51B1B, $alpha: .1); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.contents { |
|
|
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
|
|
|
|
|
|
|
|
.head { |
|
|
|
|
|
height: 54px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-menu-demo { |
|
|
|
|
|
border-bottom: 1px solid #e0e0e0 !important; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
|
.el-collapse-item__header { |
|
|
|
|
|
padding: 0 0 0 80px; |
|
|
|
|
|
background-color: #f8f8f8; |
|
|
|
|
|
border-bottom-color: #e0e0e0; |
|
|
|
|
|
} |
|
|
|
|
|
.el-collapse-item__arrow { |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
} |
|
|
|
|
|
.el-progress__text { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |