<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> -->
|
<swiper-slide v-for="item in sceneData" :key="item.id+'s'">
|
<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="">
|
</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="">
|
</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="">
|
</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="">
|
</div>
|
</div>
|
</div>
|
<div class="scenario-name">{{item.scene_name}}</div>
|
</div>
|
</div>
|
</swiper-slide>
|
</swiper>
|
<div class="swiper-pre-border" v-show="sceneData.length > 4 ">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont iconzuo"></i>
|
</div>
|
</div>
|
<div class="swiper-next-border" v-show="sceneData.length > 4 ">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont iconyou1"></i>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props:[
|
// 'swiperOption',
|
'sceneData'
|
],
|
|
data() {
|
return {
|
// mockSceneData: [
|
// { scenename: "name1", id:1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
|
// { scenename: "name2", id:2, icon: ["iconchouyan-copy"] },
|
// {
|
// scenename: "name3",
|
// id:3,
|
// icon: [
|
// "iconrenshukouzhao",
|
// "iconchouyan-copy",
|
// "iconrenlianjiance",
|
// "icongetijingzhi"
|
// ]
|
// },
|
// {
|
// scenename: "name4",
|
// id:4,
|
// icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"]
|
// },
|
// { scenename: "name5", id:5, icon: ["icongetijingzhi"] },
|
// { scenename: "name6", id:6, icon: ["iconrenshukouzhao", "icongetijingzhi"] },
|
// { scenename: "name7", id:7, icon: ["iconrenlianjiance"] }
|
// ],
|
swiperOption: {
|
slidesPerView: 4,
|
spaceBetween: 0,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true
|
},
|
navigation: {
|
nextEl: ".swiper-next-border",
|
prevEl: ".swiper-pre-border"
|
},
|
observer:true,//修改swiper自己或子元素时，自动初始化swiper
|
observeParents:true,//修改swiper的父元素时，自动初始化swiper
|
},
|
mySwiper: {}
|
}
|
},
|
mounted(){
|
// this.mySwiper = this.$refs.sceneSwiper.swiper;
|
|
},
|
methods:{
|
//拆分二维数组
|
chunk(arr,size = 1){
|
if(arr.length == 0) return;
|
const tempContainer = [];
|
let innerArr = [];
|
arr.forEach(item => {
|
if(innerArr.length == 0){
|
tempContainer.push(innerArr);
|
}
|
innerArr.push(item);
|
if(innerArr.length == size){
|
innerArr = [];
|
}
|
});
|
return tempContainer;
|
}
|
},
|
computed: {
|
slides() {
|
return this.chunk(this.mockSceneData,5);
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.icon {
|
width: 1em;
|
height: 1em;
|
vertical-align: -0.15em;
|
fill: currentColor;
|
overflow: hidden;
|
}
|
.wrap-box {
|
width: 100%;
|
display: inline-block;
|
.inner {
|
width: 90%;
|
box-sizing: border-box;
|
position: relative;
|
font-size: 14px;
|
padding: 7px 0 48px;
|
transition: all 1s;
|
background: #ffffff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
margin: auto;
|
&:hover {
|
.mask {
|
display: block;
|
}
|
}
|
.mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.65);
|
backdrop-filter: blur(1px) brightness(100%);
|
text-align: center;
|
z-index: 1;
|
border-radius: 3px;
|
display: none;
|
.tool {
|
position: absolute;
|
top: 49%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
i {
|
font-size: 50px;
|
}
|
i:nth-of-type(1) {
|
margin-right: 30px;
|
}
|
i:nth-of-type(2) {
|
color: red;
|
}
|
}
|
}
|
.scenario-icon {
|
display: flex;
|
width: 85%;
|
height: 85%;
|
margin: auto;
|
justify-content: center;
|
align-content: center;
|
align-items: center;
|
.single,
|
.double,
|
.third,
|
.four {
|
width: 80%;
|
padding-top: 80%;
|
position: relative;
|
margin: auto;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
.svg-wrap {
|
width: 47%;
|
position: absolute;
|
height: 0;
|
padding-top: 47%;
|
text-align: center;
|
box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
|
img {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 96%;
|
}
|
}
|
}
|
.single {
|
margin: auto;
|
.svg-wrap {
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
box-shadow: none;
|
width: 100%
|
}
|
}
|
.double {
|
.svg-wrap:nth-of-type(1) {
|
top: 50%;
|
transform: translateY(-50%);
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 50%;
|
transform: translateY(-50%);
|
right: 0;
|
}
|
}
|
.third {
|
.svg-wrap:nth-of-type(1) {
|
top: 0;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 0;
|
right: 0;
|
}
|
.svg-wrap:nth-of-type(3) {
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
.four {
|
.svg-wrap:nth-of-type(1) {
|
top: 0;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 0;
|
right: 0;
|
}
|
.svg-wrap:nth-of-type(3) {
|
top: 50%;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(4) {
|
top: 50%;
|
right: 0;
|
}
|
}
|
}
|
.scenario-name {
|
width: 100%;
|
height: 30px;
|
box-sizing: border-box;
|
padding: 0 4px;
|
text-align: center;
|
position: absolute;
|
bottom: 10px;
|
left: 0;
|
}
|
}
|
}
|
</style>
|
