提交

src/components/editor.vue

@@ -21,10 +21,7 @@ export default {
 };
 </script>
 
-<style>
-.selectSpan {
-  border-bottom: 3px solid #fff;
-}
+<style scoped>
 .text {
   height: calc(100vh - 186px);
   overflow-y: auto;

src/view/allMedia/H5Editor.vue

@@ -8,14 +8,16 @@
             class="pageMain"
             :style="{
               width: page.width + 'px',
-              'height': page.height ? page.height + 'px' : undefined,
+              height: page.height ? page.height + 'px' : undefined,
               ...backgroundStyle(),
             }"
           >
-            <template
+            <div
+              class="showList"
               v-for="(item, index) in hoversList[selectPage].components || []"
               :key="index"
             >
+              <el-icon class="icon" color="#999"><CircleClose /></el-icon>
               <h5-image v-if="item.type === 'image'" :item="item"></h5-image>
               <h5-paragraph
                 v-if="item.type === 'paragraph'"
@@ -26,17 +28,18 @@
                 v-if="item.type === 'fromComponent'"
                 :item="item"
               >
-                <!-- <div style="padding: 5px">
-                  <van-button block type="danger" native-type="submit" disabled>
-                    我要报名
-                  </van-button>
-                </div> -->
-                <template v-for="(v, i) in (item.child_list || [])" :key="i">
-                    <h5-van-field v-if="v.type === 'van-field'" :item="v"></h5-van-field>
-                    <h5-van-buttom v-if="v.type === 'van-buttom'" :item="v"></h5-van-buttom>
+                <template v-for="(v, i) in item.child_list || []" :key="i">
+                  <h5-van-field
+                    v-if="v.type === 'van-field'"
+                    :item="v"
+                  ></h5-van-field>
+                  <h5-van-buttom
+                    v-if="v.type === 'van-buttom'"
+                    :item="v"
+                  ></h5-van-buttom>
                 </template>
               </h5-from-component>
-            </template>
+            </div>
           </div>
         </div>
       </div>
@@ -74,6 +77,8 @@ const selectPageFunc = (index = 0) => {
   selectPage.value = index;
 };
 
+console.log(hoversList.value);
+
 // 查看页面大小，
 const img = new Image();
 img.src = hoversList.value[selectPage.value].background_url || '';
@@ -169,4 +174,23 @@ const saveParagraph = (paragraph, index) => {
   padding: 8px 0;
   font-size: 16px;
 }
+
+
+.showList{
+    box-sizing: border-box;
+    border: 1px solid rgba(0,0,0,0);
+    position: relative;
+}
+.showList .icon{
+    display: none;
+    position: absolute;
+    left: -10em;
+    top: 0;
+}
+.showList:hover .icon {
+    display: block;
+}
+.showList:hover{
+    border-color: red;
+}
 </style>

src/view/allMedia/components/H5Editor/img.vue

@@ -10,7 +10,7 @@
           placeholder="请输入远程图片"
         >
           <template #button>
-            <van-button size="small" type="primary" @click="saveImg">保存并更新</van-button>
+            <van-button size="small" type="primary" @click="saveImg">更新</van-button>
           </template>
         </van-field>
       </van-cell-group>