完善框架

public/index.html

@@ -11,7 +11,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app" style="height: 100%;"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/App.vue

@@ -4,4 +4,11 @@
   </div>
 </template>
 
-<style></style>
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  /* width: 100%; */
+}
+</style>

src/api/user.js

@@ -10,5 +10,4 @@ export const login = (loginname, loginpwd) =>
       loginname,
       loginpwd
     }
-    // data: Qs.stringify(username, password)
   });

src/assets/iconfont/iconfont.css

@@ -0,0 +1,25 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1590732052374'); /* IE9 */
+  src: url('iconfont.eot?t=1590732052374#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOEAAsAAAAAB0wAAAM1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCLIIbATYCJAMMCwgABCAFhG0HPRtoBhHVmyfI/oZoHN5XYENSuvSs3eYMhUArpa7z1ufVzRYkn7jc+g9Qf8MYkAAAAAAAwfO13+/c3f3mQFOL2kSrWiORqO7Jk0qINBrNJIpNJz2z3f4W7AqkzhPPEmziybzzAIOiPKQaQGYaXgBcbspwka0wb7uYjqsuvssn4QP7uc/TMTWuducaiHZOlySFAn2IEEP59E50A7SkmesGis963SWIzy8LUuzBCUcBeAwxBOtmz6EGuf+5nN41gAKZHyintffzMQETDGzsARJwgSTofcCG7mc9BHATRw5SbnWHgWAwuwkgPY1aAUhGiWnIFJwI9oqxBlnGhlPNqDtgKfi+/KAIKGwas291t6UMyrvO1GZZu4fAmk4P8JNAAzmAAemsDDbDCE/QuIWuOdGOQVBTeSwrYGp8u/WHBwoBsWOmewHIoJCCdw4zEYXsq07XANijlC6IPkxp1NB3lhRlPXS4c1/fLHH4cGx83DW+UQ/87iGp4aOMWydAjBwrsEOPnD0GXNnAxOV4aXzQzz7ex5/p5jZEMT+u/Jb6BY5gZTOdvh9uKLT7RhOSeVdurd4T3e7JCacPnXwkOyJDnZhQqKHXGvkTk/KQ3CYfKoP8IJ7yb3wED+ku8a8Px1b1VfQOKgiex5omdSQexRJZwASV0fas7qmwB9kexTNB1AlP6m6kSBO22ZBcbFAVT4sCvzFQCLDSIVIKr7/2N/yG/6bhrjuDAeDpK9FhZeieghMFPOulszqWGY1jqrRRmA7TMGsKB+oVIF2wYGFaw7wNl0bfWFhwEp2AwkEsaJykoAafAzY85IIdJ0XgJpuqyR4i9MKIcQFZTAAIQS5A4ecSNEGuUYN/BRsx/IGdoDC4aZT9nB7SRE1h1IINmD/0lhZna0SFmXdst0lzmhMQ38i+90CeZPlIjQvyFAP8py1EHDimGW6wGU4Twco0oJWkE1mrNHVVL0oszYEKMGrBBswfekuL82qLKnz+ju02aW7IqtK+kX1fP+RJ1gGthUunrFu5xH/aQsSBY5rhBq1wmgjW6lYDWkm6Af61Sq1qrqswWV48v0AGn4e5iA6VaDE06t5v1G168RPicQkCAAAA') format('woff2'),
+  url('iconfont.woff?t=1590732052374') format('woff'),
+  url('iconfont.ttf?t=1590732052374') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1590732052374#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-kaisuohuansuo:before {
+  content: "\e629";
+}
+
+.icon-ren:before {
+  content: "\e605";
+}
+

src/assets/iconfont/iconfont.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="kaisuohuansuo" unicode="&#58921;" d="M825.611627 412.588105 392.464533 412.588105 392.464533 584.672392c0 75.091232 61.095473 136.186705 136.186705 136.186705 75.096349 0 136.192845-61.095473 136.192845-136.186705 0-25.822109 20.935822-46.75793 46.75793-46.75793 25.822109 0 46.75793 20.935822 46.75793 46.75793 0 126.660748-103.047957 229.702566-229.708705 229.702566S298.948673 711.33314 298.948673 584.672392l0-172.084287-67.25373 0c-25.716708 0-46.75793-21.041222-46.75793-46.75793l0-363.974665c0-25.716708 21.041222-46.75793 46.75793-46.75793l593.916684 0c25.716708 0 46.75793 21.041222 46.75793 46.75793L872.369557 365.831198C872.369557 391.547907 851.328335 412.588105 825.611627 412.588105zM567.353702 189.571822l0-87.700411c0-20.890796-17.093307-37.984103-37.984103-37.984103l-1.430582 0c-20.890796 0-37.984103 17.093307-37.984103 37.984103l0 87.701434c-18.328437 12.419867-30.375821 33.411971-30.375821 57.219189 0 38.149878 30.92636 69.076238 69.075215 69.076238 38.149878 0 69.076238-30.92636 69.076238-69.076238C597.730547 222.983793 585.68214 201.992713 567.353702 189.571822z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="ren" unicode="&#58885;" d="M880.864 191.654c-56.813 25.397-141.118 90.818-265.945 113.298 31.924 34.36 56.084 88.097 80.937 151.754 14.403 36.893 11.935 68.343 11.935 113.121 0 33.073 6.193 86.156-1.97 115.329-27.533 98.59-97.1 125.79-178.61 125.79-81.577 0-151.229-27.328-178.71-126.087-8.097-29.083-1.888-82.044-1.888-115.037 0-44.875-2.422-76.432 12.019-113.383 25.044-63.984 48.854-117.644 80.655-151.86-123.826-22.89-207.498-87.822-263.95-113.138C58.523 139.055 57.95 81.704 57.95 81.704v-97.42l940.724 0.112v97.308s-0.547 57.548-117.809 109.95z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/store/index.js

