修改自定义页面

src/components/editEl/editEl11.vue

@@ -1,2 +1,149 @@
-<template></template>
+<template>
-<script></script>
+  <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('value', k,$event)">{{ i.value }}</div>
+      </div>
+      <div class="item">
+        <div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入', icon: ''})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 18vw"></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: 18vw;
+    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: 10vw;
+      height: 10vw;
+      position: absolute;
+      top: 5vw;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .itemTitle {
+      top: 11vw;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      font-size: 1.1vw;
+      letter-spacing: 1px;
+      transition: all 0.2s;
+    }
+
+    .itemInfo {
+      top: 12vw;
+      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>

src/components/editEl/editEl7.vue

@@ -17,7 +17,7 @@
           <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 class="itemInfo" contenteditable="true" @blur="edit1('value', k,$event)">{{ i.value }}</div>
       </div>
       <div class="item">
         <div style="width:100%;height:100%;" @click="data.list.push({title:'请输入',value:'请输入', icon: ''})">

src/components/el/el11.vue

@@ -1,2 +1,131 @@
-<template></template>
+<template>
-<script></script>
+  <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: 18vw;
+    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: 10vw;
+      height: 10vw;
+      position: absolute;
+      top: 5vw;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .itemTitle {
+      top: 11vw;
+      left: 50%;
+      position: absolute;
+      transform: translate(-50%, -50%);
+      font-size: 1.1vw;
+      letter-spacing: 1px;
+      transition: all 0.2s;
+    }
+
+    .itemInfo {
+      top: 12vw;
+      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>

src/components/menu/index.vue

@@ -27,7 +27,7 @@
         <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>
+          <div class="subMenuListTitleSpan">{{ ii.webMenuName }}</div>
           <i class="el-icon-arrow-down subMenuListTitleIcon1"></i>
         </div>
         <div class="subMenuListItem" v-for="(iii,kkk) in ii.children"
@@ -76,9 +76,10 @@ export default {
       })
     },
     getChildren(e) {
+      console.log(e)
       if (e.children) {
         this.subMenuList = e.children
-        this.subMenuType = e.type || 1
+        this.subMenuType = e.webMenuType || 1
         this.subMenuPath = e.path
       } else {
         this.subMenuList = []

src/views/page/index.vue

@@ -1,7 +1,15 @@
 <template>
   <div>
     <div class="container">
-      <div class="component" v-for="(i,k) in components">
+      <div v-if="$route.query.id === '1'">
+        <Carousel1 class="carousel"/>
+        <ProductCenter class="productCenter"/>
+        <ClassicCase class="classicCase"/>
+        <!--    <NewsCenter class="newsCenter"/>-->
+        <ContactUs class="contactUs"/>
+        <Copyright class="copyright"/>
+      </div>
+      <div v-if="$route.query.id !== '1'" 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"/>
@@ -13,8 +21,9 @@
         <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"/>-->
+                <EditEl11 v-if="i.type === 11" :data="i.value"/>
       </div>
+
     </div>
 
     <ContactUs class="contactUs"/>
@@ -32,14 +41,20 @@ 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 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";
+import ProductCenter from "@/views/index/productCenter.vue";
+import ClassicCase from "@/views/index/classicCase.vue";
+import Carousel1 from "@/views/index/carousel.vue";
 
 export default {
   components: {
+    ClassicCase,
+    ProductCenter,
+    Carousel1,
     Carousel,
     ContactUs,
     Copyright,
@@ -53,7 +68,7 @@ export default {
     EditEl8,
     EditEl9,
     EditEl10,
-    // EditEl11,
+    EditEl11,
   },
   data() {
     return {
@@ -492,4 +507,26 @@ export default {
   width: 100%;
   background-color: #1d3348;
 }
+
+.carousel {
+  width: 100%;
+  height: 650px;
+}
+
+.productCenter {
+  width: 100%;
+  text-align: center;
+}
+
+.classicCase {
+  width: 100%;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url("~@/assets/image/bg.jpg");
+  background-size: 100% 36.41vw;
+  background-repeat: no-repeat;
+}
+
+.newsCenter {
+  width: 100%;
+}
+
 </style>

src/views/pageEditor/index.vue

@@ -10,12 +10,15 @@
           v-model="value"
           :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 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>
+        <i class="up el-icon-top" @click="moveUp(k);"></i>
+        <i class="down el-icon-bottom" @click="moveDown(k);"></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"/>
@@ -27,7 +30,7 @@
         <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"/>-->
+        <EditEl11 v-if="i.type === 11" :data="i.value"/>
       </div>
       <div class="addItem">
         <div style="width:100%;height:100%;" @click="add">
@@ -95,6 +98,11 @@
           一行3张图
         </div>
       </el-card>
+      <el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
+        <div style="width: 100%;height: 100%" @click="addItem(11)">
+          图标标题内容，一行3个(大图)
+        </div>
+      </el-card>
       <span slot="footer" class="dialog-footer">
     <el-button @click="addEl = false">关 闭</el-button>
   </span>
@@ -117,7 +125,7 @@ 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";
+import EditEl11 from "@/components/editEl/editEl11.vue";
 
 export default {
   components: {
@@ -132,7 +140,7 @@ export default {
     EditEl8,
     EditEl9,
     EditEl10,
-    // EditEl11,
+    EditEl11,
   },
   data() {
     return {
@@ -303,6 +311,20 @@ export default {
             ],
           },
         },
+        {
+          type: 11,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+            ],
+          },
+        },
         // {
         //   type: 11,
         //   value: {
@@ -762,6 +784,20 @@ export default {
         value: this.componentsM.find(v => v.type === e)?.value,
       })))
       this.addEl = false
+    },
+    moveUp(k) {
+      if (k > 0) {
+        const item = this.components[k]
+        this.components.splice(k, 1)       // 删除当前位置
+        this.components.splice(k - 1, 0, item) // 插入到上一个位置
+      }
+    },
+    moveDown(k) {
+      if (k < this.components.length - 1) {
+        const item = this.components[k]
+        this.components.splice(k, 1)       // 删除当前位置
+        this.components.splice(k + 1, 0, item) // 插入到下一个位置
+      }
     }
   }
 }
@@ -796,6 +832,24 @@ export default {
   position: relative;
 
 
+  .up {
+    position: absolute;
+    right: 50px;
+    top: 10px;
+    cursor: pointer;
+    z-index: 99999;
+  }
+
+
+  .down {
+    position: absolute;
+    right: 30px;
+    top: 10px;
+    cursor: pointer;
+    z-index: 99999;
+  }
+
+
   .del {
     position: absolute;
     right: 10px;