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

---
 src/api/hwWeb.js                   |  44 +++
 src/api/hwWebMenu.js               |  44 +++
 src/components/editEl/carousel.vue | 108 +++++++
 src/components/editEl/editEl2.vue  |   2 +-
 src/components/editEl/editEl5.vue  |   2 +-
 src/components/editEl/editEl6.vue  |   2 +-
 src/components/el/carousel.vue     |  86 +++++
 src/components/el/el1.vue          | 126 ++++++++
 src/components/el/el10.vue         |  91 ++++++
 src/components/el/el11.vue         |   2 +
 src/components/el/el2.vue          | 126 ++++++++
 src/components/el/el3.vue          | 115 +++++++
 src/components/el/el4.vue          | 137 ++++++++
 src/components/el/el5.vue          |  65 ++++
 src/components/el/el6.vue          |  76 +++++
 src/components/el/el7.vue          | 131 ++++++++
 src/components/el/el8.vue          | 221 +++++++++++++
 src/components/el/el9.vue          | 107 +++++++
 src/components/menu/index.vue      | 108 ++-----
 src/components/menu/index1.vue     | 329 +++++++++++++++++++
 src/router/index.js                |  84 ++---
 src/views/page/index.vue           | 495 +++++++++++++++++++++++++++++
 src/views/pageEditor/index.vue     | 334 ++++++++++++++++++-
 23 files changed, 2700 insertions(+), 135 deletions(-)
 create mode 100644 src/api/hwWeb.js
 create mode 100644 src/api/hwWebMenu.js
 create mode 100644 src/components/editEl/carousel.vue
 create mode 100644 src/components/el/carousel.vue
 create mode 100644 src/components/el/el1.vue
 create mode 100644 src/components/el/el10.vue
 create mode 100644 src/components/el/el11.vue
 create mode 100644 src/components/el/el2.vue
 create mode 100644 src/components/el/el3.vue
 create mode 100644 src/components/el/el4.vue
 create mode 100644 src/components/el/el5.vue
 create mode 100644 src/components/el/el6.vue
 create mode 100644 src/components/el/el7.vue
 create mode 100644 src/components/el/el8.vue
 create mode 100644 src/components/el/el9.vue
 create mode 100644 src/components/menu/index1.vue
 create mode 100644 src/views/page/index.vue

