From 646dd5f7b71405912d2a47a826d3f62b4294e50b Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Tue, 16 Sep 2025 19:03:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/productCenter.js                      |   5 +-
 src/layout/index.vue                          |   8 +-
 src/router/index.js                           |   4 +
 src/views/productCenter/edit/index.vue        | 144 +++++
 src/views/productCenter/edit/produceModel.vue | 268 ++++++++
 src/views/productCenter/index.vue             |  21 +-
 src/views/productCenter1/detail1.vue          | 576 +++++++++++++++++
 src/views/productCenter1/detail2.vue          | 574 +++++++++++++++++
 src/views/productCenter1/detail3.vue          | 584 ++++++++++++++++++
 .../detailEdit.vue                            |   0
 src/views/productCenter1/index.vue            | 364 +++++++++++
 .../index1.vue                                |   0
 .../modal11.vue                               |   0
 .../modal12.vue                               |   0
 .../platformAdvantages.vue                    |   0
 .../platformAdvantages2.vue                   |   0
 .../platformAdvantages3.vue                   |   0
 .../platformArchitecture.vue                  |   0
 .../platformFeatures.vue                      |   0
 .../platformIntroduction.vue                  |   0
 src/views/productCenter1/produceModel.vue     | 242 ++++++++
 .../product/dataAcquisitionSensing.vue        |   0
 .../product/highFrequencyRFID.vue             |   0
 .../product/ultraHighFrequencyRFID.vue        |   0
 .../technicalArchitecture.vue                 |   0
 25 files changed, 2763 insertions(+), 27 deletions(-)
 create mode 100644 src/views/productCenter/edit/index.vue
 create mode 100644 src/views/productCenter/edit/produceModel.vue
 create mode 100644 src/views/productCenter1/detail1.vue
 create mode 100644 src/views/productCenter1/detail2.vue
 create mode 100644 src/views/productCenter1/detail3.vue
 rename src/views/{productCenter => productCenter1}/detailEdit.vue (100%)
 create mode 100644 src/views/productCenter1/index.vue
 rename src/views/{productCenter => productCenter1}/index1.vue (100%)
 rename src/views/{productCenter => productCenter1}/modal11.vue (100%)
 rename src/views/{productCenter => productCenter1}/modal12.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformAdvantages.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformAdvantages2.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformAdvantages3.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformArchitecture.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformFeatures.vue (100%)
 rename src/views/{productCenter => productCenter1}/platformIntroduction.vue (100%)
 create mode 100644 src/views/productCenter1/produceModel.vue
 rename src/views/{productCenter => productCenter1}/product/dataAcquisitionSensing.vue (100%)
 rename src/views/{productCenter => productCenter1}/product/highFrequencyRFID.vue (100%)
 rename src/views/{productCenter => productCenter1}/product/ultraHighFrequencyRFID.vue (100%)
 rename src/views/{productCenter => productCenter1}/technicalArchitecture.vue (100%)

