From 2c80a642fc89ac93c3ff38b9b4026a225d27c35d Mon Sep 17 00:00:00 2001
From: suixy <suixy@mesnac.com>
Date: Mon, 25 Aug 2025 06:21:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=A7=E5=93=81=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/productCenter.js                      |   9 +
 src/components/menu/index.vue                 |  13 +-
 src/router/index.js                           |   8 +
 src/views/contactUs/companyProfile.vue        |  22 +-
 .../contactUs/enterpriseQualification.vue     |  45 +-
 .../contactUs/enterpriseQualification1.vue    | 182 +++++++
 src/views/contactUs/index.vue                 |  72 ++-
 src/views/industrySolutions/index.vue         | 239 +++++++++
 src/views/productCenter/detail.vue            |  91 ++--
 src/views/productCenter/detailEdit.vue        | 477 ++++++++++++++++++
 src/views/productCenter/index.vue             |   4 +-
 src/views/productCenter/produceModel.vue      |   9 +-
 12 files changed, 1048 insertions(+), 123 deletions(-)
 create mode 100644 src/views/contactUs/enterpriseQualification1.vue
 create mode 100644 src/views/industrySolutions/index.vue
 create mode 100644 src/views/productCenter/detailEdit.vue

diff --git a/src/api/productCenter.js b/src/api/productCenter.js
index 497fb6a..d9e3e83 100644
--- a/src/api/productCenter.js
+++ b/src/api/productCenter.js
@@ -31,3 +31,12 @@ export function getProductCenterProductDetailInfo(query) {
     params: query
   })
 }
+
+
+export function selectMenuTree(data) {
+  return request({
+    url: '/portal/hwWebMenu1/selectMenuTree',
+    method: 'get',
+    data: data
+  })
+}
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index f0828e4..bd78ebf 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -1,14 +1,10 @@
 <template>
   <div class="menu">
     <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
-         @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? (i.webMenuId):'')">
+         @mouseenter="getChildren(i)" @click="toLink( i.webMenuId )">
       <div :class="`name`">{{ i.webMenuName }}</div>
       <div class="line"></div>
     </div>
-    <div :class="`menuItem `" @click="toLink('productCenter')" @mouseenter="getChildren({})">
-      <div :class="`name`">产品测试</div>
-      <div class="line"></div>
-    </div>
     <div class="subMenu" v-show="(subMenuList||[]).length>0 && subMenuType === 1" @mouseleave="clearChildren">
       <div :class="`topMenuItem${$route.fullPath === ii.path ? ' active':''}`" v-for="(ii,k) in subMenuList"
            @click="toLink(ii.webMenuId)">
