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