diff --git a/src/api/hwWeb.js b/src/api/hwWeb.js
new file mode 100644
index 0000000..86c9ada
--- /dev/null
+++ b/src/api/hwWeb.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询haiwei官网json列表
+export function listHwWeb(query) {
+  return request({
+    url: '/portal/hwWeb/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询haiwei官网json详细
+export function getHwWeb(webId) {
+  return request({
+    url: '/portal/hwWeb/' + webId,
+    method: 'get'
+  })
+}
+
+// 新增haiwei官网json
+export function addHwWeb(data) {
+  return request({
+    url: '/portal/hwWeb',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改haiwei官网json
+export function updateHwWeb(data) {
+  return request({
+    url: '/portal/hwWeb',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除haiwei官网json
+export function delHwWeb(webId) {
+  return request({
+    url: '/portal/hwWeb/' + webId,
+    method: 'delete'
+  })
+}
diff --git a/src/api/hwWebMenu.js b/src/api/hwWebMenu.js
new file mode 100644
index 0000000..ce42d64
--- /dev/null
+++ b/src/api/hwWebMenu.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询haiwei官网菜单列表
+export function listHwWebMenu(query) {
+    return request({
+        url: '/portal/hwWebMenu/list', method: 'get', params: query
+    })
+}
+
+// 查询haiwei官网菜单详细
+export function getHwWebMenu(webMenuId) {
+    return request({
+        url: '/portal/hwWebMenu/' + webMenuId, method: 'get'
+    })
+}
+
+// 新增haiwei官网菜单
+export function addHwWebMenu(data) {
+    return request({
+        url: '/portal/hwWebMenu', method: 'post', data: data
+    })
+}
+
+// 修改haiwei官网菜单
+export function updateHwWebMenu(data) {
+    return request({
+        url: '/portal/hwWebMenu', method: 'put', data: data
+    })
+}
+
+// 删除haiwei官网菜单
+export function delHwWebMenu(webMenuId) {
+    return request({
+        url: '/portal/hwWebMenu/' + webMenuId, method: 'delete'
+    })
+}
+
+export function selectMenuTree(query) {
+    return request({
+        url: '/portal/hwWebMenu/selectMenuTree',
+        method: 'get',
+        params: query
+    })
+}
\ No newline at end of file
diff --git a/src/components/editEl/carousel.vue b/src/components/editEl/carousel.vue
new file mode 100644
index 0000000..09b81c8
--- /dev/null
+++ b/src/components/editEl/carousel.vue
@@ -0,0 +1,108 @@
+<template>
+  <div style="height: 650px;">
+    <el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
+      <el-carousel-item v-for="(item,k) in data.list" :key="k">
+        <div style="position: relative;width: 100%;height: 100%;">
+          <UploadEl :data="item"/>
+          <div class="title" contenteditable="true" @blur="edit1('title', k,$event)">{{ item.title }}</div>
+          <div class="subTitle" contenteditable="true" @blur="edit1('value', k,$event)">{{ item.value }}</div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div style="position: relative;width: 100%;height: 100%;">
+          <div style="width:100%;height:100%;"
+               @click="addImg">
+            <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 650px"></i>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'Carousel',
+  components: {UploadEl},
+  props: ['data'],
+  data() {
+    return {
+      show: true,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+    addImg() {
+      this.show = false;
+      this.$props.data.list.push({title: '请输入', value: '请输入'});
+      this.$nextTick(() => {
+        this.show = true;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.$refs.carousel.setActiveItem(this.$props.data.list.length - 1);
+          }, 10)
+        })
+      })
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+/deep/ .el-carousel__container {
+  height: 100%;
+}
+
+/deep/ .el-carousel__button {
+  width: 50px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #cfd6de;
+}
+
+/deep/ .el-carousel__indicator--horizontal {
+  padding: 12px 8px;
+}
+
+/deep/ .el-carousel__indicator.is-active button {
+  opacity: 1;
+  background-color: #3372ff;
+}
+
+/deep/ .el-carousel__indicators--horizontal {
+  bottom: 5%;
+}
+
+.title {
+  position: absolute;
+  top: 43.7%;
+  left: 37.7%;
+  transform: translate(-50%, -50%);
+  font-weight: 700;
+  color: #3372ff;
+  font-size: 2.2vw;
+  letter-spacing: 6.1px;
+  min-width: 20px;
+}
+
+.subTitle {
+  position: absolute;
+  top: 56%;
+  left: 38.7%;
+  transform: translate(-50%, -50%);
+  color: #3372ff;
+  font-size: 1.3vw;
+  letter-spacing: 2.3px;
+  white-space: nowrap;
+  min-width: 20px;
+}
+</style>
diff --git a/src/components/editEl/editEl2.vue b/src/components/editEl/editEl2.vue
index c6f0ff2..06d61c4 100644
--- a/src/components/editEl/editEl2.vue
+++ b/src/components/editEl/editEl2.vue
@@ -23,7 +23,7 @@
         </div>
       </div>
       <div class="right">
-        <UploadEl :data="{icon:data.image}"/>
+        <UploadEl :data="data"/>
       </div>
     </div>
   </div>
diff --git a/src/components/editEl/editEl5.vue b/src/components/editEl/editEl5.vue
index 76a2f9b..e379d9f 100644
--- a/src/components/editEl/editEl5.vue
+++ b/src/components/editEl/editEl5.vue
@@ -11,7 +11,7 @@
       </span>
     </div>
     <div class="image">
-      <UploadEl :data="{icon:data.img}"/>
+      <UploadEl :data="data"/>
     </div>
   </div>
 </template>
diff --git a/src/components/editEl/editEl6.vue b/src/components/editEl/editEl6.vue
index b516a8a..39d0c5d 100644
--- a/src/components/editEl/editEl6.vue
+++ b/src/components/editEl/editEl6.vue
@@ -12,7 +12,7 @@
     </div>
     <div class="pageInfo" contenteditable="true" @blur="edit('info', $event)">{{ data.info }}</div>
     <div class="image">
-      <UploadEl :data="{icon:data.img}"/>
+      <UploadEl :data="data"/>
     </div>
   </div>
 </template>
diff --git a/src/components/el/carousel.vue b/src/components/el/carousel.vue
new file mode 100644
index 0000000..e0a972f
--- /dev/null
+++ b/src/components/el/carousel.vue
@@ -0,0 +1,86 @@
+<template>
+  <div style="height: 650px;">
+    <el-carousel trigger="click" style="height:100%" v-if="show" ref="carousel">
+      <el-carousel-item v-for="(item,k) in data.list" :key="k">
+        <div style="position: relative;width: 100%;height: 100%;">
+          <el-image
+              fit="contain"
+              style="width: 100%;height: 100%"
+              :src="item.icon"
+          ></el-image>
+          <div class="title">{{ item.title }}</div>
+          <div class="subTitle">{{ item.value }}</div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'Carousel',
+  props: ['data'],
+  data() {
+    return {
+      show: true,
+    }
+  },
+  mounted() {
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+/deep/ .el-carousel__container {
+  height: 100%;
+}
+
+/deep/ .el-carousel__button {
+  width: 50px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #cfd6de;
+}
+
+/deep/ .el-carousel__indicator--horizontal {
+  padding: 12px 8px;
+}
+
+/deep/ .el-carousel__indicator.is-active button {
+  opacity: 1;
+  background-color: #3372ff;
+}
+
+/deep/ .el-carousel__indicators--horizontal {
+  bottom: 5%;
+}
+
+.title {
+  position: absolute;
+  top: 43.7%;
+  left: 37.7%;
+  transform: translate(-50%, -50%);
+  font-weight: 700;
+  color: #3372ff;
+  font-size: 2.2vw;
+  letter-spacing: 6.1px;
+  min-width: 20px;
+}
+
+.subTitle {
+  position: absolute;
+  top: 56%;
+  left: 38.7%;
+  transform: translate(-50%, -50%);
+  color: #3372ff;
+  font-size: 1.3vw;
+  letter-spacing: 2.3px;
+  white-space: nowrap;
+  min-width: 20px;
+}
+</style>
diff --git a/src/components/el/el1.vue b/src/components/el/el1.vue
new file mode 100644
index 0000000..3f1fc86
--- /dev/null
+++ b/src/components/el/el1.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <template v-for="(i,k) in data.list">
+        <div class="item">
+          <div class="icon">
+            <el-image
+                fit="contain"
+                style="width: 100%;height: 100%"
+                :src="i.icon"
+            ></el-image>
+          </div>
+          <div class="itemTitle">{{ i.title }}</div>
+          <div class="itemInfo">{{ i.value }}</div>
+        </div>
+        <br v-if="(k+1)%4===0"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'EditEl1',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.list {
+  margin-top: 3.9vw;
+  padding-bottom: 5.3vw;
+  text-align: center;
+
+  .item {
+    display: inline-block;
+    width: 14.5vw;
+    height: 16.7vw;
+    border-radius: 5px;
+    box-shadow: 0 0 3px #0002;
+    transition: all 0.2s;
+    vertical-align: top;
+    margin: 0 0.75vw 1vw;
+    position: relative;
+
+    &: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/el/el10.vue b/src/components/el/el10.vue
new file mode 100644
index 0000000..db892ff
--- /dev/null
+++ b/src/components/el/el10.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <template v-for="(i,k) in data.list">
+        <div class="item">
+          <el-image
+              fit="contain"
+              style="width: 100%;height: 100%"
+              :src="i.icon"
+          ></el-image>
+        </div>
+        <br class="br" v-if="(k+1)%3===0"/>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditEl10',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.list {
+  margin: 3.9vw auto 0;
+  padding-bottom: 5.3vw;
+  width: 60vw;
+  //display: flex;
+  //justify-content: space-between;
+  //align-items: center;
+  flex-wrap: wrap;
+
+  .br {
+    display: block;
+    content: '';
+    flex-basis: 100%;
+    width: 0;
+  }
+
+  .item {
+    display: inline-block;
+    width: 30%;
+    //height: 16.7vw;
+    margin: 0 0.5vw;
+    vertical-align: top;
+    position: relative;
+
+
+  }
+}
+</style>
diff --git a/src/components/el/el11.vue b/src/components/el/el11.vue
new file mode 100644
index 0000000..485ac6c
--- /dev/null
+++ b/src/components/el/el11.vue
@@ -0,0 +1,2 @@
+<template></template>
+<script></script>
diff --git a/src/components/el/el2.vue b/src/components/el/el2.vue
new file mode 100644
index 0000000..7a55fd1
--- /dev/null
+++ b/src/components/el/el2.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="contentSubTitle">
+          {{ data.contentSubTitle }}
+        </div>
+        <div class="contentTitle">
+          {{ data.contentTitle }}
+        </div>
+        <div class="contentInfo">
+          {{ data.contentInfo }}
+        </div>
+      </div>
+      <div class="right">
+        <el-image
+            fit="contain"
+            style="width: 100%;height: 100%"
+            :src="data.icon"
+        ></el-image>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditEl2',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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/el/el3.vue b/src/components/el/el3.vue
new file mode 100644
index 0000000..e885adc
--- /dev/null
+++ b/src/components/el/el3.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(i,k) in data.list">
+        <div class="icon">
+          <el-image
+              fit="contain"
+              style="width: 100%;height: 100%"
+              :src="i.icon"
+          ></el-image>
+        </div>
+        <div class="itemTitle">{{ i.itemTitle }}</div>
+        <div class="itemInfo">{{ i.itemInfo }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'EditEl3',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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/el/el4.vue b/src/components/el/el4.vue
new file mode 100644
index 0000000..f5e0e17
--- /dev/null
+++ b/src/components/el/el4.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="left">
+        <el-image
+            fit="contain"
+            style="width: 100%;height: 100%"
+            :src="data.icon"
+        ></el-image>
+      </div>
+      <div class="right">
+        <div class="list">
+          <div class="item" v-for="(i,k) in data.list.slice(0,4)">
+            <div class="itemTitle">{{ i.title }}</div>
+            <div class="itemInfo">
+              {{ i.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'EditEl4',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  padding-top: 5.1vw;
+  width: 65vw;
+  height: 31vw;
+  text-align: left;
+  vertical-align: top;
+  margin: 0 auto 5.3vw;
+
+  .left {
+    width: 26%;
+    height: 100%;
+    margin: 0% 2%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: #0378f9;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    .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;
+        vertical-align: top;
+        position: relative;
+
+
+        &: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/el/el5.vue b/src/components/el/el5.vue
new file mode 100644
index 0000000..020569f
--- /dev/null
+++ b/src/components/el/el5.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="image">
+      <el-image
+          fit="contain"
+          style="width: 100%;height: 100%"
+          :src="data.icon"
+      ></el-image>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: 'EditEl5',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.image {
+  width: 65vw;
+  height: 33.3vw;
+  display: inline-block;
+  margin: 4vw 0 6vw 0;
+}
+</style>
diff --git a/src/components/el/el6.vue b/src/components/el/el6.vue
new file mode 100644
index 0000000..4a4ec55
--- /dev/null
+++ b/src/components/el/el6.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="pageInfo">{{ data.info }}</div>
+    <div class="image">
+      <el-image
+          fit="contain"
+          style="width: 100%;height: 100%"
+          :src="data.icon"
+      ></el-image>
+    </div>
+  </div>
+</template>
+
+<script>
+
+let map = null
+export default {
+  name: 'PlatformArchitecture',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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/el/el7.vue b/src/components/el/el7.vue
new file mode 100644
index 0000000..ad62d95
--- /dev/null
+++ b/src/components/el/el7.vue
@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(i,k) in data.list">
+        <div class="icon">
+          <el-image
+              fit="contain"
+              style="width: 100%;height: 100%"
+              :src="i.icon"
+          ></el-image>
+        </div>
+        <div class="itemTitle">{{ i.title }}</div>
+        <div class="itemInfo">{{ i.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PlatformFeatures',
+  props: ['data'],
+  computed: {},
+
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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/el/el8.vue b/src/components/el/el8.vue
new file mode 100644
index 0000000..019290c
--- /dev/null
+++ b/src/components/el/el8.vue
@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="tabs">
+      <el-tabs v-model="activeName">
+        <el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
+          <template slot="label">
+            <span>
+              {{ i.title }}
+            </span>
+          </template>
+          <transition name="fade">
+            <div v-if="activeName === `${k}`" style="position:relative;">
+              <div class="content">
+                <div class="left">
+                  <div class="itemTitle">
+                    {{ i.leftTitle }}
+                  </div>
+                  <div class="itemCode">
+                    {{ i.leftInfo }}
+                  </div>
+                  <div class="image">
+                    <el-image
+                        fit="contain"
+                        style="width: 100%;height: 100%"
+                        :src="i.icon"
+                    ></el-image>
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="infos" v-for="(ii,kk) in i.infos">
+                    <div class="infoTitle">
+                      {{ ii.title }}
+                    </div>
+                    <div class="infoNum">
+                      {{ ii.info }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditEl8',
+  props: ['data'],
+  data() {
+    return {
+      activeName: '0'
+    }
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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: 46%;
+        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: 46%;
+        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/el/el9.vue b/src/components/el/el9.vue
new file mode 100644
index 0000000..870ce5f
--- /dev/null
+++ b/src/components/el/el9.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="title">
+      <span>
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span>
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for=" i in data.list">
+        <div class="image">
+          <el-image
+              fit="contain"
+              style="width: 100%;height: 100%"
+              :src="i.icon"
+          ></el-image>
+        </div>
+        <div class="info">
+          <span>
+          {{ i.value }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditEl9',
+  props: ['data'],
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</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: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.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;
+    position: relative;
+
+
+    .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 c4a120d..158cb43 100644
--- a/src/components/menu/index.vue
+++ b/src/components/menu/index.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="menu">
     <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
-         @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? i.path:'')">
-      <div :class="`name`">{{ i.name }}</div>
+         @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? (i.webMenuId):'')">
+      <div :class="`name`">{{ i.webMenuName }}</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(subMenuPath,ii.configTypeId)">
+           @click="toLink(ii.webMenuId)">
         <div class="icon">
-          <img :src="ii.configTypeIcon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
+          <img :src="ii.webMenuPic" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
         </div>
         <div class="menuChildrenName">
-          <span>
-            {{ ii.configTypeName }}
-          </span>
+              <span>
+                {{ ii.webMenuName }}
+              </span>
         </div>
       </div>
     </div>
@@ -24,19 +24,19 @@
          @mouseleave="clearChildren">
       <div class="subMenuList" :style="{width:100/subMenuList.length+'%'}"
            v-for="(ii,k) in subMenuList">
-        <div class="subMenuListTitle" @click="toLink(subMenuPath,ii.configTypeId)">
+        <div class="subMenuListTitle" @click="toLink(ii.webMenuId)">
           <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(subMenuPath,iii.configTypeId,true)">
-          <img :src="iii.configTypeIcon" alt=""
+             @click="toLink(iii.webMenuId)">
+          <img :src="iii.webMenuPic" alt=""
                style="vertical-align: sub;width: 18px;height: 18px;line-height: 30px;object-fit: contain;margin-right: 6px">
           <span>
-            {{ iii.configTypeName }}
-          </span>
+                {{ iii.webMenuName }}
+              </span>
           <el-tag size="small" v-if="kkk <1">新品</el-tag>
         </div>
       </div>
@@ -50,69 +50,35 @@ import znzz from "@/assets/icon/znzz.png";
 import kdwl from "@/assets/icon/kdwl.png";
 import znlt from "@/assets/icon/znlt.png";
 import {selectConfigTypeList} from "@/api/menu";
+import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
 
 export default {
   name: 'Index',
   data() {
     return {
-      menuList: [
-        {
-          name: '首页',
-          path: '/index'
-        },
-        {
-          name: '关于海威',
-          path: '/aboutHW',
-          type: 1,
-          children: []
-        },
-        {
-          name: '产品中心',
-          path: '/productCenter',
-          type: 2,
-          children: []
-        },
-        {
-          name: '行业方案',
-          path: '/industryPlan',
-          type: 2,
-          children: []
-        },
-        {
-          name: '服务支持',
-          path: '/serviceSupport',
-          type: 1,
-          children: []
-        },
-      ],
+      menuList: [],
       subMenuList: [],
       subMenuType: 0,
-      subMenuPath: '',
+      subMenuPath: ''
     }
   },
   mounted() {
-    console.log(this.$route)
     this.getMenu()
-    let query = this.$route.path
-    console.log(this.$route)
   },
   methods: {
-    toLink(e, id, isDetail) {
-      console.log(e)
-      if (!e) return
-      let path = e
-      if (isDetail) {
-        path = path + '/detail'
-      }
-      if (id) {
-        path = path + '?id=' + id
-      }
-      this.$router.push(path)
+    toLink(id) {
+      if (!id) return
+      this.$router.push('/test?id=' + id)
+    },
+    getMenu() {
+      selectMenuTree().then(e => {
+        this.menuList = e.data
+      })
     },
     getChildren(e) {
       if (e.children) {
         this.subMenuList = e.children
-        this.subMenuType = e.type
+        this.subMenuType = e.type || 1
         this.subMenuPath = e.path
       } else {
         this.subMenuList = []
@@ -125,32 +91,6 @@ export default {
       this.subMenuType = 0
       this.subMenuPath = ''
     },
-    getMenu() {
-      selectConfigTypeList({
-        configTypeClassfication: 3,
-        parentId: 0,
-      }).then(e => {
-        this.menuList[1].children = e.rows
-      })
-      selectConfigTypeList({
-        configTypeClassfication: 4,
-        parentId: 0,
-      }).then(e => {
-        this.menuList[2].children = e.rows
-      })
-      selectConfigTypeList({
-        configTypeClassfication: 5,
-        parentId: 0,
-      }).then(e => {
-        this.menuList[3].children = e.rows
-      })
-      selectConfigTypeList({
-        configTypeClassfication: 6,
-        parentId: 0,
-      }).then(e => {
-        this.menuList[4].children = e.rows
-      })
-    }
   }
 }
 </script>
diff --git a/src/components/menu/index1.vue b/src/components/menu/index1.vue
new file mode 100644
index 0000000..c4a120d
--- /dev/null
+++ b/src/components/menu/index1.vue
@@ -0,0 +1,329 @@
+<template>
+  <div class="menu">
+    <div v-for="(i,k) in menuList" :class="`menuItem ${$route.path === i.path ? 'focus':''}`"
+         @mouseenter="getChildren(i)" @click="toLink((i.children||[]).length===0 ? i.path:'')">
+      <div :class="`name`">{{ i.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(subMenuPath,ii.configTypeId)">
+        <div class="icon">
+          <img :src="ii.configTypeIcon" alt="" style="width: 1.8vw;height: 1.8vw;object-fit: contain">
+        </div>
+        <div class="menuChildrenName">
+          <span>
+            {{ ii.configTypeName }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <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(subMenuPath,iii.configTypeId,true)">
+          <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>
+    </div>
+  </div>
+</template>
+
+<script>
+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";
+import {selectConfigTypeList} from "@/api/menu";
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      menuList: [
+        {
+          name: '首页',
+          path: '/index'
+        },
+        {
+          name: '关于海威',
+          path: '/aboutHW',
+          type: 1,
+          children: []
+        },
+        {
+          name: '产品中心',
+          path: '/productCenter',
+          type: 2,
+          children: []
+        },
+        {
+          name: '行业方案',
+          path: '/industryPlan',
+          type: 2,
+          children: []
+        },
+        {
+          name: '服务支持',
+          path: '/serviceSupport',
+          type: 1,
+          children: []
+        },
+      ],
+      subMenuList: [],
+      subMenuType: 0,
+      subMenuPath: '',
+    }
+  },
+  mounted() {
+    console.log(this.$route)
+    this.getMenu()
+    let query = this.$route.path
+    console.log(this.$route)
+  },
+  methods: {
+    toLink(e, id, isDetail) {
+      console.log(e)
+      if (!e) return
+      let path = e
+      if (isDetail) {
+        path = path + '/detail'
+      }
+      if (id) {
+        path = path + '?id=' + id
+      }
+      this.$router.push(path)
+    },
+    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() {
+      selectConfigTypeList({
+        configTypeClassfication: 3,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[1].children = e.rows
+      })
+      selectConfigTypeList({
+        configTypeClassfication: 4,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[2].children = e.rows
+      })
+      selectConfigTypeList({
+        configTypeClassfication: 5,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[3].children = e.rows
+      })
+      selectConfigTypeList({
+        configTypeClassfication: 6,
+        parentId: 0,
+      }).then(e => {
+        this.menuList[4].children = e.rows
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.menu {
+  position: relative;
+
+  .focus, .menuItem:hover {
+    font-weight: 700;
+    color: #3076f8;
+    background-color: #ebf1ff;
+
+    .line {
+      width: 100%;
+      height: 2px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background-color: #3076f8;
+    }
+  }
+
+  .menuItem {
+    //width: 120px;
+    padding: 0 2vw;
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    transition: all 0.2s;
+
+
+    .name {
+      line-height: @top-height;
+      font-size: 1vw;
+      letter-spacing: 2px;
+    }
+  }
+
+
+  .subMenu {
+    position: absolute;
+    width: 100vw;
+    left: 50%;
+    transform: translateX(-50%);
+    height: @menuHeight;
+    display: flex;
+    justify-content: center;
+    background-color: #fff;
+    z-index: -1;
+    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);
+
+
+    .topMenuItem.active, .topMenuItem:hover {
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+      .menuChildrenName {
+        color: @standard-color;
+      }
+    }
+
+    .topMenuItem {
+      width: @menuHeight;
+      height: @menuHeight;
+      transition: all 0.2s;
+
+      .icon {
+        width: 100%;
+        height: 36%;
+        margin-top: 22%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .menuName {
+        height: 20%;
+        font-size: 0.9vw;
+        color: #111;
+        letter-spacing: 1px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .subMenuList {
+      position: absolute;
+      width: 80%;
+      height: @menuHeight;
+    }
+  }
+
+  .subMenu1 {
+    position: absolute;
+    width: 100vw;
+    left: 50%;
+    transform: translateX(-50%);
+    min-height: @menuHeight;
+    display: flex;
+    justify-content: center;
+    background-color: #fff;
+    z-index: -1;
+    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);
+
+
+    .subMenuList {
+      max-width: 14vw;
+      display: inline-block;
+      text-align: left;
+      vertical-align: top;
+      border-right: 1px solid #0001;
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      .subMenuListTitle {
+        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;
+        }
+      }
+    }
+  }
+}
+
+
+@menuHeight: 11vw;
+
+
+</style>
+
+
diff --git a/src/router/index.js b/src/router/index.js
index d21bd02..65c7b9c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,52 +9,60 @@ export default new Router({
     {
       path: '/editor', component: () => import('@/views/pageEditor/index.vue'),
     },
+    // {
+    //   path: '/test', component: () => import('@/views/page/index.vue'),
+    // },
     {
       path: '/',
       component: Layout,
       redirect: '/index',
       children: [
         {
-          path: 'index',
-          component: () => import('@/views/index/index.vue'),
-        },
-        {
-          path: '/aboutHW',
-          component: () => import('@/views/aboutHW.vue'),
-        },
-        {
-          path: '/productCenter',
-          component: () => import('@/views/productCenter.vue'),
-        },
-        {
-          path: '/productCenter/detail',
-          component: () => import('@/views/productInfo.vue'),
-        },
-        {
-          path: '/industryPlan',
-          component: () => import('@/views/industryPlan.vue'),
-        },
-        {
-          path: '/industryPlan/detail',
-          component: () => import('@/views/productInfo.vue'),
-        },
-        {
-          path: '/serviceSupport',
-          component: () => import('@/views/serviceSupport.vue'),
-        },
-        {
-          path: '/newsCenter/details',
-          component: () => import('@/views/newsCenter/details.vue'),
-        },
-        {
-          path: '/contactUs',
-          component: () => import('@/views/contactUs/index.vue'),
-        },
-        {
-          path: 'casesAndClients/more',
-          component: () => import('@/views/casesAndClients/IOT/more.vue'),
+          path: 'test', component: () => import('@/views/page/index.vue'),
         },
       ]
+      // children: [
+      //   {
+      //     path: 'index',
+      //     component: () => import('@/views/index/index.vue'),
+      //   },
+      //   {
+      //     path: '/aboutHW',
+      //     component: () => import('@/views/aboutHW.vue'),
+      //   },
+      //   {
+      //     path: '/productCenter',
+      //     component: () => import('@/views/productCenter.vue'),
+      //   },
+      //   {
+      //     path: '/productCenter/detail',
+      //     component: () => import('@/views/productInfo.vue'),
+      //   },
+      //   {
+      //     path: '/industryPlan',
+      //     component: () => import('@/views/industryPlan.vue'),
+      //   },
+      //   {
+      //     path: '/industryPlan/detail',
+      //     component: () => import('@/views/productInfo.vue'),
+      //   },
+      //   {
+      //     path: '/serviceSupport',
+      //     component: () => import('@/views/serviceSupport.vue'),
+      //   },
+      //   {
+      //     path: '/newsCenter/details',
+      //     component: () => import('@/views/newsCenter/details.vue'),
+      //   },
+      //   {
+      //     path: '/contactUs',
+      //     component: () => import('@/views/contactUs/index.vue'),
+      //   },
+      //   {
+      //     path: 'casesAndClients/more',
+      //     component: () => import('@/views/casesAndClients/IOT/more.vue'),
+      //   },
+      // ]
     },
   ]
 })
diff --git a/src/views/page/index.vue b/src/views/page/index.vue
new file mode 100644
index 0000000..871f726
--- /dev/null
+++ b/src/views/page/index.vue
@@ -0,0 +1,495 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="component" v-for="(i,k) in components">
+        <Carousel v-if="i.type === 'carousel'" :data="i.value"/>
+        <EditEl1 v-if="i.type === 1" :data="i.value"/>
+        <EditEl2 v-if="i.type === 2" :data="i.value"/>
+        <EditEl3 v-if="i.type === 3" :data="i.value"/>
+        <EditEl4 v-if="i.type === 4" :data="i.value"/>
+        <EditEl5 v-if="i.type === 5" :data="i.value"/>
+        <EditEl6 v-if="i.type === 6" :data="i.value"/>
+        <EditEl7 v-if="i.type === 7" :data="i.value"/>
+        <EditEl8 v-if="i.type === 8" :data="i.value"/>
+        <EditEl9 v-if="i.type === 9" :data="i.value"/>
+        <EditEl10 v-if="i.type ===10" :data="i.value"/>
+        <!--        <EditEl11 v-if="i.type === 11" :data="i.value"/>-->
+      </div>
+    </div>
+
+    <ContactUs class="contactUs"/>
+    <Copyright class="copyright"/>
+  </div>
+</template>
+<script>
+import EditEl1 from "@/components/el/el1.vue";
+import EditEl2 from "@/components/el/el2.vue";
+import EditEl3 from "@/components/el/el3.vue";
+import EditEl4 from "@/components/el/el4.vue";
+import EditEl5 from "@/components/el/el5.vue";
+import EditEl6 from "@/components/el/el6.vue";
+import EditEl7 from "@/components/el/el7.vue";
+import EditEl8 from "@/components/el/el8.vue";
+import EditEl9 from "@/components/el/el9.vue";
+import EditEl10 from "@/components/el/el10.vue";
+// import EditEl11 from "@/components/el/el11.vue";
+import Copyright from '@/components/copyright'
+import ContactUs from "@/views/index/contactUs.vue";
+import Carousel from "@/components/el/carousel.vue";
+import {getHwWeb} from "@/api/hwWeb";
+
+export default {
+  components: {
+    Carousel,
+    ContactUs,
+    Copyright,
+    EditEl1,
+    EditEl2,
+    EditEl3,
+    EditEl4,
+    EditEl5,
+    EditEl6,
+    EditEl7,
+    EditEl8,
+    EditEl9,
+    EditEl10,
+    // EditEl11,
+  },
+  data() {
+    return {
+      a: '1',
+      addEl: false,
+      value: [],
+      components: [
+        {
+          type: 'carousel',
+          value: {
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 1,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 2,
+          value: {
+            title: '123',
+            subTitle: '456',
+            contentTitle: 'contentTitle',
+            contentSubTitle: 'DEVELOPMENT PLATFORM',
+            contentInfo: 'contentInfo',
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          },
+        },
+        {
+          type: 3,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '111',
+                itemInfo: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '222',
+                itemInfo: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '333',
+                itemInfo: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '444',
+                itemInfo: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '555',
+                itemInfo: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '666',
+                itemInfo: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 4,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                title: '111',
+                value: '222'
+              },
+              {
+                title: '111',
+                value: '222'
+              },
+              {
+                title: '111',
+                value: '222'
+              },
+            ],
+          },
+        },
+        {
+          type: 5,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+          },
+        },
+        {
+          type: 6,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+            info: '789',
+          },
+        },
+        {
+          type: 7,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 8,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                leftTitle: '222',
+                leftInfo: '333',
+                infos: [
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                ]
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                leftTitle: '222',
+                leftInfo: '333',
+                infos: [
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                ]
+              },
+            ],
+          },
+        },
+        {
+          type: 9,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 10,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
+        // {
+        //   type: 11,
+        //   value: {
+        //     title: '123',
+        //     subTitle: '456',
+        //     list: [
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '111',
+        //         value: '222'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '222',
+        //         value: '333'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '333',
+        //         value: '444'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '444',
+        //         value: '555'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '555',
+        //         value: '666'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '666',
+        //         value: '777'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '666',
+        //         value: '777'
+        //       },
+        //     ],
+        //   },
+        // },
+      ]
+    }
+  },
+  watch: {
+    '$route'() {
+      getHwWeb(this.$route.query.id).then(res => {
+        this.components = JSON.parse(res?.data?.webJsonString || '[]')
+      })
+    }
+  },
+  mounted() {
+    console.log(this.$route.query?.id)
+    getHwWeb(this.$route.query.id).then(res => {
+      console.log(res)
+      this.components = JSON.parse(res?.data?.webJsonString || '[]')
+    })
+  },
+  methods: {
+    handleChange(val) {
+      console.log(val)
+    },
+    edit(key, e) {
+      this[key] = e.target.innerText
+    },
+    add() {
+      this.addEl = true
+    },
+    save() {
+      console.log(this.components)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+
+.container {
+  width: 90%;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.component {
+  text-align: center;
+  position: relative;
+}
+
+
+.contactUs {
+  width: 100%;
+  background-color: #2e445c;
+}
+
+.copyright {
+  width: 100%;
+  background-color: #1d3348;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/pageEditor/index.vue b/src/views/pageEditor/index.vue
index ee0f2c2..3a62c44 100644
--- a/src/views/pageEditor/index.vue
+++ b/src/views/pageEditor/index.vue
@@ -5,16 +5,18 @@
         页面编辑器
       </div>
       <el-cascader
+          @change="pageChange"
           size="small"
           v-model="value"
-          :options="options"
-          @change="handleChange"></el-cascader>
+          :props="{ checkStrictly: true,value:'webMenuId',label:'webMenuName' }"
+          :options="options"></el-cascader>
       <el-button type="primary" size="small" style="margin-left: 12px;" @click="save">上传<i class="el-icon-upload"></i>
       </el-button>
     </div>
     <div class="container">
       <div class="component" v-for="(i,k) in components">
         <i class="del el-icon-circle-close" @click="components.splice(k, 1);"></i>
+        <Carousel v-if="i.type === 'carousel'" :data="i.value"/>
         <EditEl1 v-if="i.type === 1" :data="i.value"/>
         <EditEl2 v-if="i.type === 2" :data="i.value"/>
         <EditEl3 v-if="i.type === 3" :data="i.value"/>
@@ -37,7 +39,62 @@
         title="添加组件"
         :visible.sync="addEl"
         width="80%">
-      <span>这是一段信息</span>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem('carousel')">
+          轮播图
+        </div>
+      </el-card>
+
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(1)">
+          图标 +文字+内容横铺4个
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(2)">
+          左标题+内容，右图片
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(3)">
+          左图标，右标题+内容，一行2个
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(4)">
+          左大图右标题+内容，一行2个
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(5)">
+          上标题+下图片
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(6)">
+          上标题+内容，下图片
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(7)">
+          图标标题内容，一行3个
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(8)">
+          左图右列表
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(9)">
+          上图下内容，一行4个
+        </div>
+      </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(10)">
+          一行3张图
+        </div>
+      </el-card>
       <span slot="footer" class="dialog-footer">
     <el-button @click="addEl = false">关 闭</el-button>
   </span>
@@ -46,6 +103,7 @@
   </div>
 </template>
 <script>
+import Carousel from "@/components/editEl/carousel.vue";
 import EditEl1 from "@/components/editEl/editEl1.vue";
 import EditEl2 from "@/components/editEl/editEl2.vue";
 import EditEl3 from "@/components/editEl/editEl3.vue";
@@ -56,10 +114,14 @@ import EditEl7 from "@/components/editEl/editEl7.vue";
 import EditEl8 from "@/components/editEl/editEl8.vue";
 import EditEl9 from "@/components/editEl/editEl9.vue";
 import EditEl10 from "@/components/editEl/editEl10.vue";
+import {selectConfigTypeList} from "@/api/menu";
+import {listHwWebMenu, selectMenuTree} from "@/api/hwWebMenu";
+import {getHwWeb, updateHwWeb} from "@/api/hwWeb";
 // import EditEl11 from "@/components/editEl/editEl11.vue";
 
 export default {
   components: {
+    Carousel,
     EditEl1,
     EditEl2,
     EditEl3,
@@ -97,7 +159,238 @@ export default {
           ]
         },
       ],
+      componentsM: [
+        {
+          type: 'carousel',
+          value: {
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              }
+            ],
+          },
+        },
+        {
+          type: 1,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+            ],
+          },
+        },
+        {
+          type: 2,
+          value: {
+            title: '123',
+            subTitle: '456',
+            contentTitle: 'contentTitle',
+            contentSubTitle: 'DEVELOPMENT PLATFORM',
+            contentInfo: 'contentInfo',
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          },
+        },
+        {
+          type: 3,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '111',
+                itemInfo: '222'
+              },
+            ],
+          },
+        },
+        {
+          type: 4,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                title: '111',
+                value: '222'
+              }
+            ],
+          },
+        },
+        {
+          type: 5,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+          },
+        },
+        {
+          type: 6,
+          value: {
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+            info: '789',
+          },
+        },
+        {
+          type: 7,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+            ],
+          },
+        },
+        {
+          type: 8,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                leftTitle: '222',
+                leftInfo: '333',
+                infos: [
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                  {title: '111', info: '222'},
+                ]
+              },
+            ],
+          },
+        },
+        {
+          type: 9,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                value: '222'
+              },
+            ],
+          },
+        },
+        {
+          type: 10,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              }
+            ],
+          },
+        },
+        // {
+        //   type: 11,
+        //   value: {
+        //     title: '123',
+        //     subTitle: '456',
+        //     list: [
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '111',
+        //         value: '222'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '222',
+        //         value: '333'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '333',
+        //         value: '444'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '444',
+        //         value: '555'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '555',
+        //         value: '666'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '666',
+        //         value: '777'
+        //       },
+        //       {
+        //         icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        //         title: '666',
+        //         value: '777'
+        //       },
+        //     ],
+        //   },
+        // },
+      ],
       components: [
+        {
+          type: 'carousel',
+          value: {
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
         {
           type: 1,
           value: {
@@ -150,7 +443,7 @@ export default {
             contentTitle: 'contentTitle',
             contentSubTitle: 'DEVELOPMENT PLATFORM',
             contentInfo: 'contentInfo',
-            image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
           },
         },
         {
@@ -217,7 +510,7 @@ export default {
         {
           type: 5,
           value: {
-            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
             title: '123',
             subTitle: '456',
           },
@@ -225,7 +518,7 @@ export default {
         {
           type: 6,
           value: {
-            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
             title: '123',
             subTitle: '456',
             info: '789',
@@ -435,12 +728,11 @@ export default {
     }
   },
   mounted() {
-
+    selectMenuTree().then(e => {
+      this.options = e.data
+    })
   },
   methods: {
-    handleChange(val) {
-      console.log(val)
-    },
     edit(key, e) {
       this[key] = e.target.innerText
     },
@@ -449,6 +741,27 @@ export default {
     },
     save() {
       console.log(this.components)
+      if (!this.value.at(-1)) {
+        return
+      }
+      updateHwWeb({
+        webCode: this.value.at(-1),
+        // webJson: JSON.stringify(this.components),
+        webJsonString: JSON.stringify(this.components),
+      })
+    },
+    pageChange(e) {
+      getHwWeb(e.at(-1)).then(v => {
+        console.log(v)
+      })
+    },
+    addItem(e) {
+      this.components.push({
+        type: e,
+        value: this.componentsM.find(v => v.type === e)?.value,
+      })
+      console.log(this.components)
+      this.addEl = false
     }
   }
 }
@@ -488,6 +801,7 @@ export default {
     right: 10px;
     top: 10px;
     cursor: pointer;
+    z-index: 99999;
   }
 }