portal_website/src/views/productCenter/index.vue

<template>
  <div>
    <div class="banner">
      <el-image
        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
        :src="pageData.banner"
        fit="contain"></el-image>
      <div class="bannerInfo">{{ pageData.bannerTitle }}</div>
      <div class="tabs">
        <div class="content">
          <div @click="checkTabs(i,k)"
               style="white-space: nowrap;overflow: auto"
               :style="`fontSize:clamp(0.7vw,calc(${(60/tabsData.length)}vw / ${ i.webMenuName.length}),1.4vw);width:${tabsActive === i.webMenuId ? (100/tabsData.length+'%'):`calc(${100/tabsData.length}% - 2px)`}`"
               :class="`tab ${tabsActive === i.webMenuId ? 'active':''}`" v-for="(i,k) in tabsData">
            {{ i.webMenuName }}
          </div>
        </div>
      </div>
    </div>

    <ProduceModel v-if="tabsActive" :data="pageData.productList.find(e=>e.id===tabsActive) || {}"/>

    <ContactUs class="contactUs"/>
    <Copyright class="copyright"/>
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import ProduceModel from './produceModel.vue'
import {selectMenuTree} from "@/api/productCenter";
import {getHwWeb} from "@/api/hwWeb";

export default {
  name: 'ProductCenter',
  components: {
    ContactUs,
    Copyright,
    ProduceModel
  },
  data() {
    return {
      tabsActive: 0,
      pageData: {
        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        bannerTitle: '',
        productList: [],
      },
      webMenuId: 0,
      tabsData: [],
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.tabsActive = parseFloat(this.$route.query.id)
    }
    this.getData()
  },
  watch: {
    '$route'() {
      this.tabsActive = parseFloat(this.$route.query.id)
      // this.getData()
      // let id = this.$route.query.id
      // if (id === '11') {
      //   this.tabsActive = 0
      // }
      // if (id === '12') {
      //   this.tabsActive = 1
      // }
      // if (id === '13') {
      //   this.tabsActive = 2
      // }
      // if (id === '14') {
      //   this.tabsActive = 3
      // }
      // if (id === '15') {
      //   this.tabsActive = 4
      // }
      // if (id === '16') {
      //   this.tabsActive = 5
      // }
      // this.itemId = id
    }
  },
  methods: {
    getData() {
      getHwWeb(7).then(res => {
        this.pageData = JSON.parse(res?.data?.webJsonString || '[]')
        console.log(JSON.parse(res?.data?.webJsonString || '[]'))
      })
      selectMenuTree().then(e => {
        let tabsData = e.data.find(v => v.webMenuId === 7).children
        this.tabsData = tabsData
        this.tabsActive = tabsData[0].webMenuId
      })
    },
    checkTabs(e, k) {
      this.tabsActive = e.webMenuId
    },
  }
}
</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;
        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;
      }
    }
  }
}

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

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