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