From 17f6cce8baba88c9ce1a87c2c725aac25ecad8d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 29 Aug 2025 18:21:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/menu/index.vue         |  6 ++--
 src/views/contactUs/index.vue         | 29 ++++++++++++++++--
 src/views/industrySolutions/index.vue | 13 ++++----
 src/views/productCenter/index.vue     | 44 ++++++++++++++++++++++++---
 src/views/serviceSupport/index.vue    |  1 -
 5 files changed, 78 insertions(+), 15 deletions(-)

diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index 030f6a8..c4543cd 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -109,9 +109,11 @@ export default {
       } else if (id === 1) {
         this.$router.push('/index')
       } else if (e.ancestors.split(',').includes("2")) {
-        this.$router.push('/contactUs#item' + id)
+        // this.$router.push('/contactUs#item' + id)
+        this.$router.push('/contactUs?id=' + id)
       } else if (e.ancestors.split(',').includes("7")) {
-        this.$router.push('/productCenter#item' + id)
+        // this.$router.push('/productCenter#item' + id)
+        this.$router.push('/productCenter?id=' + id)
       } else if (e.ancestors.split(',').includes("24")) {
         this.$router.push('/serviceSupport?type=' + id)
       }else{
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
index 4e08d24..5415283 100644
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@@ -16,13 +16,18 @@
         </div>
       </div>
     </div>
-    <div v-for="i in data.tabsList">
+    <div v-for="i in data.tabsList" v-if="false">
       <CompanyProfile id="item3" class="companyProfile" v-if="i.type === 2" :data="i.data"/>
       <EnterpriseQualification id="item10" class="enterpriseQualification" v-if="i.type === 3"
                                :data="i.data"/>
       <Partner id="item8" class="companyProfile" v-if="i.type === 4" :data="i.data"/>
       <MediaCenter id="item9" class="companyProfile" v-if="i.type === 5" :data="i.data"/>
     </div>
+    <CompanyProfile v-if="itemId === 3" id="item3" class="companyProfile" :data="data.tabsList[0].data"/>
+    <Partner id="item8" v-if="itemId === 8" class="companyProfile" :data="data.tabsList[1].data"/>
+    <MediaCenter id="item9" v-if="itemId === 9" class="companyProfile" :data="data.tabsList[2].data"/>
+    <EnterpriseQualification v-if="itemId === 10" id="item10" class="enterpriseQualification"
+                             :data="data.tabsList[3].data"/>
     <!--    <div v-for="i in tabsList">-->
     <!--      <CompanyProfile class="companyProfile" v-if="i.type === '2'" :data="i.data"/>-->
     <!--      <EnterpriseQualification class="enterpriseQualification" v-if="i.aboutUsInfoType === '3'"-->
@@ -62,6 +67,7 @@ export default {
       bannerTitle: '',
       tabsActive: 0,
       tabsList: [],
+      itemId: 3,
       data:{
         banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
         tabsList:[
@@ -151,10 +157,29 @@ export default {
   mounted() {
     this.getData()
   },
+  watch: {
+    '$route'() {
+      let id = parseFloat(this.$route.query.id || '3')
+      if (id === 3) {
+        this.tabsActive = 0
+      }
+      if (id === 8) {
+        this.tabsActive = 1
+      }
+      if (id === 9) {
+        this.tabsActive = 2
+      }
+      if (id === 10) {
+        this.tabsActive = 3
+      }
+      this.itemId = id
+    }
+  },
   methods: {
     checkTabs(e,k) {
       this.tabsActive = k
-      document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
+      this.itemId = e.id
+      // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
     },
     getData() {
       getAboutUsInfo().then(e => {
diff --git a/src/views/industrySolutions/index.vue b/src/views/industrySolutions/index.vue
index 9809b3e..ac14996 100644
--- a/src/views/industrySolutions/index.vue
+++ b/src/views/industrySolutions/index.vue
@@ -9,7 +9,7 @@
         青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
       </div>
     </div>
-    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; ">
+    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
       <template v-for="i in tabsList">
         <div class="card">
           <!-- 左侧图片 -->
@@ -212,16 +212,17 @@ export default {
   background-color: #1d3348;
 }
 .card{
-  width: calc(31% - 2px);
+  width: calc(48% - 2px);
   display: inline-block;
-  height: 400px;
+  height: 300px;
   position: relative;
   border: 1px solid #0001;
-  &:nth-child(3n){
+
+  &:nth-child(2n) {
     margin-left: 2%;
   }
 
-  &:nth-child(3n-1) {
+  &:nth-child(2n-1) {
     margin-left: 2%;
   }
 
@@ -273,7 +274,7 @@ export default {
     background-color: #2e445c;
   }
   .card-desc{
-    width: 70%;
+    width: 50%;
     position: absolute;
     left: 45%;
     top: 120px;
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index 2b530a6..c24542f 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -6,10 +6,20 @@
         :src="banner"
         fit="contain"></el-image>
       <div class="bannerInfo">{{ bannerTitle }}</div>
+      <div class="tabs">
+        <div class="content">
+          <div @click="checkTabs(i,k)"
+               :style="`width:${tabsActive === k ? (100/productList.length+'%'):`calc(${100/productList.length}% - 2px)`}`"
+               :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in productList">
+            {{ i.name }}
+          </div>
+        </div>
+      </div>
     </div>
 
     <div v-for="i in productList">
-      <ProduceModel :id="`item${i.id}`" :i="i"/>
+      {{ i.itemId }}
+      <ProduceModel :id="`item${i.id}`" :i="i" v-if="itemId === i.id"/>
     </div>
 
 
@@ -33,8 +43,10 @@ export default {
   },
   data() {
     return {
+      tabsActive: 0,
+      itemId: '11',
       banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
-      // bannerTitle: 'assdadasdasdaasda',
+      bannerTitle: '',
       productList: [
         {
           name: '轮胎RFID',
@@ -257,7 +269,27 @@ export default {
   },
   watch: {
     '$route'() {
-      this.getData()
+      // 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: {
@@ -266,6 +298,11 @@ export default {
         console.log(e)
       })
     },
+    checkTabs(e, k) {
+      this.tabsActive = k
+      this.itemId = e.id
+      // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
+    },
   }
 }
 </script>
@@ -317,7 +354,6 @@ export default {
 
       .tab {
         display: inline-block;
-        width: 50%;
         line-height: 6.2vw;
         font-size: 1.6vw;
         letter-spacing: 3px;
diff --git a/src/views/serviceSupport/index.vue b/src/views/serviceSupport/index.vue
index bc89725..726f2f4 100644
--- a/src/views/serviceSupport/index.vue
+++ b/src/views/serviceSupport/index.vue
@@ -66,7 +66,6 @@ export default {
   },
   watch: {
     '$route'() {
-      console.log(12312)
       let id = this.$route.query.type || '25'
       if (id === '25' || id === '26') {
         this.tabsActive = 0