fix main layout

src/element-variables.scss

@@ -1,11 +0,0 @@
-/*
-Write your variables here. All available variables can be
-found in element-ui/packages/theme-chalk/src/common/var.scss.
-For example, to overwrite the theme color:
-*/
-$--color-primary: teal;
-
-/* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";

src/modules/portal/components/Home.vue

@@ -1,90 +1,105 @@
 <template>
-  <div class="wrapper">
-    <header class="main-header">
-      <!-- Logo -->
-      <a href="javascript:void(0)" class="logo">
-        <span class="logo-mini"><b>云</b></span>
-        <span class="logo-lg"><b>云平台</b></span>
-      </a>
-
-      <!-- Header Navbar: style can be found in header.less -->
-      <nav class="navbar navbar-static-top">
-        <!-- Navbar Right Menu -->
-        <div class="navbar-custom-menu">
-          <ul class="nav navbar-nav">
-            <li class="user user-menu">
-              <a href="javascript:void(0)">
-                <i class="fa fa-home"></i> <span>{{ user.rootOrgName }}</span>
-              </a>
-            </li>
+  <el-container>
+    <el-header style="padding: 0"
+      ><el-menu class="el-menu-demo" mode="horizontal">
+        <el-menu-item index="1">云平台</el-menu-item>
+        <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-submenu>
+      </el-menu>
+    </el-header>
 
-            <li class="dropdown user user-menu">
-              <a
-                href="javascript:void(0)"
-                @click="openUserDialog"
-                class="dropdown-toggle"
-                data-toggle="dropdown"
+    <el-container>
+      <el-aside width="200px">
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-location"></i> <span>基础信息</span>
+            </template>
+            <el-menu-item-group>
+              <template slot="title"
+                >分组一</template
               >
-                <span class="hidden-xs">
-                  <i class="fa fa-user"></i> {{ user.displayName }}
-                </span>
-              </a>
-            </li>
-
-            <li class="user user-menu">
-              <a href="javascript:void(0)" @click="logout">
-                <i class="fa fa-sign-out"></i> <span>退出</span>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </nav>
-    </header>
+              <el-menu-item index="1-1">选项1</el-menu-item>
+              <el-menu-item index="1-2">选项2</el-menu-item>
+            </el-menu-item-group>
+            <el-menu-item-group title="分组2">
+              <el-menu-item index="1-3">选项3</el-menu-item>
+            </el-menu-item-group>
+            <el-submenu index="1-4">
+              <template slot="title"
+                >选项4</template
+              >
+              <el-menu-item index="1-4-1">选项1</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <el-menu-item index="2">
+            <i class="el-icon-menu"></i> <span slot="title">考务</span>
+          </el-menu-item>
+          <el-menu-item index="3" disabled>
+            <i class="el-icon-document"></i> <span slot="title">题库</span>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <i class="el-icon-setting"></i> <span slot="title">网考</span>
+          </el-menu-item>
+          <el-menu-item index="5">
+            <i class="el-icon-setting"></i> <span slot="title">阅卷</span>
+          </el-menu-item>
+          <el-menu-item index="6">
+            <i class="el-icon-setting"></i> <span slot="title">印刷</span>
+          </el-menu-item>
+          <el-menu-item index="7">
+            <i class="el-icon-setting"></i> <span slot="title">报表</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-main>Main</el-main>
+        <el-footer>&copy; 启明泰和 2018</el-footer>
+      </el-container>
+    </el-container>
 
-    <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)"
-              :key="menu.id"
-              @click="toApp(menu.ext1);"
-            >
-              <svg class="icon" aria-hidden="true">
-                <use v-if="menu.code == 'BASIC'" xlink:href="#icon-core"></use>
-                <use
-                  v-if="menu.code == 'EXAM_WORK'"
-                  xlink:href="#icon-exam-work"
-                ></use>
-                <use
-                  v-if="menu.code == 'QUESTIONS'"
-                  xlink:href="#icon-question"
-                ></use>
-                <use
-                  v-if="menu.code == 'ONLINE_EXAM'"
-                  xlink:href="#icon-oe"
-                ></use>
-                <use
-                  v-if="menu.code == 'marking_admin'"
-                  xlink:href="#icon-marking"
-                ></use>
-                <use v-if="menu.code == 'PRINT'" xlink:href="#icon-print"></use>
-                <use
-                  v-if="menu.code == 'REPORTS'"
-                  xlink:href="#icon-stat"
-                ></use>
-              </svg>
-              <div>{{ menu.name }}</div>
-            </li>
-          </ul>
-        </div>
-      </section>
-    </div>
+    <!--
+      <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.code.toLowerCase()">{{ menu.name }}</a>
+                <div v-if="menu.code === 'BASIC'">
+                  <a href=""></a>
+                  得到菜单权限
+                </div>
+              </li>
+            </ul>
+          </div>
+        </section>
+      </div>
+    -->
 
     <!-- 添加用户信息弹出框 -->
-    <el-dialog title="个人信息" v-model="userDialog">
-      <el-tabs v-model="activeName">
+    <el-dialog title="个人信息" :visible.sync="userDialog">
+      <el-tabs>
         <el-tab-pane label="用户权限" name="first">
           <el-form :inline="true" label-position="right" label-width="90px">
             <el-row :gutter="10">
@@ -144,7 +159,7 @@
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
-  </div>
+  </el-container>
 </template>
 
 <script>
@@ -174,8 +189,6 @@ export default {
       }
     };
     return {
-      authParams: "",
-      activeName: "first",
       menuList: [],
       userDialog: false,
       passForm: { pass: "", checkPass: "" },
@@ -236,17 +249,6 @@ export default {
       }
       return false;
     },
-    checkAccess() {
-      if (this.isSuperAdmin()) {
-        return true;
-      }
-      for (let role of this.user.roleList) {
-        if (this.user.roleList.length == 1 && role.roleCode == "STUDENT") {
-          return false;
-        }
-        return true;
-      }
-    },
     logout() {
       this.$http
         .post(core_api + "/auth/logout")
@@ -273,56 +275,9 @@ export default {
             path: "/login" + "?orgId=" + orgId
           });
         });
-    },
-    checkLogin: function() {
-      var url = core_api + "/auth/getLoginUser";
-      const params = new URLSearchParams();
-      params.append("key", this.user.key);
-      params.append("token", this.user.token);
-      this.$http
-        .post(url, params, {
-          headers: { "content-type": "application/x-www-form-urlencoded" }
-        })
-        .then(response => {
-          console.log(response);
-        })
-        .catch(response => {
-          if (response.status == 500) {
-            this.$notify({
-              showClose: true,
-              message: response.data.desc,
-              type: "error"
-            });
-          }
-          this.logout();
-        });
-    },
-    toApp(port) {
-      this.$http.get(core_api).then(() => {
-        window.location.href =
-          "http://" +
-          window.location.hostname +
-          ":" +
-          port +
-          "/#/access?" +
-          this.authParams;
-      });
     }
   },
-
   created() {
-    console.log("user:", this.user);
-    this.checkLogin();
-    this.authParams =
-      "key=" +
-      this.user.key +
-      "&token=" +
-      this.user.token +
-      "&indexUrl=" +
-      encodeURIComponent("http://" + window.location.host + "/#/index") +
-      "&loginUrl=" +
-      encodeURIComponent("http://" + window.location.host + "/#/login");
-
     var url = core_api + "/rolePrivilege/getUserPrivileges";
     const params = new URLSearchParams();
     params.append("groupCode", "PORTAL_MENUS");
@@ -348,66 +303,35 @@ export default {
 </script>
 
 <style lang="css">
-.icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 5em;
-  height: 5em;
-  /* 图标和文字相邻时，垂直对齐 */
-  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
-  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-        normalize.css 中也包含这行 */
-  overflow: hidden;
-  margin-top: 10px;
+.fr {
+  float: right;
 }