@@ -71,9 +67,14 @@ export default {
   },
   methods: {
     toLink(id) {
+      console.log(id)
       if (!id) return
-      if(id === 'productCenter'){
+      if(id === 7){
         this.$router.push('/productCenter')
+      }else if (id === 2){
+        this.$router.push('/contactUs')
+      }else if (id === 4){
+        this.$router.push('/industrySolutions')
       }else{
         this.$router.push('/test?id=' + id)
       }
diff --git a/src/router/index.js b/src/router/index.js
index 879e4a7..35a0f20 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,11 +26,19 @@ export default new Router({
         {
           path: 'productCenter', component: () => import('@/views/productCenter/index.vue'),
 
+        },
+        {
+          path: 'industrySolutions', component: () => import('@/views/industrySolutions/index.vue'),
+
         },
         {
           path: 'productCenter/detail', component: () => import('@/views/productCenter/detail.vue'),
 
         },
+          {
+            path: '/contactUs',
+            component: () => import('@/views/contactUs/index.vue'),
+          },
       ]
       // children: [
       //   {
diff --git a/src/views/contactUs/companyProfile.vue b/src/views/contactUs/companyProfile.vue
index 30f01db..47ee4e4 100644
--- a/src/views/contactUs/companyProfile.vue
+++ b/src/views/contactUs/companyProfile.vue
@@ -6,16 +6,16 @@
     </TitleGroup>
     <div class="content">
       <div class="left">
-        <div class="contentTitle">{{ data.usInfoDetailTitle }}</div>
+        <div class="contentTitle">{{ data.title }}</div>
         <div class="contentSubTitle">HIGHWAY IOT</div>
         <div class="contentInfo">
-          {{ data.usInfoDetailDesc }}
+          {{ data.value }}
         </div>
       </div>
       <div class="right">
         <el-image
           style="width: 100%;height: 100%"
-          :src="data.usInfoDetailPic"
+          :src="data.icon"
           fit="contain"></el-image>
       </div>
     </div>
@@ -23,36 +23,22 @@
 </template>
 
 <script>
-import banner from '@/assets/image/banner.png'
 import TitleGroup from "@/components/TitleGroup";
-import wlw from "@/assets/icon/wlw.png";
 import {getAboutUsInfoDetails} from "@/api/contactUs";
 
-let map = null
 export default {
   name: 'PlatformIntroduction',
-  props:['aboutUsInfoId'],
+  props:['data'],
   components: {
     TitleGroup
   },
   data() {
     return {
-      banner,
-      data:{}
     }
   },
   mounted() {
-    this.getData()
   },
   methods: {
-    getData(){
-      getAboutUsInfoDetails({
-        aboutUsInfoId:this.aboutUsInfoId
-      }).then(e=>{
-        console.log(e)
-        this.data = e.data[0]
-      })
-    }
   }
 }
 </script>
diff --git a/src/views/contactUs/enterpriseQualification.vue b/src/views/contactUs/enterpriseQualification.vue
index 3bb5f11..e1759a2 100644
--- a/src/views/contactUs/enterpriseQualification.vue
+++ b/src/views/contactUs/enterpriseQualification.vue
@@ -4,19 +4,19 @@
     <div class="subTitle">企业资质</div>
     <div class="bg">
       <div class="list1" ref="list1">
-        <div class="item" v-for="i in cardList1">{{ i.usInfoDetailTitle }}</div>
+        <div class="item" v-for="i in data.list1">{{ i }}</div>
       </div>
       <div class="list2" ref="list2">
-        <div class="item" v-for="i in cardList2">{{ i.usInfoDetailTitle }}</div>
+        <div class="item" v-for="i in data.list2">{{ i }}</div>
       </div>
     </div>
     <div class="carousel">
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <div class="swiper-slide" v-for="i in imgList">
+          <div class="swiper-slide" v-for="i in data.list3">
             <el-image
               style="width: 100%;height: 100%"
-              :src="i.usInfoDetailPic"
+              :src="i"
               fit="contain"></el-image>
           </div>
         </div>
@@ -29,51 +29,18 @@
 </template>
 
 <script>
-import banner from '@/assets/image/banner.png'
 import Swiper from 'swiper';
 import {Navigation, Autoplay} from 'swiper/modules'
-import {getAboutUsInfoDetails} from "@/api/contactUs";
 
 Swiper.use([Navigation, Autoplay])
 export default {
   name: 'ProductCenter',
-  props: ['aboutUsInfoId'],
+  props: ['data'],
   data() {
     return {
-      banner,
-      imgList: [],
-      cardList1: [],
-      cardList2: []
     }
   },
   methods: {
-    async getData() {
-      await getAboutUsInfoDetails({
-        aboutUsInfoId: this.aboutUsInfoId
-      }).then(e => {
-        console.log(e)
-        this.imgList = e.data.filter(v => v.usInfoDetailPic)
-        let list = e.data.filter(v => v.usInfoDetailTitle)
-        let cardList = list.filter((v, k) => v.usInfoDetailTitle.length <= 25)
-        let longList = list.filter((v, k) => v.usInfoDetailTitle.length > 25)
-        this.cardList1 = cardList.filter((v, k) => k % 2 === 0)
-        this.cardList2 = cardList.filter((v, k) => k % 2 === 1)
-        if(this.cardList1.length<=this.cardList2.length){
-          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 0))
-          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 1))
-        }else{
-          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 1))
-          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 0))
-        }
-        this.$nextTick(()=>{
-          console.log(this.$refs.list1.offsetHeight)
-          console.log(this.$refs.list2.offsetHeight)
-          let height = (Math.max(this.$refs.list1.offsetHeight,this.$refs.list2.offsetHeight) - 2.2 * (window.innerWidth/100)) + 'px'
-          this.$refs.list1.style.height = height
-          this.$refs.list2.style.height = height
-        })
-      })
-    },
     initSwiper() {
       const swiper = new Swiper(".mySwiper", {
         slidesPerView: 4,
@@ -88,8 +55,6 @@ export default {
     }
   },
   async mounted() {
-    await this.getData()
-    await this.$nextTick()
     this.initSwiper()
   }
 }
diff --git a/src/views/contactUs/enterpriseQualification1.vue b/src/views/contactUs/enterpriseQualification1.vue
new file mode 100644
index 0000000..3bb5f11
--- /dev/null
+++ b/src/views/contactUs/enterpriseQualification1.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div class="title">ENTERPRISE QUALIFICATION</div>
+    <div class="subTitle">企业资质</div>
+    <div class="bg">
+      <div class="list1" ref="list1">
+        <div class="item" v-for="i in cardList1">{{ i.usInfoDetailTitle }}</div>
+      </div>
+      <div class="list2" ref="list2">
+        <div class="item" v-for="i in cardList2">{{ i.usInfoDetailTitle }}</div>
+      </div>
+    </div>
+    <div class="carousel">
+      <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="i in imgList">
+            <el-image
+              style="width: 100%;height: 100%"
+              :src="i.usInfoDetailPic"
+              fit="contain"></el-image>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import banner from '@/assets/image/banner.png'
+import Swiper from 'swiper';
+import {Navigation, Autoplay} from 'swiper/modules'
+import {getAboutUsInfoDetails} from "@/api/contactUs";
+
+Swiper.use([Navigation, Autoplay])
+export default {
+  name: 'ProductCenter',
+  props: ['aboutUsInfoId'],
+  data() {
+    return {
+      banner,
+      imgList: [],
+      cardList1: [],
+      cardList2: []
+    }
+  },
+  methods: {
+    async getData() {
+      await getAboutUsInfoDetails({
+        aboutUsInfoId: this.aboutUsInfoId
+      }).then(e => {
+        console.log(e)
+        this.imgList = e.data.filter(v => v.usInfoDetailPic)
+        let list = e.data.filter(v => v.usInfoDetailTitle)
+        let cardList = list.filter((v, k) => v.usInfoDetailTitle.length <= 25)
+        let longList = list.filter((v, k) => v.usInfoDetailTitle.length > 25)
+        this.cardList1 = cardList.filter((v, k) => k % 2 === 0)
+        this.cardList2 = cardList.filter((v, k) => k % 2 === 1)
+        if(this.cardList1.length<=this.cardList2.length){
+          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 0))
+          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 1))
+        }else{
+          this.cardList1 = this.cardList1.concat(longList.filter((v, k) => k % 2 === 1))
+          this.cardList2 = this.cardList2.concat(longList.filter((v, k) => k % 2 === 0))
+        }
+        this.$nextTick(()=>{
+          console.log(this.$refs.list1.offsetHeight)
+          console.log(this.$refs.list2.offsetHeight)
+          let height = (Math.max(this.$refs.list1.offsetHeight,this.$refs.list2.offsetHeight) - 2.2 * (window.innerWidth/100)) + 'px'
+          this.$refs.list1.style.height = height
+          this.$refs.list2.style.height = height
+        })
+      })
+    },
+    initSwiper() {
+      const swiper = new Swiper(".mySwiper", {
+        slidesPerView: 4,
+        spaceBetween: 30,
+        loop: true,
+        autoplay: true,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      });
+    }
+  },
+  async mounted() {
+    await this.getData()
+    await this.$nextTick()
+    this.initSwiper()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  width: 70vw;
+  margin: 0 auto;
+}
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 2px;
+  color: #fff6;
+}
+
+.subTitle {
+  margin-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #fff;
+}
+
+.bg {
+  width: 100%;
+  height: 23.3vw;
+  background-color: @standard-color;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+
+  .list1 {
+    position: absolute;
+    box-shadow: 0 0 3px #0002;
+    top: 100%;
+    left: 50%;
+    width: 24.8vw;
+    border-radius: 5px;
+    background-color: #fff;
+    transform: translate(calc(-100% - 2vw), -9.5vw);
+  }
+
+  .list2 {
+    position: absolute;
+    box-shadow: 0 0 3px #0002;
+    top: 100%;
+    left: 50%;
+    width: 24.8vw;
+    border-radius: 5px;
+    background-color: #fff;
+    transform: translate(2vw, -9.5vw);
+  }
+
+  .list1, .list2 {
+    text-align: left;
+    padding: 1.1vw 2.1vw;
+    height: auto;
+
+    .item {
+      width: 100%;
+      line-height: 2.5vw;
+      font-size: 1vw;
+      letter-spacing: 1px;
+    }
+  }
+}
+
+.carousel {
+  width: 62vw;
+  margin: 32vw auto 0 auto;
+  position: relative;
+
+  .swiper {
+    width: 58vw;
+    margin: 0 auto;
+  }
+}
+
+.swiper-slide {
+  height: 30vw;
+}
+</style>
diff --git a/src/views/contactUs/index.vue b/src/views/contactUs/index.vue
index 75299cc..029c4e4 100644
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@@ -10,18 +10,23 @@
       </div>
       <div class="tabs">
         <div class="content">
