页面修改

src/components/WebSet/WebSiteEdit.vue

@@ -91,7 +91,8 @@
       <div class="WebSite_right">
         <div class="WebSite_right_preview">
           <div v-for="(item,index) in dataList" :key="index">
-            <movie1 v-if="item.Id=='white_label_video'" :plugData="item.plugData"></movie1>
+            <video v-if="item.Id=='white_label_video'" :plugData="item.plugData"></video>
+            <picture v-if="item.Id=='white_label_slider'" :plugData="item.plugData"></picture>
           </div>
         </div>
       </div>
@@ -99,7 +100,8 @@
   </div>
 </template>
 <script>
-  import movie1 from "../WebSet/plug-in/movie1.vue"
+  import video from "../WebSet/plug-in/video.vue"
+  import picture from "../WebSet/plug-in/picture.vue"
   export default {
     data() {
       return {
@@ -115,7 +117,8 @@
     },
     created() {},
     components: {
-      movie1
+      video,
+      picture
     },
     methods: {
       //添加数据到组件列表

src/components/WebSet/plug-in/movie1.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">編輯</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>
-
-  </div>
-</template>
-<script>
-  export default {
-    props: ["plugData"],
-    data() {
-      return {
-
-      };
-    },
-    created() {},
-    methods: {
-      //向父组件传值 并调用排序
-      resetSord(IsUp) {
-        this.$emit('getSord', this.index, IsUp);
-      },
-      //点击触发父组件删除
-      delPlugin() {
-        this.$emit('comDelPlugin', this.index);
-      },
-    },
-    mounted() {}
-  };
-</script>
\ No newline at end of file

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

@@ -21,7 +21,7 @@
       <el-row>
         <el-col :span="24">
           <el-form-item label="標題">
-            <el-input type="text" v-model="plugData.title"></el-input>
+            <el-input type="text" v-model="plugData.Title"></el-input>
           </el-form-item>
         </el-col>
       </el-row>

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>
-    <el-form label-width="100px">
-      <el-form-item label="標題">
-        <el-input type="text" v-model="plugData.VideoTitle"></el-input>
-      </el-form-item>
-      <el-form-item label="描述">
-        <el-input type="textarea" v-model="plugData.VideoDescribe" :rows="4"></el-input>
-      </el-form-item>
-      <el-form-item label="YouTube 影片ID">
-        <el-input type="text" v-model="plugData.VideoId"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <div>如何取得 YouTube 影片 ID：</div>
-        <div>該影片網址 v= 後面的編號，即為該影片的 ID</div>
-        <div>
+    <div class="diy-component-preview">
+      <div class="WebSite_item">
+        <div class="temp-img">
           <img :src="plugData.CoverImg" alt="" />
         </div>
-      </el-form-item>
-    </el-form>
+        <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">編輯</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>
   </div>
 </template>
 <script>
@@ -30,9 +98,15 @@
     },
     created() {},
     methods: {
-
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      },
     },
     mounted() {}
   };
-
 </script>
\ No newline at end of file