mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-13 13:06:43 +08:00
811 lines
27 KiB
Vue
811 lines
27 KiB
Vue
<template>
|
|
<div class="public_container">
|
|
<div class="myhead">
|
|
<div>
|
|
<span class="QJactive" v-if="premType == 'QJ'" @click="changePremType('QJ')">首期业务</span>
|
|
<span class="GMunActice" v-if="premType == 'GM'" @click="changePremType('QJ')">首期业务</span>
|
|
<span class="QJunActice" v-if="premType == 'QJ'" @click="changePremType('GM')">渠道网点数据</span>
|
|
<span class="GMactive" v-if="premType == 'GM'" @click="changePremType('GM')">渠道网点数据</span>
|
|
</div>
|
|
<div>
|
|
<span @click="clickCalendar" class="headDate">{{calendarValue}} ▼</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="premType == 'QJ'" class="mainContainerQJ">
|
|
<p class="mainContainer_title">
|
|
<img class="mainContainer_title_img" src="@/assets/YB_APP/images/33.png">
|
|
<span class="mainContainer_title_span">首期规模保费</span>
|
|
</p>
|
|
<div v-show="echartsData.length != 0" class="echartsContent">
|
|
<div class="incomeChart" ref="incomeChart" id="incomeChartId" @click="parentsEvent"></div>
|
|
</div>
|
|
|
|
<div v-if="echartsData.length == 0">
|
|
<img class="mainContainer_title_noData_img" src="@/assets/YB_APP/images/39.png">
|
|
<p class="mainContainer_title_noData_p">暂无保费,继续努力吧~</p>
|
|
</div>
|
|
|
|
<div v-if="echartsData.length != 0" class="echartsIconContent">
|
|
<div class="echartsIconContent_main">
|
|
<div v-for="(item,index) in echartsData" class="echartsDatalist">
|
|
<div v-if="activeProductIndex == item.thisId" style="background:#fff;">
|
|
<div class="activeProductContent">
|
|
<p class="echartsDatalist_p" style="color:#000;font-weight:bold;">{{item.value}}万元</p>
|
|
<p class="echartsDatalist_p"><span class="productName_p" :style='{background:item.color}'></span>{{item.name}}</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="activeProductIndex != item.thisId" style="background:#fafafc;">
|
|
<div class="unActiveProductContent">
|
|
<p class="echartsDatalist_p" style="color:#000;font-weight:bold;">{{item.value}}万元</p>
|
|
<p class="echartsDatalist_p"><span class="productName_p" :style="{background:item.color}"></span>{{item.name}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div></div>
|
|
|
|
<div class="otherContent">
|
|
<div class="otherContent_con">
|
|
<p class="otherContent_con_title">
|
|
<img class="otherContent_con_title_img" src="@/assets/YB_APP/images/34.png">
|
|
<span class="otherContent_con_title_span">人力指标</span>
|
|
</p>
|
|
<div style="display:flex;">
|
|
<div class="otherContent_con_one">
|
|
<div>
|
|
<p v-if="qjrlFlag == 1" class="otherContent_con_top_p">
|
|
<span style="color:green;">达标</span>
|
|
<img class="otherContent_con_one_img" src="@/assets/YB_APP/images/40.png">
|
|
</p>
|
|
<p v-if="qjrlFlag == 0" class="otherContent_con_top_p">
|
|
<span style="color:#cf3d52;">未达标</span>
|
|
<img class="otherContent_con_one_img" src="@/assets/YB_APP/images/38.png">
|
|
</p>
|
|
<p class="otherContent_con_bottom_p">
|
|
<span>期交活动人力</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="otherContent_con_two" style="margin-left:2%;">
|
|
<div>
|
|
<p v-if="ggrlFlag == 1" class="otherContent_con_top_p">
|
|
<span style="color:green;">达标</span>
|
|
<img class="otherContent_con_one_img" src="@/assets/YB_APP/images/40.png">
|
|
</p>
|
|
<p v-if="ggrlFlag == 0" class="otherContent_con_top_p">
|
|
<span style="color:#cf3d52;">未达标</span>
|
|
<img class="otherContent_con_one_img" src="@/assets/YB_APP/images/38.png">
|
|
</p>
|
|
<p class="otherContent_con_bottom_p">
|
|
<span>桂冠人力</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="otherContent_con_three" style="margin-left:2%;">
|
|
<div>
|
|
<p class="otherContent_con_top_p">
|
|
<span style="color:#e8bfa4;">连续{{gghymonth}}月</span>
|
|
</p>
|
|
<p class="otherContent_con_bottom_p">
|
|
<span>桂冠会员</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="premType == 'QJ'" class="myFooter">
|
|
<button class="myFooter_button" @click="goPolicyDetail">查询客户保单</button>
|
|
</div>
|
|
|
|
<div v-show="premType == 'GM'" class="mainContainerGM">
|
|
<p class="mainContainer_title">
|
|
<img class="mainContainer_title_img" src="@/assets/YB_APP/images/33.png">
|
|
<span class="mainContainer_title_span">网点数据</span>
|
|
</p>
|
|
|
|
<div class="channel_head">
|
|
<div class="channel_head_con_one">
|
|
<div>
|
|
<p class="channel_head_con_num">
|
|
<span class="channel_head_con_num_span">
|
|
{{bankNetCount}}<span class="channel_head_con_num_span channel_head_con_num_span_unit">个</span>
|
|
</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 class="channel_head_con_num">
|
|
<span class="channel_head_con_num_span">{{qjhdl}}%</span>
|
|
</p>
|
|
<p class="channel_head_con_mark">网点期交活动率</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="channelORnetween_list_head">
|
|
<div class="channelORnetween_list_head_con">
|
|
<div class="channelORnetween_list_head_button_con">
|
|
<div :class="channelORnetworkType == 'channel'?'activeChannel':'unActiveChannel'" @click="changeChannelORnetworkType('channel')" >渠道业绩</div>
|
|
<div :class="channelORnetworkType == 'network'?'activeChannel':'unActiveChannel'" @click="changeChannelORnetworkType('network')">网点业绩</div>
|
|
</div>
|
|
<div @click="changeSortType" class="channelORnetween_list_head_button_right" style="display:flex;align-items:center;">
|
|
<span style="margin-right:5px;">保费排序</span>
|
|
<img v-if="sortType == '1'" style="width:7px;height:14px;" src="@/assets/YB_APP/images/44.png">
|
|
<img v-if="sortType == '2'" style="width:7px;height:14px;" src="@/assets/YB_APP/images/45.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="channelORnetween_list" >
|
|
<div v-if="channelORnetworkData.length != 0" v-for="(item,index) in channelORnetworkData" >
|
|
<div class="channelORnetween_list_con">
|
|
<div class="channelORnetween_list_maincon">
|
|
<div class="channelORnetween_list_maincon_title">
|
|
<img class="channelORnetween_list_maincon_title_img" :src="item.bankRoute">
|
|
<span class="channelORnetween_list_maincon_title_span">{{item.bankName}}</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">
|
|
<span>￥{{item.sumprem}}</span>
|
|
<span class="markMoneyUnit">万元</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="listInfoCon">
|
|
<div class="listInfoParts">
|
|
<p class="listInfoP">
|
|
<span class="listInfoP_spanOne">{{item.djprem}}</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">{{item.ybqjprem}}</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">{{item.ctqjprem}}</span>
|
|
<span class="listInfoP_spanTwo">万元</span>
|
|
</p>
|
|
<p class="listInfoMark">传统期交保费</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="channelORnetworkData.length == 0" style="display:flex;justify-content:center;align-items:center;height:400px;position:relative;">
|
|
|
|
<img style="width:60%" src="@/assets/YB_APP/images/43.png">
|
|
<span style="position:absolute;bottom:138px;left:calc(50% - 33px);">暂无业绩</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<van-popup v-model="calendarShow" position="bottom">
|
|
<van-datetime-picker
|
|
v-model="currentDate"
|
|
type="year-month"
|
|
title="选择日期"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
@cancel="handleCurrentDateCancel"
|
|
@confirm="handleCurrentDateConfirm"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Button } from 'vant'
|
|
import utils from '@/assets/js/utils/date-utils'
|
|
import echarts from 'echarts'
|
|
import { getPremByAgentCode, getIndexByAgentCode, getBankNetDataYB, getChannelPerformanceYB, getBankNetPerformanceYB } from '@/api/YB_APP/index'
|
|
|
|
export default {
|
|
name: 'policyDetail',
|
|
components: {
|
|
[Button.name]: Button,
|
|
},
|
|
data() {
|
|
return {
|
|
premType:'QJ',
|
|
qjrlFlag:'',
|
|
ggrlFlag:'',
|
|
gghymonth:'0',
|
|
bankNetCount:'0',
|
|
qjhdl:'0',
|
|
sortType:'1',
|
|
channelORnetworkType:'channel',
|
|
activeProductIndex:'',
|
|
calendarValue:'',
|
|
calendarShow:false,
|
|
currentDate:new Date(),
|
|
minDate: new Date(2019, 1, 1),
|
|
maxDate: new Date(2030, 12, 31),
|
|
echartsData:[],
|
|
channelORnetworkData:[],
|
|
incomeOption :{
|
|
color: ["#768dfe", "#7784a2", "#38cbcb", "#a5e1fc", "#e8bfa4",'#fcd439','#fc7d82'],
|
|
title: {
|
|
text: '',
|
|
subtext:'总保费',
|
|
x: "center",
|
|
y: "center",
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
color: "#000",
|
|
fontSize: 24,
|
|
lineHeight: 18,
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 14,
|
|
color: "#666",
|
|
lineHeight: 10,
|
|
},
|
|
},
|
|
// tooltip: {
|
|
// show: true,
|
|
// },
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
// backgroundColor:'#fff',
|
|
borderColor:'#eee',
|
|
color: '#fff',
|
|
formatter: function (params) {
|
|
// console.log(params,111)
|
|
return (
|
|
'<span style="color:#333;">渠道 </span>'+'<span style="color:#858bd6;margin-left:20px;">'+params.data.name +
|
|
'</span>'+'<br/>' +
|
|
'<span style="color:#333;">占比 </span>'+'<span style="color:#858bd6;margin-left:20px;">'+params.data.scale +
|
|
'</span>'+'<br/>' +
|
|
'<span style="color:#333;">金额 </span>'+'<span style="color:#858bd6;margin-left:20px;">'+params.data.value +'万元'+
|
|
'</span>'
|
|
|
|
);
|
|
}
|
|
},
|
|
legend: {
|
|
show:false
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['46%', '61%'],
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
show: true,
|
|
position: 'center',
|
|
color:'#000',
|
|
fontSize:'20',
|
|
formatter: function (data) {
|
|
return ''
|
|
},
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '20',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
},
|
|
}
|
|
},
|
|
mounted(){
|
|
|
|
let yearNum = new Date().getFullYear()
|
|
let monthNum = new Date().getMonth()+1
|
|
this.calendarValue = yearNum+'-'+monthNum
|
|
this.getPremByAgentCode()
|
|
this.getIndexByAgentCode()
|
|
},
|
|
methods:{
|
|
getPremByAgentCode(){
|
|
let params = {
|
|
currentMonth: this.calendarValue
|
|
}
|
|
getPremByAgentCode(params).then(res=>{
|
|
if(res.result == 0){
|
|
this.echartsData = []
|
|
this.incomeOption.series[0].data = []
|
|
this.incomeOption.title.text = res.content.decimalAll + '万元'
|
|
if(res.content.premDTOList && res.content.premDTOList.length!=0){
|
|
this.echartsData = []
|
|
this.incomeOption.series[0].data = []
|
|
res.content.premDTOList.forEach(item=>{
|
|
this.echartsData.push({
|
|
value: item.allprem,
|
|
scale:item.percentage,
|
|
name: item.riskname,
|
|
thisId:item.riskcode
|
|
})
|
|
this.incomeOption.series[0].data.push({
|
|
value: item.allprem,
|
|
scale:item.percentage,
|
|
name: item.riskname,
|
|
thisId:item.riskcode
|
|
})
|
|
})
|
|
this.echartsData.forEach((item,index)=>{
|
|
item.color = this.incomeOption.color[index]
|
|
})
|
|
}
|
|
this.$nextTick(()=>{
|
|
this.incomeChart = echarts.init(this.$refs.incomeChart)
|
|
this.incomeChart.on('click',this.echartsClick)
|
|
this.incomeChart.setOption(this.incomeOption)
|
|
})
|
|
|
|
}else{
|
|
this.echartsData = []
|
|
this.incomeOption.series[0].data = []
|
|
this.$toast(res.resultMessage)
|
|
}
|
|
})
|
|
},
|
|
getIndexByAgentCode(){
|
|
let params = {
|
|
currentMonth: this.calendarValue
|
|
}
|
|
getIndexByAgentCode(params).then(res=>{
|
|
if(res.result == 0){
|
|
this.qjrlFlag = res.content.qjrlFlag
|
|
this.ggrlFlag = res.content.ggrlFlag
|
|
this.gghymonth = res.content.gghymonth
|
|
if(!this.gghymonth){
|
|
this.gghymonth = 0
|
|
}
|
|
}else{
|
|
this.$toast(res.resultMessage)
|
|
}
|
|
})
|
|
},
|
|
getBankNetDataYB(){
|
|
let params = {
|
|
currentMonth:this.calendarValue
|
|
}
|
|
getBankNetDataYB(params).then(res=>{
|
|
if(res.result == 0){
|
|
if(res.content.bankNetCount){this.bankNetCount = res.content.bankNetCount}
|
|
if(res.content.qjhdl){this.qjhdl = res.content.qjhdl}
|
|
}else{
|
|
this.$toast(res.resultMessage)
|
|
}
|
|
})
|
|
},
|
|
getChannelPerformanceYB(){
|
|
let params = {
|
|
currentMonth:this.calendarValue,
|
|
}
|
|
if(this.sortType == 2){
|
|
params.isDesc = true
|
|
}else{
|
|
params.isAsc = true
|
|
}
|
|
getChannelPerformanceYB(params).then(res=>{
|
|
if(res.result == 0){
|
|
this.channelORnetworkData = []
|
|
if(res.content && res.content.length != 0){
|
|
this.channelORnetworkData = res.content
|
|
}
|
|
}else{
|
|
this.$toast(res.resultMessage)
|
|
}
|
|
})
|
|
},
|
|
getBankNetPerformanceYB(){
|
|
let params = {
|
|
currentMonth:this.calendarValue
|
|
}
|
|
if(this.sortType == 2){
|
|
params.isDesc = true
|
|
}else{
|
|
params.isAsc = true
|
|
}
|
|
getBankNetPerformanceYB(params).then(res=>{
|
|
if(res.result == 0){
|
|
this.channelORnetworkData = []
|
|
if(res.content && res.content.length != 0){
|
|
this.channelORnetworkData = res.content
|
|
}
|
|
}else{
|
|
this.$toast(res.resultMessage)
|
|
}
|
|
})
|
|
},
|
|
changeSortType(){
|
|
if(this.sortType == 1){
|
|
this.sortType = 2
|
|
}else{
|
|
this.sortType = 1
|
|
}
|
|
if(this.channelORnetworkType == 'channel'){
|
|
this.getChannelPerformanceYB()
|
|
}else{
|
|
this.getBankNetPerformanceYB()
|
|
}
|
|
},
|
|
changeChannelORnetworkType(type){
|
|
if(this.channelORnetworkType != type){
|
|
this.channelORnetworkType = type
|
|
if(this.channelORnetworkType == 'channel'){
|
|
this.getChannelPerformanceYB()
|
|
}else{
|
|
this.getBankNetPerformanceYB()
|
|
}
|
|
}
|
|
},
|
|
parentsEvent(){
|
|
this.activeProductIndex = ''
|
|
},
|
|
echartsClick(params){
|
|
params.event.stop()
|
|
this.activeProductIndex = params.data.thisId
|
|
},
|
|
clickCalendar(){
|
|
this.calendarShow = true
|
|
},
|
|
handleCurrentDateCancel() {
|
|
this.calendarShow = false
|
|
},
|
|
handleCurrentDateConfirm(e) {
|
|
this.calendarShow = false
|
|
// let titleTime = utils.formatDate(e, 'yyyy-MM')
|
|
// this.calendarValue = utils.formatDate(e, 'MM-dd')
|
|
let yearNum = utils.formatDate(e, 'yyyy')
|
|
let monthNum = utils.formatDate(e, 'MM')
|
|
this.calendarValue = yearNum+'-'+monthNum
|
|
if(this.premType == 'QJ'){
|
|
this.getPremByAgentCode()
|
|
this.getIndexByAgentCode()
|
|
}else{
|
|
this.getBankNetDataYB()
|
|
if(this.channelORnetworkType == 'channel'){
|
|
this.getChannelPerformanceYB()
|
|
}else{
|
|
this.getBankNetPerformanceYB()
|
|
}
|
|
}
|
|
},
|
|
changePremType(type){
|
|
if(this.premType != type){
|
|
this.premType = type
|
|
if(this.premType == 'QJ'){
|
|
this.getPremByAgentCode()
|
|
this.getIndexByAgentCode()
|
|
}else{
|
|
this.getBankNetDataYB()
|
|
if(this.channelORnetworkType == 'channel'){
|
|
this.getChannelPerformanceYB()
|
|
}else{
|
|
this.getBankNetPerformanceYB()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
goPolicyDetail(){
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + '/#/YB_APP/policyList?date=' + this.calendarValue,
|
|
},
|
|
routerInfo: {
|
|
path: '/YB_APP/policyList?date=' + this.calendarValue,
|
|
},
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.myhead{
|
|
display:flex;justify-content: space-between;padding: 25px 15px;background: #fff;
|
|
}
|
|
.QJactive{
|
|
background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;
|
|
}
|
|
.GMunActice{
|
|
background:#fff;color: #9698c6;font-size: 12px;padding: 10px 15px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;border: 1px solid #3949ac;border-right: none;letter-spacing: 1px;border-left: 1px solid #3949ac;
|
|
}
|
|
.QJunActice{
|
|
background:#fff;color: #9698c6;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;border-right: 1px solid #3949ac;
|
|
}
|
|
.GMactive{
|
|
background:#3949ac;color: #fff;font-weight: bold;font-size: 12px;padding: 10px 15px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border: 1px solid #3949ac;border-left: none;letter-spacing: 1px;
|
|
}
|
|
.headDate{
|
|
background:#f2f2f2;font-weight: bold;padding: 8px 15px;border-radius: 15px;font-size: 12px;
|
|
}
|
|
.mainContainerQJ{
|
|
margin:15px 10px 10px;
|
|
border-radius:5px;
|
|
background:#fff;
|
|
width:calc(100vw - 20px);
|
|
text-align:center;
|
|
}
|
|
.mainContainerGM{
|
|
margin:15px 10px 10px;
|
|
border-radius:5px;
|
|
background:#fff;
|
|
width:calc(100vw - 20px);
|
|
text-align:center;
|
|
}
|
|
.echartsContent{
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
width:100%;
|
|
height:350px;
|
|
}
|
|
.incomeChart{
|
|
width:calc(100% - 20px);
|
|
height:calc(100% - 20px);
|
|
/*border:1px solid #eee;*/
|
|
}
|
|
.echartsIconContent{
|
|
width:100%;
|
|
height:200px;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
.echartsIconContent_main{
|
|
width:calc(100% - 20px);
|
|
height:calc(100% - 20px);
|
|
/*border:1px solid #eee;*/
|
|
background:#fafafc;
|
|
border-radius:5px;
|
|
text-align:left;
|
|
}
|
|
.otherContent{
|
|
width:100%;
|
|
height:150px;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
.otherContent_con{
|
|
width:calc(100% - 20px);
|
|
height:calc(100% - 20px);
|
|
/*border:1px solid #eee;*/
|
|
}
|
|
.myFooter{
|
|
width:100%;
|
|
display:flex;
|
|
justify-content:center;
|
|
margin-top:15px;
|
|
padding-bottom:15px;
|
|
}
|
|
.myFooter_button{
|
|
background:#fe3b44;
|
|
border-radius:25px;
|
|
padding:10px 30px;
|
|
color:#ffff;
|
|
border:none;
|
|
font-size:14px;
|
|
letter-spacing:1px;
|
|
}
|
|
.productName_p{
|
|
width:8px;height:8px;border-radius:2px;background:red;display:inline-block;margin-right:5px
|
|
}
|
|
.activeProductContent{
|
|
padding:10px;text-align:center;border-radius:5px;box-shadow:0px 1px 2px 0px #333;
|
|
}
|
|
.echartsDatalist{
|
|
display:inline-block;width:31%;margin:5px 1%;
|
|
}
|
|
.echartsDatalist_p{
|
|
line-height:20px;
|
|
font-size:14px;
|
|
}
|
|
.unActiveProductContent{
|
|
padding:3px;text-align:center;
|
|
}
|
|
.otherContent_con_one{
|
|
border-radius:5px;
|
|
padding:10px 15px;
|
|
width:32%;
|
|
height:55px;
|
|
display:flex;
|
|
align-items:center;
|
|
background-image: url("../../assets/YB_APP/images/35.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.otherContent_con_two{
|
|
border-radius:5px;
|
|
padding:10px 15px;
|
|
width:32%;
|
|
height:55px;
|
|
display:flex;
|
|
align-items:center;
|
|
background-image: url("../../assets/YB_APP/images/37.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.otherContent_con_three{
|
|
border-radius:5px;
|
|
padding:10px 15px;
|
|
width:32%;
|
|
height:55px;
|
|
display:flex;
|
|
align-items:center;
|
|
background-image: url("../../assets/YB_APP/images/36.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.mainContainer_title{
|
|
display:flex;align-items: center;padding: 15px 0px 0px 20px;
|
|
}
|
|
.mainContainer_title_img{
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
.mainContainer_title_span{
|
|
font-size: 16px;font-weight: bold;margin-left: 12px;
|
|
}
|
|
.otherContent_con_title{
|
|
display:flex;align-items: center;padding: 5px 0px 10px 10px;
|
|
}
|
|
.otherContent_con_title_img{
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
.otherContent_con_title_span{
|
|
font-size: 16px;font-weight: bold;margin-left: 12px;
|
|
}
|
|
.otherContent_con_top_p{
|
|
font-size:14px;display:flex;justify-content:flex-start;align-items:center;font-weight:bold;
|
|
}
|
|
.otherContent_con_one_img{
|
|
width:16px;height:16px;margin-left:10px;
|
|
}
|
|
.otherContent_con_bottom_p{
|
|
font-size:12px;font-weight:bold;display:flex;justify-content:flex-start;
|
|
}
|
|
.mainContainer_title_noData_img{
|
|
width:80%;
|
|
height:250px;
|
|
}
|
|
.mainContainer_title_noData_p{
|
|
width:100%;
|
|
text-align:center;
|
|
color:#999;
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
margin-bottom:20px;
|
|
}
|
|
.channel_head{
|
|
width:100%;
|
|
display:flex;
|
|
justify-content:center;
|
|
}
|
|
.channel_head_con_one{
|
|
border-radius:5px;
|
|
width:48%;
|
|
margin:15px 1%;
|
|
height:75px;
|
|
display:flex;
|
|
align-items:center;
|
|
background-image: url("../../assets/YB_APP/images/41.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.channel_head_con_two{
|
|
border-radius:5px;
|
|
width:48%;
|
|
margin:15px 1%;
|
|
height:75px;
|
|
display:flex;
|
|
align-items:center;
|
|
background-image: url("../../assets/YB_APP/images/42.png");
|
|
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;
|
|
margin:5px;
|
|
}
|
|
.unActiveChannel{
|
|
color:#333333;font-size:14px;margin:5px;border:none;background:#fff;padding:6px;
|
|
}
|
|
.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;line-height:30px;
|
|
}
|
|
.channel_head_con_mark{
|
|
color:#3646AF;font-size:14px;margin-left:15px;
|
|
}
|
|
.channel_head_con_num_span_unit{
|
|
color:#3646AF;font-size:14px;
|
|
}
|
|
.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;display:flex;justify-content:center;align-items:center;height:20px;
|
|
}
|
|
.channelORnetween_list{
|
|
width:calc(100% - 20px);margin:10px;
|
|
padding-bottom:10px;
|
|
}
|
|
.channelORnetween_list_con{
|
|
margin-bottom:15px;border:1px solid #eee;border-radius:8px;overflow:hidden;
|
|
}
|
|
.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;width:130px;
|
|
}
|
|
.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>
|