修改编页面UI

src/views/tempaltes/editMenu.vue

@@ -25,7 +25,7 @@
             alt
           />
           <div class="checkbox" v-if="item.enableDisplay">
-            <label >
+            <label>
               <input
                 type="checkbox"
                 style="display: inline;"
@@ -34,44 +34,42 @@
               />是否隐藏
             </label>
           </div>
-          <input
-            v-if="item.type ===  'text'"
-            class="edit-input"
-            type="text"
-            v-model="schemaData[item.dataKey].value"
-            @keyup="valueChange2()"
-          />
-          <br />
+          <div>
+            <input
+              v-if="item.type ===  'text'"
+              class="edit-input"
+              type="text"
+              v-model="schemaData[item.dataKey].value"
+              @keyup="valueChange2()"
+            />
+          </div>
+
           <div class="list-container" v-if="item.type === 'list'">
             <div
+              class="create-btn-container"
+              v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
+            >
+              <van-button class="create-btn" type="info" @click="addItem(item)">新增</van-button>
+            </div>
+            <div
               class="list-item"
               v-for="(item2, index2) in schemaData[item.dataKey]"
               :key="index2"
             >
               <div class="btn-con">
-                <span>序号{{index2}}</span>
-                <span class="del-btn" @click="deleteItem(index2, schemaData[item.dataKey])">删除</span>
+                <span class="index">序号{{index2}}</span>
               </div>
               <div class="list-item-list" v-for="(item3, index3) in item2" :key="index3">
                 <div v-if="(index3 != 'schemaIndex' && index3 != 'index')">
                   <input
                     v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'text'"
                     :placeholder="item.modelSchema[isSchemaIndex(item2)][index3].description"
-                    class="edit-input"
+                    class="edit-input edit-input-list-item"
                     type="text"
                     v-model="item2[index3]"
                     @keyup="valueChange2()"
                   />
                   <div>
-                    <img
-                      v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
-                      :src="getHostUrl(item2[index3])"
-                      class="edit-input"
-                    />
-                    <video
-                      :src="getHostUrl(item2[index3])"
-                      v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
-                    ></video>
                     <van-uploader
                       result-type="dataUrl"
                       v-if="item.modelSchema[isSchemaIndex(item2)][index3].type == 'image' || item.modelSchema[isSchemaIndex(item2)][index3].type == 'video'"
@@ -79,17 +77,27 @@
                       @click.native="uploadListItem(item.dataKey,index2, index3)"
                       :after-read="uploadAfter"
                     >
-                      <van-button icon="photo" type="info">上传</van-button>
+                      <!-- <van-button type="info">上传</van-button> -->
+                      <img
+                        v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'image'"
+                        :src="getHostUrl(item2[index3])"
+                        class="edit-input edit-input-image"
+                      />
+                      <video
+                        class="edit-input-video"
+                        :src="getHostUrl(item2[index3])"
+                        v-if="item.modelSchema[isSchemaIndex(item2)][index3].type === 'video'"
+                      ></video>
                     </van-uploader>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="create-btn-container"
-              v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
-            >
-              <van-button class="create-btn" type="info" @click="addItem(item)">添加</van-button>
+              <div class="list-item-delete">
+                <span @click="deleteItem(index2, schemaData[item.dataKey])">
+                  <img src="../../assets/img/delete-icon.png" class="list-item-delete-icon" alt />
+                  <span class="del-btn">删除</span>
+                </span>
+              </div>
             </div>
           </div>
           <van-uploader
@@ -99,14 +107,22 @@
             @click.native="uploadItem(item.dataKey)"
             :after-read="uploadAfter"
           >
-            <van-button icon="photo" type="info">上传</van-button>
+            <van-button type="info">上传</van-button>
             <br />
           </van-uploader>
