【银保app】新增上头条和业绩查询功能

src/views/YB_APP/hitTheHeadlines.vue

@@ -8,7 +8,7 @@
         <span class="GMactive" v-if="premType == 'GM'" @click="changePremType('GM')">总规模保费</span>
       </div>
       <div>
-        <span class="headDate">2022-09 ▼</span>
+        <span @click="clickCalendar" class="headDate">{{calendarValue}} ▼</span>
       </div>
     </div>
 
@@ -144,12 +144,24 @@
         </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 { getPersonPremYB, getDeptPremYB } from '@/api/YB_APP/index'
+  import utils from '@/assets/js/utils/date-utils'
   export default {
     name: 'hitTheHeadlines',
     components: {
@@ -159,29 +171,13 @@
       return {
         premType:'QJ',
         dataType:1,
+        calendarValue:'',
+        calendarShow:false,
+        currentDate:new Date(),
+        minDate: new Date(2019, 1, 1),
+        maxDate: new Date(2030, 12, 31),
         top3Data:[],
-        tableData:[
+        tableData:[],
-          {acceptTime:'TOP1',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP2',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'王豆豆',prem:'10.2'},
-          {acceptTime:'TOP3',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'赵倩',prem:'10.2'},
-          {acceptTime:'TOP4',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP5',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP6',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP7',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP8',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP9',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP10',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP11',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP12',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP13',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP14',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP15',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP16',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP17',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP18',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP19',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-          {acceptTime:'TOP20',companyName:'广西',orgName:'河池',deptName:'申旺部',agentName:'张强',prem:'10.2'},
-        ],
       }
     },
     mounted(){
@@ -190,8 +186,30 @@
       }else{
         this.getDeptPremYB()
       }
+      let yearNum = new Date().getFullYear()
+      let monthNum = new Date().getMonth()+1
+      this.calendarValue = yearNum+'-'+monthNum
     },
     methods:{
+      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.dataType == 1){
+          this.getPersonPremYB()
+        }else{
+          this.getDeptPremYB()
+        }
+      },
       getPersonPremYB(){
         let params = {
           currentMonth:'2022-10',

src/views/YB_APP/mine.vue

@@ -132,7 +132,7 @@ export default {
               // 头像上传成功
               let uploadData = uploadResult.content
               // 新头像URL
-              this.imagePath = uploadData.imageUrl
+              this.userInfo.agentHeadImgUrl = uploadData.imageUrl
           } else if(uploadResult.code==1) {
               //头像选择或上传失败 错误信息
               let errorMessage = uploadResult.message

src/views/YB_APP/performanceQuery.vue

@@ -1,12 +1,201 @@
 <template>
   <div class="public_container">
-    <span>业绩查询</span>
+    <div class="myhead">
-    <van-button type="primary" @click="goPolicyDetail">主要按钮</van-button>
+      <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-if="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-if="echartsData.length != 0 && premType == 'QJ'" class="echartsContent">
+        <div v-if="echartsData.length != 0 && premType == 'QJ'" class="incomeChart" ref="incomeChart" @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 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 class="otherContent_con_bottom_p">
+                  <span>期交活动人力</span>
+                </p>
+              </div>
+            </div>
+            <div class="otherContent_con_two" style="margin-left:2%;">
+              <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">
+                </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;">连续6月</span>
+                </p>
+                <p class="otherContent_con_bottom_p">
+                  <span>桂冠会员</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div v-if="premType == 'QJ'" class="myFooter">
+      <button class="myFooter_button">查询客户保单</button>
+    </div>
+
+    <div v-if="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 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>
+          </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>
+          </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>
+          <div style="color:#3749A9;background:#F7F7F7;padding:6px 10px;border-radius:20px;font-size:12px;font-weight:bold;">保费排序</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>
+            <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>
+          </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>
+    
+    <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'
   export default {
     name: 'policyDetail',
     components: {
@@ -14,13 +203,160 @@
     },
     data() {
       return {
+        premType:'QJ',
+        channelORnetwork:'channel',
+        activeProductIndex:'',
+        calendarValue:'',
+        calendarShow:false,
+        currentDate:new Date(),
+        minDate: new Date(2019, 1, 1),
+        maxDate: new Date(2030, 12, 31),
+        echartsData:[
+          { 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',},
+        ],
+        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: {
+            text: '200.0万元',
+            subtext:'总保费',
+            x: "center",
+            y: "center",
+            textStyle: {
+              fontWeight: "normal",
+              color: "#000000FF",
+              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: [
+                { 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',},
+              ]
+            }
+          ]
+        },
       }
     },
     mounted(){
+      let yearNum = new Date().getFullYear()
+      let monthNum = new Date().getMonth()+1
+      this.calendarValue = yearNum+'-'+monthNum
 
+      this.incomeChart = echarts.init(this.$refs.incomeChart)
+      
+      this.incomeChart.on('click',this.echartsClick)
+      this.incomeChart.setOption(this.incomeOption)
     },
     methods:{
+      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
+        
+      },
+      changePremType(type){
+        if(this.premType != type){
+          this.premType = type
+          if(this.premType == 'QJ'){
+            this.$nextTick(()=>{
+              this.incomeChart = echarts.init(this.$refs.incomeChart)
+              this.incomeChart.on('click',this.echartsClick)
+              this.incomeChart.setOption(this.incomeOption)
+            })
+          }
+        }
+      },
       goPolicyDetail(){
         this.$jump({
           flag: 'h5',
@@ -36,5 +372,208 @@
   }
 </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;
+  }
 </style>