diff --git a/src/api/productCenter.js b/src/api/productCenter.js
index d9e3e83..3ff6baa 100644
--- a/src/api/productCenter.js
+++ b/src/api/productCenter.js
@@ -35,8 +35,7 @@ export function getProductCenterProductDetailInfo(query) {
 
 export function selectMenuTree(data) {
   return request({
-    url: '/portal/hwWebMenu1/selectMenuTree',
-    method: 'get',
-    data: data
+    url: '/portal/hwWebMenu/selectMenuTree',
+    method: 'get', params: data
   })
 }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ffbe2fa..a578924 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -378,8 +378,8 @@ export default {
 .chat {
   z-index: 999;
   position: fixed;
-  bottom: 10vw;
-  right: 10vw;
+  bottom: 5vw;
+  right: 5vw;
   width: 450px;
   height: 450px;
   border-top-left-radius: 5px;
@@ -419,7 +419,7 @@ export default {
 
     .message {
       width: 80%;
-      margin: 5px 0 5px 5px;
+      margin: 10px 0 10px 15px;
       text-align: left;
 
       .userInfo {
@@ -437,7 +437,7 @@ export default {
 
     .message1 {
       width: calc(100% - 20px);
-      margin: 5px 0 15px 5px;
+      margin: 10px 0 10px 5px;
       text-align: right;
       overflow: hidden;
 
diff --git a/src/router/index.js b/src/router/index.js
index c4edb30..6c9f7b2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,10 @@ export default new Router({
         },
         {
           path: 'productCenter', component: () => import('@/views/productCenter/index.vue'),
+        }, {
+          path: 'productCenter/edit', component: () => import('@/views/productCenter/edit/index.vue'),
+        }, {
+          path: 'productCenter/detail/edit', component: () => import('@/views/productCenter/detail2.vue'),
         },
         {
           path: 'industrySolutions', component: () => import('@/views/industrySolutions/index.vue'),
diff --git a/src/views/productCenter/edit/index.vue b/src/views/productCenter/edit/index.vue
new file mode 100644
index 0000000..ba33360
--- /dev/null
+++ b/src/views/productCenter/edit/index.vue
@@ -0,0 +1,144 @@
+<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 class="tabs">
+        <div class="content">
+          <div @click="checkTabs(i,k)"
+               :style="`width:${tabsActive === i.webMenuId ? (100/tabsData.length+'%'):`calc(${100/tabsData.length}% - 2px)`}`"
+               :class="`tab ${tabsActive === i.webMenuId ? 'active':''}`" v-for="(i,k) in tabsData">
+            {{ i.webMenuName }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ProduceModel v-if="tabsActive" :data="pageData.productList.find(e=>e.id===tabsActive)"/>
+
+  </div>
+</template>
+
+<script>
+import ProduceModel from './produceModel.vue'
+import {selectMenuTree} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    ProduceModel
+  },
+  data() {
+    return {
+      tabsActive: 0,
+      pageData: {
+        banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+        bannerTitle: '',
+        productList: []
+      },
+      tabsData: [],
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      selectMenuTree().then(e => {
+        let tabsData = e.data.find(v => v.webMenuId === 7).children
+        this.tabsData = tabsData
+        console.log(tabsData)
+        tabsData.forEach(e => {
+          if (!this.pageData.productList.map(v => v.id).includes(e.webMenuId)) {
+            this.pageData.productList.push({
+              id: e.webMenuId,
+              name: e.webMenuName,
+              list: []
+            })
+          }
+        })
+        this.tabsActive = tabsData[0].webMenuId
+      })
+    },
+    checkTabs(e) {
+      this.tabsActive = e.webMenuId
+    },
+  }
+}
+</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;
+        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;
+      }
+    }
+  }
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
diff --git a/src/views/productCenter/edit/produceModel.vue b/src/views/productCenter/edit/produceModel.vue
new file mode 100644
index 0000000..7ae44f8
--- /dev/null
+++ b/src/views/productCenter/edit/produceModel.vue
@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.name }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.value }}
+      </span>
+    </div>
+
+    {{ JSON.stringify(data.list) }}
+    <div class="tabs">
+      <el-tabs v-model="activeName" :editable="true" @edit="tabEdit">
+        <el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
+          <template slot="label">
+            <span contenteditable="true" @blur="edit1('name', k,$event)">
+              {{ i.name }}
+            </span>
+          </template>
+          <transition name="fade">
+            <div v-if="activeName === `${k}`" style="position:relative;">
+              <template v-for="(ii,kk) in i.list">
+                <div class="content">
+                  <el-card class="custom-card" shadow="hover" @click="toDetail(ii.id)"
+                           style="min-height: 300px;height: 30vw;box-sizing: border-box">
+                    <!-- 标题 -->
+                    <h2 class="itemTitle" contenteditable="true" @blur="edit2('name', k,kk,$event)">{{ ii.name }}</h2>
+
+                    <!-- 描述，两行省略 -->
+                    <p class="description" contenteditable="true" @blur="edit2('value', k,kk,$event)">{{ ii.value }}</p>
+
+                    <!-- 按钮 -->
+                    <div class="btn-wrap" v-if="ii.id">
+                      <el-button class="more-btn" @click="toDetail(ii.id)">
+                        了解更多
+                        <i class="el-icon-arrow-right icon"></i>
+                      </el-button>
+                    </div>
+
+                    <!-- 图片 -->
+                    <div class="img-wrap">
+                      <UploadEl :data="ii"/>
+                    </div>
+                  </el-card>
+                </div>
+              </template>
+              <div style="width: 100%; ;height: 50px;box-sizing: border-box;text-align: center">
+                <div style="width:100%;height:100%;"
+                     @click="data.list[k].list.push({ name: '请输入', value: '请输入', icon: '',id:1 + (Math.max(1,...(data.list?.[k]?.list?.map(e => e.id ?? 0) || [0])) || 1)})">
+                  <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 50px"></i>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  components: {UploadEl},
+  props: ['data'],
+  data() {
+    return {
+      activeName: '0',
+    }
+  },
+  methods: {
+
+    toDetail(id) {
+      console.log(this.$props.data.id)
+      console.log(id)
+      if (id) {
+        this.$router.push(`/productCenter/detail/edit?type=${this.$props.data.id}&id=${id}`)
+      }
+    },
+    tabEdit(e, action) {
+      if (action === 'remove') {
+        this.activeName = '0'
+        this.$props.data.list.splice(parseFloat(e), 1);
+      }
+      if (action === 'add') {
+        this.$props.data.list.push({name: '请输入', list: [],})
+      }
+    },
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+    edit2(key, index, index2, e) {
+      console.log(this.$props.data.list[index])
+      this.$props.data.list[index].list[index2][key] = e.target.innerText
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #000;
+
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #0003;
+}
+
+.tabs {
+  text-align: left;
+  margin-top: 2.3vw;
+
+  /deep/ .el-tabs__header {
+    margin: 0 20vw 15px;
+  }
+
+  /deep/ .el-tabs__content {
+    padding: 0 20vw;
+    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: 0.8vw;
+      height: 3.2vw;
+      color: #666;
+      margin: 0;
+      margin-top: 12px;
+      line-height: 1.5vw;
+      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;
+      }
+    }
+  }
+
+}
+
+.fade-enter-active {
+  animation: fadeInRight;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation: fadeOutLeft;
+  animation-duration: 0.5s;
+}
+</style>
diff --git a/src/views/productCenter/index.vue b/src/views/productCenter/index.vue
index c24542f..0b685c3 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -18,7 +18,6 @@
     </div>
 
     <div v-for="i in productList">
-      {{ i.itemId }}
       <ProduceModel :id="`item${i.id}`" :i="i" v-if="itemId === i.id"/>
     </div>
 
@@ -44,14 +43,13 @@ export default {
   data() {
     return {
       tabsActive: 0,
+      bannerTitle: '',
       itemId: '11',
       banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
-      bannerTitle: '',
       productList: [
         {
           name: '轮胎RFID',
           id: '11',
-          // value:'介绍',
           list: [
             {
               name: '分类1',
@@ -61,21 +59,6 @@ export default {
                   value:'软控为轮胎产业链提供RFID轮胎整体解决方案，包括：系列化轮胎用RFID标签，系列化RFID标签封胶设备、定制RFID标签贴合设备，RFID 轮胎生产过程数据采集系统,及基于不同应用场景的信息化管理系统等。',
                   icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%B5%84%E6%BA%90%208@4x_20250822150647A156.png'
                 },
-                // {
-                //   name: '设备1',
-                //   value:'介绍1',
-                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
-                // },
-                // {
-                //   name: '设备1',
-                //   value:'介绍1',
-                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
-                // },
-                // {
-                //   name: '设备1',
-                //   value:'介绍1',
-                //   icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
-                // },
               ]
             },
           ]
@@ -245,7 +228,6 @@ export default {
         {
           name: '工业软件',
           id: '16',
-          id: '16',
           // value:'介绍',
           list: [
             {
@@ -301,7 +283,6 @@ export default {
     checkTabs(e, k) {
       this.tabsActive = k
       this.itemId = e.id
-      // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
     },
   }
 }
diff --git a/src/views/productCenter1/detail1.vue b/src/views/productCenter1/detail1.vue
new file mode 100644
index 0000000..6c1d599
--- /dev/null
+++ b/src/views/productCenter1/detail1.vue
@@ -0,0 +1,576 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="data.banner"
+        fit="contain"></el-image>
+      <el-image
+        style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
+        :src="data.banner1"
+        fit="contain"></el-image>
+      <div class="bannerInfo">{{ data.bannerTitle }}</div>
+      <div class="bannerValue">{{ data.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 data.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 data.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="(param, index) in data.params" :key="index">
+        <div class="th">
+          <div class="th1">{{ param.title }}</div>
+          <div class="th2">参数值</div>
+        </div>
+        <div class="td">
+          <div v-for="(item, idx) in param.list" :key="idx">
+            <div class="td1">{{ item.name }}</div>
+            <div class="td2">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </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 {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
+      activeIndex: 0,
+      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: 'HW-R300系列',
+        bannerValue: '中端距离，1路输入，体积小巧，TCP/RS485。',
+
+        imgList: [
+          "http://1.13.177.47:9665/statics/2025/08/25/%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91_20250825192156A181.png",
+          "https://www.genrace.com/static/upload/image/20250414/1744615648137412.png",
+          "http://1.13.177.47:9665/statics/2025/08/25/23_20250825192255A182.png",
+        ],
+        features: [
+          "紧凑型圆极化天线",
+          "卓越的防碰撞算法",
+          "TCP soket通讯",
+          "RS485 Modbus RTU通讯",
+          "一路输入I/O",
+        ],
+        params:[
+          {
+            title:'参数',
+            list:[
+              { name: "射频协议", value: "ISO/IEC 18000-63 /EPC Gen2v2" },
+              { name: "工作频段", value: "中国频段：920-925MHz\n其他国家频段（可定制）" },
+              { name: "发射功率", value: "10-26dBm 可调，步进 1 dB，精度±1dB" },
+              { name: "天线增益", value: "3dBi" },
+              { name: "天线驻波比", value: "≦2：1" },
+              { name: "盘点速率", value: "120 tag/s" },
+              { name: "读卡距离", value: "读取TPALN9662标签,最大读距：1.4m（读距随标签型号不同而有所差异）" },
+              { name: "通讯接口", value: "TCP/IP（M12-4-A航空头）、 RS485（M12-5-B 航空头）" },
+              { name: "通讯协议", value: "Modbus-RTU通信协议，网口TCP提供基于C#的SDK接口；适配工业总线协议（外接网关）（选配）" },
+              { name: "GPIO端口", value: "M12-5-B 航空接口，兼容 5~24V 电平，1路输入" },
+              { name: "声音指示", value: "1个蜂鸣器" },
+              { name: "开发接口", value: "支持 C#、JAVA" },
+              { name: "供电电源", value: "12～24VDC(推荐 12V 标配适配器)" },
+              { name: "整机峰值功率", value: "2.5W" },
+              { name: "外形尺寸", value: "90mm*90mm*32 mm" },
+              { name: "产品重量", value: "约288g" },
+              { name: "外壳材料", value: "铝合金+PC" },
+              { name: "外壳颜色", value: "黑色、银色" },
+                            { name: "工作温度", value: "-25℃~60℃" },
+              { name: "存储温度", value: "-40℃~85℃" },
+              { name: "工作湿度", value: "5%~95%RH 无冷凝" },
+              { name: "IP等级", value: "IP54" },
+            ]
+          },
+
+        ]
+      }
+    }
+  },
+  computed: {
+    activeImg() {
+      return this.data.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)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
+    }
+  }
+}
+</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
+    }
+  }
+}
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
+</style>
diff --git a/src/views/productCenter1/detail2.vue b/src/views/productCenter1/detail2.vue
new file mode 100644
index 0000000..0e18b29
--- /dev/null
+++ b/src/views/productCenter1/detail2.vue
@@ -0,0 +1,574 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="data.banner"
+        fit="contain"></el-image>
+      <el-image
+        style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
+        :src="data.banner1"
+        fit="contain"></el-image>
+      <div class="bannerInfo">{{ data.bannerTitle }}</div>
+      <div class="bannerValue">{{ data.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 data.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 data.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="(param, index) in data.params" :key="index">
+        <div class="th">
+          <div class="th1">{{ param.title }}</div>
+          <div class="th2">参数值</div>
+        </div>
+        <div class="td">
+          <div v-for="(item, idx) in param.list" :key="idx">
+            <div class="td1">{{ item.name }}</div>
+            <div class="td2">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </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 {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
+      activeIndex: 0,
+      data:{
+
+        banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
+        banner1:'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png',
+        bannerTitle: 'HW-R145L-6系列',
+        bannerValue: '远距离，高增益，多接口，PoE宽电压直流供电，多路GPIO。',
+
+        imgList: [
+          "http://1.13.177.47:9665/statics/2025/08/25/7_20250825193701A183.png",
+          "http://1.13.177.47:9665/statics/2025/08/25/8_20250825193712A184.png",
+          "http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png",
+        ],
+        features: [
+          "紧凑型圆极化天线",
+          "卓越的防碰撞算法",
+          "PoE,宽电压直流供电",
+          "TCP soket通讯",
+          "优异的阅读距离",
+        ],
+        params:[
+          {
+            title:'射频特性',
+            list:[
+              { name: "射频协议", value: "ISO/IEC 18000-63 /EPC Gen2v2" },
+              { name: "工作频段", value: "中国频段：920-925MHz其他国家频段（可定制）" },
+              { name: "发射功率", value: "5-26dBm 可调，步进 1 dB，精度±1dB" },
+              { name: "盘点速率", value: "100 tag/s" },
+              { name: "天线增益", value: "6dBi" },
+              { name: "天线驻波比", value: "≦1.3：1" },
+              { name: "读卡距离", value: "读取TPALN9662标签,最大读距：8m（读距随标签型号不同而有所差异）" },
+                            { name: "供电电源", value: "12～24VDC(推荐 12V 标配适配器)\n或 802.3af POE供电" },
+              { name: "整机峰值功率", value: "6W" },
+              { name: "外形尺寸", value: "129mm*129mm*53 mm" },
+              { name: "产品重量", value: "约520g" },
+              { name: "外壳材料", value: "铝合金+PC" },
+              { name: "外壳颜色", value: "白色、银色" },
+                            { name: "工作温度", value: "-25℃~60℃" },
+              { name: "存储温度", value: "-40℃~85℃" },
+              { name: "工作湿度", value: "5%~95%RH 无冷凝" },
+              { name: "IP等级", value: "-" },
+                            { name: "通讯接口", value: "TCP/IP（ RJ-45）、RS232 和隔离RS485（M12-6 航空头，可定制）" },
+              { name: "GPIO端口", value: "M12-12 航空接口，4输入、4 输出（兼容 5～24V 电平）光耦隔离，输出口低电平电流容限 Max.500mA" },
+              { name: "声音指示", value: "1个蜂鸣器" },
+              { name: "开发接口", value: "支持 C#、JAVA" },
+            ]
+          },
+        ]
+      }
+    }
+  },
+  computed: {
+    activeImg() {
+      return this.data.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)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
+    }
+  }
+}
+</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
+    }
+  }
+}
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
+</style>
diff --git a/src/views/productCenter1/detail3.vue b/src/views/productCenter1/detail3.vue
new file mode 100644
index 0000000..a6b23cd
--- /dev/null
+++ b/src/views/productCenter1/detail3.vue
@@ -0,0 +1,584 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+        :src="data.banner"
+        fit="contain"></el-image>
+      <el-image
+        style="width: 40%; height: 40%;position:absolute;right:10%;top: 30%;"
+        :src="data.banner1"
+        fit="contain"></el-image>
+      <div class="bannerInfo">{{ data.bannerTitle }}</div>
+      <div class="bannerValue">{{ data.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 data.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 data.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="(param, index) in data.params" :key="index">
+        <div class="th">
+          <div class="th1">{{ param.title }}</div>
+          <div class="th2">参数值</div>
+        </div>
+        <div class="td">
+          <div v-for="(item, idx) in param.list" :key="idx">
+            <div class="td1">{{ item.name }}</div>
+            <div class="td2">{{ item.value }}</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="param-container" style="padding: 5vw 10vw;background-color: #fff">
+      <h2 class="title1" style="line-height: 40px">资料下载</h2>
+      <div>
+
+        <div v-for="i in fileList" class="fileCard" style="text-align: left">
+          <div class="cardTitle">{{ i.name }}</div>
+          <div class="cardValue">{{ i.value }}</div>
+          <el-button @click="downFile(i)" type="primary" class="downIcon" icon="el-icon-download " circle></el-button>
+        </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 {
+      fileList: [
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+        {
+          name: '操作指南',
+          value: '硬件操作指南',
+          url: ''
+        },
+      ],
+      activeIndex: 0,
+      data:{
+
+        banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
+        banner1:'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png',
+        bannerTitle: 'HW-RFR-050-B-003-1204S',
+        bannerValue: '体积小，三防性能优，远距稳定识别。',
+
+        imgList: [
+          "http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png",
+          "http://1.13.177.47:9665/statics/2025/08/25/66_20250825200238A186.png",
+          "http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png",
+        ],
+        features: [
+          "HW-RFR-050-B-XX高频读写器的尺寸为39.8*72*13mm,其可以固定在设计尺寸小的位置。",
+          "高频读写器具备IP67的防护等级，可满足恶劣的工业环境的应用。",
+          "HW-RFR-050高频读写器可以稳定识别距离为0—45mm，最大识别距离为65mm—70mm，根据标签的选型以及天线尺寸有所变化。",
+        ],
+        params:[
+          {
+            title:'RFID特性',
+            list:[
+              { name: "射频协议", value: "符合ISO/IEC 15693协议" },
+              { name: "工作频率", value: "13.56MHz±7KHz" },
+              { name: "识别距离", value: "<=50mm[不同标签类型，读写距离有差异。]" },
+              { name: "盘点速度", value: "20ms/次" },
+            ]
+          },
+          {
+            title:'电气特性',
+            list:[
+              { name: "输入电压", value: "12~24VDC" },
+              { name: "发射功率", value: "0.2W" },
+              { name: "最大功率", value: "1W" },
+              { name: "通讯协议", value: "Modbus RTU" },
+              { name: "通讯接口", value: "RS485（M12-5针-B型-公头航空头）" },
+              { name: "搭配网关支持通讯协议", value: "·Profinet、·EtherNet/IP、·EtherCAT、·CCLinkIE、·ModbusTCP" },
+            ]
+          },
+          {
+            title:'物理特性',
+            list:[
+              { name: "尺寸", value: "40（W）*72（L）*13（H）mm" },
+              { name: "外壳材质", value: "ABS+PC" },
+              { name: "安装环境", value: "安装需要1cm厚的无金属缓冲区，如垫一块10mm厚pom板" },
+              { name: "尾部出线长度", value: "300mm" },
+            ]
+          },
+          {
+            title:'工作环境',
+            list:[
+              { name: "工作温度", value: "-10℃~ +65℃" },
+              { name: "防护等级", value: "IP67" },
+              { name: "一致性认证", value: "CE、Rohs" },
+              { name: "功能显示", value: "通讯正常：Link指示灯常亮。 有通讯数据：Mod指示灯闪烁。" },
+            ]
+          },
+        ]
+      }
+    }
+  },
+  computed: {
+    activeImg() {
+      return this.data.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)
+    },
+    downFile(e) {
+      const blob = new Blob([''], {type: 'text/plain'});
+
+      // 创建临时链接
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = '文档.txt'; // 下载的文件名
+
+      // 触发点击下载
+      link.click();
+
+      // 释放内存
+      URL.revokeObjectURL(link.href);
+    }
+  }
+}
+</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
+    }
+  }
+}
+
+.fileCard {
+  display: inline-block;
+  width: 40%;
+  height: 100px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  margin-top: 1vw;
+  position: relative;
+
+  .cardTitle {
+    position: absolute;
+    top: 10px;
+    left: 20px;
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 45px;
+    width: calc(100% - 80px);
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .cardValue {
+    position: absolute;
+    top: 55px;
+    width: calc(100% - 80px);
+    left: 20px;
+    font-size: 14px;
+    line-height: 45px;
+    color: #aaa;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 超出部分隐藏 */
+    text-overflow: ellipsis; /* 超出部分显示省略号 */
+  }
+
+  .downIcon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:nth-child(2n) {
+    margin-left: 5%;
+  }
+}
+</style>
diff --git a/src/views/productCenter/detailEdit.vue b/src/views/productCenter1/detailEdit.vue
similarity index 100%
rename from src/views/productCenter/detailEdit.vue
rename to src/views/productCenter1/detailEdit.vue
diff --git a/src/views/productCenter1/index.vue b/src/views/productCenter1/index.vue
new file mode 100644
index 0000000..b272cc6
--- /dev/null
+++ b/src/views/productCenter1/index.vue
@@ -0,0 +1,364 @@
+<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">{{ 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" v-if="itemId === i.id"/>
+    </div>
+
+
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import ProduceModel from './produceModel.vue'
+import {selectMenuTree} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    ContactUs,
+    Copyright,
+    ProduceModel
+  },
+  data() {
+    return {
+      tabsActive: 0,
+      bannerTitle: '',
+      itemId: '11',
+      banner: 'http://1.13.177.47:9665/statics/2025/07/24/mesnac_20250724093713A002.jpg',
+      productList: [
+        {
+          name: '轮胎RFID',
+          id: '11',
+          // value:'介绍',
+          list: [
+            {
+              name: '分类1',
+              list: [
+                {
+                  name: 'RFID轮胎',
+                  value:'软控为轮胎产业链提供RFID轮胎整体解决方案，包括：系列化轮胎用RFID标签，系列化RFID标签封胶设备、定制RFID标签贴合设备，RFID 轮胎生产过程数据采集系统,及基于不同应用场景的信息化管理系统等。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%B5%84%E6%BA%90%208@4x_20250822150647A156.png'
+                },
+              ]
+            },
+          ]
+        },
+        {
+          name: '超高频RFID',
+          id: '12',
+          // value:'介绍',
+          list: [
+            {
+              name: '超高频RFID读写器',
+              list: [
+                {
+                  name: '一体式读写器（高性能）',
+                  id: '1',
+                  value:'内置高性能圆极化天线，实现远距离识别。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E9%AB%98%E6%80%A7%E8%83%BD%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E8%BF%9C%E8%B7%9D%E7%A6%BB%E8%AF%86%E5%88%AB%E3%80%82_20250822101411A021.png'
+                },
+                {
+                  name: '一体式读写器（标准型）',
+                  id: '2',
+                  value:'内置高性能圆极化天线，用最小体积实现最优识别性能。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%80%E4%BD%93%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%88%E6%A0%87%E5%87%86%E5%9E%8B%EF%BC%89%EF%BC%8C%E5%86%85%E7%BD%AE%E9%AB%98%E6%80%A7%E8%83%BD%E5%9C%86%E6%9E%81%E5%8C%96%E5%A4%A9%E7%BA%BF%EF%BC%8C%E7%94%A8%E6%9C%80%E5%B0%8F%E4%BD%93%E7%A7%AF%E5%AE%9E%E7%8E%B0%E6%9C%80%E4%BC%98%E8%AF%86%E5%88%AB%E6%80%A7%E8%83%BD%E3%80%82_20250822101455A022.png'
+                },
+                {
+                  name: '两通道车载式读写器',
+                  value:'采用工业化防振动设计理念，支持蓝牙连接，提供更加稳定可靠的物理及电器连接方式。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E4%B8%A4%E9%80%9A%E9%81%93%E8%BD%A6%E8%BD%BD%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8%EF%BC%8C%E9%87%87%E7%94%A8%E5%B7%A5%E4%B8%9A%E5%8C%96%E9%98%B2%E6%8C%AF%E5%8A%A8%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5%EF%BC%8C%E6%94%AF%E6%8C%81%E8%93%9D%E7%89%99%E8%BF%9E%E6%8E%A5%EF%BC%8C%E6%8F%90%E4%BE%9B%E6%9B%B4%E5%8A%A0%E7%A8%B3%E5%AE%9A%E5%8F%AF%E9%9D%A0%E7%9A%84%E7%89%A9%E7%90%86%E5%8F%8A%E7%94%B5%E5%99%A8%E8%BF%9E%E6%8E%A5%E6%96%B9%E5%BC%8F%E3%80%82_20250822101528A024.png'
+                },
+                {
+                  name: '蓝牙手持式读写器',
+                  value:'蓝牙数据上传，采集数据可轻松接入用户Android移动终端，易于安装与部署。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%93%9D%E7%89%99%E6%89%8B%E6%8C%81%E5%BC%8F%E8%AF%BB%E5%86%99%E5%99%A8_20250822101633A026.png'
+                },
+                {
+                  name: 'RFID通道机',
+                  value:'解决在供应链流通中，标签漏读串读等问题，应用于单品级物品识别，如快递、服装、皮具箱包、酒类等行业。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/RFID%E9%80%9A%E9%81%93%E6%9C%BA%EF%BC%8C%E8%A7%A3%E5%86%B3%E5%9C%A8%E4%BE%9B%E5%BA%94%E9%93%BE%E6%B5%81%E9%80%9A%E4%B8%AD%EF%BC%8C%E6%A0%87%E7%AD%BE%E6%BC%8F%E8%AF%BB%E4%B8%B2%E8%AF%BB%E7%AD%89%E9%97%AE%E9%A2%98%EF%BC%8C%E5%BA%94%E7%94%A8%E4%BA%8E%E5%8D%95%E5%93%81%E7%BA%A7%E7%89%A9%E5%93%81%E8%AF%86%E5%88%AB%EF%BC%8C%E5%A6%82%E5%BF%AB%E9%80%92%E3%80%81%E6%9C%8D%E8%A3%85%E3%80%81%E7%9A%AE%E5%85%B7%E7%AE%B1%E5%8C%85%E3%80%81%E9%85%92%E7%B1%BB%E7%AD%89%E8%A1%8C%E4%B8%9A%E3%80%82_20250822101716A028.png'
+                },
+                {
+                  name: 'RFID通道门',
+                  value:'RFID通道门具有窄波束、高增益特点，适用于超高频门禁通道类、物流仓储、人员、图书、档案馆、医疗系统、设备资产等应用。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/RFID%E9%80%9A%E9%81%93%E9%97%A8%E5%85%B7%E6%9C%89%E7%AA%84%E6%B3%A2%E6%9D%9F%E3%80%81%E9%AB%98%E5%A2%9E%E7%9B%8A%E7%89%B9%E7%82%B9%EF%BC%8C%E9%80%82%E7%94%A8%E4%BA%8E%E8%B6%85%E9%AB%98%E9%A2%91%E9%97%A8%E7%A6%81%E9%80%9A%E9%81%93%E7%B1%BB%E3%80%81%E7%89%A9%E6%B5%81%E4%BB%93%E5%82%A8%E3%80%81%E4%BA%BA%E5%91%98%E3%80%81%E5%9B%BE%E4%B9%A6%E3%80%81%E6%A1%A3%E6%A1%88%E9%A6%86%E3%80%81%E5%8C%BB%E7%96%97%E7%B3%BB%E7%BB%9F%E3%80%81%E8%AE%BE%E5%A4%87%E8%B5%84%E4%BA%A7%E7%AD%89%E5%BA%94%E7%94%A8%E3%80%82_20250822101703A027.png'
+                },
+              ]
+            },
+            {
+              name: '超高频RFID标签',
+              list: [
+                {
+                  name: '耐高温标签',
+                  value: 'R耐温范围为100℃~230℃。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/22_20250822102031A033.png'
+                },
+                {
+                  name: '电缆标签',
+                  value: '粘贴缠绕于物体表面，允许多次翻折缠绕。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/2222_20250822102107A035.png'
+                },
+              ]
+            },
+
+          ]
+        },
+        {
+          name: '高频RFID',
+          id: '13',
+          value:'介绍',
+          list: [
+            {
+              name: '高频RFID读头',
+              list: [
+                {
+                  name: 'HW-RFR-050-B-003-B1204S',
+                  id: '3',
+                  //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: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E8%AF%BB%E5%A4%B4_20250822100334A019.png'
+                },
+              ]
+            },
+            {
+              name: '高频RFID一体机',
+              list: [
+                {
+                  name: 'HW-RSLIM-HF',
+                  //value:'介绍1',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E4%B8%80%E4%BD%93%E6%9C%BA_20250822100352A020.png'
+                },
+              ]
+            },
+            {
+              name: '高频RFID标签',
+              list: [
+                {
+                  name: 'HW-PD50-HF',
+                  // value:'介绍1',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E9%AB%98%E9%A2%91RFID%E5%9C%86%E7%8E%AF%E6%A0%87%E7%AD%BE_20250822093525A018.png'
+                },
+              ]
+            },
+          ]
+        },
+        {
+          name: '传感器',
+          id: '14',
+          // value:'介绍',
+          list: [
+            {
+              name: '物联网硬件产品系列',
+              list: [
+                {
+                  name: '无线传感器接收显示仪',
+                  value:'支持 WiFi、以太网、4G、LORA 等通讯方式；Modbus_RTU，Modbus_TCP，支持客户定制通讯协议开发。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%97%A0%E7%BA%BF%E4%BC%A0%E6%84%9F%E5%99%A8%E6%8E%A5%E6%94%B6%E6%98%BE%E7%A4%BA%E4%BB%AA%E3%80%82%E6%94%AF%E6%8C%81%20WiFi%E3%80%81%E4%BB%A5%E5%A4%AA%E7%BD%91%E3%80%814G%E3%80%81LORA%20%E7%AD%89%E9%80%9A%E8%AE%AF%E6%96%B9%E5%BC%8F%EF%BC%9BModbus_RTU%EF%BC%8CModbus_TCP%EF%BC%8C%E6%94%AF%E6%8C%81%E5%AE%A2%E6%88%B7%E5%AE%9A%E5%88%B6%E9%80%9A%E8%AE%AF%E5%8D%8F%E8%AE%AE%E5%BC%80%E5%8F%91%E3%80%82_20250822103145A037.png'
+                },
+                {
+                  name: '车载物联定位终端',
+                  value:'车载物联定位终端， 支持 GPS/ 北斗定位 ， 通过 内置 TPMS 或 RFID 读写器 模块 读取到的设备相关数据 ，用 4G无线 通讯 的方式上传 到企业数据平台或阿里云物 联网平台。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E8%BD%A6%E8%BD%BD_20250822103928A038.png'
+                },
+                {
+                  name: '工业物联云智能终端',
+                  value:'工业物联云智能终端，可以对电力、蒸汽等智能仪表及传感器进行数据采集，通过网络 通信方式上传到上位机系统，进行数据的集中处理。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%B7%A5%E4%B8%9A%E7%89%A9%E8%81%94%E4%BA%91%E6%99%BA%E8%83%BD%E7%BB%88%E7%AB%AF%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%AF%B9%E7%94%B5%E5%8A%9B%E3%80%81%E8%92%B8%E6%B1%BD%E7%AD%89%E6%99%BA%E8%83%BD%E4%BB%AA%E8%A1%A8%E5%8F%8A%E4%BC%A0%E6%84%9F%E5%99%A8%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86%EF%BC%8C%E9%80%9A%E8%BF%87%E7%BD%91%E7%BB%9C%20%E9%80%9A%E4%BF%A1%E6%96%B9%E5%BC%8F%E4%B8%8A%E4%BC%A0%E5%88%B0%E4%B8%8A%E4%BD%8D%E6%9C%BA%E7%B3%BB%E7%BB%9F%EF%BC%8C%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E7%9A%84%E9%9B%86%E4%B8%AD%E5%A4%84%E7%90%86%E3%80%82_20250822103947A039.png'
+                },
+                {
+                  name: '工业物联云智能终端',
+                  value:'工业物联云智能终端具有 8 路开关量输入检测、16 开关量输出、RS485 总线、网络等硬件接口。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E5%B7%A5%E4%B8%9A%E7%89%A9%E8%81%94%E4%BA%91%E6%99%BA%E8%83%BD%E7%BB%88%E7%AB%AF%E5%85%B7%E6%9C%89%208%20%E8%B7%AF%E5%BC%80%E5%85%B3%E9%87%8F%E8%BE%93%E5%85%A5%E6%A3%80%E6%B5%8B%E3%80%8116%20%E5%BC%80%E5%85%B3%E9%87%8F%E8%BE%93%E5%87%BA%E3%80%81RS485%20%E6%80%BB%E7%BA%BF%E3%80%81%E7%BD%91%E7%BB%9C%E7%AD%89%E7%A1%AC%E4%BB%B6%E6%8E%A5%E5%8F%A3%E3%80%82_20250822104006A040.png'
+                },
+              ]
+            },
+          ]
+        },
+        {
+          name: '物联终端',
+          id: '15',
+          // value:'介绍',
+          list: [
+            {
+              name: '物联网硬件产品系列',
+              list: [
+                {
+                  name: '温湿度传感器',
+                  value:'温湿度传感器，支持2路输入，采用传感器探头+采集主机的形式',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%B8%A9%E6%B9%BF%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8%EF%BC%8C%E6%94%AF%E6%8C%812%E8%B7%AF%E8%BE%93%E5%85%A5%EF%BC%8C%E9%87%87%E7%94%A8%E4%BC%A0%E6%84%9F%E5%99%A8%E6%8E%A2%E5%A4%B4+%E9%87%87%E9%9B%86%E4%B8%BB%E6%9C%BA%E7%9A%84%E5%BD%A2%E5%BC%8F%E3%80%82_20250822104331A042.png'
+                },
+                {
+                  name: '无线温度传感器',
+                  value:'无线温度传感器，电池可用 3 年； 温度测量范围：-40～125℃；精度：±0.5℃ （25℃）；通讯距离：视距范围 1500 米。 ',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E6%97%A0%E7%BA%BF%E6%B8%A9%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8_20250822104419A043.png'
+                },
+                {
+                  name: 'EPD无线显示器',
+                  value:'EPD无线显示器，300米视距范围内的通信，电池2年使用寿命，提供显示模板定制化的服务。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/EPD%E6%97%A0%E7%BA%BF%E6%98%BE%E7%A4%BA%E5%99%A8%EF%BC%8C300%E7%B1%B3%E8%A7%86%E8%B7%9D%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E9%80%9A%E4%BF%A1%EF%BC%8C%E7%94%B5%E6%B1%A02%E5%B9%B4%E4%BD%BF%E7%94%A8%E5%AF%BF%E5%91%BD%EF%BC%8C%E6%8F%90%E4%BE%9B%E6%98%BE%E7%A4%BA%E6%A8%A1%E6%9D%BF%E5%AE%9A%E5%88%B6%E5%8C%96%E7%9A%84%E6%9C%8D%E5%8A%A1%E3%80%82_20250822104449A044.png'
+                },
+                {
+                  name: '红外温度传感器',
+                  value:'红外温度传感器，无接触式测温，DC9~36V供电，2.4寸TFT显示屏显示，温度测量范围：0~150℃，精度±1℃，支持RS485、无线LORA通讯，通讯距离1500米。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/%E7%BA%A2%E5%A4%96%E6%B8%A9%E5%BA%A6%E4%BC%A0%E6%84%9F%E5%99%A8%EF%BC%8C%E6%97%A0%E6%8E%A5%E8%A7%A6%E5%BC%8F%E6%B5%8B%E6%B8%A9%EF%BC%8CDC9~36V%E4%BE%9B%E7%94%B5%EF%BC%8C2.4%E5%AF%B8TFT%E6%98%BE%E7%A4%BA%E5%B1%8F%E6%98%BE%E7%A4%BA%EF%BC%8C%E6%B8%A9%E5%BA%A6%E6%B5%8B%E9%87%8F%E8%8C%83%E5%9B%B4%EF%BC%9A0~150%E2%84%83%EF%BC%8C%E7%B2%BE%E5%BA%A6%C2%B11%E2%84%83%EF%BC%8C%E6%94%AF%E6%8C%81RS485%E3%80%81%E6%97%A0%E7%BA%BFLORA%E9%80%9A%E8%AE%AF%EF%BC%8C%E9%80%9A%E8%AE%AF%E8%B7%9D%E7%A6%BB1500%E7%B1%B3%E3%80%82_20250822104525A045.png'
+                },
+              ]
+            },
+          ]
+        },
+        {
+          name: '工业软件',
+          id: '16',
+          // value:'介绍',
+          list: [
+            {
+              name: 'MOM',
+              list: [
+                {
+                  name: 'MOM',
+                  value:'平台向下连接海量设备，支撑设备数据采集和反向控制；向上为业务系统提供统一调用接口，为应用层的系统提供物联能力。并且自身具有完整的数据可视化组件、设备模型、数据中心能力。',
+                  icon: 'http://1.13.177.47:9665/statics/2025/08/22/mes_20250822132455A075.png'
+                },
+
+              ]
+            },
+          ]
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  watch: {
+    '$route'() {
+      // 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: {
+    getData() {
+      selectMenuTree().then(e => {
+        console.log(e)
+      })
+    },
+    checkTabs(e, k) {
+      this.tabsActive = k
+      this.itemId = e.id
+      // document.querySelector('#item' + e.id).scrollIntoView(); // 使用JavaScript实现平滑滚动到指定元素
+    },
+  }
+}
+</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;
+        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;
+      }
+    }
+  }
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
diff --git a/src/views/productCenter/index1.vue b/src/views/productCenter1/index1.vue
similarity index 100%
rename from src/views/productCenter/index1.vue
rename to src/views/productCenter1/index1.vue
diff --git a/src/views/productCenter/modal11.vue b/src/views/productCenter1/modal11.vue
similarity index 100%
rename from src/views/productCenter/modal11.vue
rename to src/views/productCenter1/modal11.vue
diff --git a/src/views/productCenter/modal12.vue b/src/views/productCenter1/modal12.vue
similarity index 100%
rename from src/views/productCenter/modal12.vue
rename to src/views/productCenter1/modal12.vue
diff --git a/src/views/productCenter/platformAdvantages.vue b/src/views/productCenter1/platformAdvantages.vue
similarity index 100%
rename from src/views/productCenter/platformAdvantages.vue
rename to src/views/productCenter1/platformAdvantages.vue
diff --git a/src/views/productCenter/platformAdvantages2.vue b/src/views/productCenter1/platformAdvantages2.vue
similarity index 100%
rename from src/views/productCenter/platformAdvantages2.vue
rename to src/views/productCenter1/platformAdvantages2.vue
diff --git a/src/views/productCenter/platformAdvantages3.vue b/src/views/productCenter1/platformAdvantages3.vue
similarity index 100%
rename from src/views/productCenter/platformAdvantages3.vue
rename to src/views/productCenter1/platformAdvantages3.vue
diff --git a/src/views/productCenter/platformArchitecture.vue b/src/views/productCenter1/platformArchitecture.vue
similarity index 100%
rename from src/views/productCenter/platformArchitecture.vue
rename to src/views/productCenter1/platformArchitecture.vue
diff --git a/src/views/productCenter/platformFeatures.vue b/src/views/productCenter1/platformFeatures.vue
similarity index 100%
rename from src/views/productCenter/platformFeatures.vue
rename to src/views/productCenter1/platformFeatures.vue
diff --git a/src/views/productCenter/platformIntroduction.vue b/src/views/productCenter1/platformIntroduction.vue
similarity index 100%
rename from src/views/productCenter/platformIntroduction.vue
rename to src/views/productCenter1/platformIntroduction.vue
diff --git a/src/views/productCenter1/produceModel.vue b/src/views/productCenter1/produceModel.vue
new file mode 100644
index 0000000..f1bef10
--- /dev/null
+++ b/src/views/productCenter1/produceModel.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ i.name }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ i.value }}
+      </span>
+    </div>
+    <div class="tabs">
+      <el-tabs v-model="activeName">
+        <el-tab-pane :name="`${k}`" v-for="(i,k) in i.list">
+          <template slot="label">
+            <span>
+              {{ i.name }}
+            </span>
+          </template>
+          <transition name="fade">
+            <div v-if="activeName === `${k}`" style="position:relative;">
+              <template v-for="ii in i.list">
+                <div class="content" @click="toDetail(ii.id)">
+
+                  <el-card class="custom-card" shadow="hover"
+                           style="min-height: 300px;height: 30vw;box-sizing: border-box">
+                    <!-- 标题 -->
+                    <h2 class="itemTitle">{{ ii.name }}</h2>
+
+                    <!-- 描述，两行省略 -->
+                    <p class="description">{{ ii.value }}</p>
+
+                    <!-- 按钮 -->
+                    <div class="btn-wrap" v-if="ii.id">
+                      <el-button class="more-btn">
+                        了解更多
+                        <i class="el-icon-arrow-right icon"></i>
+                      </el-button>
+                    </div>
+
+                    <!-- 图片 -->
+                    <div class="img-wrap">
+                      <el-image
+                          class="image"
+                          :src="ii.icon"
+                          fit="cover"
+                          style="width: 100%; max-height: 20vw;border-radius: 12px"
+                      />
+                    </div>
+                  </el-card>
+                </div>
+              </template>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['i'],
+  data() {
+    return {
+      activeName: '0',
+    }
+  },
+  methods: {
+
+    toDetail(id) {
+      if (id) {
+        this.$router.push('/productCenter/detail' + id)
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #000;
+
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #0003;
+}
+
+.tabs {
+  text-align: left;
+  margin-top: 2.3vw;
+
+  /deep/ .el-tabs__header {
+    margin: 0 20vw 15px;
+  }
+
+  /deep/ .el-tabs__content {
+    padding: 0 20vw;
+    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: 0.8vw;
+      height: 3.2vw;
+      color: #666;
+      margin: 0;
+      margin-top: 12px;
+      line-height: 1.5vw;
+      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;
+      }
+    }
+  }
+
+}
+
+.fade-enter-active {
+  animation: fadeInRight;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation: fadeOutLeft;
+  animation-duration: 0.5s;
+}
+</style>
diff --git a/src/views/productCenter/product/dataAcquisitionSensing.vue b/src/views/productCenter1/product/dataAcquisitionSensing.vue
similarity index 100%
rename from src/views/productCenter/product/dataAcquisitionSensing.vue
rename to src/views/productCenter1/product/dataAcquisitionSensing.vue
diff --git a/src/views/productCenter/product/highFrequencyRFID.vue b/src/views/productCenter1/product/highFrequencyRFID.vue
similarity index 100%
rename from src/views/productCenter/product/highFrequencyRFID.vue
rename to src/views/productCenter1/product/highFrequencyRFID.vue
diff --git a/src/views/productCenter/product/ultraHighFrequencyRFID.vue b/src/views/productCenter1/product/ultraHighFrequencyRFID.vue
similarity index 100%
rename from src/views/productCenter/product/ultraHighFrequencyRFID.vue
rename to src/views/productCenter1/product/ultraHighFrequencyRFID.vue
diff --git a/src/views/productCenter/technicalArchitecture.vue b/src/views/productCenter1/technicalArchitecture.vue
similarity index 100%
rename from src/views/productCenter/technicalArchitecture.vue
rename to src/views/productCenter1/technicalArchitecture.vue