-          <van-button type="info" v-if="item.selectList && item.type !== 'list'" @click="setSelectData(item, index)">选择默认数据</van-button>
+          <van-button
+            type="info"
+            v-if="item.selectList && item.type !== 'list'"
+            @click="setSelectData(item, index)"
+          >选择默认数据</van-button>
         </div>
       </van-collapse-item>
     </van-collapse>
-    <selectDataCom :selectList="selectData" @changeSelcetData="changeSelcetData" v-if="selectData.show"></selectDataCom>
+    <selectDataCom
+      :selectList="selectData"
+      @changeSelcetData="changeSelcetData"
+      v-if="selectData.show"
+    ></selectDataCom>
   </div>
 </template>
 
@@ -225,7 +241,7 @@ export default {
       this.$emit("setList", this.schemaData);
     },
     setSelectData(item, index) {
-      const myItem = JSON.parse(JSON.stringify(item))
+      const myItem = JSON.parse(JSON.stringify(item));
       this.selectData.show = true;
       this.selectData.item = myItem;
 
@@ -236,13 +252,13 @@ export default {
         "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
         "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
       ];
-      console.log(this.selectData)
+      console.log(this.selectData);
     },
     changeSelcetData(data) {
       console.log(data);
-      this.dataKey = data.item.dataKey
-      this.setSchemaData(data.val)
-      this.selectData.show = false
+      this.dataKey = data.item.dataKey;
+      this.setSchemaData(data.val);
+      this.selectData.show = false;
     }
   }
 };
@@ -251,21 +267,58 @@ export default {
 .image {
   height: 50px;
 }
+.van-uploader {
+  .van-button {
+    height: 0.8rem;
+    line-height: 0.8rem;
+  }
+}
 .list-container {
   .list-item {
+    // padding:
+    position: relative;
     .index {
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 1);
+      // line-height: 18px;
     }
     .btn-con {
       display: flex;
       justify-content: space-between;
     }
-    .del-btn {
-      font-size: 18px;
+
+    .edit-input-list-item {
+      margin: 10px 0;
+    }
+    .edit-input-image {
+      width: auto;
+      height: 100px;
+      max-height: 100px;
+      max-width: 100%;
+      // display: block;
     }
-    padding: 5px;
+    .list-item-delete {
+      text-align: right;
+      &-icon {
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+      .del-btn {
+        font-size: 14px;
+        color: rgba(250, 61, 34, 1);
+
+        vertical-align: middle;
+      }
+    }
+    padding: 10px;
     margin-right: 10px;
     border: 1px solid #dddddd;
     box-sizing: border-box;
+    border-radius: 8px;
     margin-bottom: 20px;
   }
 }
@@ -306,12 +359,32 @@ input {
     }
   }
 }
+.create-btn-container {
+  margin-bottom: 25px;
+  .create-btn {
+    padding-left: 17px;
+    padding-right: 17px;
+    // width: 197px;
+    line-height: 34px;
+    box-sizing: border-box;
+    border: none;
+    font-size: 16px;
+    height: 34px;
+    background: linear-gradient(
+      266deg,
+      rgba(255, 171, 32, 1) 0%,
+      rgba(255, 114, 14, 1) 100%
+    );
+    box-shadow: 0px 2px 8px 0px rgba(255, 167, 31, 0.31);
+    border-radius: 22px;
+  }
+}
 .edit-input {
   width: 97%;
   background: #f5f5f5;
   border-radius: 6px;
   font-size: 14px;
-  color:rgba(51,51,51,1);
+  color: rgba(51, 51, 51, 1);
   margin-top: 0;
 }
 </style>

src/views/tempaltes/editMore.vue

@@ -888,14 +888,14 @@ export default {
         }
       }
       .iframe {
-        width: 343px !important;
+        width: 343px;
         margin: 0 auto;
         height: 193px;
         display: block;
         box-shadow: 0px 14px 27px 0px rgba(0, 0, 0, 0.16);
       }
       .viframe {
-        width: 193 !important;
+        width: 193px !important;
         margin: 0 auto;
         height: 343px;
       }