portal_website/src/views/page/index.vue

<template>
  <div>
    <div class="container">
      <div v-if="$route.query.id === '1'">
        <Carousel1 class="carousel"/>
        <ProductCenter class="productCenter"/>
        <ClassicCase class="classicCase"/>
        <!--    <NewsCenter class="newsCenter"/>-->
        <ContactUs class="contactUs"/>
        <Copyright class="copyright"/>
      </div>
      <div v-if="$route.query.id !== '1'" 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"/>
        <EditEl12 v-if="i.type === 12" :data="i.value"/>
        <EditEl13 v-if="i.type === 13" :data="i.value"/>
        <EditEl14 v-if="i.type === 14" :data="i.value"/>
        <EditEl15 v-if="i.type === 15" :data="i.value"/>
        <EditEl16 v-if="i.type === 16" :data="i.value"/>
        <EditEl17 v-if="i.type === 17" :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 EditEl12 from "@/components/el/el12.vue";
import EditEl13 from "@/components/el/el13.vue";
import EditEl14 from "@/components/el/el14.vue";
import EditEl15 from "@/components/el/el15.vue";
import EditEl16 from "@/components/el/el16.vue";
import EditEl17 from "@/components/el/el17.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";
import ProductCenter from "@/views/index/productCenter.vue";
import ClassicCase from "@/views/index/classicCase.vue";
import Carousel1 from "@/views/index/carousel.vue";

export default {
  components: {
    ClassicCase,
    ProductCenter,
    Carousel1,
    Carousel,
    ContactUs,
    Copyright,
    EditEl1,
    EditEl2,
    EditEl3,
    EditEl4,
    EditEl5,
    EditEl6,
    EditEl7,
    EditEl8,
    EditEl9,
    EditEl10,
    EditEl11,
    EditEl12,
    EditEl13,
    EditEl14,
    EditEl15,
    EditEl16,
    EditEl17,
  },
  props: ["id"],
  data() {
    return {
      a: '1',
      addEl: false,
      value: [],
      components: [],
    }
  },
  watch: {
    '$route'() {
      getHwWeb(this.$route.query.id).then(res => {
        this.components = JSON.parse(res?.data?.webJsonString || '[]')
      })
    },
    id(newVal) {
      getHwWeb(newVal).then(res => {
        this.components = JSON.parse(res?.data?.webJsonString || '[]')
      })
      console.log(newVal)
    }
  },
  mounted() {
    getHwWeb(this.$route.query.id).then(res => {
      this.components = JSON.parse(res?.data?.webJsonString || '[]')
    })
  },
  methods: {}
}
</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;
}

.carousel {
  width: 100%;
  height: 650px;
}

.productCenter {
  width: 100%;
  text-align: center;
}

.classicCase {
  width: 100%;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url("~@/assets/image/bg.jpg");
  background-size: 100% 36.41vw;
  background-repeat: no-repeat;
}

.newsCenter {
  width: 100%;
}

</style>