tem

public/template.html

@@ -8,6 +8,10 @@
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <title>测试模板</title>
   <style>
+    html,body {
+      margin: 0;
+      padding: 0;
+    }
     @keyframes border {
       0% {
         opacity: 1;
@@ -43,6 +47,11 @@
     }
     .container {
       padding: 0 20px;
+      background: linear-gradient(to right,#32295E, #5277AB);
+      height: 450px;
+      width: 800px;
+      color: white;
+      box-sizing: border-box;
     }
     .title {
       height: 50px;
@@ -54,10 +63,55 @@
       padding: 0 20px;
       border-bottom: #eeeeee 2px solid;
       padding-bottom: 20px;
+      color: white;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+      padding-top: 50px;
     }
     .bottom img {
       height: 200px;
+      width: 250px;
+    }
+    .bottom-left {
+
+    }
+    .bottom-right {
+
+    }
+    .bottom-right .bottom-right-item {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: 10px;
+    }
+    .bottom-right .item-name {
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 5px;
+      width: 100px;
+    }
+    .bottom-right .item-des {
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 5px;
+      width: 200px;
+      /* overflow: hidden; */
+    }
+    .h2-right {
+      display: flex;
+      align-items: center;  
     }
+    .right-icon {
+      margin-left: 10px;
+      height: 32px;
+    }
+    
   </style>
 </head>
 
@@ -66,28 +120,64 @@
     <div class="title ">
        <span class="">{{date}}</span>
     </div>
-    <h2 class="name" > <span class="isEdit" :class="isEditMode &&  currentIndex === 0 ? 'isEdited': ''"   @click="edit(list[0], 0)">{{list[0].value}}</span></h2>
+    <h2 class="name"  class="h2"> 
+      <span class="isEdit" :class="isEdited(0)"   @click="edit(0)">{{getValue(0)}}</span>
+      <div class="h2-right">
+          <span class="isEdit" :class="isEdited(1)"   @click="edit(1)">{{getValue(1)}}</span>
+          <img :src="img" class="isEdit right-icon" ></img>
+
+      </div>
+      <!-- <img src="" alt=""> -->
+    </h2>
     <div class="bottom">
-        <img class="isEdit" @click="edit(list[1], 1)" :class="isEditMode &&  currentIndex === 1 ? 'isEdited': ''" :src="list[1].value" alt="">
+        <img class="isEdit bottom-left" @click="edit(2)" :class="isEdited(2)" :src="getValue(2)" alt="">
+        <div class="bottom-right">
+            <div class="bottom-right-item"> 
+                <span class="isEdit item-name" :class="isEdited(3)"   @click="edit(3)">{{getValue(3)}}</span>
+                <span class="isEdit item-des" :class="isEdited(4)"   @click="edit(4)">{{getValue(4)}}</span>
+            </div>
+            <div class="bottom-right-item"> 
+                <span class="isEdit item-name" :class="isEdited(5)"   @click="edit(5)">{{getValue(5)}}</span>
+                <span class="isEdit item-des" :class="isEdited(6)"   @click="edit(6)">{{getValue(6)}}</span>
+            </div>
+            <div class="bottom-right-item"> 
+                <span class="isEdit item-name" :class="isEdited(7)"   @click="edit(7)">{{getValue(7)}}</span>
+                <span class="isEdit item-des" :class="isEdited(8)"   @click="edit(8)">{{getValue(8)}}</span>
+            </div>
+            <div class="bottom-right-item"> 
+                <span class="isEdit item-name" :class="isEdited(9)"   @click="edit(9)">{{getValue(9)}}</span>
+                <span class="isEdit item-des" :class="isEdited(10)"   @click="edit(10)">{{getValue(10)}}</span>
+            </div>
+        </div>
     </div>
   </div>
 </body>
 <script>
   var myApp = new Vue({
     el: "#myApp",
+    computed() {
+      
+    },
     methods: {
       getDefaulted() {
         this.list = this.list.map(function(item){
           return item = Object.assign(item, item.default)
         })
       },
-      edit(item,index) {
+      edit(index) {
         this.currentIndex = index;
+        var item = this.list[index]
         console.log(this.currentIndex)
         window.parent.postMessage({
           type: 'edit',
           item,index
         }, '*')
+      },
+      getValue(index) {
+        return this.list[index]? this.list[index]['value'] : ''
+      },
+      isEdited(index) {
+        return this.isEditMode &&  this.currentIndex === index ? 'isEdited': ''
       }
     },
     created() {
@@ -95,23 +185,107 @@
     },
     data: {
       date: new Date().toLocaleString(),
+      img: 'data:image/png;base64,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',
       list: [
         {
           type: 'text',
           name: '楼层',
           value: '',
+          description: '',
           default: {
             value: '3F'
           }
         },
         {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: 'SOHO 3Q'
+          }
+        },
+        {
           type: 'image',
           name: '图片',
+          description: '',
           value: '',
           default: {
             value: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560341197372&di=742752578d361795717808c0f2861855&imgtype=0&src=http%3A%2F%2Fk.zol-img.com.cn%2Fsjbbs%2F7692%2Fa7691515_s.jpg'
           }
-        }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '0201'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '北京迈动互联科技有限公司'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '0202'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '北京数字理想科技有限公司'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '0203'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '北京妹纸互动科技有限公司'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '0204'
+          }
+        },
+        {
+          type: 'text',
+          name: '楼层',
+          value: '',
+          description: '',
+          default: {
+            value: '北京妹纸互动科技有限公司'
+          }
+        },
       ],
       currentIndex: '',
       isEditMode: true