portal_website/src/views/productCenter.vue

<template>
  <div>
    <div class="banner">
      <el-image
          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
          :src="banner"
          fit="contain"></el-image>
      <div class="bannerInfo">{{ bannerTitle }}</div>
      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
      <div class="tabs">
        <div class="content">
          <div v-if="tabsList.length<1" v-for="(i,k) in tabsList" @click="checkTabs(i,k)"
               :class="`tab ${tabsActive === k ? 'active':''}`"
               :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
            {{ i.configTypeName }}
          </div>
        </div>
      </div>
    </div>
    <div>
      <div v-for="i in contentList">
        <EL1 class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'" :data="i"/>
        <EL2 class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'" :data="i"/>
        <EL3 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'" :data="i"/>
        <EL4 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'" :data="i"/>
        <EL5 class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'" :data="i"/>
        <EL6 class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'" :data="i"/>
        <EL7 class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
        <EL8 class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
        <EL9 class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
        <EL11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
        <EL12 class="dataAcquisitionSensing" v-if="i.configModal === '12'" :data="i"/>
      </div>
    </div>
    <!--    <div v-if="tabsActive === 1">-->
    <!--      <div v-for="(i, k) in contentList">-->
    <!--      </div>-->
    <!--    </div>-->
    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import EL1 from '@/components/element/el1.vue'
import EL2 from '@/components/element/el2.vue'
import EL3 from '@/components/element/el3.vue'
import EL4 from '@/components/element/el4.vue'
import EL5 from '@/components/element/el5.vue'
import EL6 from '@/components/element/el6.vue'
import EL7 from '@/components/element/el7.vue'
import EL8 from '@/components/element/el8.vue'
import EL9 from '@/components/element/el9.vue'
// import EL10 from '@/components/element/el10.vue'
import EL11 from '@/components/element/el11.vue'
import EL12 from '@/components/element/el12.vue'
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";

export default {
  name: 'ProductCenter',
  components: {
    EL1,
    EL2,
    EL3,
    EL4,
    EL5,
    EL6,
    EL7,
    EL8,
    EL9,
    // EL10,
    EL11,
    EL12,
    ContactUs,
    Copyright,
  },
  data() {
    return {
      banner: '',
      bannerTitle: '',
      tabsActive: 0,
      tabsList: [],
      configTypeId: 0,
      contentList: []
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    '$route'() {
      this.getData()
    }
  },
  methods: {
    getContentList(id) {
      getProductCenterProductInfos({
        configTypeId: id,
        // parentId: 0
      }).then(e => {
        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
      })
    },
    checkTabs(i, k) {
      this.tabsActive = k
      this.configTypeId = i.configTypeId
      this.getContentList(i.configTypeId)
    },
    getData() {
      getPortalConfigList({
        portalConfigType: 2,
        portalConfigTypeId: this.$route.query.id,
        pageNum: 1,
        pageSize: 5
      }).then(e => {
        this.banner = e.rows?.[0]?.portalConfigPic
        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
      })
      getPortalConfigTypeList({
        parentId: this.$route.query.id,
        pageNum: 1,
        pageSize: 50
      }).then(e => {
        this.tabsList = e.rows
        this.configTypeId = e.rows?.[0]?.configTypeId
        if (e.rows?.[0]?.configTypeId) {
          this.getContentList(e.rows?.[0]?.configTypeId)
        } else {
          this.contentList = []
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.banner {
  width: 100%;
  height: 35.5vw;
  position: relative;

  .bannerInfo {
    position: absolute;
    top: 35%;
    left: 19%;
    width: 45%;
    text-align: left;
    font-size: 1.4vw;
    color: @standard-color;
    line-height: 2.5vw;
    letter-spacing: 4px;
    word-break: break-all;
  }

  .bannerBtn {
    position: absolute;
    top: 58%;
    left: 19%;
    width: 11.5vw;
    font-size: 1.2vw;
    line-height: 2vw;
    letter-spacing: 2px;
  }

  .tabs {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
    backdrop-filter: saturate(50%) blur(4px);

    .content {
      width: 62%;
      position: relative;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);

      .tab {
        display: inline-block;
        width: 50%;
        line-height: 6.2vw;
        font-size: 1.6vw;
        letter-spacing: 3px;
      }

      .tab.active {
        color: @standard-color;
        width: calc(50% - 3px);
        border: 1px solid #fff;
        box-shadow: 0 0 3px #0002;
      }
    }
  }
}

.platformAdvantages {
  width: 100%;
}

.platformIntroduction {
  width: 100%;
  background-color: #f4f9ff;
}

.platformAdvantages2 {
  width: 100%;
}

.platformAdvantages3 {
  width: 100%;
  background-color: #f6f7fb;
}

.platformArchitecture {
  width: 100%;
}

.technicalArchitecture {
  width: 100%;
  background-color: #f4f9ff;
}

.contactUs {
  width: 100%;
  background-color: #2e445c;
}

.copyright {
  width: 100%;
  background-color: #1d3348;
}
</style>