<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>
