自助建站紧急修正：构造页面左侧收缩菜单

自助建站紧急修正：构造页面左侧收缩菜单

src/layout/components/template/componentMenu.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="componentMenuBox" id="componentMenuBox">
+    <div :class="['componentMenuBox', this.$store.state.template.componentMenuStatus == 0 ? 'componentMenuBoxHide' : '']" id="componentMenuBox">
+        <div class="floatArrow">
+            <span class="el-icon-arrow-left" @click="setComponentMenuStatus(0)" v-if="this.$store.state.template.componentMenuStatus == 1"></span>
+            <span class="el-icon-arrow-right" @click="setComponentMenuStatus(1)" v-if="this.$store.state.template.componentMenuStatus == 0"></span>
+        </div>
         <div class="componentMenuTitle">
             <div v-if="this.$store.state.template.pageStatus == 1">首页可选板块：</div>
             <div v-if="this.$store.state.template.pageStatus == 2">频道页可选板块：</div>
@@ -73,15 +77,33 @@ export default {
         }
     },
     methods: {
-        
+        setComponentMenuStatus(data) {
+            this.$store.commit('template/setComponentMenuStatus', data);
+        }
     }
 }
 </script>
 
 <style scoped lang="less">
-  .componentMenuBox {
+.componentMenuBox {
+    .floatArrow {
+        position: absolute;
+        top: 50%;
+        right: -16px;
+        width: 40px;
+        height: 40px;
+        background: #2F2F2F;
+        border-radius: 50%;
+        font-size: 18px;
+        color:#fff;
+        line-height:40px;
+        cursor: pointer;
+        color: #c7c7c7;
+        box-sizing: border-box;
+        padding-left: 16px;
+    }
     transition: width 0.28s;
-    width: 290px !important;
+    width: 220px !important;
     background: #2F2F2F;
     height: 100%;
     position: fixed;
@@ -90,21 +112,29 @@ export default {
     bottom: 0;
     left: 0;
     z-index: 1001;
-    overflow: hidden;
     .sectorBox {
-      height: 100%;
+        height: 100%;
     }
     .el-scrollbar {
-      height: calc(100vh - 60px);
+        height: calc(100vh - 60px);
     }
     .componentMenuTitle {
-      padding: 37px 0 30px 0;
-      color: #fff;
-      font-size: 18px;
-      div {
-        border-left: 3px solid #5570F1;
-        padding-left: 25px;
-      }
+        padding: 37px 0 30px 0;
+        color: #fff;
+        font-size: 18px;
+        div {
+            border-left: 3px solid #5570F1;
+            padding-left: 25px;
+        }
     }
-  }
+}
+.componentMenuBoxHide {
+    width: 10px !important;
+    .componentMenuTitle {
+        display: none;
+    }
+    .el-scrollbar {
+        display: none;
+    }
+}
 </style>

src/layout/creatWebsite.vue

@@ -1,15 +1,18 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <componentMenu />
-    <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
-        <breadcrumb id="breadcrumb-container"/>
-      </div>
-      <app-main />
+    <div :class="classObj" class="app-wrapper">
+        <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+        <componentMenu />
+        <!-- <div :class="{hasTagsView:needTagsView}" class="main-container_template"> -->
+        <div :class="['main-container_template', this.$store.state.template.componentMenuStatus == 0 ? 'main-container_template_hide' : '']">
+            <div class="creatWebsiteMenuBox">
+                <div :class="{'fixed-header':fixedHeader}">
+                    <navbar />
+                    <breadcrumb id="breadcrumb-container"/>
+                </div>
+            </div>
+            <app-main />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -61,6 +64,22 @@ export default {
 <style lang="scss" scoped>
   @import "~@/styles/mixin.scss";
   @import "~@/styles/variables.scss";
+
+  .main-container_template {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: #f0f2f5;
+    padding-left: 220px;
+    transition: all 0.3s;
+  }
+  .main-container_template_hide {
+    padding-left: 0;
+  }
+
+//   .creatWebsiteMenuBox {
+//     padding-left: 130px;
+//   }
   
 
   .app-wrapper {

src/store/modules/template.js

@@ -27,6 +27,7 @@ const state = {
     adKey: "",//网站缩写
     editWebsiteClass: "",//网站风格
     stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
+    componentMenuStatus: 1,//组件菜单是否显示 1=显示 0=隐藏
     //0.全局配置 end------------------------------------------------------------>
 
     //1.画布数据 start------------------------------------------------------------>
@@ -326,6 +327,10 @@ const mutations = {
         state.webSiteData.ad.aloneList = [];
         state.webSiteData.ad.aloneArticle = [];
     },
+    //设置组件菜单是否显示
+    setComponentMenuStatus(state, data) {
+        state.componentMenuStatus = data;
+    },
     //0.全局配置 start------------------------------------------------------------>
     //1.配置模块 start------------------------------------------------------------>
     //获得gridlayout对象

src/views/template/templateCreat.vue

@@ -216,6 +216,7 @@ export default {
 }
 //拖拽布局容器
 .websiteBox {
+    min-width: 1310px;
     margin: 60px 30px 30px 30px;
     background: #fff;
     border: 1px solid #E9EDF7;
@@ -231,7 +232,7 @@ export default {
         display: flex;
         align-items: center;
         top: -37px;
-        left: -1px;
+        left: 0;
         .pageTabsItem {
             padding: 10px 20px;
             background: #fff;