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="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"
             :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";

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: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '5'
        },
        {
          title: '成品胎RFID全生命周期',
          value: '轮胎工厂介绍',
          info: '轮胎工厂信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '18'
        },
        {
          title: 'RFID包裹分拣',
          value: '快递物流介绍',
          info: '快递物流信息',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8717_20250822141810A130.jpg',
          id: '19'
        },
        {
          title: '工厂制造-仓储物流',
          value: '畜牧食品介绍',
          info: '在畜牧屠宰行业，RFID助力车间自动化，智能化生产，合作客户包括双汇、正大、牧原等',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/12_20250822135124A121.png',
          id: '20'
        },
        {
          title: '信息化数据平台',
          value: '新能源介绍',
          info: '新能源信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          id: '21'
        },
        {
          title: '智能制造物联网',
          value: '智能制造介绍',
          info: '智能制造信息',
          img: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%9B%BE%E7%89%8736_20250822142617A134.jpg',
          id: '22'
        },
        {
          title: '能源计量',
          value: '工业物联介绍',
          info: '工业物联信息',
          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
          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()
  },
  watch: {
    '$route'() {
      this.tabsActive = parseFloat(this.$route.query.id)
    }
  },
  methods: {
    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;
    }
  }
}
.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>