hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-10 03:26:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

【银保app】业绩查询页面样式抽离

Browse Source
This commit is contained in:
liu.xiaofeng@ebiz-digits.com
2022-11-18 16:38:24 +08:00
parent 0b16de9042
commit 969ba8b7fa
1 changed files with 138 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/views/YB_APP/performanceQuery.vue
View File

@@ -69,7 +69,7 @@
<div>
<p class="otherContent_con_top_p">
<span style="color:#cf3d52;">未达标</span>
<img style="width:14px;height:14px;margin-left:10px;" src="@/assets/YB_APP/images/38.png">
<img class="otherContent_con_one_img" src="@/assets/YB_APP/images/38.png">
</p>
<p class="otherContent_con_bottom_p">
<span>桂冠人力</span>
@@ -104,76 +104,74 @@
<div class="channel_head">
<div class="channel_head_con_one">
<div>
<p style="display:flex;justify-content:flex-start;margin-left:15px;"><span style="color:#3749A9;font-size:16px;font-weight:bold;">12</span><span style="color:#3646AF;">个</span></p>
<p style="color:#3646AF;font-size:14px;margin-left:15px;">网点数量</p>
<p class="channel_head_con_num">
<span class="channel_head_con_num_span">12</span>
<span class="channel_head_con_num_span channel_head_con_num_span_unit">个</span>
</p>
<p class="channel_head_con_mark">网点数量</p>
</div>
</div>
<div class="channel_head_con_two">
<div>
<p style="display:flex;justify-content:flex-start;margin-left:15px;"><span style="color:#3749A9;font-size:16px;font-weight:bold;">90%</span></p>
<p style="color:#3646AF;font-size:14px;margin-left:15px;">网点期交活动率</p>
<p class="channel_head_con_num">
<span class="channel_head_con_num_span">90%</span>
</p>
<p class="channel_head_con_mark">网点期交活动率</p>
</div>
</div>
</div>
<div style="width:calc(100% - 20px);height:40px;margin:10px;">
<div style="display:flex;justify-content:space-between;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<span style="color:#3749A9;background:#F4F6FF;padding:6px;border-radius:3px;font-weight:bold;font-size:14px;">渠道业绩</span>
<span style="color:#333333;font-size:14px;margin-left:5px;">网点业绩</span>
<div class="channelORnetween_list_head">
<div class="channelORnetween_list_head_con">
<div class="channelORnetween_list_head_button_con">
<button class="activeChannel">渠道业绩</button>
<button class="unActiveChannel">网点业绩</button>
</div>
<div style="color:#3749A9;background:#F7F7F7;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:bold;">保费排序</div>
<div class="channelORnetween_list_head_button_right">保费排序</div>
</div>
<!-- <div style="display:flex;justify-content:space-between;align-items:center;">
<p v-if="channelORnetwork == 'channel'" style="color:#3749A9;background:#F4F6FF;padding:6px;border-radius:3px;font-weight:bold;font-size:14px;">渠道业绩</p>
<p v-if="channelORnetwork == 'network'" style="color:#333333;font-size:14px;margin-left:5px;">渠道业绩</p>
<p v-if="channelORnetwork == 'network'" style="color:#333333;font-size:14px;margin-left:5px;">网点业绩</p>
<p v-if="channelORnetwork == 'channel'" style="color:#3749A9;background:#F4F6FF;padding:6px;border-radius:3px;font-weight:bold;font-size:14px;">网点业绩</p>
</div> -->
</div>
<div style="width:calc(100% - 20px);margin:10px;">
<div v-for="item in channelORnetworkData" >
<div style="margin-bottom:15px;border:1px solid #eee;border-radius:8px;">
<div style="display:flex;justify-content:space-between;align-items:center;height:50px;background:#EEEEEE;">
<div style="display:flex;align-items:center;">
<img style="width:20px;height:20px;margin-left:10px;" src="@/assets/YB_APP/images/33.png">
<span style="font-size:14px;color:#333;margin-left:10px;font-weight:bold;">中国工商银行</span>
<div class="channelORnetween_list">
<div v-for="(item,index) in echartsData" >
<div class="channelORnetween_list_con">
<div class="channelORnetween_list_maincon">
<div class="channelORnetween_list_maincon_title">
<img class="channelORnetween_list_maincon_title_img" v-if="index == 0" src="@/assets/YB_APP/images/33.png">
<img class="channelORnetween_list_maincon_title_img" v-if="index != 0" src="@/assets/YB_APP/images/34.png">
<span class="channelORnetween_list_maincon_title_span">中国工商银行</span>
</div>
<div class="channelORnetween_list_maincon_title_mark">
<span class="channelORnetween_list_maincon_title_mark_span">总保费</span>
<span class="channelORnetween_list_maincon_title_mark_money">￥200.0
<span class="markMoneyUnit">万元</span>
</span>
</div>
</div>
<div style="margin-right:10px;">
<span style="color:#999;font-size:14px;margin-right:5px;">总保费</span>
<span style="color:#D6313F;font-size:16px;font-weight:bold;">￥200.0
<span style="font-size:12px;">万元</span>
</span>
<div class="listInfoCon">
<div class="listInfoParts">
<p class="listInfoP">
<span class="listInfoP_spanOne">122.6</span>
<span class="listInfoP_spanTwo">万元</span>
</p>
<p class="listInfoMark">趸交保费</p>
<div class="listInfoLine"></div>
</div>
<div class="listInfoParts">
<p class="listInfoP">
<span class="listInfoP_spanOne">66.5</span>
<span class="listInfoP_spanTwo">万元</span>
</p>
<p class="listInfoMark">银保期交保费</p>
<div class="listInfoLine"></div>
</div>
<div class="listInfoParts">
<p class="listInfoP">
<span class="listInfoP_spanOne">115.6</span>
<span class="listInfoP_spanTwo">万元</span>
</p>
<p class="listInfoMark">传统期交保费</p>
</div>
</div>
</div>
<div style="display:flex;align-items:center;height:100px;">
<div style="width:33.3%;position:relative;">
<p style="line-height:30px;">
<span style="font-size:16px;font-weight:bold;color:#333;">122.6</span>
<span style="color:#333;font-size:12px;font-weight:bold;">万元</span>
</p>
<p style="font-size:12px;color:#999;line-height:30px;">趸交保费</p>
<div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
</div>
<div style="width:33.3%;position:relative;">
<p style="line-height:30px;">
<span style="font-size:16px;font-weight:bold;color:#333;">66.5</span>
<span style="color:#333;font-size:12px;font-weight:bold;">万元</span>
</p>
<p style="font-size:12px;color:#999;line-height:30px;">银保期交保费</p>
<div style="position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;"></div>
</div>
<div style="width:33.3%;">
<p style="line-height:30px;">
<span style="font-size:16px;font-weight:bold;color:#333;">115.6</span>
<span style="color:#333;font-size:12px;font-weight:bold;">万元</span>
</p>
<p style="font-size:12px;color:#999;line-height:30px;">传统期交保费</p>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -204,7 +202,7 @@
data() {
return {
premType:'QJ',
channelORnetwork:'channel',
channelORnetworkType:'channel',
activeProductIndex:'',
calendarValue:'',
calendarShow:false,
@@ -220,15 +218,6 @@
{ value: 70, scale:'21.8%', name: '银销个' ,color:'#fcd439',thisId:'006',},
{ value: 50, scale:'15.6%', name: '节节高B款' ,color:'#fc7d82',thisId:'007',},
],
channelORnetworkData:[
{ value: 50, scale:'15.6%', name: '节节高',color:'#768dfe',thisId:'001',},
{ value: 30, scale:'9.3%', name: '鸿利两全' ,color:'#7784a2',thisId:'002',},
{ value: 50, scale:'15.6%', name: '福享年年' ,color:'#38cbcb',thisId:'003',},
{ value: 40, scale:'12.5%', name: '年年丰' ,color:'#a5e1fc',thisId:'004',},
{ value: 30, scale:'9.3%', name: '银销健' ,color:'#e8bfa4',thisId:'005',},
{ value: 70, scale:'21.8%', name: '银销个' ,color:'#fcd439',thisId:'006',},
{ value: 50, scale:'15.6%', name: '节节高B款' ,color:'#fc7d82',thisId:'007',},
],
incomeOption :{
color: ["#768dfe", "#7784a2", "#38cbcb", "#a5e1fc", "#e8bfa4",'#fcd439','#fc7d82'],
title: {
@@ -238,7 +227,7 @@
y: "center",
textStyle: {
fontWeight: "normal",
color: "#000000FF",
color: "#000",
fontSize: 24,
lineHeight: 18,
},
@@ -576,4 +565,85 @@
background-repeat: no-repeat;
background-size: cover;
}
.activeChannel{
color:#3749A9;background:#F4F6FF;padding:6px;border-radius:3px;font-weight:bold;font-size:14px;border:none;
}
.unActiveChannel{
color:#333333;font-size:14px;margin-left:5px;border:none;background:#fff;
}
.channel_head_con_num{
display:flex;justify-content:flex-start;margin-left:15px;
}
.channel_head_con_num_span{
color:#3749A9;font-size:16px;font-weight:bold;
}
.channel_head_con_mark{
color:#3646AF;font-size:14px;margin-left:15px;
}
.channel_head_con_num_span_unit{
color:#3646AF;font-size:12px;
}
.channelORnetween_list_head{
width:calc(100% - 20px);height:40px;margin:10px;
}
.channelORnetween_list_head_con{
display:flex;justify-content:space-between;
}
.channelORnetween_list_head_button_con{
display:flex;justify-content:space-between;align-items:center;
}
.channelORnetween_list_head_button_right{
color:#3749A9;background:#F7F7F7;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:bold;
}
.channelORnetween_list{
width:calc(100% - 20px);margin:10px;
}
.channelORnetween_list_con{
margin-bottom:15px;border:1px solid #eee;border-radius:8px;
}
.channelORnetween_list_maincon{
display:flex;justify-content:space-between;align-items:center;height:50px;background:#EEEEEE;
}
.channelORnetween_list_maincon_title{
display:flex;align-items:center;
}
.channelORnetween_list_maincon_title_img{
width:20px;height:20px;margin-left:10px;
}
.channelORnetween_list_maincon_title_span{
font-size:14px;color:#333;margin-left:10px;font-weight:bold;
}
.channelORnetween_list_maincon_title_mark{
margin-right:10px;
}
.channelORnetween_list_maincon_title_mark_span{
color:#999;font-size:12px;margin-right:5px;
}
.channelORnetween_list_maincon_title_mark_money{
color:#D6313F;font-size:16px;font-weight:bold;
}
.markMoneyUnit{
font-size:12px;
}
.listInfoCon{
display:flex;align-items:center;height:100px;
}
.listInfoParts{
width:33.3%;position:relative;
}
.listInfoP{
line-height:30px;
}
.listInfoP_spanOne{
font-size:16px;font-weight:bold;color:#333;
}
.listInfoP_spanTwo{
color:#333;font-size:12px;font-weight:bold;
}
.listInfoMark{
font-size:12px;color:#999;line-height:30px;
}
.listInfoLine{
position:absolute;right: 0px;width: 1px;background: #eee;top: calc(50% - 10px);height: 20px;
}
</style>