-
-span.logo-lg {
-  font-family: "Micrsoft YaHei";
-  font-size: 30px;
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
 }
-
-.main-content {
-  background-color: #ecf0f5;
-  width: 100%;
+.el-menu-vertical-demo {
+  height: calc(100vh - 60px);
 }
-
-.center {
-  margin: 0 auto 0 auto;
-  margin-top: 10%;
-  margin-left: 20%;
-  text-align: center;
+.el-aside {
+  background-color: #D3DCE6;
+  color: #333;
+  line-height: 200px;
 }
 
-.menu {
-  font-family: "Micrsoft YaHei";
-  color: #3c8dbc;
-  width: 200px;
-  height: 120px;
-  margin-right: 50px;
-  margin-bottom: 50px;
-  float: left;
-  border-style: solid;
-  border-width: 5px;
-  border-color: #3c8dbc;
-  border-radius: 25px;
+.el-main {
+  background-color: #E9EEF3;
+  color: #333;
+  text-align: center;
+  line-height: 160px;
 }
 
-.menu:hover {
-  border-width: 5px;
-  box-shadow: 0 0 50px;
-  animation: menu-jump 500ms infinite;
+body > .el-container {
+  margin-bottom: 40px;
 }
-
-@keyframes menu-jump {
-  0% {
-    transform: translate(0px, 0px);
-  }
-  50% {
-    transform: translate(0px, -10px);
-  }
-  100% {
-    transform: translate(0px, 0px);
-  }
+body {
+  margin: 0
 }
 </style>

src/plugins/element.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
 import Element from "element-ui";
-import "../element-variables.scss";
+import "element-ui/lib/theme-chalk/index.css";
 
 Vue.use(Element);

src/router.js

@@ -1,12 +1,12 @@
 import Vue from "vue";
 import Router from "vue-router";
-import LoginRoutes from "./modules/portal/routes/routes";
+import PortalRoutes from "./modules/portal/routes/routes";
 
 Vue.use(Router);
 
 let router = new Router({
   mode: "history",
-  routes: [...LoginRoutes]
+  routes: [...PortalRoutes]
 });
 
 // router.beforeEach((to, from, next) => {