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