新增

src/components/WebSet/WebSiteEdit.vue

+<style>
+  .WebSiteEdit {
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    background-color: #f3f3f3;
+  }
+
+  .WebSiteContent {
+    min-width: 1280px;
+    height: 725px;
+    display: flex;
+  }
+
+  .WebSite_Left {
+    background-color: rgba(34, 45, 50, .8);
+    padding: 20px;
+    overflow-y: auto;
+    width: 250px;
+    height: 100%;
+    top: 0;
+  }
+
+  .WebSite_right {
+    padding-left: 2px;
+    position: relative;
+    overflow-y: auto;
+  }
+
+  [flex] {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex
+  }
+
+  [flex~="box:first"]>:first-child,
+  [flex~="box:last"]>:last-child,
+  [flex~="box:justify"]>:first-child,
+  [flex~="box:justify"]>:last-child {
+    width: auto;
+    -webkit-box-flex: 0;
+    -webkit-flex-grow: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    -webkit-flex-shrink: 0;
+    -ms-flex-negative: 0;
+    flex-shrink: 0
+  }
+
+  .WebSite_right_preview {
+    width: 800px;
+    border: 1px solid #d2d6de;
+    overflow-y: auto;
+    height: 725px;
+    margin: 0 20px;
+    background-color: #ddd;
+  }
+
+</style>
+<template>
+  <div class="WebSiteEdit">
+    <div flex="box:first" class="WebSiteContent">
+      <div class="WebSite_Left">
+        <el-select v-model="choiceModule">
+            <el-option v-for="item in selData" :label="item.TemplateName" :value="item.Id" :key="item.Id">
+            </el-option>
+        </el-select>
+      </div>
+      <div class="WebSite_right">
+        <div class="WebSite_right_preview">
+          <div v-for="(item,index) in dataList" :key="index">
+            <movie1 v-if="item.Id='movie1'" :myData="item"></movie1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import movie1 from "../WebSet/plug-in/movie1.vue"
+  export default {
+    data() {
+      return {
+        //下拉框
+        selData:[],
+        choiceModule:0,
+        dataList: [{
+          Id: 'movie1',
+          isCked: false,
+          data: {
+            isShelves: 0, //是否上架
+            title: '', //標題
+            decrible: '', //描述
+            id: '', //YouTube 影片ID
+          }
+        }]
+      };
+    },
+    created() {},
+    components: {
+      movie1
+    },
+    methods: {
+      //获取下拉框
+      getModule(){
+        this.apipost(
+          "ws_get_GetTemplateList", {},
+          res => {
+            if (res.data.resultCode == 1) {
+                this.selData=res.data.data;
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      }
+      
+    },
+    mounted() {
+        this.getModule();
+    }
+  };
+
+</script>

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-options" v-if="myData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div> -->
+    <div class="diy-component-preview">
+      <div class="WebSite_item">
+        <div class="temp-img">
+            <!-- <img src="../../../assets/img/taiwan/video1.jpg" alt=""/> -->
+        </div>
+        <div class="temp-info">
+            <h2 class="temp-title">影片 - 1</h2>
+            <h3 class="temp-subtitle">
+                創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！
+            </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="myData.isShelves" :active-value="1" :inactive-value="0" active-color="#13ce66"
+              inactive-color="#dcdfe6"></el-switch>
+            </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="diy-component-edit" v-if="myData.isCked">
+      <el-form label-width="100px">
+        <el-form-item label="標題">
+          <el-input type="text" v-model="myData.title"></el-input>
+        </el-form-item>
+        <el-form-item label="描述">
+          <el-input type="textarea" v-model="myData.decrible" :rows="4"></el-input>
+        </el-form-item>
+        <el-form-item label="YouTube 影片ID">
+          <el-input type="text" v-model="myData.id"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <div>如何取得 YouTube 影片 ID：</div>
+            <div>該影片網址 v= 後面的編號，即為該影片的 ID</div>
+            <div>
+                <img src="../../../assets/img/taiwan/youtubeId.jpg" alt=""/>
+            </div>
+        </el-form-item>
+      </el-form>
+    </div> -->
+  </div>
+</template>
+<script>
+  export default {
+    props: ["myData"],
+    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/router/config.js

@@ -4601,6 +4601,14 @@ export default {
                   title: '模板配置'
                 },
               },
+              {
+                path: '/WebSiteEdit',  //前台网站模板配置【模板编辑】
+                name: 'WebSiteEdit',
+                component: resolve => require(['@/components/WebSet/WebSiteEdit'], resolve),
+                meta: {
+                  title: '模板编辑'
+                },
+              }
           ]
         },
         {