@@ -47,7 +47,7 @@ export default new Vuex.Store({
         commit("SET_USERIFNO", []);
         removeToken();
         clearStore();
-        resolve()
+        resolve("您已被登出！")
           // })
           .catch(error => {
             reject(error);

src/views/common/login.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="wrap">
-    <form ref="loginForm" :model="loginForm">
-      <input type="text" v-model="loginForm.username" />
-      <input type="text" v-model="loginForm.password" />
-    </form>
-    <button @click="login_by_username">登陆</button>
+    <div class="loginInner">
+      <form ref="loginForm" :model="loginForm">
+        <input type="text" v-model="loginForm.username" />
+        <input type="text" v-model="loginForm.password" />
+      </form>
+      <button @click="login_by_username">登陆</button>
+    </div>
   </div>
 </template>
 
@@ -25,7 +27,7 @@ export default {
   },
   methods: {
     login_by_username() {
-      console.log("login" + this.loginForm);
+      // console.log("login" + this.loginForm);
       this.$store
         .dispatch("login_username", this.loginForm)
         .then(() => {
@@ -40,4 +42,18 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.wrap {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: pink;
+  .loginInner {
+    width: 350px;
+    height: 250px;
+    background: white;
+    border-radius: 5px;
+  }
+}
+</style>

src/views/module/layout.vue

@@ -1,11 +1,35 @@
 <template>
-  <div>
-    <router-view></router-view>
+  <div class="wrap clearfix">
+    <div class="left_bar">
+      <left-navbar />
+    </div>
+    <div class="right_content">
+      <layout-content />
+    </div>
   </div>
 </template>
 
 <script>
-export default {};
+import leftNavbar from "./layout_navbar";
+import layoutContent from "./layout_content";
+export default {
+  components: {
+    leftNavbar,
+    layoutContent
+  }
+};
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.wrap {
+  // display: flex;
+  .left_bar {
+    float: left;
+    width: 20%;
+  }
+  .right_content {
+    float: right;
+    width: 80%;
+  }
+}
+</style>

src/views/module/layout_content.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="wrap">
+    <div class="content_top">
+      <h3>星火燎原智慧课堂管理平台</h3>
+      <span @click="loginout">退出</span>
+    </div>
+    <div class="content_bottom">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    loginout() {
+      this.$store.dispatch("loginOut").then(res => {
+        this.$Message.error(res);
+        this.$router.push("/login");
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  // width: 100%;
+  .content_top {
+    // width: 100%;
+    padding: 0 20px;
+    height: 70px;
+    line-height: 70px;
+    background: #6098ff;
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    span {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/views/module/layout_navbar.vue

@@ -0,0 +1,87 @@
+<template>
+  <Collapse simple>
+    <Panel name="1">
+      史蒂夫·乔布斯
+      <p slot="content">
+        史蒂夫·乔布斯（Steve
+        Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
+      </p>
+    </Panel>
+    <Panel name="2">
+      斯蒂夫·盖瑞·沃兹尼亚克
+      <p slot="content">
+        斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
+        Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
+        Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
+      </p>
+    </Panel>
+    <Panel name="3">
+      乔纳森·伊夫
+      <p slot="content">
+        乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
+      </p>
+    </Panel>
+  </Collapse>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isCollapsed: false,
+      keepAliveList: [],
+      title: "Home",
+      showSettingPage: false,
+      showSuggestionPage: false,
+      menu: [
+        {
+          name: "主页",
+          to: "home",
+          icon: "md-apps",
+          children: []
+        },
+        {
+          name: "菜单分类1",
+          to: "user",
+          icon: "ios-create-outline",
+          children: [
+            {
+              name: "子菜单1",
+              to: "user"
+            },
+            {
+              name: "子菜单2",
+              to: "menu"
+            },
+            {
+              name: "子菜单3",
+              to: "shared_report"
+            }
+          ]
+        },
+        {
+          name: "菜单分类2",
+          to: "user2",
+          icon: "ios-archive-outline",
+          children: [
+            {
+              name: "子菜单2-1",
+              to: "firewall"
+            },
+            {
+              name: "子菜单2-2",
+              to: "navi_page"
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// .wrap {
+//   width: ;
+// }
+</style>