style(layout): 调整UI布局

src/components/MessageBox/MessageBox.vue

@@ -13,7 +13,7 @@
       <el-badge :value="menuNum.summary"
                 :max="9"
                 class="item">
-        <svgIcon icon-class="dashboard_notification"
+        <svgIcon icon-class="notification"
                  class="icon"
                  @click.native="visible = true"></svgIcon>
       </el-badge>
@@ -45,14 +45,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .icon {
-  width: 2em !important;
-  height: 2em !important;
+  width: 2.5em !important;
+  height: 100% !important;
   cursor: pointer;
-  margin-top:16px;
-  margin-bottom: 16px;
+  // margin-top: 16px;
+  // margin-bottom: 16px;
   transition: all 0.5s ease-out;
   &:hover {
-    transform: translateX(-4px);
+  box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
   }
 }
 </style>

src/styles/element-variables.scss

@@ -7,7 +7,7 @@ http://element-cn.eleme.io/#/zh-CN/component/custom-theme#strong-xiu-gai-bian-li
 
 // 官方说如果这个文件存在，字体路径是必须覆盖的，我没时间测试删除以后会怎样
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
-$--color-primary:#1867c0;
+$--color-primary:#616dad;
 $--color-success:#4CAF50;
 $--color-warning:#fb8c00;
 $--color-danger:#ff5252;

src/views/layout/Layout.vue

@@ -1,92 +1,74 @@
 <!--
 @file 框架页布局
-@author BoBo
+@author ytyang
 @copyright NanJing Anshare Tech .Com
 @createDate 2018年11月13日14:50:08
 -->
 <template>
-  <div class="app-wrapper">
+  <div :class="classObj"
+       class="app-wrapper">
     <!-- 导航栏 -->
     <Header />
     <!-- 左侧边栏 -->
     <div class="main-container">
-      <!-- 面包屑导航 -->
-      <Breadcrumb></Breadcrumb>
+      <!-- TAB标签页 -->
+      <!-- <TagsView /> -->
+      <!-- <Breadcrumb></Breadcrumb> -->
       <!-- 包含二级路由，可以继续嵌套子页面 -->
       <AppMain />
     </div>
+
     <el-backtop target=".main-container"></el-backtop>
-    <div class="elevator">
-      <!-- 消息中心 -->
-      <MessageBox></MessageBox>
-    </div>
+
   </div>
 </template>
 
-<script lang="ts">
-import { mapGetters } from 'vuex';
-import MessageBox from '@/components/MessageBox/MessageBox.vue';
+<script>
 
-import {
-  AppMain,
-  Header, // TagsView 暂时去掉tab
-} from '@/views/layout/components/index.ts';
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import Breadcrumb from '@/components/Breadcrumb/index.vue';
+import { AppMain, Header } from '@/views/layout/components/index.ts';
+// import Breadcrumb from '@/components/Breadcrumb/index.vue';
 
-@Component({
+export default {
+  name: 'Layout',
+  data() {
+    return {};
+  },
   components: {
     AppMain,
-    MessageBox,
+    // TagsView,
     Header,
-    Breadcrumb,
+    // Breadcrumb,
   },
-})
-export default class Layout extends Vue {
-  created() {
-    this.$store.dispatch('initFlowTree');
-  }
-}
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+      };
+    },
+  },
+
+  mounted() {
+    window.addEventListener('scroll', () => {});
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import 'src/styles/mixin.scss';
 .app-wrapper {
   @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background: #eee;
   overflow: auto;
-  .elevator {
-    position: fixed;
-    top: 45%;
-    padding: 0 8px;
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    margin-top: -140px;
-    right: 0;
-    background-color: #fff;
-    box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
-  }
+  height: 100%;
+  background: #f0f3f7;
   // 主体区域
   .main-container {
-    left: 0px;
-    top: 80px;
-    right: 0;
-    height: auto;
-    position: absolute;
-    width: 90%;
-    margin: 10px auto 10px;
+    background: #f0f3f7;
+    padding: 10px 50px;
+    height: calc(100% - 120px);
   }
 }
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
 </style>

src/views/layout/components/AppMain.vue

@@ -1,56 +1,53 @@
 <!--
 @file 本页面用于加载其他二级路由对应的子页面，被layout/layout.vue引用
       嵌套顺序App.vue->Layout.vue->AppMain.vue
-@author BoBo
+@author ytyang
 @copyright NanJing Anshare Tech .Com
 @createDate 2018年11月13日14:48:28
 -->
 <template>
   <section class="app-main"
            ref="appmain"
-           @scroll="handleScroll">
-    <router-view :scrollTop="scrollTop"
-                 :key="key"
-                 @viewScroll="viewScroll" />
+           @scroll="handleScroll"
+          >
+      <router-view :scrollTop="scrollTop"
+                   :key="key"
+                   @viewScroll="viewScroll" />
   </section>
 </template>
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({
+<script>
+export default {
   name: 'AppMain',
-})
-export default class AppMain extends Vue {
-  $refs!: {
-    appmain: HTMLFormElement;
-  };
-
-  scrollTop = 0;
-
-  ISPUBLIC = process.env.VUE_APP_ISPUBLIC;
-
-  get cachedViews() {
-    return this.$store.state.tagsView.cachedViews;
-  }
-
-  get key() {
-    return this.$route.fullPath;
-  }
-
-  // 根据右侧滚动条实时刷新滚动条距离顶部的位置，并通过<router-view>传入子页面
-  handleScroll() {
-    this.scrollTop = this.$refs.appmain.scrollTop;
-  }
-
-  // 重定位滚动条
-  viewScroll(v) {
-    this.$refs.appmain.scrollTop = v;
-  }
-}
+  data() {
+    return {
+      scrollTop: 0,
+      ISPUBLIC: process.env.VUE_APP_ISPUBLIC,
+    };
+  },
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews;
+    },
+    key() {
+      return this.$route.fullPath;
+    },
+  },
+  methods: {
+    // 根据右侧滚动条实时刷新滚动条距离顶部的位置，并通过<router-view>传入子页面
+    handleScroll() {
+      this.scrollTop = this.$refs.appmain.scrollTop;
+    },
+    // 重定位滚动条
+    viewScroll(v) {
+      this.$refs.appmain.scrollTop = v;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .app-main {
   // padding-top: 16px;
-  height: 100%;
+  height:100%;
 }
 </style>