修改上传地址
suixy
1 month ago
parent
c53bbc2b5f
commit
4f6423a988
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span contenteditable="true" @blur="edit('title', $event)">
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="value">
|
||||||
|
<span contenteditable="true" @blur="edit('value', $event)">
|
||||||
|
{{ data.value }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
edit(key, e) {
|
||||||
|
this.$props.data[key] = e.target.innerText
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
width: 62vw;
|
||||||
|
margin: 2vw auto 4vw auto;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1vw;
|
||||||
|
line-height: 2vw;
|
||||||
|
letter-spacing: 0.1vw;
|
||||||
|
color: #000;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span contenteditable="true" @blur="edit('title', $event)">
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div style="height:35.4vw;">
|
||||||
|
<div class="swiper hero-swiper mySwiper">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide" v-for="(item,k) in data.list" :key="k">
|
||||||
|
<UploadEl :data="item" field="img"/>
|
||||||
|
<div class="slide-bg">
|
||||||
|
<div class="slide-title" contenteditable="true" @blur="edit1('title', k, $event)">
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="slide-value" contenteditable="true" @blur="edit1('value', k, $event)">
|
||||||
|
{{ item.value }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<div style="width:100%;height:100%;"
|
||||||
|
@click="addImg">
|
||||||
|
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 22vw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Swiper from 'swiper'
|
||||||
|
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||||
|
|
||||||
|
import {Autoplay, Navigation} from "swiper/modules";
|
||||||
|
|
||||||
|
Swiper.use([
|
||||||
|
Navigation,
|
||||||
|
Autoplay
|
||||||
|
])
|
||||||
|
let swiper = null
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
components: {UploadEl},
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.initSwiper()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
addImg() {
|
||||||
|
// this.show = false;
|
||||||
|
this.$props.data.list.push({
|
||||||
|
title: '请输入',
|
||||||
|
value: '请输入',
|
||||||
|
img: ''
|
||||||
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initSwiper()
|
||||||
|
swiper.slideTo(this.$props.data.list.length - 1);
|
||||||
|
// this.show = true;
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.$refs.carousel1.setActiveItem(this.$props.data.list.length - 1);
|
||||||
|
// }, 10)
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
initSwiper() {
|
||||||
|
if (swiper) {
|
||||||
|
swiper.destroy(true, true);
|
||||||
|
swiper = null;
|
||||||
|
}
|
||||||
|
swiper = new Swiper(".mySwiper", {
|
||||||
|
loop: this.data.list.length > 2,
|
||||||
|
centeredSlides: true,
|
||||||
|
slidesPerView: "auto",
|
||||||
|
spaceBetween: -24,
|
||||||
|
speed: 450,
|
||||||
|
grabCursor: true,
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
edit(key, e) {
|
||||||
|
this.$props.data[key] = e.target.innerText
|
||||||
|
},
|
||||||
|
edit1(key, index, e) {
|
||||||
|
this.$props.data.list[index][key] = e.target.innerText
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.hero-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 22vw;
|
||||||
|
overflow: visible;
|
||||||
|
margin-top: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-wrapper {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide {
|
||||||
|
width: 60vw;
|
||||||
|
height: 21.25vw;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform: scale(0.6);
|
||||||
|
transition: transform 300ms ease, opacity 300ms ease;
|
||||||
|
opacity: 0.55;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.slide-bg {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 8vw;
|
||||||
|
background-color: #0002;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
.slide-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 1vw;
|
||||||
|
left: 2vw;
|
||||||
|
font-size: 1.6vw;
|
||||||
|
line-height: 2vw;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-value {
|
||||||
|
position: absolute;
|
||||||
|
text-align: left;
|
||||||
|
top: 3.2vw;
|
||||||
|
left: 2vw;
|
||||||
|
font-size: 1vw;
|
||||||
|
font-weight: 600;
|
||||||
|
width: calc(100% - 4vw);
|
||||||
|
color: #fff;
|
||||||
|
text-indent: 2em;
|
||||||
|
height: 4vw;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide-active {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.slide-bg {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 18px 48px rgba(20, 24, 31, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.hero-swiper {
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-swiper .swiper-slide {
|
||||||
|
width: 76vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="title">
|
||||||
|
<span contenteditable="true" @blur="edit('title', $event)">
|
||||||
|
{{ data.title }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="item" v-for=" (i,k) in data.list">
|
||||||
|
<i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
|
||||||
|
<div class="img1">
|
||||||
|
<div class="img">
|
||||||
|
<UploadEl :data="i" field="img"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title1" contenteditable="true" @blur="edit1('value', k,$event)">{{ i.title }}</div>
|
||||||
|
<i class="el-icon-right icon" @click="setLink(i,k)"></i>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div style="width:100%;height:100%;"
|
||||||
|
@click="data.list.push({title:'设备名',img: '',toLink: []})">
|
||||||
|
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
title="跳转到"
|
||||||
|
:visible.sync="linkDialogVisible"
|
||||||
|
width="50%">
|
||||||
|
|
||||||
|
<el-cascader
|
||||||
|
style="width:40vw"
|
||||||
|
@change="pageChange"
|
||||||
|
size="small"
|
||||||
|
v-model="linkDialogForm.toLink"
|
||||||
|
:props="{checkStrictly: true, value: 'id', label: 'name', children: 'list'}"
|
||||||
|
:options="productData"></el-cascader>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="linkDialogVisible = false">关 闭</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import UploadEl from "@/components/editEl/uploadEl.vue";
|
||||||
|
import {getHwWeb} from "@/api/hwWeb";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "El1",
|
||||||
|
components: {UploadEl},
|
||||||
|
props: ['data'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
productData: [],
|
||||||
|
linkDialogVisible: false,
|
||||||
|
index: -1,
|
||||||
|
linkDialogForm: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
getHwWeb(7).then(res => {
|
||||||
|
this.productData = JSON.parse(res?.data?.webJsonString || '{}').productList || []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
edit(key, e) {
|
||||||
|
this.$props.data[key] = e.target.innerText
|
||||||
|
},
|
||||||
|
edit1(key, index, e) {
|
||||||
|
this.$props.data.list[index][key] = e.target.innerText
|
||||||
|
},
|
||||||
|
setLink(e, index) {
|
||||||
|
this.linkDialogVisible = true
|
||||||
|
this.linkDialogForm = e || {}
|
||||||
|
this.index = index
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
|
|
||||||
|
pageChange(e) {
|
||||||
|
this.linkDialogForm.toLink = e
|
||||||
|
this.$props.data.list[this.index].toLink = e
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 5vw;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4px;
|
||||||
|
background: #3372FE;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list {
|
||||||
|
width: 62vw;
|
||||||
|
margin: 3vw auto 0;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-right: 3vw;
|
||||||
|
width: calc(50% - 3vw);
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 1.4vw;
|
||||||
|
vertical-align: top;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
.img1 {
|
||||||
|
.img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img1 {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: calc((90vw * 0.33 - 3vw) * 1080 / 1920);
|
||||||
|
|
||||||
|
.img {
|
||||||
|
transition: all .5s;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background: blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 1.3vw;
|
||||||
|
position: absolute;
|
||||||
|
right: 2vw;
|
||||||
|
bottom: 1vw;
|
||||||
|
transform: translateY(50%);
|
||||||
|
transition: all .5s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin-right: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue