portal_website/src/views/industrySolutions/index.vue

<template>
  <div>
    <div class="banner">
      <el-image
          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
          :src="tabsData.find(e => e.id === tabsActive)?.img || pageData.banner"
          fit="contain"></el-image>
      <div class="bannerInfo">{{ pageData.bannerTitle }}</div>
    </div>
    <div class="tabs">
      <div class="content">
        <div @click="checkTabs(i,k)"
             style="white-space: nowrap;overflow: auto"
             :style="{width:`calc(${widthArr[k]}% - 2vw)`,fontSize:`${tabsFontSize}vw`}"
             :class="`tab ${tabsActive == i.id ? 'active':''}`" v-for="(i,k) in  tabsData">
          {{ i.title }}
        </div>
      </div>
    </div>
    <template v-if="false">
      <TitleGroup>
        <template slot="title">TYPICAL CASE</template>
        <template slot="subTitle">经典案例</template>
      </TitleGroup>
      <div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="i in cases">
              <el-image
                  style="width: 100%;height: 100%"
                  :src="i.img"
                  fit="contain"></el-image>
              <div class="inner">
                <div class="title">
                  {{ i.title }}
                </div>
                <div class="value">
                  {{ i.value }}
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
      <TitleGroup>
        <template slot="title">SUPPORTING PRODUCT</template>
        <template slot="subTitle">配套产品</template>
      </TitleGroup>
      <div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
        <template v-for="i in productList">
          <div class="card">
            <!-- 左侧图片 -->
            <div class="card-img" :style="{backgroundImage: 'url(' + i.img + ') '}">
            </div>

            <!-- 右侧内容 -->
            <div class="card-content">
              <div class="card-title">{{ i.name }}</div>
              <div class="card-arrow"
                   @click="$router.push(`productCenter/detail?type=${i.route[0]}&typeId=${i.route[1]}&id=${i.route[2]}`)">
                <i class="el-icon-right"></i>
              </div>
            </div>
          </div>
        </template>
      </div>
    </template>
    <template v-if="true">
      <Page :id="tabsActive"/>
    </template>
    <!--    <ContactUs class="contactUs"/>-->
    <!--    <Copyright class="copyright"/>-->
  </div>
</template>

<script>
import ContactUs from '@/components/contactUs'
import Copyright from '@/components/copyright'
import Swiper from 'swiper';
import {Autoplay, Navigation} from "swiper/modules";
import TitleGroup from "@/components/TitleGroup.vue";
import Page from "@/views/page/index.vue";
import img1 from '@/assets/image/industrySolutions/3-1智能轮胎.png';
import img2 from '@/assets/image/industrySolutions/3-2轮胎工厂.png';
import img3 from '@/assets/image/industrySolutions/3-3快递物流.png';
import img4 from '@/assets/image/industrySolutions/3-4畜牧食品.png';
import img5 from '@/assets/image/industrySolutions/3-5新能源.png';
import img6 from '@/assets/image/industrySolutions/3-6智能制造.png';
import img7 from '@/assets/image/industrySolutions/3-7工业物联.png';


Swiper.use([
  Navigation,
  Autoplay
])

export default {
  name: 'ProductCenter',
  components: {
    TitleGroup,
    ContactUs,
    Copyright,
    Page
  },
  data() {
    return {
      tabsActive: 0,
      pageData: {
        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        bannerTitle: '',
        productList: [],
      },
      webMenuId: 0,
      cases: [
        {
          title: '标题',
          value: '信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        },
        {
          title: '标题',
          value: '信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        },
        {
          title: '标题',
          value: '信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        },
        {
          title: '标题',
          value: '信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
        },
      ],
      tabsData: [
        {
          title: '成品胎RFID全生命周期',
          value: '智能轮胎介绍',
          info: '智能轮胎信息',
          img: img1,
          id: '5'
        },
        {
          title: '工厂制造-RFID全流程管理',
          value: '轮胎工厂介绍',
          info: '轮胎工厂信息',
          img: img2,
          id: '18'
        },
        {
          title: 'RFID包裹分拣',
          value: '快递物流介绍',
          info: '快递物流信息',
          img: img3,
          id: '19'
        },
        {
          title: '工厂制造-仓储物流',
          value: '畜牧食品介绍',
          info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
          img: img4,
          id: '20'
        },
        {
          title: '能源计量',
          value: '新能源介绍',
          info: '新能源信息',
          img: img7,
          id: '21'
        },
        {
          title: '智能制造物联网',
          value: '智能制造介绍',
          info: '智能制造信息',
          img: img6,
          id: '22'
        },
        {
          title: '信息化数据平台',
          value: '工业物联介绍',
          info: '工业物联信息',
          img: img5,
          id: '23'
        },
      ],
      productList: [
        {
          name: 'HW-145L-6系列',
          img: 'http://1.13.177.47:9665/statics/2025/09/29/a7ed9fc42af9b6386126eee351f4937_20250929143910A279.png',
          route: [
            12,
            1,
            2
          ]
        },
        {
          name: 'HW-R300系列',
          img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250926144121_20250929144331A280.png',
          route: [
            12,
            1,
            3
          ]
        },
        {
          name: 'HW-D100系列',
          img: 'http://1.13.177.47:9665/statics/2025/09/30/%E5%9B%BE%E7%89%87bbb_20250930172331A326.png',
          route: [
            12,
            1,
            4
          ]
        },
        {
          name: 'HW-R200系列',
          img: 'http://1.13.177.47:9665/statics/2025/09/29/%E5%9B%BE%E7%89%871_20250929162825A294.png',
          route: [
            12,
            2,
            2
          ]
        },
      ]
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.tabsActive = parseFloat(this.$route.query.id)
    } else {
      this.tabsActive = this.tabsData[0].id
    }
    this.initSwiper()
  },
  computed: {
    tabsFontSize: function () {
      let max = 0
      this.tabsData.forEach(item => {
        max = Math.max(max, item.title.length)
      })
      let width = 100 / this.tabsData.length
      return width / max
    },
    widthArr: function () {
      let length = 0
      this.tabsData.forEach(item => {
        length += this.getTextWidth(item.title)
      })
      return this.tabsData.map(item => {
        return (this.getTextWidth(item.title) / length) * 100
      })
    }
  },
  watch: {
    '$route'() {
      this.tabsActive = parseFloat(this.$route.query.id)
    }
  },
  methods: {
    getTextWidth(text) {
      return String(text || '').split('').reduce((total, char) => {
        return total + (/[\x00-\xff]/.test(char) ? 1 : 2)
      }, 0)
    },
    checkTabs(e, k) {
      this.tabsActive = e.id
    },
    initSwiper() {
      const swiper = new Swiper(".mySwiper", {
        slidesPerView: 1.5,
        spaceBetween: '3.9%',
        centeredSlides: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    }
  }
}
</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 {
//  cursor: pointer;
//  bottom: 0;
//  width: 100%;
//  white-space: nowrap;
//  background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
//  backdrop-filter: saturate(50%) blur(4px);
//
//  .content {
//    width: 100%;
//    position: relative;
//    left: 50%;
//    bottom: 0;
//    transform: translateX(-50%);
//
//    .tab {
//      display: inline-block;
//      line-height: 6.2vw;
//      letter-spacing: 3px;
//      font-size: 1vw;
//      position: relative;
//      padding: 0 2vw;
//
//      &:last-child::after {
//        display: none;
//      }
//
//      &::after {
//        content: '';
//        position: absolute;
//        right: 0;
//        width: 1px;
//        height: 1vw;
//        background-color: #409eff;
//        top: calc(50% - 0.5vw);
//      }
//    }
//
//    .tab.active {
//      color: @standard-color;
//      //border: 1px solid #fff6;
//      //box-shadow: 0 0 3px #0002;
//    }
//  }
//}

.tabs {
  position: sticky;
  top: 0;
  margin-top: calc(-6.405vw + 2px);
  width: calc(100% - 2px);
  height: calc(6.405vw - 2px);
  white-space: nowrap;
  //background: linear-gradient(to bottom, fade(@standard-color, 10), fade(#fff, 10));
  background: linear-gradient(to bottom, #e7efff, #f6faff);
  //backdrop-filter: saturate(50%) blur(4px);
  border: 1px solid #fff;
  z-index: 9999;
  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.1);

  .content {
    width: 100vw;
    position: relative;
    left: 19%;
    left: 0%;
    bottom: 0;
    text-align: left;
    //transform: translateX(-50%);

    .tab {
      cursor: pointer;
      display: inline-block;
      line-height: 6.2vw;
      letter-spacing: 3px;
      font-size: 1.6vw;
      position: relative;
      text-align: center;
      padding: 0 1vw;

      //&:last-child::after {
      //  display: none;
      //}
      //
      //&::after {
      //  content: '';
      //  position: absolute;
      //  right: 0;
      //  width: 1px;
      //  height: 1vw;
      //  background-color: #409eff;
      //  top: calc(50% - 0.5vw);
      //}
    }

    .tab.active {
      color: @standard-color;
      font-weight: 700;
      border: 1px solid #fff;
      box-shadow: 0 0 3px #0002;
    }
  }
}

.swiper {
  width: 58vw;
  margin: 0 auto;

  .swiper-slide {
    position: relative;

    .inner {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: linear-gradient(to right, #41B5EA, #0000);
      height: 4vw;
    }
  }
}

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

.copyright {
  width: 100%;
  background-color: #1d3348;
}

.card {
  width: calc(32% - 2px);
  display: inline-block;
  height: 300px;
  position: relative;
  margin-bottom: 1vw;
  border: 1px solid #0001;

  &:nth-child(3n) {
    margin-left: 2%;
  }

  &:nth-child(3n-1) {
    margin-left: 2%;
  }

  .card-img {
    width: 100%;
    height: calc(100% - 3vw);
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }


  .card-title {
    font-size: 1vw;
    line-height: 3vw;
    padding-left: 2vw;
    color: #333
  }

  .card-arrow {
    position: absolute;
    right: 1vw;
    bottom: 0.5vw;
    height: 2vw;
    width: 2vw;
    border: 2px solid #0009;
    border-radius: 50%;
    line-height: 2vw;
    transition: all 0.3s;
    cursor: pointer;
    text-align: center;

    &:hover {
      background-color: #409EFF;
      color: #fff;
      border-color: #fff
    }
  }
}
</style>