From 614a9228a3f88d4043dd9ad703efc155b5d4aba9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Wed, 18 Jun 2025 17:21:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/element/el1.vue   | 138 +++++++++
 src/components/element/el10.vue  |   0
 src/components/element/el11.vue  |  72 +++++
 src/components/element/el12.vue  |  72 +++++
 src/components/element/el2.vue   | 106 +++++++
 src/components/element/el3.vue   |  98 +++++++
 src/components/element/el4.vue   | 136 +++++++++
 src/components/element/el5.vue   |  46 +++
 src/components/element/el6.vue   |  57 ++++
 src/components/element/el7.vue   | 117 ++++++++
 src/components/element/el8.vue   | 199 +++++++++++++
 src/components/element/el9.vue   |  86 ++++++
 src/components/menu/index.vue    | 484 +++++++------------------------
 src/router/index.js              |  21 +-
 src/views/aboutHW.vue            | 240 +++++++++++++++
 src/views/industryPlan.vue       | 239 +++++++++++++++
 src/views/newsCenter/details.vue |   2 +-
 src/views/productCenter.vue      | 239 +++++++++++++++
 src/views/serviceSupport.vue     | 239 +++++++++++++++
 19 files changed, 2196 insertions(+), 395 deletions(-)
 create mode 100644 src/components/element/el1.vue
 create mode 100644 src/components/element/el10.vue
 create mode 100644 src/components/element/el11.vue
 create mode 100644 src/components/element/el12.vue
 create mode 100644 src/components/element/el2.vue
 create mode 100644 src/components/element/el3.vue
 create mode 100644 src/components/element/el4.vue
 create mode 100644 src/components/element/el5.vue
 create mode 100644 src/components/element/el6.vue
 create mode 100644 src/components/element/el7.vue
 create mode 100644 src/components/element/el8.vue
 create mode 100644 src/components/element/el9.vue
 create mode 100644 src/views/aboutHW.vue
 create mode 100644 src/views/industryPlan.vue
 create mode 100644 src/views/productCenter.vue
 create mode 100644 src/views/serviceSupport.vue

