From 57094ef66e4afb413c39ecd181e65938315c195c Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:41:26 +0800
Subject: [PATCH] hyj change shhuang

---
 src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue |  147 +++++++++++++++++++++++++++---------------------
 1 files changed, 82 insertions(+), 65 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
index 553228f..4880a4d 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue
@@ -2,16 +2,16 @@
   <div class="swipe-tabs">
     <swiper :options="swiperOption" ref="swiperTabs">
       <swiper-slide v-for="slide in slides" :key="slide.id">
-        <div class="slide-tab" :class="{'act':actSlide==slide.id}" @click="checkSlide(slide)">
-          <div class="title">{{slide.name}}</div>
-          <div class="flex-box">
-            <div>
-              <div class="dimension">杩濊鐜�</div>
-              <div class="dimension-val">{{slide.ratio}}%</div>
-            </div>
-            <div style="margin-left: 60px;">
-              <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie>
-            </div>
+        <div
+          class="slide-tab"
+          :class="{ act: actSlide == slide.id }"
+          @click="checkSlide(slide)"
+        >
+          <Pie :options="optOfPie(slide)"></Pie>
+          <div class="info">
+            <div class="title">杩濊鐜�</div>
+            <div class="num">78%</div>
+            <div class="place">涓搧涓�灞�</div>
           </div>
         </div>
       </swiper-slide>
@@ -32,46 +32,44 @@
 </template>
 
 <script>
-import Pie from './charts/pie';
+import Pie from "./charts/pie";
 export default {
   components: { Pie },
-  data () {
+  data() {
     return {
       swiperOption: {
         spaceBetween: 0,
         //initialSlide: 0,
-        direction: 'horizontal',
+        direction: "horizontal",
         navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
         },
-        slidesPerView: 5,
+        slidesPerView: 6,
         observer: true,
         observeParents: true,
       },
       slides: [
-        { id: 'jlfgs', name: '鏈洪噺鍒嗗叕鍙�', ratio: 1.5, },
-        { id: 'ztyj', name: '涓搧涓�灞�', ratio: 1.6, },
-        { id: 'ztsj', name: '涓搧涓夊眬', ratio: 1.2 },
-        { id: 'ztsij', name: '涓搧鍥涘眬', ratio: 1.3 },
-        { id: 'jtjw', name: '浜搧鏈哄姟', ratio: 0.2 },
-        { id: 'ztwj', name: '涓搧浜斿眬', ratio: 1.2 },
-        { id: 'jgjw', name: '浜珮鏈哄姟', ratio: 0.7 },
+        { id: "jlfgs", name: "鏈洪噺鍒嗗叕鍙�", ratio: 1.5 },
+        { id: "ztyj", name: "涓搧涓�灞�", ratio: 1.6 },
+        { id: "ztsj", name: "涓搧涓夊眬", ratio: 1.2 },
+        { id: "ztsij", name: "涓搧鍥涘眬", ratio: 1.3 },
+        { id: "jtjw", name: "浜搧鏈哄姟", ratio: 0.2 },
+        { id: "ztwj", name: "涓搧浜斿眬", ratio: 1.2 },
+        { id: "jgjw", name: "浜珮鏈哄姟", ratio: 0.7 },
       ],
-      actSlide: ''
-    }
+      actSlide: "",
+    };
   },
-  mounted () {
-    console.log('swip mounte');
+  mounted() {
     this.actSlide = this.slides[0].id;
-
   },
   methods: {
-    optOfPie (slide) {
+    optOfPie(slide) {
       return {
         tooltip: {
-          trigger: 'item',
-          formatter: '{a}<br/>{b}:{c} ({d}%)'
+          trigger: "item",
+          formatter: "{a}<br/>{b}:{c} ({d}%)",
         },
         // legend: {
         //   orient: 'vertical',
@@ -81,41 +79,43 @@
         // },
         series: [
           {
-            name: '杩濊鐜�',
-            type: 'pie',
-            color: ['#18bfff', '#e9f6fb'],
-            radius: ['60%', '90%'],
+            name: "杩濊鐜�",
+            type: "pie",
+            color: ["#2D52D7", " #D9DFE6"],
+            radius: ["28%", "35%"],
+            center: ["50%", "48%"],
+            silent: true,
             tooltip: {
-              show: false
+              show: false,
             },
             avoidLabelOverlap: false,
             label: {
               show: false,
-              position: 'center'
+              position: "center",
             },
             hoverAnimation: false,
             labelLine: {
-              show: false
+              show: false,
             },
             data: [
-              { value: slide.ratio, name: '' },
-              { value: 100 - slide.ratio, name: '' },
-
-            ]
-          }
-        ]
-      }
+              { value: slide.ratio, name: "" },
+              { value: 3 - slide.ratio, name: "" },
+            ],
+          },
+        ],
+      };
     },
-    checkSlide (slide) {
+    checkSlide(slide) {
       this.actSlide = slide.id;
-      this.$emit('checkTab',slide)
-    }
-  }
-}
+      this.$emit("checkTab", slide);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 .swipe-tabs {
+  width: 94%;
   position: relative;
   padding: 0 30px;
 
@@ -124,24 +124,41 @@
     border-right: 1px solid #eee;
   }
   .slide-tab {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-left: 10px solid #f4f6f9;
     cursor: pointer;
-    border-top: 2px solid transparent;
-    padding: 20px;
-    text-align: left;
+    height: 130px;
+    background: #f4f6f9;
+    opacity: 0.67;
     &.act {
-      border-color: #409eff;
+      border-color: #2d52d7;
     }
-    .title {
-      font-size: 16px;
-      color: #666;
-    }
-    .dimension {
-      color: #999;
-      margin: 10px 0;
-    }
-    .dimension-val {
-      color: #555;
-      font-size: 28px;
+
+    .info {
+      position: absolute;
+      top: 39px;
+      left: 50%;
+      margin-left: -28px;
+      text-align: center;
+      .title {
+        font-size: 12px;
+        color: #425277;
+        opacity: 0.6;
+      }
+
+      .num {
+        font-size: 20px;
+        color: #425277;
+      }
+
+      .place {
+        margin-top: 23px;
+        font-size: 14px;
+        font-weight: 700;
+      }
     }
   }
   .swiper-button-prev,

--
Gitblit v1.8.0