From c587fbdad6f75ba05e5440b41be144bd335703aa Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期四, 03 十二月 2020 17:16:29 +0800 Subject: [PATCH] 左侧目录树样式优化 --- src/pages/cameraAccess/components/scene/SlideScene.vue | 77 ++++++++++++++++++++++++++------------ 1 files changed, 52 insertions(+), 25 deletions(-) diff --git a/src/pages/cameraAccess/components/scene/SlideScene.vue b/src/pages/cameraAccess/components/scene/SlideScene.vue index d2c7849..4bf640f 100644 --- a/src/pages/cameraAccess/components/scene/SlideScene.vue +++ b/src/pages/cameraAccess/components/scene/SlideScene.vue @@ -1,41 +1,62 @@ <template> <div class="swiper-box"> - <swiper ref="sceneSwiper" v-if="sceneData.length>=1" :options="swiperOption" class="swiper-box-container"> - <!-- <span class="task-tip" v-show="Camera.rules.length == 0 ">鏆傛棤鍦烘櫙,璇峰紑濮嬪垱寤�</span> --> + <p class="task-tip" v-if="sceneData.length == 0 ">鏆傛棤鍦烘櫙锛岃寮�濮嬪垱寤�</p> + <swiper + ref="sceneSwiper" + v-if="sceneData.length>=1" + :options="swiperOption" + class="swiper-box-container" + > <swiper-slide v-for="item in sceneData" :key="item.id+'s'"> - <div class="wrap-box" > + <div class="wrap-box"> <div class="inner"> <div class="scenario-icon"> <div class="single" v-if="item.rules.length==1"> <div class="svg-wrap"> <!-- <svg class="icon" aria-hidden="true" style="font-size:4rem;"> <use :xlink:href="`#${item.rules[0].icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${item.rules[0].icon_blob}`" alt=""> + </svg>--> + <img + class="baseImg" + :src="item.rules[0].icon_blob && item.rules[0].icon_blob.indexOf(',')>0?item.rules[0].icon_blob:`data:image/png;base64,${item.rules[0].icon_blob}`" + alt + /> </div> </div> <div class="double" v-else-if="item.rules.length==2"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="index"> <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt=""> + </svg>--> + <img + class="baseImg" + :src="item.rules[0].icon_blob &&item.rules[0].icon_blob.indexOf(',')>0?item.rules[0].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> <div class="third" v-else-if="item.rules.length==3"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'t'+index"> <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt=""> + </svg>--> + <img + class="baseImg" + :src="item.rules[0].icon_blob &&item.rules[0].icon_blob.indexOf(',')>0?item.rules[0].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> <div class="four" v-else-if="item.rules.length==4"> <div class="svg-wrap" v-for="(rule,index) in item.rules" :key="'f'+index"> <!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;"> <use :xlink:href="`#${rule.icon}`" /> - </svg> --> - <img class="baseImg" :src="`data:image/png;base64,${rule.icon_blob}`" alt=""> + </svg>--> + <img + class="baseImg" + :src="item.rules[0].icon_blob && item.rules[0].icon_blob.indexOf(',')>0?item.rules[0].icon_blob:`data:image/png;base64,${rule.icon_blob}`" + alt + /> </div> </div> </div> @@ -59,11 +80,11 @@ <script> export default { - props:[ + props: [ // 'swiperOption', 'sceneData' ], - + data() { return { // mockSceneData: [ @@ -99,28 +120,28 @@ nextEl: ".swiper-next-border", prevEl: ".swiper-pre-border" }, - observer:true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper - observeParents:true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + observer: true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper + observeParents: true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper }, mySwiper: {} } }, - mounted(){ + mounted() { // this.mySwiper = this.$refs.sceneSwiper.swiper; - + }, - methods:{ + methods: { //鎷嗗垎浜岀淮鏁扮粍 - chunk(arr,size = 1){ - if(arr.length == 0) return; + chunk(arr, size = 1) { + if (arr.length == 0) return; const tempContainer = []; let innerArr = []; arr.forEach(item => { - if(innerArr.length == 0){ + if (innerArr.length == 0) { tempContainer.push(innerArr); } innerArr.push(item); - if(innerArr.length == size){ + if (innerArr.length == size) { innerArr = []; } }); @@ -129,7 +150,7 @@ }, computed: { slides() { - return this.chunk(this.mockSceneData,5); + return this.chunk(this.mockSceneData, 5); } } }; @@ -142,6 +163,12 @@ vertical-align: -0.15em; fill: currentColor; overflow: hidden; +} +.task-tip { + font-family: PingFangSC-Regular; + font-size: 12px; + color: #cccccc; + margin-top: 10%; } .wrap-box { width: 100%; @@ -222,7 +249,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 96%; + width: 76%; } } } @@ -233,7 +260,7 @@ left: 50%; transform: translate(-50%, -50%); box-shadow: none; - width: 100% + width: 100%; } } .double { -- Gitblit v1.8.0