修改

src/components/WebSet/WebSiteEdit.vue

@@ -71,6 +71,87 @@
     cursor: pointer;
   }
 
+  .WebSiteEdit .temp-list-item {
+    position: relative;
+  }
+
+  .WebSiteEdit .temp-font {
+    position: absolute;
+    width: 210px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: 20px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+.WebSite_item {
+    display: flex;
+    border-bottom: 1px solid #f6f6f6;
+    background-color: #fff;
+  }
+
+  .diy-component-preview .WebSite_item .temp-img {
+    flex-basis: calc(60% - 60px);
+  }
+
+  .temp-img img {
+    display: block;
+    width: 100%;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  .WebSite_item .temp-info {
+    padding: 15px 20px 0;
+    flex-basis: 40%;
+    background-color: #fff;
+  }
+
+  .WebSite_item .temp-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .temp-subtitle {
+    margin: 0;
+    width: 280px;
+    padding-top: 2px;
+    font-size: 15px;
+    font-weight: 700;
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .diy-component-edit {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 465px;
+    right: 0;
+    background: #fff;
+    padding: 20px;
+    overflow: auto;
+    min-width: 650px;
+    padding-right: 20%;
+  }
+
+  .group-tool {
+    margin-top: 20px;
+  }
+
+  .Movie_sj {
+    color: #333;
+    font-size: 14px;
+    margin-left: 20px;
+  }
+
 </style>
 <template>
   <div class="WebSiteEdit">
@@ -83,25 +164,54 @@
           </el-option>
         </el-select>
         <div class="temp-list-wrap">
-          <div v-for="(subItem,subIndex) in detailsList" :key="subIndex" @click="AddData(subItem)">
+          <div v-for="(subItem,subIndex) in detailsList" class="temp-list-item" :key="subIndex"
+            @click="AddData(subItem)">
             <img :src="subItem.TemplateData.CoverImg" :alt="subItem.SubTemplateName" />
+            <div class="temp-font">{{subItem.SubTemplateName}}</div>
           </div>
         </div>
       </div>
       <div class="WebSite_right">
         <div class="WebSite_right_preview">
           <div v-for="(item,index) in dataList" :key="index">
-            <plugvideo v-if="item.Id=='white_label_video'" :plugData="item.plugData" :currentIndex="index"></plugvideo>
-            <plugpicture v-if="item.Id=='white_label_slider'" :plugData="item.plugData"></plugpicture>
+            <div class="diy-component-preview">
+              <div class="WebSite_item">
+                <div class="temp-img">
+                  <img :src="item.plugData.CoverImg" alt="" />
+                </div>
+                <div class="temp-info">
+                  <h2 class="temp-title">{{item.plugData.Title}}</h2>
+                  <h3 class="temp-subtitle">
+                    <template v-if="item.Id=='white_label_video'">
+                        {{item.plugData.Describe}}
+                    </template>
+                  </h3>
+                  <div class="group-tool">
+                    <el-button type="primary" size="small" @click="isShowDialog=true">編輯</el-button>
+                    <el-button type="danger" size="small">刪除</el-button>
+                    <span class="Movie_sj">上架</span>
+                    <el-switch v-model="item.plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
+                      inactive-color="#dcdfe6"></el-switch>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+    </div>
+    <el-dialog title="版面區塊設定" :visible.sync="isShowDialog" width="900px">
+      <plugvideodialog :plugData="dialogData" ref="plugvideodialog"></plugvideodialog>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isShowDialog = false" size="small">取 消</el-button>
+        <el-button type="danger" size="small" @click="setVideoInfo()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script>
-  import plugvideo from "../WebSet/plug-in/video.vue"
-  import plugpicture from "../WebSet/plug-in/picture.vue"
+  import plugvideodialog from "../WebSet/plug-in/video_dialog.vue"
+
   export default {
     data() {
       return {
@@ -113,12 +223,13 @@
         dataList: [],
         //模板详情列表
         detailsList: [],
+        isShowDialog:false,
+        dialogData:{}
       };
     },
     created() {},
     components: {
-      plugvideo,
-      plugpicture
+      plugvideodialog
     },
     methods: {
       //获取数据
@@ -129,8 +240,10 @@
       AddData(item) {
         var obj = {
           Id: item.TemplateKey,
-          plugData: item.TemplateData
+          plugData: item.TemplateData,
+          isShelves:1
         };
+        console.log(item);
         this.dataList.push(obj);
       },
       //获取下拉框

src/components/WebSet/plug-in/video.vue

-<style>
-  .WebSite_item {
-    display: flex;
-    border-bottom: 1px solid #f6f6f6;
-    background-color: #fff;
-  }
-
-  .diy-component-preview .WebSite_item .temp-img {
-    flex-basis: calc(60% - 60px);
-  }
-
-  .temp-img img {
-    display: block;
-    width: 100%;
-    user-select: none;
-    pointer-events: none;
-  }
-
-  .WebSite_item .temp-info {
-    padding: 15px 20px 0;
-    flex-basis: 40%;
-    background-color: #fff;
-  }
-
-  .WebSite_item .temp-title {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 500;
-  }
-
-  .temp-subtitle {
-    margin: 0;
-    width: 280px;
-    padding-top: 2px;
-    font-size: 15px;
-    font-weight: 700;
-    color: #999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .diy-component-edit {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 465px;
-    right: 0;
-    background: #fff;
-    padding: 20px;
-    overflow: auto;
-    min-width: 650px;
-    padding-right: 20%;
-  }
-
-  .group-tool {
-    margin-top: 20px;
-  }
-
-  .Movie_sj {
-    color: #333;
-    font-size: 14px;
-    margin-left: 20px;
-  }
-
-</style>
-<template>
-  <div>
-    <div class="diy-component-preview">
-      <div class="WebSite_item">
-        <div class="temp-img">
-          <img :src="plugData.CoverImg" alt="" />
-        </div>
-        <div class="temp-info">
-          <h2 class="temp-title">{{plugData.Title}}</h2>
-          <h3 class="temp-subtitle">
-            {{plugData.Describe}}
-          </h3>
-          <div class="group-tool">
-            <el-button type="primary" size="small" @click="isShowDialog=true">編輯</el-button>
-            <el-button type="danger" size="small">刪除</el-button>
-            <span class="Movie_sj">上架</span>
-            <el-switch v-model="plugData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
-              inactive-color="#dcdfe6"></el-switch>
-          </div>
-        </div>
-      </div>
-    </div>
-    <el-dialog title="版面區塊設定" :visible.sync="isShowDialog" width="900px">
-      <plugvideodialog :plugData="dialogData" ref="plugvideodialog"></plugvideodialog>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="isShowDialog = false" size="small">取 消</el-button>
-        <el-button type="danger" size="small" @click="setVideoInfo()">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-<script>
-  import plugvideodialog from "../plug-in/video_dialog.vue"
-  export default {
-    props: ["plugData", "currentIndex"],
-    data() {
-      return {
-        isShowDialog: false,
-        dialogData: JSON.parse(JSON.stringify(this.plugData)),
-      };
-    },
-    created() {},
-    components: {
-      plugvideodialog
-    },
-    methods: {
-      setVideoInfo() {
-        this.$parent.getsubplugdata(this.currentIndex, this.dialogData);
-        this.isShowDialog = false;
-      },
-    },
-    mounted() {}
-  };
-
-</script>