<template>
|
<div class="swiper-box" v-if="sceneData">
|
<p class="task-tip" v-if="sceneData.length == 0">暂无场景，请开始创建</p>
|
<div class="swiperArea">
|
<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="inner" v-if="item.rules">
|
<div class="scenario-icon">
|
<div class="single" v-if="item.rules.length == 1">
|
<!-- <svg class="icon" aria-hidden="true" style="font-size:4rem;">
|
<use :xlink:href="`#${item.rules[0].icon}`" />
|
</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 class="double" v-else-if="item.rules.length == 2">
|
<!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
|
<use :xlink:href="`#${rule.icon}`" />
|
</svg>-->
|
<img
|
class="baseImg"
|
v-for="(rule, index) in item.rules"
|
:key="index"
|
:src="
|
item.rules[index].icon_blob &&
|
item.rules[index].icon_blob.indexOf(',') > 0
|
? item.rules[index].icon_blob
|
: `data:image/png;base64,${rule.icon_blob}`
|
"
|
alt
|
/>
|
</div>
|
<div class="third" v-else-if="item.rules.length == 3">
|
<!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
|
<use :xlink:href="`#${rule.icon}`" />
|
</svg>-->
|
<img
|
v-for="(rule, index) in item.rules"
|
:key="'t' + index"
|
class="baseImg"
|
:src="
|
item.rules[index].icon_blob &&
|
item.rules[index].icon_blob.indexOf(',') > 0
|
? item.rules[index].icon_blob
|
: `data:image/png;base64,${rule.icon_blob}`
|
"
|
alt
|
/>
|
</div>
|
<div class="four" v-else-if="item.rules.length == 4">
|
<!-- <svg class="icon" aria-hidden="true" style="font-size:2rem;">
|
<use :xlink:href="`#${rule.icon}`" />
|
</svg>-->
|
<img
|
v-for="(rule, index) in item.rules"
|
:key="'f' + index"
|
class="baseImg"
|
:src="
|
item.rules[index].icon_blob &&
|
item.rules[index].icon_blob.indexOf(',') > 0
|
? item.rules[index].icon_blob
|
: `data:image/png;base64,${rule.icon_blob}`
|
"
|
alt
|
/>
|
</div>
|
</div>
|
<div class="scenario-name">{{ item.scene_name }}</div>
|
</div>
|
</div>
|
</swiper-slide>
|
</swiper>
|
</div>
|
|
<div class="swiper-pre-border" v-show="sceneData.length > 4">
|
<div class="icon-btn" slot="button-prev">
|
<i class="iconfont"></i>
|
</div>
|
</div>
|
<div class="swiper-next-border" v-show="sceneData.length > 4">
|
<div class="icon-btn" slot="button-next">
|
<i class="iconfont"></i>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: ["sceneData"],
|
|
data() {
|
return {
|
swiperOption: {
|
slidesPerView: 4,
|
spaceBetween: 20,
|
pagination: {
|
el: ".swiper-pagination",
|
clickable: true,
|
},
|
navigation: {
|
nextEl: ".swiper-next-border",
|
prevEl: ".swiper-pre-border",
|
},
|
observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
},
|
mySwiper: {},
|
};
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.icon {
|
width: 1em;
|
height: 1em;
|
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%;
|
height: 100%;
|
display: inline-block;
|
.inner {
|
height: 100%;
|
box-sizing: border-box;
|
position: relative;
|
font-size: 14px;
|
transition: all 1s;
|
background: #ffffff;
|
border: 1px solid #e9ebee;
|
border-radius: 5px;
|
margin: auto;
|
|
.scenario-icon {
|
.single,
|
.double,
|
.third,
|
.four {
|
width: 100%;
|
position: relative;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
.single {
|
margin-top: 20px;
|
text-align: center;
|
|
img {
|
width: 70px;
|
height: 70px;
|
}
|
}
|
.double {
|
margin-top: 35px;
|
display: flex;
|
|
img {
|
width: 40px;
|
height: 40px;
|
|
&:nth-child(1) {
|
margin-right: 10px;
|
}
|
}
|
}
|
.third {
|
margin-top: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
img {
|
width: 30px;
|
height: 30px;
|
|
&:nth-child(1) {
|
margin-right: 10px;
|
}
|
|
&:nth-child(3) {
|
margin-top: 10px;
|
}
|
}
|
}
|
.four {
|
margin-top: 20px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
img {
|
width: 30px;
|
height: 30px;
|
|
&:nth-child(1) {
|
margin-right: 10px;
|
}
|
|
&:nth-child(3) {
|
margin-right: 10px;
|
margin-top: 10px;
|
}
|
|
&:nth-child(4) {
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.scenario-name {
|
width: 100%;
|
font-size: 12px;
|
color: #5f5f5f;
|
text-align: center;
|
position: absolute;
|
bottom: 20px;
|
left: 0;
|
word-break: break-all;
|
}
|
}
|
}
|
|
.swiper-box {
|
position: relative;
|
.swiperArea {
|
margin: 0 54px;
|
}
|
|
.swiper-slide {
|
height: 150px;
|
}
|
|
.swiper-pre-border {
|
position: absolute;
|
bottom: 75px;
|
left: 0px;
|
cursor: pointer;
|
|
i {
|
font-size: 32px;
|
color: rgb(229, 229, 229);
|
}
|
}
|
|
.swiper-next-border {
|
position: absolute;
|
bottom: 75px;
|
right: 0px;
|
cursor: pointer;
|
|
i {
|
font-size: 32px;
|
color: rgb(229, 229, 229);
|
}
|
}
|
|
.swiper-button-disabled {
|
cursor: not-allowed;
|
i {
|
color: rgb(245, 245, 245);
|
}
|
}
|
}
|
</style>
|
