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.
495 lines
15 KiB
Vue
495 lines
15 KiB
Vue
9 months ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="component" v-for="(i,k) in components">
|
||
|
|
<Carousel v-if="i.type === 'carousel'" :data="i.value"/>
|
||
|
|
<EditEl1 v-if="i.type === 1" :data="i.value"/>
|
||
|
|
<EditEl2 v-if="i.type === 2" :data="i.value"/>
|
||
|
|
<EditEl3 v-if="i.type === 3" :data="i.value"/>
|
||
|
|
<EditEl4 v-if="i.type === 4" :data="i.value"/>
|
||
|
|
<EditEl5 v-if="i.type === 5" :data="i.value"/>
|
||
|
|
<EditEl6 v-if="i.type === 6" :data="i.value"/>
|
||
|
|
<EditEl7 v-if="i.type === 7" :data="i.value"/>
|
||
|
|
<EditEl8 v-if="i.type === 8" :data="i.value"/>
|
||
|
|
<EditEl9 v-if="i.type === 9" :data="i.value"/>
|
||
|
|
<EditEl10 v-if="i.type ===10" :data="i.value"/>
|
||
|
|
<!-- <EditEl11 v-if="i.type === 11" :data="i.value"/>-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ContactUs class="contactUs"/>
|
||
|
|
<Copyright class="copyright"/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import EditEl1 from "@/components/el/el1.vue";
|
||
|
|
import EditEl2 from "@/components/el/el2.vue";
|
||
|
|
import EditEl3 from "@/components/el/el3.vue";
|
||
|
|
import EditEl4 from "@/components/el/el4.vue";
|
||
|
|
import EditEl5 from "@/components/el/el5.vue";
|
||
|
|
import EditEl6 from "@/components/el/el6.vue";
|
||
|
|
import EditEl7 from "@/components/el/el7.vue";
|
||
|
|
import EditEl8 from "@/components/el/el8.vue";
|
||
|
|
import EditEl9 from "@/components/el/el9.vue";
|
||
|
|
import EditEl10 from "@/components/el/el10.vue";
|
||
|
|
// import EditEl11 from "@/components/el/el11.vue";
|
||
|
|
import Copyright from '@/components/copyright'
|
||
|
|
import ContactUs from "@/views/index/contactUs.vue";
|
||
|
|
import Carousel from "@/components/el/carousel.vue";
|
||
|
|
import {getHwWeb} from "@/api/hwWeb";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Carousel,
|
||
|
|
ContactUs,
|
||
|
|
Copyright,
|
||
|
|
EditEl1,
|
||
|
|
EditEl2,
|
||
|
|
EditEl3,
|
||
|
|
EditEl4,
|
||
|
|
EditEl5,
|
||
|
|
EditEl6,
|
||
|
|
EditEl7,
|
||
|
|
EditEl8,
|
||
|
|
EditEl9,
|
||
|
|
EditEl10,
|
||
|
|
// EditEl11,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
a: '1',
|
||
|
|
addEl: false,
|
||
|
|
value: [],
|
||
|
|
components: [
|
||
|
|
{
|
||
|
|
type: 'carousel',
|
||
|
|
value: {
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '222',
|
||
|
|
value: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '333',
|
||
|
|
value: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '444',
|
||
|
|
value: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '555',
|
||
|
|
value: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 1,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '222',
|
||
|
|
value: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '333',
|
||
|
|
value: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '444',
|
||
|
|
value: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '555',
|
||
|
|
value: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 2,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
contentTitle: 'contentTitle',
|
||
|
|
contentSubTitle: 'DEVELOPMENT PLATFORM',
|
||
|
|
contentInfo: 'contentInfo',
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 3,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '111',
|
||
|
|
itemInfo: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '222',
|
||
|
|
itemInfo: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '333',
|
||
|
|
itemInfo: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '444',
|
||
|
|
itemInfo: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '555',
|
||
|
|
itemInfo: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
itemTitle: '666',
|
||
|
|
itemInfo: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 4,
|
||
|
|
value: {
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 5,
|
||
|
|
value: {
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 6,
|
||
|
|
value: {
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
info: '789',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 7,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '222',
|
||
|
|
value: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '333',
|
||
|
|
value: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '444',
|
||
|
|
value: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '555',
|
||
|
|
value: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 8,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
leftTitle: '222',
|
||
|
|
leftInfo: '333',
|
||
|
|
infos: [
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
leftTitle: '222',
|
||
|
|
leftInfo: '333',
|
||
|
|
infos: [
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
{title: '111', info: '222'},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 9,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 10,
|
||
|
|
value: {
|
||
|
|
title: '123',
|
||
|
|
subTitle: '456',
|
||
|
|
list: [
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '111',
|
||
|
|
value: '222'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '222',
|
||
|
|
value: '333'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '333',
|
||
|
|
value: '444'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '444',
|
||
|
|
value: '555'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '555',
|
||
|
|
value: '666'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
title: '666',
|
||
|
|
value: '777'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// type: 11,
|
||
|
|
// value: {
|
||
|
|
// title: '123',
|
||
|
|
// subTitle: '456',
|
||
|
|
// list: [
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '111',
|
||
|
|
// value: '222'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '222',
|
||
|
|
// value: '333'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '333',
|
||
|
|
// value: '444'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '444',
|
||
|
|
// value: '555'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '555',
|
||
|
|
// value: '666'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '666',
|
||
|
|
// value: '777'
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
|
|
// title: '666',
|
||
|
|
// value: '777'
|
||
|
|
// },
|
||
|
|
// ],
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'$route'() {
|
||
|
|
getHwWeb(this.$route.query.id).then(res => {
|
||
|
|
this.components = JSON.parse(res?.data?.webJsonString || '[]')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log(this.$route.query?.id)
|
||
|
|
getHwWeb(this.$route.query.id).then(res => {
|
||
|
|
console.log(res)
|
||
|
|
this.components = JSON.parse(res?.data?.webJsonString || '[]')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleChange(val) {
|
||
|
|
console.log(val)
|
||
|
|
},
|
||
|
|
edit(key, e) {
|
||
|
|
this[key] = e.target.innerText
|
||
|
|
},
|
||
|
|
add() {
|
||
|
|
this.addEl = true
|
||
|
|
},
|
||
|
|
save() {
|
||
|
|
console.log(this.components)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 90%;
|
||
|
|
text-align: left;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.component {
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.contactUs {
|
||
|
|
width: 100%;
|
||
|
|
background-color: #2e445c;
|
||
|
|
}
|
||
|
|
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
background-color: #1d3348;
|
||
|
|
}
|
||
|
|
</style>
|