diff --git a/src/components/editEl/editEl1.vue b/src/components/editEl/editEl1.vue
index 0ace2d3..81c2ad5 100644
--- a/src/components/editEl/editEl1.vue
+++ b/src/components/editEl/editEl1.vue
@@ -13,7 +13,7 @@
     <div class="list">
       <template v-for="(i,k) in data.list">
         <div class="item">
-          <div class="del" @click="data.list.splice(k, 1);"></div>
+          <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
           <div class="icon">
             <UploadEl :data="i"/>
           </div>
@@ -23,7 +23,7 @@
         <br v-if="(k+1)%4===0"/>
       </template>
       <div class="item">
-        <div style="width:100%;height:100%;" @click="data.list.push({title:'输入。。。',value:'输入。。。'})">
+        <div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入'})">
           <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
         </div>
       </div>
@@ -46,7 +46,6 @@ export default {
   },
   methods: {
     edit(key, e) {
-      console.log(this.$props)
       this.$props.data[key] = e.target.innerText
     },
     edit1(key, index, e) {
@@ -91,6 +90,14 @@ export default {
     transition: all 0.2s;
     vertical-align: top;
     margin: 0 0.75vw 1vw;
+    position: relative;
+
+    .del {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      cursor: pointer;
+    }
 
     &:hover {
       background-color: @standard-color;
diff --git a/src/components/editEl/editEl10.vue b/src/components/editEl/editEl10.vue
new file mode 100644
index 0000000..5ab15ae
--- /dev/null
+++ b/src/components/editEl/editEl10.vue
@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <template v-for="(i,k) in data.list">
+        <div class="item">
+          <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
+          <UploadEl :data="i"/>
+        </div>
+        <br class="br" v-if="(k+1)%3===0"/>
+      </template>
+      <div class="item">
+        <div style="width:100%;height:100%;"
+             @click="data.list.push({title:'请输入',value:'请输入'})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl10',
+  props: ['data'],
+  components: {UploadEl},
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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;
+
+    .del {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      cursor: pointer;
+    }
+
+  }
+}
+</style>
diff --git a/src/components/editEl/editEl11.vue b/src/components/editEl/editEl11.vue
new file mode 100644
index 0000000..485ac6c
--- /dev/null
+++ b/src/components/editEl/editEl11.vue
@@ -0,0 +1,2 @@
+<template></template>
+<script></script>
diff --git a/src/components/editEl/editEl3.vue b/src/components/editEl/editEl3.vue
index 049d982..822d07c 100644
--- a/src/components/editEl/editEl3.vue
+++ b/src/components/editEl/editEl3.vue
@@ -12,6 +12,7 @@
     </div>
     <div class="list">
       <div class="item" v-for="(i,k) in data.list">
+        <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
         <div class="icon">
           <UploadEl :data="i"/>
         </div>
@@ -19,7 +20,7 @@
         <div class="itemInfo" contenteditable="true" @blur="edit1('itemInfo', k,$event)">{{ i.itemInfo }}</div>
       </div>
       <div class="item" style="vertical-align: top">
-        <div style="width:100%;height:100%;" @click="data.list.push({itemTitle:'输入。。。',itemInfo:'输入。。。'})">
+        <div style="width:100%;height:100%;" @click="data.list.push({itemTitle:'请输入',itemInfo:'请输入'})">
           <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 10vw"></i>
         </div>
       </div>
@@ -42,7 +43,6 @@ export default {
   },
   methods: {
     edit(key, e) {
-      console.log(this.$props)
       this.$props.data[key] = e.target.innerText
     },
     edit1(key, index, e) {
@@ -87,6 +87,12 @@ export default {
     box-shadow: 0 0 3px #0002;
     margin: 0 1.5% 1.1vw 1.5%;
 
+    .del {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      cursor: pointer;
+    }
     .icon {
       width: 4vw;
       height: 4vw;
diff --git a/src/components/editEl/editEl4.vue b/src/components/editEl/editEl4.vue
index e75bbd2..491b2c6 100644
--- a/src/components/editEl/editEl4.vue
+++ b/src/components/editEl/editEl4.vue
@@ -7,6 +7,7 @@
       <div class="right">
         <div class="list">
           <div class="item" v-for="(i,k) in data.list.slice(0,4)">
+            <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
             <div class="itemTitle" contenteditable="true" @blur="edit1('title', k,$event)">{{ i.title }}</div>
             <div class="itemInfo" contenteditable="true" @blur="edit1('value', k,$event)">
               {{ i.value }}
@@ -14,7 +15,7 @@
           </div>
           <div class="item" v-if="data.list.length <4">
             <div style="width:100%;height:100%;text-align: center"
-                 @click="data.list.push({title:'输入。。。',value:'输入。。。'})">
+                 @click="data.list.push({title:'请输入',value:'请输入'})">
               <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 14.8vw"></i>
             </div>
           </div>
@@ -104,7 +105,14 @@ export default {
         box-shadow: 0 0 3px #0002;
         background-color: #f2f3f5;
         vertical-align: top;
+        position: relative;
 
+        .del {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          cursor: pointer;
+        }
         &:nth-child(1) {
           margin: 0 4% 3% 0;
         }
diff --git a/src/components/editEl/editEl5.vue b/src/components/editEl/editEl5.vue
new file mode 100644
index 0000000..76a2f9b
--- /dev/null
+++ b/src/components/editEl/editEl5.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="image">
+      <UploadEl :data="{icon:data.img}"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl5',
+  props: ['data'],
+  components: {UploadEl},
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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/editEl/editEl6.vue b/src/components/editEl/editEl6.vue
new file mode 100644
index 0000000..b516a8a
--- /dev/null
+++ b/src/components/editEl/editEl6.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="pageInfo" contenteditable="true" @blur="edit('info', $event)">{{ data.info }}</div>
+    <div class="image">
+      <UploadEl :data="{icon:data.img}"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+let map = null
+export default {
+  name: 'PlatformArchitecture',
+  components: {
+    UploadEl,
+  },
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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/editEl/editEl7.vue b/src/components/editEl/editEl7.vue
new file mode 100644
index 0000000..221dfb5
--- /dev/null
+++ b/src/components/editEl/editEl7.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(i,k) in data.list">
+        <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
+        <div class="icon">
+          <UploadEl :data="i"/>
+        </div>
+        <div class="itemTitle" contenteditable="true" @blur="edit1('title', k,$event)">{{ i.title }}</div>
+        <div class="itemInfo" contenteditable="true" @blur="edit1('info', k,$event)">{{ i.value }}</div>
+      </div>
+      <div class="item">
+        <div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入'})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 13.3vw"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'PlatformFeatures',
+  props: ['data'],
+  components: {UploadEl},
+  computed: {},
+
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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;
+
+
+  .del {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+  }
+
+  .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/editEl/editEl8.vue b/src/components/editEl/editEl8.vue
new file mode 100644
index 0000000..ed2d30d
--- /dev/null
+++ b/src/components/editEl/editEl8.vue
@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="tabs">
+      <el-tabs v-model="activeName" :editable="true" @edit="tabEdit">
+        <el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
+          <template slot="label">
+            <span contenteditable="true" @blur="edit1('title', k,$event)">
+              {{ i.title }}
+            </span>
+          </template>
+          <transition name="fade">
+            <div v-if="activeName === `${k}`" style="position:relative;">
+              <div class="content">
+                <div class="left">
+                  <div class="itemTitle" contenteditable="true" @blur="edit1('leftTitle', k,$event)">
+                    {{ i.leftTitle }}
+                  </div>
+                  <div class="itemCode" contenteditable="true" @blur="edit1('leftInfo', k,$event)">
+                    {{ i.leftInfo }}
+                  </div>
+                  <div class="image">
+                    <UploadEl :data="i"/>
+                  </div>
+                </div>
+                <div class="right">
+                  <div class="infos" v-for="(ii,kk) in i.infos">
+                    <i class="del el-icon-circle-close" @click="data.list[k].infos.splice(k, 1);"></i>
+                    <div class="infoTitle" contenteditable="true" @blur="edit2('title', k,kk,$event)">
+                      {{ ii.title }}
+                    </div>
+                    <div class="infoNum" contenteditable="true" @blur="edit2('info', k,kk,$event)">
+                      {{ ii.info }}
+                    </div>
+                  </div>
+                  <div class="infos" style="text-align: center" v-if="i.infos.length < 7">
+                    <div style="width:100%;height:100%;"
+                         @click="data.list[k].infos.push({title:'请输入',info:'请输入'})">
+                      <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 2.9vw"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </transition>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl8',
+  props: ['data'],
+  components: {
+    UploadEl,
+  },
+  data() {
+    return {
+      activeName: '0'
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    tabEdit(e, action) {
+      if (action === 'remove') {
+        this.activeName = '0'
+        this.$props.data.list.splice(parseFloat(e), 1);
+      }
+      if (action === 'add') {
+        this.$props.data.list.push({title: '请输入', leftTitle: '请输入', leftInfo: '请输入', infos: []})
+      }
+    },
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+    edit2(key, index, index2, e) {
+      this.$props.data.list[index][index2][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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;
+
+        .del {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          cursor: pointer;
+        }
+      }
+
+      .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/editEl/editEl9.vue b/src/components/editEl/editEl9.vue
new file mode 100644
index 0000000..3e6f6e6
--- /dev/null
+++ b/src/components/editEl/editEl9.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for=" i in data.list">
+        <i class="del el-icon-circle-close" @click="data.list.splice(k, 1);"></i>
+        <div class="image">
+          <UploadEl :data="i"/>
+        </div>
+        <div class="info">
+          <span contenteditable="true" @blur="edit1('value', k,$event)">
+          {{ i.value }}
+          </span>
+        </div>
+      </div>
+      <div class="item">
+        <div style="width:100%;height:100%;" @click="data.list.push({value:'请输入'})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl9',
+  props: ['data'],
+  components: {
+    UploadEl,
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    edit(key, e) {
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #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;
+
+    .del {
+      position: absolute;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+    }
+
+    .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/views/pageEditor/index.vue b/src/views/pageEditor/index.vue
index 3951d91..ee0f2c2 100644
--- a/src/views/pageEditor/index.vue
+++ b/src/views/pageEditor/index.vue
@@ -9,15 +9,40 @@
           v-model="value"
           :options="options"
           @change="handleChange"></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 in components">
+      <div class="component" v-for="(i,k) in components">
+        <i class="del el-icon-circle-close" @click="components.splice(k, 1);"></i>
         <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 class="addItem">
+        <div style="width:100%;height:100%;" @click="add">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
+        </div>
       </div>
     </div>
+    <el-dialog
+        title="添加组件"
+        :visible.sync="addEl"
+        width="80%">
+      <span>这是一段信息</span>
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="addEl = false">关 闭</el-button>
+  </span>
+    </el-dialog>
+
   </div>
 </template>
 <script>
@@ -25,6 +50,13 @@ import EditEl1 from "@/components/editEl/editEl1.vue";
 import EditEl2 from "@/components/editEl/editEl2.vue";
 import EditEl3 from "@/components/editEl/editEl3.vue";
 import EditEl4 from "@/components/editEl/editEl4.vue";
+import EditEl5 from "@/components/editEl/editEl5.vue";
+import EditEl6 from "@/components/editEl/editEl6.vue";
+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 EditEl11 from "@/components/editEl/editEl11.vue";
 
 export default {
   components: {
@@ -32,10 +64,18 @@ export default {
     EditEl2,
     EditEl3,
     EditEl4,
+    EditEl5,
+    EditEl6,
+    EditEl7,
+    EditEl8,
+    EditEl9,
+    EditEl10,
+    // EditEl11,
   },
   data() {
     return {
       a: '1',
+      addEl: false,
       value: [],
       options: [
         {
@@ -174,6 +214,223 @@ export default {
             ],
           },
         },
+        {
+          type: 5,
+          value: {
+            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+            title: '123',
+            subTitle: '456',
+          },
+        },
+        {
+          type: 6,
+          value: {
+            img: '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'
+        //       },
+        //     ],
+        //   },
+        // },
       ]
     }
   },
@@ -186,6 +443,12 @@ export default {
     },
     edit(key, e) {
       this[key] = e.target.innerText
+    },
+    add() {
+      this.addEl = true
+    },
+    save() {
+      console.log(this.components)
     }
   }
 }
@@ -217,5 +480,19 @@ export default {
 
 .component {
   text-align: center;
+  position: relative;
+
+
+  .del {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+  }
+}
+
+.addItem {
+  width: 100%;
+  text-align: center;
 }
 </style>
\ No newline at end of file