-          <div @click="checkTabs(k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in tabsList">
-            {{ i.aboutUsInfoTitle }}
+          <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">
+            {{ i.title }}
           </div>
         </div>
       </div>
     </div>
-    <div v-for="i in tabsList">
-      <CompanyProfile class="companyProfile" v-if="i.aboutUsInfoType === '2'" :aboutUsInfoId="i.aboutUsInfoId"/>
-      <EnterpriseQualification class="enterpriseQualification" v-if="i.aboutUsInfoType === '3'"
-                               :aboutUsInfoId="i.aboutUsInfoId"/>
-      <TeamStyle class="teamStyle" v-if="i.aboutUsInfoType === '4'" :aboutUsInfoId="i.aboutUsInfoId"/>
+    <div v-for="i in data.tabsList">
+      <CompanyProfile id="companyProfile" class="companyProfile" v-if="i.type === 2" :data="i.data"/>
+      <EnterpriseQualification id="enterpriseQualification" class="enterpriseQualification" v-if="i.type === 3"
+                               :data="i.data"/>
     </div>
+<!--    <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'"-->
+<!--                               :aboutUsInfoId="i.aboutUsInfoId"/>-->
+<!--      <TeamStyle class="teamStyle" v-if="i.aboutUsInfoType === '4'" :aboutUsInfoId="i.aboutUsInfoId"/>-->
+<!--    </div>-->
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
   </div>
