portal_website/src/views/productCenter/detail.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"/>
        <El1 v-if="i.type === 1" :data="i.value"/>
        <El2 v-if="i.type === 2" :data="i.value"/>
        <El3 v-if="i.type === 3" :data="i.value"/>
        <El4 v-if="i.type === 4" :data="i.value"/>
        <El5 v-if="i.type === 5" :data="i.value"/>
        <El6 v-if="i.type === 6" :data="i.value"/>
        <El7 v-if="i.type === 7" :data="i.value"/>
        <El8 v-if="i.type === 8" :data="i.value"/>
        <El9 v-if="i.type === 9" :data="i.value"/>
        <El10 v-if="i.type ===10" :data="i.value"/>
        <El11 v-if="i.type === 11" :data="i.value"/>
        <El12 v-if="i.type === 12" :data="i.value"/>
        <El13 v-if="i.type === 13" :data="i.value"/>
        <El14 v-if="i.type === 14" :data="i.value"/>
        <El15 v-if="i.type === 15" :data="i.value"/>
        <El16 v-if="i.type === 16" :data="i.value"/>
      </div>

    </div>

    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>
<script>
import El1 from "@/components/el/el1.vue";
import El2 from "@/components/el/el2.vue";
import El3 from "@/components/el/el3.vue";
import El4 from "@/components/el/el4.vue";
import El5 from "@/components/el/el5.vue";
import El6 from "@/components/el/el6.vue";
import El7 from "@/components/el/el7.vue";
import El8 from "@/components/el/el8.vue";
import El9 from "@/components/el/el9.vue";
import El10 from "@/components/el/el10.vue";
import El11 from "@/components/el/el11.vue";
import El12 from "@/components/el/el12.vue";
import El13 from "@/components/el/el13.vue";
import El14 from "@/components/el/el14.vue";
import El15 from "@/components/el/el15.vue";
import El16 from "@/components/el/el16.vue";
import Copyright from '@/components/copyright'
import ContactUs from "@/views/index/contactUs.vue";
import Carousel from "@/components/el/carousel.vue";
import {getHwWeb, listHwWeb1} 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,
    El1,
    El2,
    El3,
    El4,
    El5,
    El6,
    El7,
    El8,
    El9,
    El10,
    El11,
    El12,
    El13,
    El14,
    El15,
    El16,
  },
  data() {
    return {
      a: '1',
      addEl: false,
      value: [],
      components: [],
    }
  },
  watch: {
    '$route'() {
      listHwWeb1({
        webCode: this.$route.query.type,
        typeId: this.$route.query.typeId,
        deviceId: this.$route.query.id
      }).then(e => {
        this.components = JSON.parse(e.rows?.[0]?.webJsonString || '[]')
      })
    }
  },
  mounted() {
    listHwWeb1({
      webCode: this.$route.query.type,
      typeId: this.$route.query.typeId,
      deviceId: this.$route.query.id
    }).then(e => {
      this.components = JSON.parse(e.rows?.[0]?.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>