From 66e350d8f070833beaf487a79f64997a96db2dcf Mon Sep 17 00:00:00 2001
From: suixy <suixy@mesnac.com>
Date: Sun, 24 Aug 2025 09:28:37 +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                 |   1 -
 src/components/menu/index.vue            |  10 +-
 src/router/index.js                      |  16 +-
 src/views/productCenter/detail.vue       | 477 +++++++++++++++++++++++
 src/views/productCenter/index.vue        | 304 +++++++++------
 src/views/productCenter/index1.vue       | 246 ++++++++++++
 src/views/productCenter/produceModel.vue | 232 +++++++++++
 7 files changed, 1152 insertions(+), 134 deletions(-)
 create mode 100644 src/views/productCenter/detail.vue
 create mode 100644 src/views/productCenter/index1.vue
 create mode 100644 src/views/productCenter/produceModel.vue

diff --git a/src/api/productCenter.js b/src/api/productCenter.js
index 7446d4e..497fb6a 100644
--- a/src/api/productCenter.js
+++ b/src/api/productCenter.js
@@ -31,4 +31,3 @@ export function getProductCenterProductDetailInfo(query) {
     params: query
   })
 }
-
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index 5dacc6e..f0828e4 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -5,6 +5,10 @@
       <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)">
@@ -68,7 +72,11 @@ export default {
   methods: {
     toLink(id) {
       if (!id) return
-      this.$router.push('/test?id=' + id)
+      if(id === 'productCenter'){
+        this.$router.push('/productCenter')
+      }else{
+        this.$router.push('/test?id=' + id)
+      }
     },
     getMenu() {
       selectMenuTree().then(e => {
diff --git a/src/router/index.js b/src/router/index.js
index e4893d3..879e4a7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,14 +15,22 @@ export default new Router({
     {
       path: '/',
       component: Layout,
-      redirect: '/index',
+      redirect: '/test',
       children: [
         {
           path: 'test', component: () => import('@/views/page/index.vue'),
         },
-          {
-            path: 'index', component: () => import('@/views/index/index.vue'),
-          },
+        {
+          path: 'index', component: () => import('@/views/index/index.vue'),
+        },
+        {
+          path: 'productCenter', component: () => import('@/views/productCenter/index.vue'),
+
+        },
+        {
+          path: 'productCenter/detail', component: () => import('@/views/productCenter/detail.vue'),
+
+        },
       ]
       // children: [
       //   {
diff --git a/src/views/productCenter/detail.vue b/src/views/productCenter/detail.vue
new file mode 100644
index 0000000..df5797d
--- /dev/null
+++ b/src/views/productCenter/detail.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 39fa37c..31d792e 100644
--- a/src/views/productCenter/index.vue
+++ b/src/views/productCenter/index.vue
@@ -6,90 +6,199 @@
         :src="banner"
         fit="contain"></el-image>
       <div class="bannerInfo">{{ bannerTitle }}</div>
-      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
-      <div class="tabs">
-        <div class="content">
-          <div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
-               :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
-            {{ i.configTypeName }}
-          </div>
-        </div>
-      </div>
     </div>
-    <div>
-      <div v-for="i in contentList">
-        <platformAdvantages class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'"
-                            :data="i"/>
-        <PlatformIntroduction class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'"
-                              :data="i"/>
-        <PlatformAdvantages2 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'"
-                             :data="i"/>
-        <PlatformAdvantages3 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'"
-                             :data="i"/>
-        <PlatformArchitecture class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'"
-                              :data="i"/>
-        <TechnicalArchitecture class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'"
-                               :data="i"/>
-        <platformFeatures class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
-        <HighFrequencyRFID class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
-        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
-        <DataAcquisitionSensing class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
-        <modal11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
-        <modal12 class="dataAcquisitionSensing" v-if="i.configModal === '12'" :data="i"/>
+
+    <div v-for="i in productList">
+      <ProduceModel :i="i"/>
       </div>
-    </div>
-    <!--    <div v-if="tabsActive === 1">-->
-    <!--      <div v-for="(i, k) in contentList">-->
-    <!--      </div>-->
-    <!--    </div>-->
+
+
     <ContactUs class="contactUs"/>
     <Copyright class="copyright"/>
   </div>
 </template>
 
 <script>
-import PlatformAdvantages from './platformAdvantages'
-import PlatformIntroduction from './platformIntroduction'
-import PlatformAdvantages2 from './platformAdvantages2'
-import PlatformAdvantages3 from './platformAdvantages3'
-import PlatformArchitecture from './platformArchitecture'
-import TechnicalArchitecture from './technicalArchitecture'
-import PlatformFeatures from './platformFeatures'
-import HighFrequencyRFID from './product/highFrequencyRFID'
-import modal11 from './modal11'
-import modal12 from './modal12'
-import UltraHighFrequencyRFID from './product/ultraHighFrequencyRFID'
-import DataAcquisitionSensing from './product/dataAcquisitionSensing'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
-import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+import ProduceModel from './produceModel.vue'
+import {selectMenuTree} from "@/api/productCenter";
 
 export default {
   name: 'ProductCenter',
   components: {
-    PlatformAdvantages,
-    PlatformIntroduction,
-    PlatformAdvantages2,
-    PlatformAdvantages3,
-    PlatformArchitecture,
-    TechnicalArchitecture,
-    PlatformFeatures,
-    HighFrequencyRFID,
-    UltraHighFrequencyRFID,
-    DataAcquisitionSensing,
     ContactUs,
     Copyright,
-    modal11,
-    modal12
+    ProduceModel
   },
   data() {
     return {
-      banner: '',
+      banner: 'https://www.genrace.com/template/default/images/pages/prodDetail-banner.jpg',
       bannerTitle: '',
-      tabsActive: 0,
-      tabsList: [],
-      configTypeId: 0,
-      contentList: []
+      productList: [
+        {
+          name: '读写终端',
+          value:'介绍',
+          list: [
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+          ]
+        },
+        {
+          name: '读写终端',
+          value:'介绍',
+          list: [
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+            {
+              name: '分类1',
+              list: [
+                {
+                  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'
+                },
+                {
+                  name: '设备1',
+                  value:'介绍1',
+                  icon: 'https://www.genrace.com/static/upload/image/20250414/1744615648137412.png'
+                },
+              ]
+            },
+          ]
+        },
+      ]
     }
   },
   mounted() {
@@ -101,45 +210,11 @@ export default {
     }
   },
   methods: {
-    getContentList(id) {
-      getProductCenterProductInfos({
-        configTypeId: id,
-        // parentId: 0
-      }).then(e => {
-        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
-        console.log(this.contentList)
-      })
-    },
-    checkTabs(i, k) {
-      this.tabsActive = k
-      this.configTypeId = i.configTypeId
-      this.getContentList(i.configTypeId)
-    },
     getData() {
-      console.log(this.$route.query)
-      getPortalConfigList({
-        portalConfigType: 2,
-        portalConfigTypeId: this.$route.query.portalConfigTypeId,
-        pageNum: 1,
-        pageSize: 5
-      }).then(e => {
-        this.banner = e.rows?.[0]?.portalConfigPic
-        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      selectMenuTree().then(e => {
+        console.log(e)
       })
-      getPortalConfigTypeList({
-        parentId: this.$route.query.portalConfigTypeId,
-        pageNum: 1,
-        pageSize: 50
-      }).then(e => {
-        this.tabsList = e.rows
-        this.configTypeId = e.rows?.[0]?.configTypeId
-        if (e.rows?.[0]?.configTypeId) {
-          this.getContentList(e.rows?.[0]?.configTypeId)
-        } else {
-          this.contentList = []
-        }
-      })
-    }
+    },
   }
 }
 </script>
@@ -207,33 +282,6 @@ export default {
   }
 }
 
-.platformAdvantages {
-  width: 100%;
-}
-
-.platformIntroduction {
-  width: 100%;
-  background-color: #f4f9ff;
-}
-
-.platformAdvantages2 {
-  width: 100%;
-}
-
-.platformAdvantages3 {
-  width: 100%;
-  background-color: #f6f7fb;
-}
-
-.platformArchitecture {
-  width: 100%;
-}
-
-.technicalArchitecture {
-  width: 100%;
-  background-color: #f4f9ff;
-}
-
 .contactUs {
   width: 100%;
   background-color: #2e445c;
diff --git a/src/views/productCenter/index1.vue b/src/views/productCenter/index1.vue
new file mode 100644
index 0000000..39fa37c
--- /dev/null
+++ b/src/views/productCenter/index1.vue
@@ -0,0 +1,246 @@
+<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>
+      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
+      <div class="tabs">
+        <div class="content">
+          <div v-for="(i,k) in tabsList" @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`"
+               :style="`width:${tabsActive === k ? `calc(${100/tabsList.length}% - 3px)`:`${100/tabsList.length}%`}`">
+            {{ i.configTypeName }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div v-for="i in contentList">
+        <platformAdvantages class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'"
+                            :data="i"/>
+        <PlatformIntroduction class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'"
+                              :data="i"/>
+        <PlatformAdvantages2 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'"
+                             :data="i"/>
+        <PlatformAdvantages3 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'"
+                             :data="i"/>
+        <PlatformArchitecture class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'"
+                              :data="i"/>
+        <TechnicalArchitecture class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'"
+                               :data="i"/>
+        <platformFeatures class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
+        <HighFrequencyRFID class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
+        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
+        <DataAcquisitionSensing class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
+        <modal11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
+        <modal12 class="dataAcquisitionSensing" v-if="i.configModal === '12'" :data="i"/>
+      </div>
+    </div>
+    <!--    <div v-if="tabsActive === 1">-->
+    <!--      <div v-for="(i, k) in contentList">-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+
+<script>
+import PlatformAdvantages from './platformAdvantages'
+import PlatformIntroduction from './platformIntroduction'
+import PlatformAdvantages2 from './platformAdvantages2'
+import PlatformAdvantages3 from './platformAdvantages3'
+import PlatformArchitecture from './platformArchitecture'
+import TechnicalArchitecture from './technicalArchitecture'
+import PlatformFeatures from './platformFeatures'
+import HighFrequencyRFID from './product/highFrequencyRFID'
+import modal11 from './modal11'
+import modal12 from './modal12'
+import UltraHighFrequencyRFID from './product/ultraHighFrequencyRFID'
+import DataAcquisitionSensing from './product/dataAcquisitionSensing'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    PlatformAdvantages,
+    PlatformIntroduction,
+    PlatformAdvantages2,
+    PlatformAdvantages3,
+    PlatformArchitecture,
+    TechnicalArchitecture,
+    PlatformFeatures,
+    HighFrequencyRFID,
+    UltraHighFrequencyRFID,
+    DataAcquisitionSensing,
+    ContactUs,
+    Copyright,
+    modal11,
+    modal12
+  },
+  data() {
+    return {
+      banner: '',
+      bannerTitle: '',
+      tabsActive: 0,
+      tabsList: [],
+      configTypeId: 0,
+      contentList: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  watch: {
+    '$route'() {
+      this.getData()
+    }
+  },
+  methods: {
+    getContentList(id) {
+      getProductCenterProductInfos({
+        configTypeId: id,
+        // parentId: 0
+      }).then(e => {
+        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
+        console.log(this.contentList)
+      })
+    },
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getData() {
+      console.log(this.$route.query)
+      getPortalConfigList({
+        portalConfigType: 2,
+        portalConfigTypeId: this.$route.query.portalConfigTypeId,
+        pageNum: 1,
+        pageSize: 5
+      }).then(e => {
+        this.banner = e.rows?.[0]?.portalConfigPic
+        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      })
+      getPortalConfigTypeList({
+        parentId: this.$route.query.portalConfigTypeId,
+        pageNum: 1,
+        pageSize: 50
+      }).then(e => {
+        this.tabsList = e.rows
+        this.configTypeId = e.rows?.[0]?.configTypeId
+        if (e.rows?.[0]?.configTypeId) {
+          this.getContentList(e.rows?.[0]?.configTypeId)
+        } else {
+          this.contentList = []
+        }
+      })
+    }
+  }
+}
+</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: 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;
+      }
+    }
+  }
+}
+
+.platformAdvantages {
+  width: 100%;
+}
+
+.platformIntroduction {
+  width: 100%;
+  background-color: #f4f9ff;
+}
+
+.platformAdvantages2 {
+  width: 100%;
+}
+
+.platformAdvantages3 {
+  width: 100%;
+  background-color: #f6f7fb;
+}
+
+.platformArchitecture {
+  width: 100%;
+}
+
+.technicalArchitecture {
+  width: 100%;
+  background-color: #f4f9ff;
+}
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
diff --git a/src/views/productCenter/produceModel.vue b/src/views/productCenter/produceModel.vue
new file mode 100644
index 0000000..a6f6a6b
--- /dev/null
+++ b/src/views/productCenter/produceModel.vue
@@ -0,0 +1,232 @@
+<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">
+                  <!-- 标题 -->
+                  <h2 class="itemTitle">{{ ii.name }}</h2>
+
+                  <!-- 描述，两行省略 -->
+                  <p class="description">{{ ii.value }}</p>
+
+                  <!-- 按钮 -->
+                  <div class="btn-wrap">
+                    <el-button class="more-btn" @click="$emit('more')">
+                      了解更多
+                      <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%; 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){
+      this.$router.push('/productCenter/detail?id='+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: 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;
+      }
+    }
+  }
+
+}
+.fade-enter-active {
+  animation: fadeInRight;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation: fadeOutLeft;
+  animation-duration: 0.5s;
+}
+</style>