@@ -50,14 +55,63 @@ export default {
       bannerTitle: '',
       tabsActive: 0,
       tabsList: [],
+      data:{
+        banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+        tabsList:[
+          {
+            type:2,
+            title:'公司简介',
+            id:'companyProfile',
+            data:{
+              title:'海威物联',
+              value:'青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业物联网整体解决方案。 作为轮胎用RFID电子标签相关4项ISO国际标准与国家标准的制定者，公司具备全球最先进的RFID智能轮胎整体解决方案，包括系列化轮胎用RFID电子标签产品、RFID轮胎生产配套自动化设备、RFID轮胎应用信息化管理系统及数据平台。同时，公司大力推进基于RFID、传感、边缘采集计算、数据传输等技术的工业互联网解决方案在轮胎产业链中的深入应用，为轮胎生产管理、仓储物流、销售跟踪、车队管理、轮胎翻新等环节提供一站式解决方案。所有核心技术及产品均具有自主知识产权。 目前，公司为新能源锂电、快递物流、橡胶制品、畜牧屠宰、轨道交通、化工、家电制造等行业打造工业物联网整体解决方案，以定制RFID标签及读写设备、传感器及智能终端、物联数据平台三个产品方向为支撑，提供数据标识、信息流传动、物联网整合，及人、机、料、法、环全方位数据自动采集、分析与智能化管控方案，促进工业领域产品质量和生产效率全面提升。助力企业推进产业升级，提升数字化、精细化、智能化管理水平。 公司承担国家橡胶与轮胎工程技术研究中心RFID研究所；被认定为国家级专精特新“小巨人”企业、国家高新技术企业、青岛市技术创新中心、科技型中小企业、青岛市雏鹰企业；通过ISO 9001:2015质量管理体系认证、ISO 14001:2015环境体系认证、IS045001:2018职业健康安全管理体系认证；通过信息系统建设和服务能力评估CS2级；主持制定轮胎用RFID电子标签四项ISO国际标准、四项国家标准。 公司承担山东省科技型中小企业创新能力提升工程项目、青岛市第四批“人才特区”人才计划等各级政府项目；主要研发成果获技术发明一等奖、专利金奖等多项省部级科学技术奖励。',
+              icon:''
+            }
+          },
+          {
+            type:3,
+            id:'enterpriseQualification',
+            title:'企业资质',
+            data:{
+              list1:[
+                '国家高新技术企业',
+                '青岛市雏鹰企业',
+                '青岛市“百千万”工程千帆企业',
+                '获批青岛第四批“人才特区”人才项目',
+                '第十一届LT中国物流技术奖-创新应用奖',
+                '轮胎用RFID电子标签产品获得ROSH认证',
+                '第四届“创业齐鲁 共赢未来”高层次人才创业大赛（创业企业类）优胜奖',
+              ],
+              list2:[
+                '国家级专精特新“小巨人”企业',
+                '青岛市专精特新中小企业',
+                '科技型中小企业',
+                '获批山东省中小企业创新能力提升工程项目',
+                '第十届中国创新创业大赛青岛赛区二等奖',
+                '通过ISO 9001质量管理体系认证',
+                '轮胎用RFID电子标签自动化设备通过CE认证',
+                '通过信息系统建设和服务能力评估CS2级',
+              ],
+              list3:[
+                'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+                'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+                'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+                'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+                'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+              ]
+            }
+          },
+        ]
+      }
     }
   },
   mounted() {
     this.getData()
   },
   methods: {
-    checkTabs(e) {
-      this.tabsActive = e
+    checkTabs(e,k) {
+      this.tabsActive = k
+      document.querySelector('#'+e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
     },
     getData() {
       getAboutUsInfo().then(e => {
diff --git a/src/views/industrySolutions/index.vue b/src/views/industrySolutions/index.vue
new file mode 100644
index 0000000..d0130c3
--- /dev/null
+++ b/src/views/industrySolutions/index.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="banner"
+        fit="contain"></el-image>
+      <div class="bannerInfo">
+        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
+      </div>
+    </div>
+    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; ">
+      <template v-for="i in tabsList">
+        <div class="card">
+          <!-- 左侧图片 -->
+          <div class="card-img">
+            <img src="http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg" alt="语音拣选">
+          </div>
+
+          <!-- 右侧内容 -->
+          <div class="card-content">
+            <h3 class="card-title">{{ i.title }}</h3>
+            <p class="card-subtitle">{{ i.value }}</p>
+            <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";
+
+export default {
+  name: 'ContactUs1',
+  components: {
+    ContactUs,
+    Copyright
+  },
+  data() {
+    return {
+      banner:'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+      bannerTitle: '',
+      tabsActive: 0,
+      tabsList: [{
+        title:'智能轮胎',
+        value:'智能轮胎介绍',
+        info:'智能轮胎信息',
+      }],
+    }
+  },
+  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";
+
+.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(31% - 2px);
+  display: inline-block;
+  height: 400px;
+  position: relative;
+  border: 1px solid #0001;
+  &:nth-child(3n){
+    margin-left: 2%;
+  }
+  &:nth-child(3n-   1){
+    margin-left: 2%;
+  }
+  .card-img{
+    position: absolute;
+    opacity: 0.4;
+    width: 40%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    img{
+      width: 100%;
+      height: 100%;
+      //object-fit: contain;
+    }
+  }
+  .card-title{
+
+    position: absolute;
+    left: 20%;
+    top: 40px;
+    font-size: 24px;
+  }
+  .card-subtitle{
+    position: absolute;
+    left: 20%;
+    top: 80px;
+    width: 70%;
+    font-size: 18px;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .card-desc{
+    width: 70%;
+    position: absolute;
+    left: 20%;
+    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>
diff --git a/src/views/productCenter/detail.vue b/src/views/productCenter/detail.vue
index df5797d..62edc9a 100644
--- a/src/views/productCenter/detail.vue
+++ b/src/views/productCenter/detail.vue
@@ -3,14 +3,14 @@
     <div class="banner">
       <el-image
         style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-        :src="banner"
+        :src="data.banner"
         fit="contain"></el-image>
       <el-image
         style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
-        :src="banner1"
+        :src="data.banner1"
         fit="contain"></el-image>
-      <div class="bannerInfo">{{ bannerTitle }}</div>
-      <div class="bannerValue">{{ bannerValue }}</div>
+      <div class="bannerInfo">{{ data.bannerTitle }}</div>
+      <div class="bannerValue">{{ data.bannerValue }}</div>
     </div>
 
 
@@ -25,7 +25,7 @@
         <!-- 缩略图 -->
         <div class="thumb-list">
           <div
-            v-for="(img, index) in imgList"
+            v-for="(img, index) in data.imgList"
             :key="index"
             class="thumb-item"
             :class="{ active: activeIndex === index }"
@@ -40,7 +40,7 @@
       <div class="product-right">
         <h2 class="title">产品特点</h2>
         <ul class="features">
-          <li v-for="(item, i) in features" :key="i">
+          <li v-for="(item, i) in data.features" :key="i">
             <i class="el-icon-circle-check"></i> {{ item }}
           </li>
         </ul>
@@ -50,7 +50,7 @@
     <div  class="param-container" style="padding: 5vw 10vw;background-color: #0001">
       <h2 class="title1" style="line-height: 40px">产品参数</h2>
 
-      <div class="paramsTable" v-for="i in params">
+      <div class="paramsTable" v-for="i in data.params">
         <div class="th">
           <div class="th1">技术参数</div>
           <div class="th2">参数</div>
@@ -82,48 +82,51 @@ export default {
   },
   data() {
     return {
-      banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
-      banner1:'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png',
-      bannerTitle: '123123',
-      bannerValue: 'RSmart-XS是一款集成Linux操作系统的工业级四通道读写器，其拥有优秀的静电防护和浪涌防护能力，优异的识别灵敏度、优秀的盘点能力、稳定可靠的性能，集成网口、RS485（定制选配）、RS232（选配）等各类通讯接口和4路射频接口，独立的USB调试端口，4DI、4DO GPIO输入输出接口，非常适用于仓储物流、生产制造等各类复杂环境应用。',
-
       activeIndex: 0,
-      imgList: [
-        "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
-        "https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg",
-        "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
-      ],
-      features: [
-        "内置Linux 4.19操作系统，易于定制化应用开发",
-        "工业级设计，优秀的静电和浪涌防护能力",
-        "宽电压供电，灵活适应不同工业场景应用",
-        "多通讯方式，网口、RS485、RS232、USB Type-C等接口",
-        "多工作模式，支持常见主动被动识读模式",
-        "四路射频接口，有效节省外设开销",
-      ],
-      params:[
-        {
-          title:'技术参数',
-          list:[
-            { name: "操作系统", value: "Linux 4.19" },
-            { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
-            { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
-          ]
-        },
-        {
-          title:'技术参数',
-          list:[
-            { name: "操作系统", value: "Linux 4.19" },
-            { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
-            { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
-          ]
-        },
-      ]
+      data:{
+
+        banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
+        banner1:'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png',
+        bannerTitle: '123123',
+        bannerValue: 'RSmart-XS是一款集成Linux操作系统的工业级四通道读写器，其拥有优秀的静电防护和浪涌防护能力，优异的识别灵敏度、优秀的盘点能力、稳定可靠的性能，集成网口、RS485（定制选配）、RS232（选配）等各类通讯接口和4路射频接口，独立的USB调试端口，4DI、4DO GPIO输入输出接口，非常适用于仓储物流、生产制造等各类复杂环境应用。',
+
+        imgList: [
+          "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
+          "https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg",
+          "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
+        ],
+        features: [
+          "内置Linux 4.19操作系统，易于定制化应用开发",
+          "工业级设计，优秀的静电和浪涌防护能力",
+          "宽电压供电，灵活适应不同工业场景应用",
+          "多通讯方式，网口、RS485、RS232、USB Type-C等接口",
+          "多工作模式，支持常见主动被动识读模式",
+          "四路射频接口，有效节省外设开销",
+        ],
+        params:[
+          {
+            title:'技术参数',
+            list:[
+              { name: "操作系统", value: "Linux 4.19" },
+              { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
+              { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
+            ]
+          },
+          {
+            title:'技术参数',
+            list:[
+              { name: "操作系统", value: "Linux 4.19" },
+              { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
+              { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
+            ]
+          },
+        ]
+      }
     }
   },
   computed: {
     activeImg() {
-      return this.imgList[this.activeIndex];
+      return this.data.imgList[this.activeIndex];
     },
   },
   mounted() {
diff --git a/src/views/productCenter/detailEdit.vue b/src/views/productCenter/detailEdit.vue
new file mode 100644
index 0000000..df5797d
--- /dev/null
+++ b/src/views/productCenter/detailEdit.vue
@@ -0,0 +1,477 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="banner"
+        fit="contain"></el-image>
+      <el-image
+        style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
+        :src="banner1"
+        fit="contain"></el-image>
+      <div class="bannerInfo">{{ bannerTitle }}</div>
+      <div class="bannerValue">{{ bannerValue }}</div>
+    </div>
+
+
+    <div class="product-container">
+      <!-- 左侧大图 + 缩略图 -->
+      <div class="product-left">
+        <!-- 大图 -->
+        <div class="main-img">
+          <el-image :src="activeImg" fit="contain"></el-image>
+        </div>
+
+        <!-- 缩略图 -->
+        <div class="thumb-list">
+          <div
+            v-for="(img, index) in imgList"
+            :key="index"
+            class="thumb-item"
+            :class="{ active: activeIndex === index }"
+            @mouseenter="changeImg(index)"
+          >
+            <el-image :src="img" fit="cover"></el-image>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧文字 -->
+      <div class="product-right">
+        <h2 class="title">产品特点</h2>
+        <ul class="features">
+          <li v-for="(item, i) in features" :key="i">
+            <i class="el-icon-circle-check"></i> {{ item }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div  class="param-container" style="padding: 5vw 10vw;background-color: #0001">
+      <h2 class="title1" style="line-height: 40px">产品参数</h2>
+
+      <div class="paramsTable" v-for="i in params">
+        <div class="th">
+          <div class="th1">技术参数</div>
+          <div class="th2">参数</div>
+        </div>
+        <div class="td">
+          <div v-for="ii in i.list">
+            <div class="td1">技术参数</div>
+            <div class="td2">参数</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {selectMenuTree} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    ContactUs,
+    Copyright,
+  },
+  data() {
+    return {
+      banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
+      banner1:'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png',
+      bannerTitle: '123123',
+      bannerValue: 'RSmart-XS是一款集成Linux操作系统的工业级四通道读写器，其拥有优秀的静电防护和浪涌防护能力，优异的识别灵敏度、优秀的盘点能力、稳定可靠的性能，集成网口、RS485（定制选配）、RS232（选配）等各类通讯接口和4路射频接口，独立的USB调试端口，4DI、4DO GPIO输入输出接口，非常适用于仓储物流、生产制造等各类复杂环境应用。',
+
+      activeIndex: 0,
+      imgList: [
+        "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
+        "https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg",
+        "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
+      ],
+      features: [
+        "内置Linux 4.19操作系统，易于定制化应用开发",
+        "工业级设计，优秀的静电和浪涌防护能力",
+        "宽电压供电，灵活适应不同工业场景应用",
+        "多通讯方式，网口、RS485、RS232、USB Type-C等接口",
+        "多工作模式，支持常见主动被动识读模式",
+        "四路射频接口，有效节省外设开销",
+      ],
+      params:[
+        {
+          title:'技术参数',
+          list:[
+            { name: "操作系统", value: "Linux 4.19" },
+            { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
+            { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
+          ]
+        },
+        {
+          title:'技术参数',
+          list:[
+            { name: "操作系统", value: "Linux 4.19" },
+            { name: "处理器", value: "RK3568，Cortex-A55 2Ghz四核" },
+            { name: "存储规格", value: "2GB DDR4，16GB EMMC" },
+          ]
+        },
+      ]
+    }
+  },
+  computed: {
+    activeImg() {
+      return this.imgList[this.activeIndex];
+    },
+  },
+  mounted() {
+    this.getData()
+  },
+  watch: {
+    '$route'() {
+      this.getData()
+    }
+  },
+  methods: {
+    changeImg(index) {
+      this.activeIndex = index;
+    },
+    getData() {
+      selectMenuTree().then(e => {
+        console.log(e)
+      })
+    },
+    toDetail(id){
+      this.$router.push('/productCenter/detail?id='+id)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.banner {
+  width: 100%;
+  height: 35.5vw;
+  position: relative;
+
+  .bannerInfo {
+    position: absolute;
+    top: 35%;
+    left: 19%;
+    width: 40%;
+    text-align: left;
+    font-size: 2.5vw;
+    color: #000;
+    font-weight: 700;
+    line-height: 3vw;
+    letter-spacing: 2px;
+    word-break: break-all;
+  }
+
+  .bannerValue {
+    position: absolute;
+    top: calc(35% + 3vw);
+    left: 19%;
+    width: 40%;
+    text-align: left;
+    font-size: 1vw;
+    color: #000;
+    font-weight: 500;
+    line-height: 2vw;
+    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: 50%;
+        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;
+      }
+    }
+  }
+}
+
+
+
+.tabs {
+  text-align: left;
+  margin-top: 2.3vw;
+
+  /deep/ .el-tabs__header {
+    margin: 0 10vw 15px;
+  }
+
+  /deep/ .el-tabs__content {
+    padding: 0 10vw;
+    background-color: fade(@standard-color, 10);
+  }
+
+  /deep/ .el-tabs__nav-wrap::after {
+    display: none;
+  }
+
+  /deep/ .el-tabs__item {
+    letter-spacing: 3px;
+    padding: 0 2vw;
+    height: 2.9vw;
+    font-size: 1.6vw;
+  }
+
+  /deep/ .el-tabs__item {
+    line-height: 2.9vw;
+  }
+
+  /deep/ .el-tabs__item.is-active {
+    font-weight: 600;
+    color: @standard-color;
+  }
+
+  /deep/ .el-tabs__active-bar {
+    height: 4px;
+    background-color: @standard-color;
+  }
+
+  .content {
+    padding: 2.2vw 0;
+    display: inline-block;
+    width: 47%;
+    cursor: pointer;
+    &:nth-child(2n){
+      margin-left: 5%;
+  }
+    &:hover{
+
+      .itemTitle {
+        color: #5c8eff;
+      }
+      .img-wrap {
+        .image{
+          transform: scale(1.2);
+        }
+      }
+    }
+    .custom-card {
+      width: 100%;
+      padding: 16px;
+      border-radius: 16px;
+      display: inline-block;
+
+    }
+
+    .itemTitle {
+      font-size: 26px;
+      font-weight: 600;
+      margin: 0;
+      text-align: center;
+      transition: all 0.5s ease;
+    }
+
+    .description {
+      font-size: 14px;
+      color: #666;
+      margin: 0;
+      margin-top: 12px;
+      line-height: 1.6;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; /* 限制两行 */
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+    }
+
+    .btn-wrap {
+      display: flex;
+      justify-content: center;
+    }
+
+    .more-btn {
+      margin-top: 12px;
+      background-color: transparent;
+      border: 1px solid #dcdfe6;
+      border-radius: 20px;
+      padding: 6px 16px;
+      font-size: 14px;
+      color: #333;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .more-btn:hover {
+      border-color: #409eff;
+      color: #409eff;
+      background-color: rgba(64, 158, 255, 0.05);
+    }
+
+    .icon {
+      font-size: 16px;
+      margin-left: 4px;
+    }
+
+    .img-wrap {
+      margin-top: 12px;
+      overflow: hidden;
+      .image{
+        transition: transform 0.5s ease;
+      }
+    }
+  }
+
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+
+.product-container {
+  padding: 5vw 10vw;
+  display: flex;
+  gap: 40px;
+}
+
+.product-left {
+  width: 400px;
+}
+
+.main-img {
+  width: 100%;
+  height: 300px;
+  border: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.thumb-list {
+  margin-top: 16px;
+  display: flex;
+  gap: 10px;
+}
+
+.thumb-item {
+  width: 80px;
+  height: 60px;
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.thumb-item.active {
+  border-color: #409eff;
+}
+
+.thumb-item .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+.product-right {
+  flex: 1;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.features li {
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
+
+.features i {
+  color: #409eff;
+  margin-right: 6px;
+}
+.paramsTable{
+  .th{
+    background-color: #DBDFE7;
+    line-height: 3vw;
+    font-size: 1.3vw;
+    font-weight: 700;
+    text-align: left;
+    .th1{
+      width: calc(30% - 2vw - 2px);
+      display: inline-block;
+      padding-left: 2vw;
+      border-right: 1px solid #0001
+    }
+    .th2{
+      width: calc(70% - 2vw - 2px);
+      display: inline-block;
+      padding-left: 2vw;
+    }
+  }
+  .td{
+    line-height: 3vw;
+    font-size: 0.9vw;
+    text-align: left;
+    .td1{
+      background-color: #F2F4F8;
+      width: calc(30% - 2vw - 2px);
+      display: inline-block;
+      padding-left: 2vw;
+      border: 1px solid #0001
+    }
+    .td2{
+      background-color: #EEEEEE;
+      width: calc(70% - 2vw - 2px);
+      display: inline-block;
+      padding-left: 2vw;
+      border: 1px solid #0001
+    }
+  }
+}
+</style>
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index 31d792e..c2733c2 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -34,7 +34,7 @@ export default {
   data() {
     return {
       banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
-      bannerTitle: '',
+      bannerTitle: 'assdadasdasdaasda',
       productList: [
         {
           name: '读写终端',
@@ -45,7 +45,7 @@ export default {
               list: [
                 {
                   name: '设备1',
-                  value:'介绍1',
+                  value:'介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1介绍1',
                   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
                 },
                 {
diff --git a/src/views/productCenter/produceModel.vue b/src/views/productCenter/produceModel.vue
index a6f6a6b..38b31ba 100644
--- a/src/views/productCenter/produceModel.vue
+++ b/src/views/productCenter/produceModel.vue
@@ -23,7 +23,7 @@
             <template v-for="ii in i.list">
               <div class="content" @click="toDetail(ii.id)">
 
-                <el-card class="custom-card" shadow="hover">
+                <el-card class="custom-card" shadow="hover" style="min-height: 300px;height: 30vw;box-sizing: border-box">
                   <!-- 标题 -->
                   <h2 class="itemTitle">{{ ii.name }}</h2>
 
@@ -44,7 +44,7 @@
                       class="image"
                       :src="ii.icon"
                       fit="cover"
-                      style="width: 100%; border-radius: 12px"
+                      style="width: 100%; max-height: 20vw;border-radius: 12px"
                     />
                   </div>
                 </el-card>
@@ -169,11 +169,12 @@ export default {
     }
 
     .description {
-      font-size: 14px;
+      font-size: 0.8vw;
+      height: 3.2vw;
       color: #666;
       margin: 0;
       margin-top: 12px;
-      line-height: 1.6;
+      line-height: 1.5vw;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 2; /* 限制两行 */