diff --git a/src/components/element/el1.vue b/src/components/element/el1.vue
new file mode 100644
index 0000000..727786e
--- /dev/null
+++ b/src/components/element/el1.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="list">
+      <div v-for="ii in groupByCount(data.hwProductInfoDetailList)">
+        <div class="item" v-for="(i,k) in ii">
+          <div class="icon">
+            <el-image
+                style="width: 100%;height: 100%"
+                :src="i.productInfoDetailPic"
+                fit="contain"></el-image>
+          </div>
+          <div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
+          <div class="itemInfo">{{ i.productInfoDetailDesc }}</div>
+        </div>
+        <br>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+import znzz from "@/assets/icon/znzz.png";
+import kdwl from "@/assets/icon/kdwl.png";
+import znlt from "@/assets/icon/znlt.png";
+
+let map = null
+export default {
+  name: 'PlatformAdvantages',
+  components: {
+    TitleGroup
+  },
+  props: ['data'],
+  data() {
+    return {
+
+      list: [
+        {
+          name: '实时数据管理',
+          icon: wlw,
+          info: '通过获取实时数据，生产过程中，生产环境等结合产品质量进行相应关键指标参数分析，形成标准产品控制计划。'
+        },
+        {
+          name: '数据存档',
+          icon: znzz,
+          info: '通过获取实时数据，生产过程中，生产环境等结合产品质量进行相应关键指标参数分析，形成标准产品控制计划。'
+        },
+        {
+          name: '数据采集',
+          icon: kdwl,
+          info: '通过获取实时数据，生产过程中，生产环境等结合产品质量进行相应关键指标参数分析，形成标准产品控制计划。'
+        },
+        {
+          name: '数据分析',
+          icon: znlt,
+          info: '通过获取实时数据，生产过程中，生产环境等结合产品质量进行相应关键指标参数分析，形成标准产品控制计划。'
+        },
+      ],
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    groupByCount(array) {
+      let result = [];
+      for (let i = 0; i < array.length; i += 4) {
+        result.push(array.slice(i, i + 4));
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.list {
+  margin-top: 3.9vw;
+  padding-bottom: 5.3vw;
+
+  .item {
+    display: inline-block;
+    width: 14.5vw;
+    height: 16.7vw;
+    border-radius: 5px;
+    box-shadow: 0 0 3px #0002;
+    margin: 0 0.75vw;
+    transition: all 0.2s;
+    vertical-align: top;
+    margin-bottom: 1vw;
+
+    &:hover {
+      background-color: @standard-color;
+
+      .itemTitle {
+        color: #fff;
+      }
+
+      .itemInfo {
+        color: #fff;
+      }
+    }
+
+    .icon {
+      width: 4vw;
+      height: 4vw;
+      margin-top: 2vw;
+      display: inline-block;
+    }
+
+    .itemTitle {
+      transition: all 0.2s;
+      font-size: 1vw;
+      color: #000;
+      margin-top: 1vw;
+      letter-spacing: 1px;
+    }
+
+    .itemInfo {
+      transition: all 0.2s;
+      display: inline-block;
+      width: 82%;
+      font-size: 0.8vw;
+      color: #666;
+      margin-top: 0.9vw;
+      letter-spacing: 2px;
+      line-height: 1.45vw;
+      text-align: left;
+    }
+  }
+}
+</style>
diff --git a/src/components/element/el10.vue b/src/components/element/el10.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/element/el11.vue b/src/components/element/el11.vue
new file mode 100644
index 0000000..e62e822
--- /dev/null
+++ b/src/components/element/el11.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div v-for="ii in groupByCount(data.hwProductInfoDetailList)">
+      <div class="list">
+        <div class="item" v-for="(i,k) in ii">
+          <el-image
+              style="width: 100%;height: 100%"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+        </div>
+        <br>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+import znzz from "@/assets/icon/znzz.png";
+import kdwl from "@/assets/icon/kdwl.png";
+import znlt from "@/assets/icon/znlt.png";
+
+let map = null
+export default {
+  name: 'modal11',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    groupByCount(array) {
+      let result = [];
+      for (let i = 0; i < array.length; i += 3) {
+        result.push(array.slice(i, i + 3));
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.list {
+  margin: 3.9vw auto 0;
+  padding-bottom: 5.3vw;
+  width: 60vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+
+  .item {
+    display: inline-block;
+    width: 30%;
+    //height: 16.7vw;
+    margin: 0 0.5vw;
+
+  }
+}
+</style>
diff --git a/src/components/element/el12.vue b/src/components/element/el12.vue
new file mode 100644
index 0000000..99eeef8
--- /dev/null
+++ b/src/components/element/el12.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div v-for="ii in groupByCount(data.hwProductInfoDetailList)">
+      <div class="list">
+        <div class="item" v-for="(i,k) in ii">
+          <el-image
+              style="width: 100%;height: 100%"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+        </div>
+        <br>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+import znzz from "@/assets/icon/znzz.png";
+import kdwl from "@/assets/icon/kdwl.png";
+import znlt from "@/assets/icon/znlt.png";
+
+let map = null
+export default {
+  name: 'modal12',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    groupByCount(array) {
+      let result = [];
+      for (let i = 0; i < array.length; i += 2) {
+        result.push(array.slice(i, i + 2));
+      }
+      return result;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.list {
+  margin: 3.9vw auto 0;
+  padding-bottom: 5.3vw;
+  width: 60vw;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+
+  .item {
+    display: inline-block;
+    width: 49%;
+    //height: 16.7vw;
+    margin: 0 0.5vw;
+
+  }
+}
+</style>
diff --git a/src/components/element/el2.vue b/src/components/element/el2.vue
new file mode 100644
index 0000000..7c931f8
--- /dev/null
+++ b/src/components/element/el2.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="content">
+      <div class="left">
+        <div class="contentTitle">{{ data.hwProductInfoDetailList[0].productInfoDetailTitle }}</div>
+        <div class="contentSubTitle">DEVELOPMENT PLATFORM</div>
+        <div class="contentInfo">
+          {{ data.hwProductInfoDetailList[0].productInfoDetailDesc }}
+        </div>
+      </div>
+      <div class="right">
+        <el-image
+            style="width: 100%;height: 100%"
+            :src="data.hwProductInfoDetailList[0].productInfoDetailPic"
+            fit="contain"></el-image>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import banner from '@/assets/image/banner.png'
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+
+let map = null
+export default {
+  name: 'PlatformIntroduction',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      banner
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  height: 20.1vw;
+  border: 1px solid #ccc3;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+
+  .left {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    position: relative;
+    background-color: #ffffff;
+
+    .contentTitle {
+      position: absolute;
+      top: 18.6%;
+      left: 12.7%;
+      letter-spacing: 1px;
+      font-size: 1.4vw;
+      color: @standard-color;
+    }
+
+    .contentSubTitle {
+      position: absolute;
+      top: 14.6%;
+      left: 12.7%;
+      letter-spacing: 3.2px;
+      font-size: 1.6vw;
+      color: #6666;
+    }
+
+    .contentInfo {
+      text-align: left;
+      position: absolute;
+      top: 35.6%;
+      width: 73%;
+      left: 50%;
+      transform: translateX(-50%);
+      letter-spacing: 2.5px;
+      font-size: 0.8vw;
+      line-height: 1.6vw;
+      color: #666;
+    }
+  }
+
+  .right {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/element/el3.vue b/src/components/element/el3.vue
new file mode 100644
index 0000000..80d1b10
--- /dev/null
+++ b/src/components/element/el3.vue
@@ -0,0 +1,98 @@
+
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="list">
+      <div class="item" v-for="i in data.hwProductInfoDetailList">
+        <div class="icon">
+          <el-image
+              style="width: 100%;height: 100%"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+        </div>
+        <div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
+        <div class="itemInfo">{{ i.productInfoDetailDesc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+
+let map = null
+export default {
+  name: 'PlatformAdvantages2',
+  components: {
+    TitleGroup
+  },
+  props:['data'],
+  data() {
+    return {
+      wlw
+    }
+  },
+  mounted() {
+    console.log('data',this.data)
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.list {
+  width: 65vw;
+  display: inline-block;
+  margin-top: 3.5vw;
+  margin-bottom: 3.9vw;
+
+  .item {
+    display: inline-block;
+    position: relative;
+    width: 47%;
+    height: 10vw;
+    box-shadow: 0 0 3px #0002;
+    margin: 0 1.5% 1.1vw 1.5%;
+
+    .icon {
+      width: 4vw;
+      height: 4vw;
+      position: absolute;
+      top: 54%;
+      left: 18.2%;
+      transform: translate(-50%, -50%);
+    }
+
+    .itemTitle {
+      top: 37%;
+      left: 33.9%;
+      position: absolute;
+      transform: translatey(-50%);
+      font-size: 1.2vw;
+      letter-spacing: 3px;
+    }
+
+    .itemInfo {
+      top: 62.2%;
+      left: 33.9%;
+      position: absolute;
+      transform: translatey(-50%);
+      font-size: 0.9vw;
+      color: #666;
+      letter-spacing: 2px;
+      text-align: left;
+      white-space: nowrap;
+      width: 63%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+</style>
diff --git a/src/components/element/el4.vue b/src/components/element/el4.vue
new file mode 100644
index 0000000..b52053a
--- /dev/null
+++ b/src/components/element/el4.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="left">
+        <template slot="title">{{ data.productInfoEtitle }}</template>
+        <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+      </div>
+      <div class="right">
+        <div class="list">
+          <div class="item" v-for="i in 4">
+            <div class="itemTitle">质量问题早发现</div>
+            <div class="itemInfo">
+              针对变配电场景下高压场/GIS组合电器、变压器、电容电抗蛋、避雷器、高压开关柜、隔离开关等电气设备采用不同的手段进行监测。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+
+let map = null
+export default {
+  name: 'PlatformAdvantages3',
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      wlw
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  padding-top: 5.1vw;
+  width: 65vw;
+  height: 31vw;
+  margin: 0 auto;
+  text-align: left;
+  vertical-align: top;
+  margin-bottom: 5.3vw;
+
+  .left {
+    width: 26%;
+    height: 100%;
+    margin: 0% 2%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: #0378f9;
+
+    .leftTitle {
+      color: #fff;
+      font-size: 1.9vw;
+      letter-spacing: 2px;
+      margin-top: 21.7%;
+      margin-left: 11.8%;
+    }
+
+    .leftSubTitle {
+      color: #fff;
+      width: 75%;
+      line-height: 1.8vw;
+      font-size: 1.1vw;
+      letter-spacing: 2px;
+      margin-top: 5.1%;
+      margin-left: 11.8%;
+      word-break: break-all;
+    }
+  }
+
+  .right {
+    width: 68.5%;
+    height: 100%;
+    display: inline-block;
+
+    .list {
+      width: 100%;
+      height: 100%;
+
+      .item {
+        display: inline-block;
+        width: 48%;
+        height: 48%;
+        box-shadow: 0 0 3px #0002;
+        background-color: #f2f3f5;
+
+        &:nth-child(1) {
+          margin: 0 4% 3% 0;
+        }
+
+        &:nth-child(2) {
+          margin: 0 0 3% 0;
+        }
+
+        &:nth-child(3) {
+          margin: 0 4% 0 0;
+        }
+
+        .itemTitle {
+          margin-top: 8.2%;
+          margin-left: 7.6%;
+          font-size: 1.2vw;
+          line-height: 1.4vw;
+          color: #000;
+          letter-spacing: 2.7px;
+          border-left: 4px solid #3372ff;
+          padding-left: 0.7vw;
+        }
+
+        .itemInfo {
+          margin-top: 6%;
+          width: 88%;
+          margin-left: 7.3%;
+          font-size: 1.1vw;
+          line-height: 1.8vw;
+          color: #333;
+          letter-spacing: 4px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/element/el5.vue b/src/components/element/el5.vue
new file mode 100644
index 0000000..a9c0d01
--- /dev/null
+++ b/src/components/element/el5.vue
@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="image">
+      <el-image
+          style="width: 100%;height: 100%"
+          :src="data.hwProductInfoDetailList[0].productInfoDetailPic"
+          fit="contain"></el-image>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import banner from '@/assets/image/banner.png'
+
+let map = null
+export default {
+  name: 'PlatformArchitecture',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      banner,
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+.image{
+  width: 65vw;
+  height: 33.3vw;
+  display: inline-block;
+  margin: 4vw 0 6vw 0;
+}
+</style>
diff --git a/src/components/element/el6.vue b/src/components/element/el6.vue
new file mode 100644
index 0000000..d1bcc1d
--- /dev/null
+++ b/src/components/element/el6.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="pageInfo">{{ data.hwProductInfoDetailList[0].productInfoDetailDesc}}</div>
+    <div class="image">
+      <el-image
+          style="width: 100%;height: 100%"
+          :src="data.hwProductInfoDetailList[0].productInfoDetailPic"
+      ></el-image>
+      <!--        fit="contain"></el-image>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import banner from '@/assets/image/banner.png'
+
+let map = null
+export default {
+  name: 'PlatformArchitecture',
+  components: {
+    TitleGroup
+  },
+  props:['data'],
+  data() {
+    return {
+      banner,
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+.image{
+  width: 65vw;
+  height: 33.3vw;
+  display: inline-block;
+  margin: 4vw 0 6vw 0;
+}
+.pageInfo{
+  width: 63vw;
+  margin-top: 0.9vw;
+  display: inline-block;
+  color: #6666;
+  font-size: 1.2vw;
+  line-height: 2.2vw;
+  letter-spacing: 2.8px;
+}
+</style>
diff --git a/src/components/element/el7.vue b/src/components/element/el7.vue
new file mode 100644
index 0000000..73d97f2
--- /dev/null
+++ b/src/components/element/el7.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="list">
+      <div class="item" v-for="i in sortedList">
+        <div class="icon">
+          <el-image
+              style="width: 100%;height: 100%"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+        </div>
+        <div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
+        <div class="itemInfo">{{ i.productInfoDetailDesc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import wlw from "@/assets/icon/wlw.png";
+
+let map = null
+export default {
+  name: 'PlatformFeatures',
+  props: ['data'],
+  components: {
+    TitleGroup
+  },
+  computed: {
+    sortedList() {
+      return this.data.hwProductInfoDetailList.slice().sort((a, b) => a.productInfoDetailOrder - b.productInfoDetailOrder);
+    }
+  },
+
+  data() {
+    return {
+      wlw
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.list {
+  width: 65vw;
+  display: inline-block;
+  margin-top: 3.8vw;
+  margin-bottom: 2.8vw;
+  box-shadow: 0 0 3px #0002;
+
+  .item {
+    display: inline-block;
+    position: relative;
+    width: calc(100% / 3 - 2px);
+    height: 13.3vw;
+    border: 1px solid #3332;
+    margin: 0;
+    overflow: hidden;
+    float: left;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: @standard-color;
+
+      .itemTitle {
+        color: #fff;
+      }
+
+      .itemInfo {
+        color: #eee;
+      }
+    }
+
+    .icon {
+      width: 2.3vw;
+      height: 2.3vw;
+      position: absolute;
+      top: 22%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .itemTitle {
+      top: 42%;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      font-size: 1.1vw;
+      letter-spacing: 1px;
+      transition: all 0.2s;
+    }
+
+    .itemInfo {
+      top: 52.2%;
+      left: 9.6%;
+      position: absolute;
+      font-size: 0.8vw;
+      line-height: 1.5vw;
+      color: #666;
+      letter-spacing: 2.5px;
+      text-align: left;
+      width: 80%;
+      transition: all 0.2s;
+    }
+  }
+}
+
+</style>
diff --git a/src/components/element/el8.vue b/src/components/element/el8.vue
new file mode 100644
index 0000000..7968d02
--- /dev/null
+++ b/src/components/element/el8.vue
@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="tabs">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :name="`${i.productInfoDetailId}`" :label="i.productInfoDetailTitle" v-for="(i,k) in data.hwProductInfoDetailList.filter(e=>e.parentId ===0)">
+          <transition name="fade">
+            <div v-if="activeName === `${i.productInfoDetailId}`" style="position:relative;">
+              <div class="content">
+                <div class="left">
+                  <div class="itemTitle">{{ (info[0]||{}).productInfoDetailTitle }}</div>
+                  <div class="itemCode">{{ (info[0]||{}).productInfoDetailDesc }}</div>
+                  <div class="image">
+                    <el-image
+                        style="width: 100%; height: 100%"
+                        :src="(info[0]||{}).productInfoDetailPic"
+                        fit="contain"></el-image>
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="infos" v-for="i in info.filter(e=>!e.productInfoDetailPic)">
+                    <div class="infoTitle">{{ i.productInfoDetailTitle }}</div>
+                    <div class="infoNum">{{ i.productInfoDetailDesc }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import banner from '@/assets/image/banner.png'
+import {getProductCenterProductDetailInfo} from "@/api/productCenter";
+
+export default {
+  name: 'HighFrequencyRFID',
+  props:['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      banner,
+      activeName: '0',
+      info:[]
+    }
+  },
+  mounted() {
+    this.activeName = `${this.data.hwProductInfoDetailList.filter(e=>e.parentId ===0)[0].productInfoDetailId}`
+    getProductCenterProductDetailInfo({parentId:this.data.hwProductInfoDetailList.filter(e=>e.parentId ===0)[0].productInfoDetailId}).then(v=>{
+      this.info = v.data
+    })
+  },
+  methods: {
+    handleClick(e){
+      getProductCenterProductDetailInfo({parentId:e.name}).then(v=>{
+        this.info = v.data
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.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;
+
+    .left {
+      width: 34%;
+      height: 21.7vw;
+      display: inline-block;
+      box-shadow: 0 0 3px #0002;
+      background-color: #fff;
+      text-align: center;
+      vertical-align: top;
+
+      .itemTitle {
+        padding-top: 1.2vw;
+        font-size: 1vw;
+      }
+
+      .itemCode {
+        margin-top: 0.2vw;
+        font-size: 1.1vw;
+      }
+
+      .image {
+        width: 80%;
+        margin-top: 1vw;
+        margin-left: 10%;
+        height: 15vw;
+        background-color: cadetblue;
+      }
+    }
+
+    .right {
+      margin-left: 1%;
+      width: 65%;
+      height: 21.2vw;
+      display: inline-block;
+      box-shadow: 0 0 5px #0002;
+      background-color: #fff;
+      padding-top: 0.5vw;
+
+      .infos {
+        width: 93%;
+        margin: 0 auto;
+        border-bottom: 1px dashed #0003;
+        position: relative;
+        height: 2.9vw;
+      }
+
+      .infoTitle {
+        position: absolute;
+        width: 96%;
+        height: 100%;
+        top: 0;
+        left: 4%;
+        text-align: left;
+        font-size: 1vw;
+        letter-spacing: 1px;
+        color: #0009;
+        line-height: 2.9vw;
+      }
+
+      .infoNum {
+        position: absolute;
+        width: 95%;
+        height: 100%;
+        top: 0;
+        right: 5%;
+        text-align: right;
+        font-size: 1vw;
+        letter-spacing: 1.4px;
+        color: #000;
+        line-height: 2.9vw;
+      }
+    }
+  }
+
+}
+
+.fade-enter-active {
+  animation: fadeInRight;
+  animation-duration: 0.5s;
+}
+
+.fade-leave-active {
+  animation: fadeOutLeft;
+  animation-duration: 0.5s;
+}
+</style>
diff --git a/src/components/element/el9.vue b/src/components/element/el9.vue
new file mode 100644
index 0000000..6859781
--- /dev/null
+++ b/src/components/element/el9.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <TitleGroup>
+      <template slot="title">{{ data.productInfoEtitle }}</template>
+      <template slot="subTitle">{{ data.productInfoCtitle }}</template>
+    </TitleGroup>
+    <div class="list">
+      <div class="item" v-for=" i in data.hwProductInfoDetailList">
+        <div class="image">
+          <el-image
+              style="width: 100%; height: 100%;"
+              :src="i.productInfoDetailPic"
+              fit="contain"></el-image>
+        </div>
+        <div class="info">
+          <span>
+          {{ i.productInfoDetailDesc }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TitleGroup from "@/components/TitleGroup";
+import banner from '@/assets/image/banner.png'
+
+export default {
+  name: 'HighFrequencyRFID',
+  props:['data'],
+  components: {
+    TitleGroup
+  },
+  data() {
+    return {
+      banner,
+      activeName: '1'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+.list {
+  width: 65%;
+  margin: 3vw auto 0;
+
+  .item {
+    margin-right: 2.6%;
+    width: 23%;
+    height: 16vw;
+    display: inline-block;
+    box-shadow: 0 0 3px #0002;
+    margin-bottom: 1.4vw;
+    vertical-align: top;
+
+    .image {
+      width: 100%;
+      height: 50%;
+    }
+
+    .info {
+      width: calc(100% - 2.2vw);
+      height: calc(50% - 2.1vw);
+      padding: 1.1vw;
+      font-size: 0.85vw;
+      line-height: 1.2vw;
+      letter-spacing: 0.6px;
+      color: #0006;
+      span{
+        display: inline-block;
+        width: calc(100%  );
+        height: calc(100%  );
+        overflow: hidden;
+      }
+    }
+
+    &:nth-child(4n) {
+      margin-right: 0%;
+    }
+  }
+}
+</style>
diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
index 20deb80..e53048a 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -7,27 +7,35 @@
     </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.path)">
+           @click="toLink(subMenuPath,ii.configTypeId)">
         <div class="icon">
-          <img :src="ii.icon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
+          <img :src="ii.configTypeIcon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
         </div>
         <div class="menuChildrenName">
           <span>
-            {{ ii.name }}
+            {{ ii.configTypeName }}
           </span>
         </div>
       </div>
     </div>
-    <div class="subMenu1" v-show="(subMenuList||[]).length>0 && subMenuType === 2" @mouseleave="clearChildren">
-      <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}" v-for="(ii,k) in subMenuList">
-        <div class="subMenuListTitle">
-          {{ ii.name }} >
+
+    <div class="subMenu1" :style="{height:20 + 50 + 40*(Math.max(...subMenuList.map(e=>e.children.length || 0)))+'px'}"
+         v-show="(subMenuList||[]).length>0 && subMenuType === 2"
+         @mouseleave="clearChildren">
+      <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
+           v-for="(ii,k) in subMenuList">
+        <div class="subMenuListTitle" @click="toLink(subMenuPath,ii.configTypeId)">
+          <img class="subMenuListTitleIcon" :src="ii.configTypeIcon" alt=""
+               style="width: 1vw;height: 1vw;object-fit: contain">
+          <div class="subMenuListTitleSpan">{{ ii.configTypeName }}</div>
+          <i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
         </div>
-        <div class="subMenuListItem" v-for="(iii,kkk) in ii.children" @click="toLink(iii.path)">
-          <img :src="iii.icon" alt=""
-               style="width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">{{
-            iii.name
-          }}
+        <div class="subMenuListItem" v-for="(iii,kkk) in ii.children" @click="toLink(subMenuPath,iii.configTypeId)">
+          <img :src="iii.configTypeIcon" alt=""
+               style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
+          <span>
+            {{ iii.configTypeName }}
+          </span>
           <el-tag size="small" v-if="kkk <1">新品</el-tag>
         </div>
       </div>
@@ -53,418 +61,90 @@ export default {
         },
         {
           name: '关于海威',
-          path: '/productCenter/aboutHW',
+          path: '/aboutHW',
           type: 1,
-          children: [
-            {
-              name: '公司概况',
-              path: '/aboutUs/companyIntroduction',
-              icon: znzz
-            },
-            {
-              name: '媒体中心',
-              path: '/aboutUs/managementTeam',
-              icon: znlt
-            },
-            {
-              name: '荣誉资质',
-              path: '/aboutUs/developmentHistory',
-              icon: kdwl
-            },
-            {
-              name: '合作伙伴',
-              path: '/contactUs',
-              icon: wlw
-            },
-            {
-              name: '联系我们',
-              path: '/contactUs',
-              icon: wlw
-            },
-          ]
+          children: []
         },
         {
           name: '产品中心',
-          path: '/productInfo',
+          path: '/productCenter',
           type: 2,
-          children: [
-            {
-              name: '轮胎RFID',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '超高频RFID',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '高频RFID',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '传感器',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '物联终端',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '工业软件',
-              path: '/productInfo',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productInfo',
-                  icon: znzz
-                },
-              ]
-            },
-          ]
+          children: []
         },
         {
           name: '行业方案',
-          path: '/casesAndClients/IOT',
+          path: '/industryPlan',
           type: 2,
-          children: [
-            {
-              name: '智能轮胎',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '轮胎工厂',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '快递物流',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '新能源',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '畜牧食品',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '智能制造',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-            {
-              name: '工业物联',
-              path: '/productCenter/industrialInternet',
-              icon: znzz,
-              children: [
-                {
-                  name: '产品1',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品2',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-                {
-                  name: '产品3',
-                  path: '/productCenter/industrialInternet',
-                  icon: znzz
-                },
-              ]
-            },
-          ]
+          children: []
         },
         {
           name: '服务支持',
-          path: '/contactUs',
+          path: '/serviceSupport',
           type: 1,
-          children: [
-            {
-              name: '售前服务',
-              path: '/aboutUs/developmentHistory',
-              icon: kdwl
-            },
-            {
-              name: '售后服务',
-              path: '/contactUs',
-              icon: wlw
-            },
-            {
-              name: '资料下载',
-              path: '/contactUs',
-              icon: wlw
-            }
-          ]
+          children: []
         },
       ],
       subMenuList: [],
-      subMenuType: [],
-      firstMenu: '',
-      secondMenu: '',
+      subMenuType: 0,
+      subMenuPath: '',
     }
   },
   mounted() {
+    console.log(this.$route)
     this.getMenu()
     let query = this.$route.path
     console.log(this.$route)
   },
   methods: {
-    toLink(e) {
+    toLink(e, id) {
+      console.log(e)
       if (!e) return
-      this.$router.push(e)
+      if (id) {
+        this.$router.push({path: e + '?id=' + id})
+      } else {
+        this.$router.push(e)
+      }
     },
     getChildren(e) {
       if (e.children) {
         this.subMenuList = e.children
         this.subMenuType = e.type
+        this.subMenuPath = e.path
       } else {
         this.subMenuList = []
         this.subMenuType = 0
+        this.subMenuPath = ''
       }
     },
     clearChildren() {
       this.subMenuList = []
       this.subMenuType = 0
+      this.subMenuPath = ''
     },
     getMenu() {
-      getPortalConfigTypeList({
-        configTypeClassfication: 4,
-        parentId: 0,
-        pageNum: 1,
-        pageSize: 111
-      }).then(e => {
-        console.log(e)
-        this.menuList[2].children = e.rows.map(v => {
-          return {
-            name: v.configTypeName,
-            icon: v.configTypeIcon,
-            path: '/productCenter/industrialInternet?portalConfigTypeId=' + v.configTypeId
-          }
-        })
-      })
       getPortalConfigTypeList({
         configTypeClassfication: 3,
         parentId: 0,
-        pageNum: 1,
-        pageSize: 111
       }).then(e => {
-        console.log(e)
-        this.menuList[3].children = e.rows.map(v => {
-          return {
-            name: v.configTypeName,
-            icon: v.configTypeIcon,
-            path: '/casesAndClients/IOT?portalConfigTypeId=' + v.configTypeId
-          }
-        })
+        this.menuList[1].children = e.rows
+      })
+      getPortalConfigTypeList({
+        configTypeClassfication: 4,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[2].children = e.rows
+      })
+      getPortalConfigTypeList({
+        configTypeClassfication: 5,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[3].children = e.rows
+      })
+      getPortalConfigTypeList({
+        configTypeClassfication: 6,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[4].children = e.rows
       })
     }
   }
@@ -567,7 +247,7 @@ export default {
     width: 100vw;
     left: 50%;
     transform: translateX(-50%);
-    height: @menuHeight;
+    min-height: @menuHeight;
     display: flex;
     justify-content: center;
     background-color: #fff;
@@ -576,24 +256,60 @@ export default {
 
 
     .subMenuList {
-      max-width: @menuHeight;
+      max-width: 14vw;
       display: inline-block;
       text-align: left;
       vertical-align: top;
+      border-right: 1px solid #0001;
+
+      &:last-child {
+        border-right: 0;
+      }
 
       .subMenuListTitle {
-        font-weight: 900;
-        line-height: 40px;
+        height: 50px;
         cursor: pointer;
+        position: relative;
+
+        .subMenuListTitleIcon {
+          position: absolute;
+          top: 50%;
+          left: 2vw;
+          width: 1vw;
+          height: 1vw;
+          transform: translateY(-50%);
+        }
+
+        .subMenuListTitleIcon1 {
+          position: absolute;
+          top: 50%;
+          right: 2vw;
+          width: 1vw;
+          height: 1vw;
+          font-size: 1vw;
+          transform: translateY(-50%);
+        }
+
+        .subMenuListTitleSpan {
+          position: absolute;
+          letter-spacing: 0.1vw;
+          top: 50%;
+          left: calc(2vw + 1vw + 0.5vw);
+          transform: translateY(-50%);
+          font-size: 1vw;
+          font-weight: 500;
+        }
       }
 
       .subMenuListItem {
+        padding-left: 2vw;
         cursor: pointer;
         font-size: 14px;
         line-height: 40px;
 
         &:hover {
           color: @standard-color;
+          background-color: #0001;
         }
       }
     }
diff --git a/src/router/index.js b/src/router/index.js
index eab878a..c29ffc8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,26 +11,27 @@ export default new Router({
       component: Layout,
       redirect: '/index',
       children: [
-        {
-          path: 'productInfo',
-          component: () => import('@/views/productInfo.vue'),
-        },
         {
           path: 'index',
           component: () => import('@/views/index/index.vue'),
         },
         {
-          path: 'productCenter/industrialInternet',
-          component: () => import('@/views/productCenter/index.vue'),
+          path: '/aboutHW',
+          component: () => import('@/views/aboutHW.vue'),
         },
         {
-          path: 'casesAndClients/IOT',
-          component: () => import('@/views/casesAndClients/IOT/index.vue'),
+          path: '/productCenter',
+          component: () => import('@/views/productCenter.vue'),
         },
         {
-          path: '/newsCenter',
-          component: () => import('@/views/newsCenter/index.vue'),
+          path: '/industryPlan',
+          component: () => import('@/views/industryPlan.vue'),
         },
+        {
+          path: '/serviceSupport',
+          component: () => import('@/views/serviceSupport.vue'),
+        },
+
         {
           path: '/newsCenter/details',
           component: () => import('@/views/newsCenter/details.vue'),
diff --git a/src/views/aboutHW.vue b/src/views/aboutHW.vue
new file mode 100644
index 0000000..264561c
--- /dev/null
+++ b/src/views/aboutHW.vue
@@ -0,0 +1,240 @@
+<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-if="tabsList.length<1" 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">
+        <EL1 class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'" :data="i"/>
+        <EL2 class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'" :data="i"/>
+        <EL3 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'" :data="i"/>
+        <EL4 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'" :data="i"/>
+        <EL5 class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'" :data="i"/>
+        <EL6 class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'" :data="i"/>
+        <EL7 class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
+        <EL8 class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
+        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
+        <EL9 class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
+        <EL11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
+        <EL12 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 EL1 from '@/components/element/el1.vue'
+import EL2 from '@/components/element/el2.vue'
+import EL3 from '@/components/element/el3.vue'
+import EL4 from '@/components/element/el4.vue'
+import EL5 from '@/components/element/el5.vue'
+import EL6 from '@/components/element/el6.vue'
+import EL7 from '@/components/element/el7.vue'
+import EL8 from '@/components/element/el8.vue'
+import EL9 from '@/components/element/el9.vue'
+// import EL10 from '@/components/element/el10.vue'
+import EL11 from '@/components/element/el11.vue'
+import EL12 from '@/components/element/el12.vue'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    EL1,
+    EL2,
+    EL3,
+    EL4,
+    EL5,
+    EL6,
+    EL7,
+    EL8,
+    EL9,
+    // EL10,
+    EL11,
+    EL12,
+    ContactUs,
+    Copyright,
+  },
+  data() {
+    return {
+      banner: '',
+      bannerTitle: '',
+      tabsActive: 0,
+      tabsList: [],
+      configTypeId: 0,
+      contentList: []
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  watch: {
+    '$route'() {
+      this.getData()
+    }
+  },
+  methods: {
+    getContentList(id) {
+      console.log('id', id)
+      getProductCenterProductInfos({
+        configTypeId: id,
+        // parentId: 0
+      }).then(e => {
+        this.contentList = e.data.sort((a, b) => a.productInfoOrder - b.productInfoOrder)
+      })
+    },
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getData() {
+      getPortalConfigList({
+        portalConfigType: 2,
+        portalConfigTypeId: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 5
+      }).then(e => {
+        this.banner = e.rows?.[0]?.portalConfigPic
+        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      })
+      getPortalConfigTypeList({
+        parentId: this.$route.query.id,
+        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/industryPlan.vue b/src/views/industryPlan.vue
new file mode 100644
index 0000000..da406eb
--- /dev/null
+++ b/src/views/industryPlan.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+          :src="banner"
+          fit="contain"></el-image>
+      <div class="bannerInfo">{{ bannerTitle }}</div>
+      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
+      <div class="tabs">
+        <div class="content">
+          <div v-if="tabsList.length<1" 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">
+        <EL1 class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'" :data="i"/>
+        <EL2 class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'" :data="i"/>
+        <EL3 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'" :data="i"/>
+        <EL4 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'" :data="i"/>
+        <EL5 class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'" :data="i"/>
+        <EL6 class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'" :data="i"/>
+        <EL7 class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
+        <EL8 class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
+        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
+        <EL9 class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
+        <EL11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
+        <EL12 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 EL1 from '@/components/element/el1.vue'
+import EL2 from '@/components/element/el2.vue'
+import EL3 from '@/components/element/el3.vue'
+import EL4 from '@/components/element/el4.vue'
+import EL5 from '@/components/element/el5.vue'
+import EL6 from '@/components/element/el6.vue'
+import EL7 from '@/components/element/el7.vue'
+import EL8 from '@/components/element/el8.vue'
+import EL9 from '@/components/element/el9.vue'
+// import EL10 from '@/components/element/el10.vue'
+import EL11 from '@/components/element/el11.vue'
+import EL12 from '@/components/element/el12.vue'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    EL1,
+    EL2,
+    EL3,
+    EL4,
+    EL5,
+    EL6,
+    EL7,
+    EL8,
+    EL9,
+    // EL10,
+    EL11,
+    EL12,
+    ContactUs,
+    Copyright,
+  },
+  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)
+      })
+    },
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getData() {
+      getPortalConfigList({
+        portalConfigType: 2,
+        portalConfigTypeId: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 5
+      }).then(e => {
+        this.banner = e.rows?.[0]?.portalConfigPic
+        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      })
+      getPortalConfigTypeList({
+        parentId: this.$route.query.id,
+        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/newsCenter/details.vue b/src/views/newsCenter/details.vue
index 474240e..0812668 100644
--- a/src/views/newsCenter/details.vue
+++ b/src/views/newsCenter/details.vue
@@ -9,7 +9,7 @@
     </div>
 
     <div class="content">
-      <div class="newsTitle">【央视镜头】海威物联技术支持的“智慧物流"</div>
+      <div class="newsTitle">[央视镜头]海威物联技术支持的“智慧物流"</div>
       <div class="newsTime">
         <span>发布时间:2023/02/02</span>
         <span style="margin-left: 2.2vw">文章作者:张三</span>
diff --git a/src/views/productCenter.vue b/src/views/productCenter.vue
new file mode 100644
index 0000000..da406eb
--- /dev/null
+++ b/src/views/productCenter.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+          :src="banner"
+          fit="contain"></el-image>
+      <div class="bannerInfo">{{ bannerTitle }}</div>
+      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
+      <div class="tabs">
+        <div class="content">
+          <div v-if="tabsList.length<1" 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">
+        <EL1 class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'" :data="i"/>
+        <EL2 class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'" :data="i"/>
+        <EL3 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'" :data="i"/>
+        <EL4 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'" :data="i"/>
+        <EL5 class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'" :data="i"/>
+        <EL6 class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'" :data="i"/>
+        <EL7 class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
+        <EL8 class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
+        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
+        <EL9 class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
+        <EL11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
+        <EL12 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 EL1 from '@/components/element/el1.vue'
+import EL2 from '@/components/element/el2.vue'
+import EL3 from '@/components/element/el3.vue'
+import EL4 from '@/components/element/el4.vue'
+import EL5 from '@/components/element/el5.vue'
+import EL6 from '@/components/element/el6.vue'
+import EL7 from '@/components/element/el7.vue'
+import EL8 from '@/components/element/el8.vue'
+import EL9 from '@/components/element/el9.vue'
+// import EL10 from '@/components/element/el10.vue'
+import EL11 from '@/components/element/el11.vue'
+import EL12 from '@/components/element/el12.vue'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    EL1,
+    EL2,
+    EL3,
+    EL4,
+    EL5,
+    EL6,
+    EL7,
+    EL8,
+    EL9,
+    // EL10,
+    EL11,
+    EL12,
+    ContactUs,
+    Copyright,
+  },
+  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)
+      })
+    },
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getData() {
+      getPortalConfigList({
+        portalConfigType: 2,
+        portalConfigTypeId: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 5
+      }).then(e => {
+        this.banner = e.rows?.[0]?.portalConfigPic
+        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      })
+      getPortalConfigTypeList({
+        parentId: this.$route.query.id,
+        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/serviceSupport.vue b/src/views/serviceSupport.vue
new file mode 100644
index 0000000..da406eb
--- /dev/null
+++ b/src/views/serviceSupport.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <div class="banner">
+      <el-image
+          style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
+          :src="banner"
+          fit="contain"></el-image>
+      <div class="bannerInfo">{{ bannerTitle }}</div>
+      <!--      <el-button type="primary" class="bannerBtn">免费体验</el-button>-->
+      <div class="tabs">
+        <div class="content">
+          <div v-if="tabsList.length<1" 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">
+        <EL1 class="platformAdvantages" :configTypeId="configTypeId" v-if="i.configModal === '1'" :data="i"/>
+        <EL2 class="platformIntroduction" :configTypeId="configTypeId" v-if="i.configModal === '2'" :data="i"/>
+        <EL3 class="platformAdvantages2" :configTypeId="configTypeId" v-if="i.configModal === '3'" :data="i"/>
+        <EL4 class="platformAdvantages3" :configTypeId="configTypeId" v-if="i.configModal === '4'" :data="i"/>
+        <EL5 class="platformArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '5'" :data="i"/>
+        <EL6 class="technicalArchitecture" :configTypeId="configTypeId" v-if="i.configModal === '6'" :data="i"/>
+        <EL7 class="platformFeatures" :configTypeId="configTypeId" v-if="i.configModal === '7'" :data="i"/>
+        <EL8 class="highFrequencyRFID" v-if="i.configModal === '8'  " :data="i"/>
+        <!--        <UltraHighFrequencyRFID class="ultraHighFrequencyRFID" v-if="i.configModal === '9' " :data="i"/>-->
+        <EL9 class="dataAcquisitionSensing" v-if="i.configModal === '9'" :data="i"/>
+        <EL11 class="dataAcquisitionSensing" v-if="i.configModal === '11'" :data="i"/>
+        <EL12 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 EL1 from '@/components/element/el1.vue'
+import EL2 from '@/components/element/el2.vue'
+import EL3 from '@/components/element/el3.vue'
+import EL4 from '@/components/element/el4.vue'
+import EL5 from '@/components/element/el5.vue'
+import EL6 from '@/components/element/el6.vue'
+import EL7 from '@/components/element/el7.vue'
+import EL8 from '@/components/element/el8.vue'
+import EL9 from '@/components/element/el9.vue'
+// import EL10 from '@/components/element/el10.vue'
+import EL11 from '@/components/element/el11.vue'
+import EL12 from '@/components/element/el12.vue'
+import ContactUs from '@/components/contactUs'
+import Copyright from '@/components/copyright'
+import {getPortalConfigList, getPortalConfigTypeList, getProductCenterProductInfos} from "@/api/productCenter";
+
+export default {
+  name: 'ProductCenter',
+  components: {
+    EL1,
+    EL2,
+    EL3,
+    EL4,
+    EL5,
+    EL6,
+    EL7,
+    EL8,
+    EL9,
+    // EL10,
+    EL11,
+    EL12,
+    ContactUs,
+    Copyright,
+  },
+  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)
+      })
+    },
+    checkTabs(i, k) {
+      this.tabsActive = k
+      this.configTypeId = i.configTypeId
+      this.getContentList(i.configTypeId)
+    },
+    getData() {
+      getPortalConfigList({
+        portalConfigType: 2,
+        portalConfigTypeId: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 5
+      }).then(e => {
+        this.banner = e.rows?.[0]?.portalConfigPic
+        this.bannerTitle = e.rows?.[0]?.portalConfigDesc
+      })
+      getPortalConfigTypeList({
+        parentId: this.$route.query.id,
+        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>