模板回显功能完成

模板回显功能完成

src/store/modules/template.js

@@ -22,7 +22,7 @@ const state = {
     //0.全局配置 start------------------------------------------------------------> 
     editWebsiteId: "",//当前编辑网站的id
     adKey: "",//当前编辑网站的缩写
-    editWebsiteClass: "",//当前编辑网站的风格
+    editWebsiteClass: "",//当前编辑网站的风格updateWindowData
     stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
     pageDataStatus:{//页面数据完整度
         index:{
@@ -214,8 +214,8 @@ const mutations = {
         state.editComponentSize = data.size;
         state.editComponentSizeImg = data.sizeImg;
     },
-    //增加级联选择器key
-    addWindowKey(state) {
+    //更新编辑窗口中的数据
+    updateWindowData(state) {
         state.componentViewData.windowKey++;
     },
     //关闭编辑组件弹出框
@@ -1478,7 +1478,9 @@ const mutations = {
     },
     //回显模板内容
     setWebsiteTemplate(state, data) {
-        state.pageData = data;
+        console.log(data)
+        state.webSiteData.ad.top = data.topAd;
+        state.pageData = data.template;
     },
     //随机生成模板
     randomTemplate(state) {

src/views/template/public/checkWindow.vue

@@ -201,7 +201,11 @@ export default {
             if(this.$store.state.template.webSiteData.ad.aloneArticle.length>0){}
 
             //获得画布上得内容，准备回显
-            let canvasData = JSON.stringify(this.$store.state.template.pageData);
+            let allData = {
+                topAd:this.$store.state.template.webSiteData.ad.top,
+                template:this.$store.state.template.pageData
+            }
+            let canvasData = JSON.stringify(allData);
 
             //第二步：创建广告位
             this.$store.dispatch('template/addTwinAdPlace',data).then(res=>{

src/views/template/public/editWindow.vue

@@ -201,39 +201,62 @@ export default {
         }
     },
     watch: {
-        getPid(newVal, oldVal) {
-            console.log("导航池改变了！")
-            console.log(newVal, oldVal)
-            // 回显导航池 判断一下是单导航还是多导航
-            this.form.type1data.pid_arr = newVal;
+        getPid:{
+            handler(newVal, oldVal) {
+                console.log("导航池改变了！")
+                console.log(newVal, oldVal)
+                // 回显导航池 判断一下是单导航还是多导航
+                this.form.type1data.pid_arr = newVal;
+            },
+            immediate:true,
         },
-        getadName(newVal, oldVal) {
-            console.log("广告文字改变了！")
-            console.log(newVal, oldVal)
-            this.form.type3data.adName = newVal;
+        getadName:{
+            handler(newVal, oldVal) {
+                console.log("广告文字改变了！")
+                console.log(newVal, oldVal)
+                this.form.type3data.adName = newVal;
+            },
+            immediate:true,
         },
-        getadIntroduce(newVal, oldVal) {
-            console.log("广告介绍改变了！")
-            console.log(newVal, oldVal)
-            this.form.type3data.introduce = newVal;
+        getadIntroduce:{
+            handler(newVal, oldVal) {
+                console.log("广告介绍改变了！")
+                console.log(newVal, oldVal)
+                this.form.type3data.introduce = newVal;
+            },
+            immediate:true,
         },
-        getadPrice(newVal, oldVal) {
-            console.log("广告价格改变了！")
-            console.log(newVal, oldVal)
+        getadPrice:{
+            handler(newVal, oldVal) {
+                console.log("广告价格改变了！")
+                console.log(newVal, oldVal)
             this.form.type3data.price = newVal;
+            },
+            immediate:true,
+        },
+        getKey:{
+            handler(newVal, oldVal) {
+                //console.log("级联选择器key改变了！")
+                console.log("数据更新！")
+                //console.log(newVal, oldVal)
+                //更新级联选择器
+                this.form.type1data.pid_arr = this.$store.state.template.componentViewData.pid_arr;
+                console.log(this.$store.state.template.componentViewData.pid_arr)
+                console.log(this.form.type1data.pid_arr)
+                this.parentKey ++;
+                if(this.$store.state.template.componentViewData.price==0){
+                    this.form.type3data.price = "";
+                }else{
+                    this.form.type3data.price = this.$store.state.template.componentViewData.price;
+                }
+                //回显顶部广告
+                if(this.$store.state.template.editComponentType == 3){
+                    this.form.type2data.adName = this.$store.state.template.webSiteData.ad.top.name;
+                    this.form.type2data.price = this.$store.state.template.webSiteData.ad.top.price;
+                }
+            },
+            immediate:true,
         },
-        getKey(newVal, oldVal) {
-            console.log("级联选择器key改变了！")
-            console.log(newVal, oldVal)
-            //更新级联选择器
-            this.form.type1data.pid_arr = this.$store.state.template.componentViewData.pid_arr;
-            this.parentKey ++;
-            if(this.$store.state.template.componentViewData.price==0){
-                this.form.type3data.price = "";
-            }else{
-                this.form.type3data.price = this.$store.state.template.componentViewData.price;
-            }
-        }
     },
     methods: {
         closeEditWindow(){
@@ -321,7 +344,15 @@ export default {
         }
     },
     mounted() { 
-
+       //初始化数据 返显导航池
+    //    this.parentKey ++;
+    //    this.form.type1data.pid_arr = this.$store.state.template.componentViewData.pid_arr;
+    //    //返显广告名称
+    //    this.form.type3data.adName = this.$store.state.template.componentViewData.adName;
+    //    //返显广告介绍
+    //    this.form.type3data.introduce = this.$store.state.template.componentViewData.introduce;
+    //    //返显广告价格
+    //    this.form.type3data.price = this.$store.state.template.componentViewData.price;
     },
 };
 </script>

src/views/template/templateCreat.vue

@@ -1,65 +1,65 @@
 <template>
-  <div class="mainBox" v-loading="this.$store.state.template.loading==true" element-loading-text="请稍等">
-    <!-- 顶部菜单 start ---------------------------------------->
-    <div class="topMenuBox">
-      <div>
-        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
-          <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 2">随机生成频道页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 5">随机生成搜索页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 6">随机生成底部列表页模板</span>
-          <span v-if="this.$store.state.template.pageStatus == 7">随机生成底部详情页模板</span>
-        </el-button>
-      </div>
-      <div class="topMenuRightBox">
-        <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
-        <img src="@/assets/template/close.png" class="previewImg"  @click="setPreviewStatus" v-else/>
-        <el-button type="primary" @click="saveTemplate">保存</el-button>
-        <el-button type="info" @click="goStyle">上一步</el-button>
-      </div>
-    </div>
-    <!-- 顶部菜单 end ---------------------------------------->
-    <!-- 画布 start ---------------------------------------->
-    <div class="websiteBox">
-      <div class="pageTabsBox">
-        <div v-if="this.$store.state.template.showPage.index==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
-        <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">频道页</div>
-        <div v-if="this.$store.state.template.showPage.list==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
-        <div v-if="this.$store.state.template.showPage.article==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
-        <div v-if="this.$store.state.template.showPage.search==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
-        <div v-if="this.$store.state.template.showPage.aloneList==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</div>
-        <div v-if="this.$store.state.template.showPage.aloneArticle==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div>
-      </div>
-      <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
-      <pageClass v-if="this.$store.state.template.pageStatus == 2"/>
-      <pageList v-if="this.$store.state.template.pageStatus == 3"/>
-      <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
-    </div>
-    <!-- 画布 end ---------------------------------------->
-
-    <!-- 弹出框 start ---------------------------------------->
-    <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
-    <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow" @open="addWindowKey">
-      <editWindow />
-    </el-dialog>
-    <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
-      <componentWindow />
-    </el-dialog>
-    <el-dialog title="模板检查" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
-      <!-- <div class="editWebsiteTemplateJsonBox">
-        <pre>{{this.$store.state.template.webSiteData}}</pre>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <div class="footerBtnbox">
-          <el-button type="primary" @click="gotoList">保存并退出</el-button>
+    <div class="mainBox" v-loading="this.$store.state.template.loading==true" element-loading-text="请稍等">
+        <!-- 顶部菜单 start ---------------------------------------->
+        <div class="topMenuBox">
+            <div>
+                <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
+                    <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 2">随机生成频道页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 5">随机生成搜索页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 6">随机生成底部列表页模板</span>
+                    <span v-if="this.$store.state.template.pageStatus == 7">随机生成底部详情页模板</span>
+                </el-button>
+            </div>
+            <div class="topMenuRightBox">
+                <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
+                <img src="@/assets/template/close.png" class="previewImg"  @click="setPreviewStatus" v-else/>
+                <el-button type="primary" @click="saveTemplate">保存</el-button>
+                <el-button type="info" @click="goStyle">上一步</el-button>
+            </div>
         </div>
-      </div> -->
-      <checkWindow />
-    </el-dialog>
-    <!-- 弹出框 start ---------------------------------------->
-  </div>
+        <!-- 顶部菜单 end ---------------------------------------->
+        <!-- 画布 start ---------------------------------------->
+        <div class="websiteBox">
+            <div class="pageTabsBox">
+                <div v-if="this.$store.state.template.showPage.index==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 1 ? 'active' : '']" @click="openPage(1)">首页</div>
+                <div v-if="this.$store.state.template.showPage.class==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 2 ? 'active' : '']" @click="openPage(2)">频道页</div>
+                <div v-if="this.$store.state.template.showPage.list==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 3 ? 'active' : '']" @click="openPage(3)">列表页</div>
+                <div v-if="this.$store.state.template.showPage.article==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 4 ? 'active' : '']" @click="openPage(4)">详情页</div>
+                <div v-if="this.$store.state.template.showPage.search==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 5 ? 'active' : '']" @click="openPage(5)">搜索页</div>
+                <div v-if="this.$store.state.template.showPage.aloneList==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 6 ? 'active' : '']" @click="openPage(6)">自定义列表页</div>
+                <div v-if="this.$store.state.template.showPage.aloneArticle==true" :class="['pageTabsItem', this.$store.state.template.pageStatus === 7 ? 'active' : '']" @click="openPage(7)">自定义详情页</div>
+            </div>
+            <pageIndex v-if="this.$store.state.template.pageStatus == 1"/>
+            <pageClass v-if="this.$store.state.template.pageStatus == 2"/>
+            <pageList v-if="this.$store.state.template.pageStatus == 3"/>
+            <pageArticle v-if="this.$store.state.template.pageStatus == 4"/>
+        </div>
+        <!-- 画布 end ---------------------------------------->
+
+        <!-- 弹出框 start ---------------------------------------->
+        <!-- 这里我去掉了:visible.sync 因为弹出框的关闭事件需要手动触发 -->
+        <el-dialog title="编辑组件信息" :visible="this.$store.state.template.editWindowStatus" :close-on-click-modal="false" @close="closeEditWindow" @open="updateWindowData">
+            <editWindow />
+        </el-dialog>
+        <el-dialog title="更换组件样式" :visible="this.$store.state.template.editComponentWindowStatus" :close-on-click-modal="false" @close="closeComponentStyleWindow">
+            <componentWindow />
+        </el-dialog>
+        <el-dialog title="模板检查" :visible="this.$store.state.template.editWebsiteTemplateJsonWindow" :close-on-click-modal="false" @close="closeEditWebsiteTemplateJsonWindow">
+            <!-- <div class="editWebsiteTemplateJsonBox">
+                <pre>{{this.$store.state.template.webSiteData}}</pre>
+            </div>
+            <div slot="footer" class="dialog-footer">
+                <div class="footerBtnbox">
+                <el-button type="primary" @click="gotoList">保存并退出</el-button>
+                </div>
+            </div> -->
+            <checkWindow />
+        </el-dialog>
+        <!-- 弹出框 start ---------------------------------------->
+    </div>
 </template>
 
 <script>
@@ -78,210 +78,208 @@ import pageArticle from './page/pageArticle.vue';
 //页面组件 end------------------------------------------------------------>
 
 export default {
-  components: {
-    //引入页面组件
-    pageIndex,
-    pageClass,
-    pageList,
-    pageArticle,
-    editWindow,
-    componentWindow,
-    checkWindow
-  },
-  data() {
-    return {
-      //0.全局配置 start------------------------------------------------------------>
-      windowStatus: false,
-      editPageStatus:1,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
-      websiteId:0,//网站id
-      style:0,//网站风格
-      rowHeight:10,
-      pageStatus:[],
-      //0.全局配置 end------------------------------------------------------------>
-
-      //1.编辑模块 start------------------------------------------------------------>
-      formLabelWidth: '120px',
-      //1.编辑模块 end------------------------------------------------------------>
-    }
-  },
-  methods: {
-    //0.全局操作 start ------------------------------------------------------------>
-    //上一步  
-    goStyle(){
-      this.$confirm('返回上一步会导致当前页面数据丢失, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$router.push({
-          path: '/templateStyle',
-          query: {
-            website_id:this.$route.query.website_id
-          }
-        }); 
-      })
-    },
-    //保存模板
-    saveTemplate(){
-      this.$store.commit('template/saveTemplate');
-    },
-    //打开弹出框
-    openWindow(item) {
-      this.editModule = item.i;
-      this.windowStatus = true;
+    components: {
+        //引入页面组件
+        pageIndex,
+        pageClass,
+        pageList,
+        pageArticle,
+        editWindow,
+        componentWindow,
+        checkWindow
     },
-    //关闭弹出框
-    closeWindow() {
-      this.windowStatus = false;
-    },
-    //切换编辑的页面
-    openPage(num){
-      this.$store.commit('template/setPageStatus',num);
-    },
-    //关闭编辑弹出框
-    closeEditWindow(){
-      this.$store.commit('template/closeEditWindowStatus');
-    },
-    //关闭选择组件样式弹出框
-    closeComponentStyleWindow(){
-      this.$store.commit('template/closeComponentStyleStatus');
-    },
-    //关闭提交数据弹出框
-    closeEditWebsiteTemplateJsonWindow(){
-      this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
-    },
-    //增加级联选择器key
-    addWindowKey(){
-      this.$store.commit('template/addWindowKey');
-    },
-    //设置预览状态
-    setPreviewStatus(){
-      this.$store.commit('template/setPreviewStatus');
+    data() {
+        return {
+            //0.全局配置 start------------------------------------------------------------>
+            windowStatus: false,
+            editPageStatus:1,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
+            websiteId:0,//网站id
+            style:0,//网站风格
+            rowHeight:10,
+            pageStatus:[],
+            //0.全局配置 end------------------------------------------------------------>
+
+            //1.编辑模块 start------------------------------------------------------------>
+            formLabelWidth: '120px',
+            //1.编辑模块 end------------------------------------------------------------>
+        }
     },
-    //随机生成模板
-    randomTemplate(){
-      this.$store.commit('template/randomTemplate');
+    methods: {
+        //0.全局操作 start ------------------------------------------------------------>
+        //上一步  
+        goStyle(){
+            this.$confirm('返回上一步会导致当前页面数据丢失, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$router.push({
+                    path: '/templateStyle',
+                    query: {
+                        website_id:this.$route.query.website_id
+                    }
+                }); 
+            })
+        },
+        //保存模板
+        saveTemplate(){
+            this.$store.commit('template/saveTemplate');
+        },
+        //打开弹出框
+        openWindow(item) {
+            this.editModule = item.i;
+            this.windowStatus = true;
+        },
+        //关闭弹出框
+        closeWindow() {
+            this.windowStatus = false;
+        },
+        //切换编辑的页面
+        openPage(num){
+            this.$store.commit('template/setPageStatus',num);
+        },
+        //关闭编辑弹出框
+        closeEditWindow(){
+            this.$store.commit('template/closeEditWindowStatus');
+        },
+        //关闭选择组件样式弹出框
+        closeComponentStyleWindow(){
+            this.$store.commit('template/closeComponentStyleStatus');
+        },
+        //关闭提交数据弹出框
+        closeEditWebsiteTemplateJsonWindow(){
+            this.$store.commit('template/closeEditWebsiteTemplateJsonWindow');
+        },
+        //更新编辑窗口中的数据
+        updateWindowData(){
+            //console.log("9999999")
+            this.$store.commit('template/updateWindowData');
+        },
+        //设置预览状态
+        setPreviewStatus(){
+            this.$store.commit('template/setPreviewStatus');
+        },
+        //随机生成模板
+        randomTemplate(){
+            this.$store.commit('template/randomTemplate');
+        },
+        //0.全局操作 end ------------------------------------------------------------>
     },
-    //0.全局操作 end ------------------------------------------------------------>
-  },
-  mounted(){
-    //1.设置网站id并且保存到vuex
-    this.websiteId = this.$route.query.website_id;
-    this.$store.commit('template/setEditWebsiteId',this.websiteId);
-    //2.设置网站风格并且保存到vuex
-    this.style = this.$route.query.style;
-    this.$store.commit('template/setClassNumber',this.style);
-    //3.获取网站导航池
-    this.$store.dispatch('template/getSiteCategory',{website_id:this.websiteId});
-    //4.获取网站详情
-    this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
-    //5.获取网站底部信息
-    this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
+    mounted(){
+        //1.设置网站id并且保存到vuex
+        this.websiteId = this.$route.query.website_id;
+        this.$store.commit('template/setEditWebsiteId',this.websiteId);
+        //2.设置网站风格并且保存到vuex
+        this.style = this.$route.query.style;
+        this.$store.commit('template/setClassNumber',this.style);
+        //3.获取网站导航池
+        this.$store.dispatch('template/getSiteCategory',{website_id:this.websiteId});
+        //4.获取网站详情
+        this.$store.dispatch('template/getAdminSiteInfo',{website_id:this.websiteId});
+        //5.获取网站底部信息
+        this.$store.dispatch('template/getAdminWebsiteFootAll',{website_id:this.websiteId});
 
-    //3.回显用户模板
-    this.$store.dispatch('template/getWebsiteTemplate',{website_id:this.websiteId}).then(res=>{
-        if(res.code==200){
-            //需要回显，把内容注入到画布
-            //console.log(res.data.canvas_data)
-            let canvasData = JSON.parse(res.data.canvas_data);
-            //把回显内容填入画布
-            this.$store.commit('template/setWebsiteTemplate',canvasData);
-        }else{
-            console.log("用户是首次创建模板，无需回显！")
-        }
-    });
-  }
+        //3.回显用户模板
+        this.$store.dispatch('template/getWebsiteTemplate',{website_id:this.websiteId}).then(res=>{
+            if(res.code==200){
+                //需要回显，把内容注入到画布
+                //console.log(res.data.canvas_data)
+                let canvasData = JSON.parse(res.data.canvas_data);
+                //把回显内容填入画布
+                this.$store.commit('template/setWebsiteTemplate',canvasData);
+            }else{
+                console.log("用户是首次创建模板，无需回显！")
+            }
+        });
+    }
 }
 </script>
 
 <style scoped lang="less">
-  //顶部菜单
-  .topMenuBox {
+//顶部菜单
+.topMenuBox {
     padding: 20px 30px 20px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #fff;
     .topMenuRightBox {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      .previewImg {
-        margin-right: 20px;
-      }
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        .previewImg {
+            margin-right: 20px;
+        }
     }
-  }
-  //拖拽布局容器
-  .websiteBox {
+}
+//拖拽布局容器
+.websiteBox {
     margin: 60px 30px 30px 30px;
     background: #fff;
     border: 1px solid #E9EDF7;
-   
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;
     /*构建的页面类型*/
     .pageTabsBox {
-      position: absolute;
-      border-top:1px solid #E9EDF7;
-      border-left:1px solid #E9EDF7;
-      border-right:1px solid #E9EDF7;
-      display: flex;
-      align-items: center;
-      top: -37px;
-      left: -1px;
-      .pageTabsItem {
-        padding: 10px 20px;
-        background: #fff;
-        font-size: 14px;
-        color: #666;
-        border-bottom:1px solid #E9EDF7;
-        cursor: pointer;
+        position: absolute;
+        border-top:1px solid #E9EDF7;
+        border-left:1px solid #E9EDF7;
         border-right:1px solid #E9EDF7;
-      }
-      .active {
-        border-bottom:1px solid #fff;
-        background: #fff;
-        border-right:1px solid #E9EDF7;
-      }
+        display: flex;
+        align-items: center;
+        top: -37px;
+        left: -1px;
+        .pageTabsItem {
+            padding: 10px 20px;
+            background: #fff;
+            font-size: 14px;
+            color: #666;
+            border-bottom:1px solid #E9EDF7;
+            cursor: pointer;
+            border-right:1px solid #E9EDF7;
+        }
+        .active {
+            border-bottom:1px solid #fff;
+            background: #fff;
+            border-right:1px solid #E9EDF7;
+        }
     }
-  }
-
-
+}
 
-  //菜单 start------------------------------------------------------------> 
-  // .layerTabsBox {
-  //   margin: 30px;
-  //   border-radius: 20px;
-  //   background: #fff;
-  //   border: 1px solid #d3d3d3;
-  //   -webkit-box-sizing: border-box;
-  //   box-sizing: border-box;
-  //   display: flex;
-  //   align-items: center;
-  //   justify-content: space-between;
-  //   overflow: hidden;
-  //   .layerTabsItem {
-  //     width: 33.33%; /* 每个占3分之一的空间 */
-  //     padding: 10px 20px;
-  //     cursor: pointer;
-  //     text-align: center;
-  //     font-size: 14px;
-  //     border-right: 1px solid #d3d3d3;
-  //     background: #fff;
-  //   }
-  //   .active {
-  //     background: #5570F1;
-  //     color: #fff;
-  //   }
-  // }
-  // .layerBox {
-  //   padding-bottom: 10px;
-  // }
-  //菜单 end------------------------------------------------------------> 
+//菜单 start------------------------------------------------------------> 
+// .layerTabsBox {
+//     margin: 30px;
+//     border-radius: 20px;
+//     background: #fff;
+//     border: 1px solid #d3d3d3;
+//     -webkit-box-sizing: border-box;
+//     box-sizing: border-box;
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//     overflow: hidden;
+//     .layerTabsItem {
+//         width: 33.33%; /* 每个占3分之一的空间 */
+//         padding: 10px 20px;
+//         cursor: pointer;
+//         text-align: center;
+//         font-size: 14px;
+//         border-right: 1px solid #d3d3d3;
+//         background: #fff;
+//     }
+//     .active {
+//         background: #5570F1;
+//         color: #fff;
+//     }
+// }
+// .layerBox {
+//     padding-bottom: 10px;
+// }
+//菜单 end------------------------------------------------------------> 
 
-  //模块 start------------------------------------------------------------> 
-  .moduleBox {
+//模块 start------------------------------------------------------------> 
+.moduleBox {
     display: flex;
     width: 100%;
     height: 100%;
@@ -289,42 +287,42 @@ export default {
     justify-content: space-between;
     box-sizing: border-box;
     border: 2px dashed #19499F;
-  }
-  //模块 end------------------------------------------------------------> 
+}
+//模块 end------------------------------------------------------------> 
 
-  //栅格布局 start------------------------------------------------------------> 
-  .grid-item-content {
+//栅格布局 start------------------------------------------------------------> 
+.grid-item-content {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #fff;
     height: 100%;
     overflow: hidden;
-  }
-  .grid-layout {
+}
+.grid-layout {
     grid-gap: 0;
     row-gap: 0;
-  }
-  .vue-grid-placeholder {
+}
+.vue-grid-placeholder {
     background-color: #f0f0f0 !important; /* 更改为你想要的颜色 */
     opacity: 0.8;
     border: 2px dashed #f0f0f0;
-  }
-  //栅格布局 end------------------------------------------------------------> 
+}
+//栅格布局 end------------------------------------------------------------> 
 
-  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
-  ::v-deep .custom-form-item > .el-form-item__label {
+//执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+::v-deep .custom-form-item > .el-form-item__label {
     line-height: 140px !important;
-  }
-  ::v-deep .custom-textarea .el-textarea__inner {
+}
+::v-deep .custom-textarea .el-textarea__inner {
     resize: none; /* 禁止用户拖拽调整大小 */
-  }
-  ::v-deep .custom-align-right .el-form-item__label {
+}
+::v-deep .custom-align-right .el-form-item__label {
     text-align: right; /* 设置标签文字右对齐 */
-  }
-  ::v-deep .shadowBox .el-button--mini.is-circle {
+}
+::v-deep .shadowBox .el-button--mini.is-circle {
     border-radius: 50% !important;
-  }
-  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+}
+//执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>