diff --git a/src/views/YB_APP/performanceQuery.vue b/src/views/YB_APP/performanceQuery.vue
index 6c736a26e..71c1da1e7 100644
--- a/src/views/YB_APP/performanceQuery.vue
+++ b/src/views/YB_APP/performanceQuery.vue
@@ -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>