修改上传地址
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