修复侧边栏的闪烁。主页样式修复。

src/main.js

@@ -6,10 +6,9 @@ import store from "./store";
 import "./plugins/element.js";
 import "./plugins/axios";
 import "./plugins/vueAwesome";
-
 import "./styles/global.css";
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = process.env.NODE_ENV !== "production";
 
 new Vue({
   router,

src/modules/portal/routes/routes.js

@@ -17,7 +17,7 @@ export default [
   {
     path: "/home",
     component: Home,
-    meta: { pageName: "首页" },
+    meta: { pageName: "云平台概览" },
     children: [
       {
         path: "overview",

src/modules/portal/views/home/Home.vue

@@ -1,29 +1,34 @@
 <template>
   <el-container>
-    <el-header style="padding: 0"
-      ><el-menu class="el-menu-demo" mode="horizontal">
+    <el-header style="padding: 0">
+      <el-menu class="el-menu-demo" mode="horizontal">
         <el-menu-item index="1">
-          <router-link to="/home/overview"> 云平台 </router-link></el-menu-item
+          <router-link to="/home/overview" style="text-decoration-line: none">
+            云平台主页
+          </router-link>
+        </el-menu-item>
+        <el-submenu
+          index="2"
+          style="float: right;"
+          popper-class="submenu-style"
+          class="fr"
         >
-        <el-submenu index="2" style="float: right" class="fr">
           <template slot="title">{{ user.rootOrgName }}</template>
-          <el-menu-item index="2-1" style="width: 100px">
-            <a href="javascript:void(0)" @click="openUserDialog">
-              {{ user.displayName }}
-            </a></el-menu-item
-          >
-          <el-menu-item index="2-2" style="width: 100px"
-            ><a href="javascript:void(0)" @click="logout">
-              <span>退出</span>
-            </a></el-menu-item
-          >
+          <el-menu-item index="2-1">
+            <span @click="openUserDialog" style="cursor: pointer">{{
+              user.displayName
+            }}</span>
+          </el-menu-item>
+          <el-menu-item index="2-2">
+            <span @click="logout" style="cursor: pointer">退出</span>
+          </el-menu-item>
         </el-submenu>
       </el-menu>
     </el-header>
 
     <el-container>
-      <HomeSide :key="$route.path" />
-      <el-container>
+      <HomeSide v-if="ifShowHomeSide" :key="sideKey" />
+      <el-container class="main-body">
         <router-view></router-view>
         <el-footer>&copy; 启明泰和 2019</el-footer>
       </el-container>
@@ -31,7 +36,7 @@
 
     <!-- 添加用户信息弹出框 -->
     <el-dialog title="个人信息" :visible.sync="userDialog">
-      <el-tabs>
+      <el-tabs value="first">
         <el-tab-pane label="用户权限" name="first">
           <el-form :inline="true" label-position="right" label-width="90px">
             <el-row :gutter="10">
@@ -133,7 +138,14 @@ export default {
   },
   components: { HomeSide },
   computed: {
-    ...mapState({ user: state => state.user })
+    ...mapState({ user: state => state.user }),
+    ifShowHomeSide() {
+      return location.pathname.startsWith("/home") === false;
+    },
+    sideKey() {
+      const module = this.$route.fullPath.split("/")[1];
+      return module;
+    }
   },
   methods: {
     ...mapActions([USER_SIGNOUT]),
@@ -224,7 +236,18 @@ export default {
   text-align: center;
   line-height: 60px;
 }
+
 body > .el-container {
   margin-bottom: 40px;
 }
+
+.main-body {
+  min-height: calc(100vh - 60px);
+}
+</style>
+
+<style>
+.submenu-style .el-menu {
+  min-width: 100px !important;
+}
 </style>

src/modules/portal/views/home/HomeMain.vue

@@ -1,19 +1,14 @@
 <template>
   <el-main>
     <div class="main-content">
-      <section class="content">
-        <div class="row">
-          <ul class="center">
-            <li
-              class="menu"
-              v-for="menu in menuList.filter(m => m.parentId === null)"
-              :key="menu.id"
-            >
-              <a :href="'/' + menu.ext4">{{ menu.name }}</a>
-            </li>
-          </ul>
-        </div>
-      </section>
+      <div
+        class="module-card"
+        v-for="menu in menuList.filter(m => m.parentId === null)"
+        :key="menu.id"
+        @click="() => $router.push('/' + menu.ext4)"
+      >
+        {{ menu.name }}
+      </div>
     </div>
   </el-main>
 </template>
@@ -59,4 +54,36 @@ export default {
   text-align: center;
   line-height: 60px;
 }
+
+.main-content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  /* align-items: center;
+  justify-items: center; */
+  /* justify-content: space-between; */
+  /* align-content: space-between; */
+
+  height: 100%;
+}
+
+.module-card {
+  width: 200px;
+  height: 150px;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  cursor: pointer;
+  background-color: white;
+  display: flex;
+  /* justify-items: center; */
+  align-items: center;
+  justify-content: space-around;
+
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.module-card:hover {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
 </style>