From a91ca52bcbb76e07723d5fe7b5dc40df9bf20252 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Tue, 24 Mar 2026 11:03:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=A1=8C=E4=B8=9A=E6=96=B9?=
 =?UTF-8?q?=E6=A1=88=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/index.vue          |  12 +-
 src/components/search/index.vue        |   2 +-
 src/views/industrySolutions/index.vue  | 291 ++++++++++++----------
 src/views/industrySolutions/index1.vue | 324 +++++++++++++++++++++++++
 4 files changed, 500 insertions(+), 129 deletions(-)
 create mode 100644 src/views/industrySolutions/index1.vue

diff --git a/src/components/chat/index.vue b/src/components/chat/index.vue
index 1270d9a..07d2d3f 100644
--- a/src/components/chat/index.vue
+++ b/src/components/chat/index.vue
@@ -79,12 +79,12 @@ export default {
   },
   mounted() {
     listHwWebDocument()
-    setTimeout(() => {
-      this.isChat = true;
-      this.$nextTick(() => {
-        this.scrollToBottom()
-      })
-    }, 5 * 1000)
+    // setTimeout(() => {
+    //   this.isChat = true;
+    //   this.$nextTick(() => {
+    //     this.scrollToBottom()
+    //   })
+    // }, 5 * 1000)
   },
   methods: {
     consultation() {
diff --git a/src/components/search/index.vue b/src/components/search/index.vue
index cf59050..ce7bae6 100644
--- a/src/components/search/index.vue
+++ b/src/components/search/index.vue
@@ -24,7 +24,7 @@
             </div>
           </div>
         </div>
-        <div class="classify"  v-if="list1.length > 0">
+        <div class="classify" v-if="list1.length > 0">
           <div class="classifyName">
             产品中心
           </div>
diff --git a/src/views/industrySolutions/index.vue b/src/views/industrySolutions/index.vue
index 9858c97..95e1d77 100644
--- a/src/views/industrySolutions/index.vue
+++ b/src/views/industrySolutions/index.vue
@@ -1,11 +1,56 @@
 <template>
   <div>
     <div class="banner">
-
-      <Carousel class="carousel" :bannerList="bannerList"/>
+      <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.title.length}),1.4vw);width:${tabsActive === i.id ? (100/tabsData.length+'%'):`calc(${100/tabsData.length}% - 2px)`}`"
+               :class="`tab ${tabsActive === i.id ? 'active':''}`" v-for="(i,k) in tabsData">
+            {{ i.title }}
+          </div>
+        </div>
+      </div>
     </div>
+    <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">
-      <template v-for="i in tabsList">
+      <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 + ') '}">
@@ -13,13 +58,10 @@
 
           <!-- 右侧内容 -->
           <div class="card-content">
-            <h3 class="card-title">{{ i.title }}</h3>
-            <!--            <p class="card-subtitle">{{ i.value }}</p>-->
-            <div class="card-subtitle1"></div>
-            <p class="card-desc">{{ i.info }}</p>
-            <div class="card-arrow" @click="$router.push('/test?id=' + i.id)">
-              →
-<!--              <i class="arrow">→</i>-->
+            <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>
@@ -33,39 +75,51 @@
 <script>
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
-import {selectMenuTree} from "@/api/hwWebMenu";
-import Carousel from "@/views/index/carousel.vue";
+import Swiper from 'swiper';
+import {Autoplay, Navigation} from "swiper/modules";
+import TitleGroup from "@/components/TitleGroup.vue";
+
+Swiper.use([Navigation, Autoplay])
 
 export default {
-  name: 'ContactUs1',
+  name: 'ProductCenter',
   components: {
-    Carousel,
+    TitleGroup,
     ContactUs,
-    Copyright
+    Copyright,
   },
   data() {
     return {
-      bannerList: [
+      tabsActive: 0,
+      pageData: {
+        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+        bannerTitle: '',
+        productList: [],
+      },
+      webMenuId: 0,
+      cases: [
         {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+          title: '标题',
+          value: '信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
         },
         {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+          title: '标题',
+          value: '信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
         },
         {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+          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',
         },
       ],
-      banner:'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
-      bannerTitle: '',
-      tabsActive: 0,
-      tabsList: [
+      tabsData: [
         {
           title: '智能轮胎',
           value: '智能轮胎介绍',
@@ -116,25 +170,56 @@ export default {
           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() {
-    // this.getData()
+    if (this.$route.query.id) {
+      this.tabsActive = parseFloat(this.$route.query.id)
+    }
+    this.initSwiper()
+  },
+  watch: {
+    '$route'() {
+      this.tabsActive = parseFloat(this.$route.query.id)
+    }
   },
   methods: {
-    getData() {
-      selectMenuTree().then(e=>{
-        let data = e.data.find(v=>v.webMenuId ===4)?.children
-        this.tabsList = data.map(v=>{
-          return {
-            title:v.webMenuName,
-            value:v.webMenuName+'介绍',
-            info:v.webMenuName+'信息',
-            id:v.webMenuId
-          }
-        })
-        console.log(data)
-      })
+    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",
+        },
+      });
     }
   }
 }
@@ -143,11 +228,6 @@ export default {
 <style lang="less" scoped>
 @import "~@/style.less";
 
-.carousel {
-  width: 100%;
-  height: 35.5vw;
-}
-
 .banner {
   width: 100%;
   height: 35.5vw;
@@ -192,7 +272,6 @@ export default {
 
       .tab {
         display: inline-block;
-        width: 25%;
         line-height: 6.2vw;
         font-size: 1.6vw;
         letter-spacing: 3px;
@@ -200,25 +279,30 @@ export default {
 
       .tab.active {
         color: @standard-color;
-        width: calc(25% - 2px);
-        border: 1px solid #fff;
+        width: calc(50% - 3px);
+        border: 1px solid #fff6;
         box-shadow: 0 0 3px #0002;
       }
     }
   }
 }
 
-.companyProfile {
-  width: 100%;
-}
+.swiper {
+  width: 58vw;
+  margin: 0 auto;
 
-.enterpriseQualification {
-  width: 100%;
-  position: relative;
-}
+  .swiper-slide {
+    position: relative;
 
-.teamStyle {
-  width: 100%;
+    .inner {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      background: linear-gradient(to right, #41B5EA, #0000);
+      height: 4vw;
+    }
+  }
 }
 
 .contactUs {
@@ -230,93 +314,56 @@ export default {
   width: 100%;
   background-color: #1d3348;
 }
-.card{
-  width: calc(48% - 2px);
+
+.card {
+  width: calc(32% - 2px);
   display: inline-block;
   height: 300px;
   position: relative;
   border: 1px solid #0001;
 
-  &:nth-child(2n) {
+  &:nth-child(3n) {
     margin-left: 2%;
   }
 
-  &:nth-child(2n-1) {
+  &:nth-child(3n-1) {
     margin-left: 2%;
   }
 
-  .card-img{
-    position: absolute;
-    //opacity: 0.4;
-    width: 40%;
-    height: 100%;
+  .card-img {
+    width: 100%;
+    height: calc(100% - 3vw);
     top: 0;
     left: 0;
     background-repeat: no-repeat;
-    background-size: 100% 100%;
-    ///* 设置透明蒙版 */
-    //-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-    //-webkit-mask-repeat: no-repeat;
-    //-webkit-mask-size: 100% 100%;
-    //
-    //mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
-    //mask-repeat: no-repeat;
-    //mask-size: 100% 100%;
+    background-size: contain;
+    background-position: center;
   }
 
 
-  .card-title{
-
-    position: absolute;
-    left: 45%;
-    top: 40px;
-    font-size: 24px;
-  }
-  .card-subtitle{
-    position: absolute;
-    left: 45%;
-    top: 80px;
-    width: 70%;
-    font-size: 18px;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  .card-title {
+    font-size: 1vw;
+    line-height: 3vw;
+    padding-left: 2vw;
+    color: #333
   }
 
-  .card-subtitle1 {
+  .card-arrow {
     position: absolute;
-    top: 115px;
-    left: 45%;
-    width: 5%;
-    height: 3px;
-    background-color: #2e445c;
-  }
-  .card-desc{
-    width: 50%;
-    position: absolute;
-    left: 45%;
-    top: 120px;
-    text-align: left;
-    font-size: 14px;
-    color: #0005;
-  }
-
-  .card-arrow{
-    position: absolute;
-    right: 30px;
-    bottom: 30px;
-    height: 20px;
-    width: 20px;
+    right: 1vw;
+    bottom: 0.5vw;
+    height: 2vw;
+    width: 2vw;
     border: 2px solid #0009;
     border-radius: 50%;
-    padding: 8px;
-    line-height: 17px;
+    line-height: 2vw;
     transition: all 0.3s;
     cursor: pointer;
-    &:hover{
+    text-align: center;
+
+    &:hover {
       background-color: #409EFF;
-      color:#fff;
+      color: #fff;
       border-color: #fff
     }
   }
diff --git a/src/views/industrySolutions/index1.vue b/src/views/industrySolutions/index1.vue
new file mode 100644
index 0000000..9858c97
--- /dev/null
+++ b/src/views/industrySolutions/index1.vue
@@ -0,0 +1,324 @@
+<template>
+  <div>
+    <div class="banner">
+
+      <Carousel class="carousel" :bannerList="bannerList"/>
+    </div>
+    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
+      <template v-for="i in tabsList">
+        <div class="card">
+          <!-- 左侧图片 -->
+          <div class="card-img" :style="{backgroundImage: 'url(' + i.img + ') '}">
+          </div>
+
+          <!-- 右侧内容 -->
+          <div class="card-content">
+            <h3 class="card-title">{{ i.title }}</h3>
+            <!--            <p class="card-subtitle">{{ i.value }}</p>-->
+            <div class="card-subtitle1"></div>
+            <p class="card-desc">{{ i.info }}</p>
+            <div class="card-arrow" @click="$router.push('/test?id=' + i.id)">
+              →
+<!--              <i class="arrow">→</i>-->
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {selectMenuTree} from "@/api/hwWebMenu";
+import Carousel from "@/views/index/carousel.vue";
+
+export default {
+  name: 'ContactUs1',
+  components: {
+    Carousel,
+    ContactUs,
+    Copyright
+  },
+  data() {
+    return {
+      bannerList: [
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+      ],
+      banner:'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
+      bannerTitle: '',
+      tabsActive: 0,
+      tabsList: [
+        {
+          title: '智能轮胎',
+          value: '智能轮胎介绍',
+          info: '智能轮胎信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '5'
+        },
+        {
+          title: '轮胎工厂',
+          value: '轮胎工厂介绍',
+          info: '轮胎工厂信息',
+          img: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+          id: '18'
+        },
+        {
+          title: '快递物流',
+          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'
+        },
+      ],
+    }
+  },
+  mounted() {
+    // this.getData()
+  },
+  methods: {
+    getData() {
+      selectMenuTree().then(e=>{
+        let data = e.data.find(v=>v.webMenuId ===4)?.children
+        this.tabsList = data.map(v=>{
+          return {
+            title:v.webMenuName,
+            value:v.webMenuName+'介绍',
+            info:v.webMenuName+'信息',
+            id:v.webMenuId
+          }
+        })
+        console.log(data)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.carousel {
+  width: 100%;
+  height: 35.5vw;
+}
+
+.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: 25%;
+        line-height: 6.2vw;
+        font-size: 1.6vw;
+        letter-spacing: 3px;
+      }
+
+      .tab.active {
+        color: @standard-color;
+        width: calc(25% - 2px);
+        border: 1px solid #fff;
+        box-shadow: 0 0 3px #0002;
+      }
+    }
+  }
+}
+
+.companyProfile {
+  width: 100%;
+}
+
+.enterpriseQualification {
+  width: 100%;
+  position: relative;
+}
+
+.teamStyle {
+  width: 100%;
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+.card{
+  width: calc(48% - 2px);
+  display: inline-block;
+  height: 300px;
+  position: relative;
+  border: 1px solid #0001;
+
+  &:nth-child(2n) {
+    margin-left: 2%;
+  }
+
+  &:nth-child(2n-1) {
+    margin-left: 2%;
+  }
+
+  .card-img{
+    position: absolute;
+    //opacity: 0.4;
+    width: 40%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    ///* 设置透明蒙版 */
+    //-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    //-webkit-mask-repeat: no-repeat;
+    //-webkit-mask-size: 100% 100%;
+    //
+    //mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    //mask-repeat: no-repeat;
+    //mask-size: 100% 100%;
+  }
+
+
+  .card-title{
+
+    position: absolute;
+    left: 45%;
+    top: 40px;
+    font-size: 24px;
+  }
+  .card-subtitle{
+    position: absolute;
+    left: 45%;
+    top: 80px;
+    width: 70%;
+    font-size: 18px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .card-subtitle1 {
+    position: absolute;
+    top: 115px;
+    left: 45%;
+    width: 5%;
+    height: 3px;
+    background-color: #2e445c;
+  }
+  .card-desc{
+    width: 50%;
+    position: absolute;
+    left: 45%;
+    top: 120px;
+    text-align: left;
+    font-size: 14px;
+    color: #0005;
+  }
+
+  .card-arrow{
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+    height: 20px;
+    width: 20px;
+    border: 2px solid #0009;
+    border-radius: 50%;
+    padding: 8px;
+    line-height: 17px;
+    transition: all 0.3s;
+    cursor: pointer;
+    &:hover{
+      background-color: #409EFF;
+      color:#fff;
+      border-color: #fff
+    }
+  }
+}
+</style>