You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.6 KiB
Vue
115 lines
2.6 KiB
Vue
<template>
|
|
<div style="height: 650px;">
|
|
<el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
|
|
<el-carousel-item v-for="(item,k) in data.swiper" :key="k">
|
|
<div style="position: relative;width: 100%;height: 100%;">
|
|
<UploadEl :data="item" field="portalConfigPic"/>
|
|
<div class="title" contenteditable="true" @blur="edit1('portalConfigTitle', k,$event)">
|
|
{{ item.portalConfigTitle }}
|
|
</div>
|
|
<div class="subTitle" contenteditable="true" @blur="edit1('portalConfigDesc', k,$event)">{{
|
|
item.portalConfigDesc
|
|
}}
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item>
|
|
<div style="position: relative;width: 100%;height: 100%;">
|
|
<div style="width:100%;height:100%;"
|
|
@click="addImg">
|
|
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 650px"></i>
|
|
</div>·
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import UploadEl from "@/components/editEl/uploadEl.vue";
|
|
|
|
export default {
|
|
name: 'IndexSwiper',
|
|
components: {UploadEl},
|
|
props: ['data'],
|
|
data() {
|
|
return {
|
|
show: true,
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.data)
|
|
},
|
|
methods: {
|
|
edit1(key, index, e) {
|
|
this.$props.data.swiper[index][key] = e.target.innerText
|
|
},
|
|
addImg() {
|
|
this.show = false;
|
|
this.$props.data.swiper.push({portalConfigTitle: '请输入', portalConfigDesc: '请输入', portalConfigPic: ''});
|
|
this.$nextTick(() => {
|
|
this.show = true;
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.$refs.carousel.setActiveItem(this.$props.data.swiper.length - 1);
|
|
}, 10)
|
|
})
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "~@/style.less";
|
|
|
|
/deep/ .el-carousel__container {
|
|
height: 100%;
|
|
}
|
|
|
|
/deep/ .el-carousel__button {
|
|
width: 50px;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
background-color: #cfd6de;
|
|
}
|
|
|
|
/deep/ .el-carousel__indicator--horizontal {
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
/deep/ .el-carousel__indicator.is-active button {
|
|
opacity: 1;
|
|
background-color: #3372ff;
|
|
}
|
|
|
|
/deep/ .el-carousel__indicators--horizontal {
|
|
bottom: 5%;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 43.7%;
|
|
left: 37.7%;
|
|
transform: translate(-50%, -50%);
|
|
font-weight: 700;
|
|
color: #3372ff;
|
|
font-size: 2.2vw;
|
|
letter-spacing: 6.1px;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.subTitle {
|
|
position: absolute;
|
|
top: 56%;
|
|
left: 38.7%;
|
|
transform: translate(-50%, -50%);
|
|
color: #3372ff;
|
|
font-size: 1.3vw;
|
|
letter-spacing: 2.3px;
|
|
white-space: nowrap;
|
|
min-width: 20px;
|
|
}
|
|
</style>
|