5 年之前 · 504f6f0468
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
 
				     "eslint-plugin-vue": "^6.2.2",
			
 
				     "lint-staged": "^10.2.4",
			
 
				     "prettier": "^1.19.1",
			
 
				-    "sass": "^1.26.3",
			
 
				+    "sass": "^1.26.5",
			
 
				     "sass-loader": "^8.0.2",
			
 
				     "vue-cli-plugin-axios": "0.0.4",
			
 
				     "vue-cli-plugin-element": "^1.0.1",
			
--- a/public/index.html
+++ b/public/index.html
@@ -1,26 +1,31 @@
 
				 <!DOCTYPE html>
			
 
				 <html lang="en">
			
 
				   <head>
			
 
				-    <meta charset="utf-8">
			
 
				-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <meta charset="utf-8" />
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
			
 
				     <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
 
				-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+      <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>
			
 
				-    <!-- <script>
			
 
				+    <script>
			
 
				       var _hmt = _hmt || [];
			
 
				       (function() {
			
 
				+        var hmId = "xxxxx";
			
 
				         var hm = document.createElement("script");
			
 
				-        hm.src = "https://hm.baidu.com/hm.js?073680f0286d68512be67c90775789c9";
			
 
				+        hm.src = "https://hm.baidu.com/hm.js?" + hmId;
			
 
				         var s = document.getElementsByTagName("script")[0];
			
 
				         s.parentNode.insertBefore(hm, s);
			
 
				       })();
			
 
				-    </script> -->
			
 
				+    </script>
			
 
				     <!-- built files will be auto injected -->
			
 
				   </body>
			
 
				 </html>
			
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ import "./plugins/customComponents";
 
				 import "./filters";
			
 
				 import "./mixins/logout";
			
 
				 import "./plugins/element.js";
			
 
				+// 14KB JS & 0KB CSS: 7 svg icons
			
 
				 import "./plugins/vueAwesome";
			
 
				 import "./plugins/helpers";
			
 
				 
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,24 @@ Vue.use(VueRouter);
 
				 //   });
			
 
				 //   return props;
			
 
				 // }
			
 
				+const sampleRoutes = [
			
 
				+  {
			
 
				+    path: "/samples/Login_01",
			
 
				+    name: "Login_01",
			
 
				+    component: () =>
			
 
				+      import(
			
 
				+        /* webpackChunkName: "about" */ "../samples/Login_01/Login_01.vue"
			
 
				+      ),
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/samples/Layout_01",
			
 
				+    name: "Layout_01",
			
 
				+    component: () =>
			
 
				+      import(
			
 
				+        /* webpackChunkName: "about" */ "../samples/Layout_01/Layout_01.vue"
			
 
				+      ),
			
 
				+  },
			
 
				+];
			
 
				 
			
 
				 const routes = [
			
 
				   {
			
@@ -45,6 +63,7 @@ const routes = [
 
				     component: () =>
			
 
				       import(/* webpackChunkName: "about" */ "../views/About.vue"),
			
 
				   },
			
 
				+  ...sampleRoutes,
			
 
				   // {
			
 
				   //   path: "/xxx/:id",
			
 
				   //   component: XXX,
			
--- a/src/samples/BasicContainer/BasicContainer.vue
+++ b/src/samples/BasicContainer/BasicContainer.vue
@@ -0,0 +1,20 @@
 
				+<template>
			
 
				+  <div class="basic-container">
			
 
				+    <slot></slot>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "basic-container",
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+.basic-container {
			
 
				+  padding: 20px;
			
 
				+  margin-bottom: 20px;
			
 
				+  background-color: #fff;
			
 
				+  border-radius: 6px;
			
 
				+}
			
 
				+</style>
			
--- a/src/samples/Layout_01/Layout_01.vue
+++ b/src/samples/Layout_01/Layout_01.vue
@@ -0,0 +1,43 @@
 
				+<template>
			
 
				+  <div class="app-wrapper">
			
 
				+    <side-bar class="sidebar-container" />
			
 
				+    <div class="main-container">
			
 
				+      <nav-bar />
			
 
				+      <app-main />
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import AppMain from "./components/AppMain.vue";
			
 
				+import SideBar from "./components/SideBar.vue";
			
 
				+import NavBar from "./components/NavBar.vue";
			
 
				+
			
 
				+export default {
			
 
				+  name: "Layout_01",
			
 
				+  components: {
			
 
				+    NavBar,
			
 
				+    SideBar,
			
 
				+    AppMain,
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.app-wrapper {
			
 
				+  position: relative;
			
 
				+  height: 100%;
			
 
				+  width: 100%;
			
 
				+  &:after {
			
 
				+    content: "";
			
 
				+    display: table;
			
 
				+    clear: both;
			
 
				+  }
			
 
				+}
			
 
				+.main-container {
			
 
				+  min-height: 100vh;
			
 
				+  transition: margin-left 0.28s;
			
 
				+  margin-left: 256px;
			
 
				+  background-color: #f0f2f5;
			
 
				+}
			
 
				+</style>
			
--- a/src/samples/Layout_01/components/AppMain.vue
+++ b/src/samples/Layout_01/components/AppMain.vue
@@ -0,0 +1,14 @@
 
				+<template>
			
 
				+  <section class="app-main">
			
 
				+    <transition name="fade" mode="out-in">
			
 
				+      <!-- <router-view :key="key"></router-view> -->
			
 
				+      <router-view />
			
 
				+    </transition>
			
 
				+  </section>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "AppMain",
			
 
				+};
			
 
				+</script>
			
--- a/src/samples/Layout_01/components/NavBar.vue
+++ b/src/samples/Layout_01/components/NavBar.vue
@@ -0,0 +1,108 @@
 
				+<template>
			
 
				+  <el-menu class="navbar" mode="horizontal">
			
 
				+    <div class="user-profile-container" trigger="click">
			
 
				+      <div class="user-profile-content">
			
 
				+        <div class="menu-icons">
			
 
				+          <span class="menu-icon">
			
 
				+            <i class="el-icon-search icon" />
			
 
				+          </span>
			
 
				+          <span class="menu-icon">
			
 
				+            <i class="el-icon-message icon" />
			
 
				+          </span>
			
 
				+          <span class="menu-icon">
			
 
				+            <el-badge is-dot class="item">
			
 
				+              <i class="el-icon-bell icon" />
			
 
				+            </el-badge>
			
 
				+          </span>
			
 
				+        </div>
			
 
				+        <el-dropdown>
			
 
				+          <div class="user-profile-body">
			
 
				+            <img
			
 
				+              class="user-avatar"
			
 
				+              src="https://img.alicdn.com/tfs/TB1ONhloamWBuNjy1XaXXXCbXXa-200-200.png"
			
 
				+            />
			
 
				+            <span class="user-name">淘小宝</span>
			
 
				+          </div>
			
 
				+          <el-dropdown-menu slot="dropdown" class="user-dropdown">
			
 
				+            <router-link to="/">
			
 
				+              <el-dropdown-item>我的主页</el-dropdown-item>
			
 
				+            </router-link>
			
 
				+            <router-link to="/">
			
 
				+              <el-dropdown-item>个人设置</el-dropdown-item>
			
 
				+            </router-link>
			
 
				+            <el-dropdown-item>
			
 
				+              <span style="display:block;" @click="logout">退出</span>
			
 
				+            </el-dropdown-item>
			
 
				+          </el-dropdown-menu>
			
 
				+        </el-dropdown>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </el-menu>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "NavBar",
			
 
				+  methods: {
			
 
				+    logout() {
			
 
				+      // console.log('Logout');
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.navbar {
			
 
				+  height: 64px;
			
 
				+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
			
 
				+  .user-profile-container {
			
 
				+    position: absolute;
			
 
				+    right: 20px;
			
 
				+    cursor: pointer;
			
 
				+    .user-profile-content {
			
 
				+      display: flex;
			
 
				+      padding: 20px 0;
			
 
				+    }
			
 
				+    .menu-icons {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      .menu-icon {
			
 
				+        padding: 0 12px;
			
 
				+        .icon {
			
 
				+          display: inline-block;
			
 
				+          font-size: 18px;
			
 
				+          text-align: center;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .user-profile-body {
			
 
				+      position: relative;
			
 
				+      display: flex;
			
 
				+      flex-direction: row;
			
 
				+      align-items: center;
			
 
				+      justify-content: center;
			
 
				+      text-align: center;
			
 
				+      padding-right: 14px;
			
 
				+    }
			
 
				+    .user-avatar {
			
 
				+      width: 24px;
			
 
				+      height: 24px;
			
 
				+      margin: 0 8px 0 12px;
			
 
				+      border-radius: 4px;
			
 
				+    }
			
 
				+    .user-name {
			
 
				+      color: rgba(0, 0, 0, 0.65);
			
 
				+    }
			
 
				+    .user-department {
			
 
				+      font-size: 12px;
			
 
				+      color: rgba(102, 102, 102, 0.65);
			
 
				+    }
			
 
				+    .el-icon-caret-bottom {
			
 
				+      position: absolute;
			
 
				+      right: 0;
			
 
				+      top: 13px;
			
 
				+      font-size: 12px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/samples/Layout_01/components/ScrollBar.vue
+++ b/src/samples/Layout_01/components/ScrollBar.vue
@@ -0,0 +1,62 @@
 
				+<template>
			
 
				+  <div
			
 
				+    ref="scrollContainer"
			
 
				+    class="scroll-container"
			
 
				+    @wheel.prevent="handleScroll"
			
 
				+  >
			
 
				+    <div
			
 
				+      ref="scrollWrapper"
			
 
				+      :style="{ top: top + 'px' }"
			
 
				+      class="scroll-wrapper"
			
 
				+    >
			
 
				+      <slot />
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+const delta = 15;
			
 
				+export default {
			
 
				+  name: "ScrollBar",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      top: 0,
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    handleScroll(e) {
			
 
				+      const eventDelta = e.wheelDelta || -e.deltaY * 3;
			
 
				+      const $container = this.$refs.scrollContainer;
			
 
				+      const $containerHeight = parseInt($container.offsetHeight, 10);
			
 
				+      const $wrapper = this.$refs.scrollWrapper;
			
 
				+      const $wrapperHeight = parseInt($wrapper.offsetHeight, 10);
			
 
				+      if (eventDelta > 0) {
			
 
				+        this.top = Math.min(0, this.top + eventDelta);
			
 
				+      } else if ($containerHeight - delta < $wrapperHeight) {
			
 
				+        if (this.top < -(delta + ($wrapperHeight - $containerHeight))) {
			
 
				+          // this.top = this.top;
			
 
				+        } else {
			
 
				+          this.top = Math.max(
			
 
				+            this.top + eventDelta,
			
 
				+            $containerHeight - $wrapperHeight - delta
			
 
				+          );
			
 
				+        }
			
 
				+      } else {
			
 
				+        this.top = 0;
			
 
				+      }
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.scroll-container {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background-color: #00142a;
			
 
				+  .scroll-wrapper {
			
 
				+    position: absolute;
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/samples/Layout_01/components/SideBar.vue
+++ b/src/samples/Layout_01/components/SideBar.vue
@@ -0,0 +1,117 @@
 
				+<template>
			
 
				+  <scroll-bar>
			
 
				+    <div class="logo">
			
 
				+      <img
			
 
				+        src="https://img.alicdn.com/tfs/TB13UQpnYGYBuNjy0FoXXciBFXa-242-134.png"
			
 
				+        width="40"
			
 
				+      />
			
 
				+      <span class="site-name">ADMIN LITE</span>
			
 
				+    </div>
			
 
				+    <el-menu
			
 
				+      :show-timeout="200"
			
 
				+      mode="vertical"
			
 
				+      background-color="#00142a"
			
 
				+      text-color="hsla(0, 0%, 100%, .65)"
			
 
				+      active-text-color="#409EFF"
			
 
				+    >
			
 
				+      <template v-for="item in asideMenuConfig">
			
 
				+        <router-link v-if="!item.children" :to="item.path" :key="item.name">
			
 
				+          <el-menu-item :index="item.path">
			
 
				+            <i v-if="item.icon" :class="item.icon" />
			
 
				+            <span v-if="item.name" slot="title">{{ item.name }}</span>
			
 
				+          </el-menu-item>
			
 
				+        </router-link>
			
 
				+
			
 
				+        <el-submenu v-else :index="item.name || item.path" :key="item.name">
			
 
				+          <template slot="title">
			
 
				+            <i v-if="item && item.icon" :class="item.icon" />
			
 
				+            <span v-if="item && item.name" slot="title">{{ item.name }}</span>
			
 
				+          </template>
			
 
				+          <template v-for="child in item.children.filter(v => !v.hidden)">
			
 
				+            <router-link :to="item.path + child.path" :key="child.name">
			
 
				+              <el-menu-item :index="item.path + child.path">
			
 
				+                <span v-if="child && child.name" slot="title">{{
			
 
				+                  child.name
			
 
				+                }}</span>
			
 
				+              </el-menu-item>
			
 
				+            </router-link>
			
 
				+          </template>
			
 
				+        </el-submenu>
			
 
				+      </template>
			
 
				+    </el-menu>
			
 
				+  </scroll-bar>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { asideMenuConfig } from "./menu";
			
 
				+import ScrollBar from "./ScrollBar";
			
 
				+export default {
			
 
				+  name: "SideBar",
			
 
				+  components: { ScrollBar },
			
 
				+  props: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      asideMenuConfig,
			
 
				+    };
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.logo {
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  height: 64px;
			
 
				+  line-height: 64px;
			
 
				+  background: #002140;
			
 
				+  color: #fff;
			
 
				+  text-align: center;
			
 
				+  font-size: 20px;
			
 
				+  font-weight: 600;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+.site-name {
			
 
				+  margin-left: 10px;
			
 
				+}
			
 
				+.sidebar-container {
			
 
				+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
			
 
				+  transition: width 0.28s;
			
 
				+  width: 256px !important;
			
 
				+  height: 100%;
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  bottom: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 1001;
			
 
				+  overflow: hidden;
			
 
				+  a {
			
 
				+    display: inline-block;
			
 
				+    width: 100%;
			
 
				+  }
			
 
				+  .el-menu {
			
 
				+    padding-top: 16px;
			
 
				+    width: 100% !important;
			
 
				+    border: none;
			
 
				+  }
			
 
				+  .el-submenu .el-menu-item {
			
 
				+    min-width: 256px !important;
			
 
				+    padding-left: 48px !important;
			
 
				+    background-color: #000c17 !important;
			
 
				+    &:hover {
			
 
				+      color: #fff !important;
			
 
				+    }
			
 
				+  }
			
 
				+  .el-menu-item,
			
 
				+  .el-submenu .el-menu-item {
			
 
				+    &.is-active {
			
 
				+      background-color: #188fff !important;
			
 
				+      color: #fff !important;
			
 
				+    }
			
 
				+  }
			
 
				+  .el-submenu__title i {
			
 
				+    font-size: 16px;
			
 
				+    color: rgba(255, 255, 255, 0.65);
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/samples/Layout_01/components/menu.js
+++ b/src/samples/Layout_01/components/menu.js
@@ -0,0 +1,108 @@
 
				+// 菜单配置
			
 
				+// headerMenuConfig：头部导航配置
			
 
				+// asideMenuConfig：侧边导航配置
			
 
				+
			
 
				+const headerMenuConfig = [];
			
 
				+
			
 
				+const asideMenuConfig = [
			
 
				+  {
			
 
				+    path: "/dashboard",
			
 
				+    name: "Dashboard",
			
 
				+    icon: "el-icon-menu",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/analysis",
			
 
				+        name: "分析页",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/monitor",
			
 
				+        name: "监控页",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/workplace",
			
 
				+        name: "工作台",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/table",
			
 
				+    name: "表格页",
			
 
				+    icon: "el-icon-date",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/basic",
			
 
				+        name: "基础表格",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/fixed",
			
 
				+        name: "固定表格",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/form",
			
 
				+    name: "表单页",
			
 
				+    icon: "el-icon-edit-outline",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/basic",
			
 
				+        name: "典型表单",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/signup",
			
 
				+        name: "注册表单",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/charts",
			
 
				+    name: "图表页",
			
 
				+    icon: "el-icon-picture-outline",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/line",
			
 
				+        name: "折线图",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/histogram",
			
 
				+        name: "柱状图",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/bar",
			
 
				+        name: "条形图",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/profile",
			
 
				+    name: "详情页",
			
 
				+    icon: "el-icon-tickets",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/success",
			
 
				+        name: "基础详情页",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/fail",
			
 
				+        name: "失败",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    path: "/result",
			
 
				+    name: "结果页",
			
 
				+    icon: "el-icon-circle-check-outline",
			
 
				+    children: [
			
 
				+      {
			
 
				+        path: "/success",
			
 
				+        name: "成功",
			
 
				+      },
			
 
				+      {
			
 
				+        path: "/fail",
			
 
				+        name: "失败",
			
 
				+      },
			
 
				+    ],
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+export { headerMenuConfig, asideMenuConfig };
			
--- a/src/samples/Login_01/Login_01.vue
+++ b/src/samples/Login_01/Login_01.vue
@@ -0,0 +1,241 @@
 
				+<template>
			
 
				+  <div class="user-login">
			
 
				+    <div
			
 
				+      class="user-login-bg"
			
 
				+      :style="{ 'background-image': `url(${backgroundImage})` }"
			
 
				+    ></div>
			
 
				+    <div class="content-wrapper">
			
 
				+      <h2 class="slogan">
			
 
				+        欢迎使用 <br />
			
 
				+        ICE 内容管理系统
			
 
				+      </h2>
			
 
				+      <div class="form-container">
			
 
				+        <h4 class="form-title">登录</h4>
			
 
				+        <el-form ref="form" :model="user" label-width="0">
			
 
				+          <div class="form-items">
			
 
				+            <el-row class="form-item">
			
 
				+              <el-col>
			
 
				+                <el-form-item
			
 
				+                  prop="username"
			
 
				+                  :rules="[
			
 
				+                    { required: true, message: '会员名/邮箱/手机号不能为空' },
			
 
				+                  ]"
			
 
				+                >
			
 
				+                  <div class="form-line">
			
 
				+                    <i class="el-icon-user input-icon"></i>
			
 
				+                    <el-input
			
 
				+                      placeholder="会员名/邮箱/手机号"
			
 
				+                      v-model="user.username"
			
 
				+                    ></el-input>
			
 
				+                  </div>
			
 
				+                </el-form-item>
			
 
				+              </el-col>
			
 
				+            </el-row>
			
 
				+            <el-row class="form-item">
			
 
				+              <el-col>
			
 
				+                <el-form-item
			
 
				+                  prop="password"
			
 
				+                  :rules="[{ required: true, message: '密码不能为空' }]"
			
 
				+                >
			
 
				+                  <div class="form-line">
			
 
				+                    <i class="el-icon-lock input-icon"></i>
			
 
				+                    <el-input
			
 
				+                      type="password"
			
 
				+                      placeholder="密码"
			
 
				+                      v-model="user.password"
			
 
				+                    ></el-input>
			
 
				+                  </div>
			
 
				+                </el-form-item>
			
 
				+              </el-col>
			
 
				+            </el-row>
			
 
				+            <el-row class="form-item">
			
 
				+              <el-col>
			
 
				+                <el-form-item>
			
 
				+                  <el-checkbox class="checkbox">记住账号</el-checkbox>
			
 
				+                </el-form-item>
			
 
				+              </el-col>
			
 
				+            </el-row>
			
 
				+            <el-row class="form-item">
			
 
				+              <el-button
			
 
				+                type="primary"
			
 
				+                class="submit-btn"
			
 
				+                size="small"
			
 
				+                @click="submitBtn"
			
 
				+              >
			
 
				+                登 录
			
 
				+              </el-button>
			
 
				+            </el-row>
			
 
				+          </div>
			
 
				+          <el-row class="tips">
			
 
				+            <a href="/" class="link">
			
 
				+              立即注册
			
 
				+            </a>
			
 
				+            <span class="line">|</span>
			
 
				+            <a href="/" class="link">
			
 
				+              忘记密码
			
 
				+            </a>
			
 
				+          </el-row>
			
 
				+        </el-form>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// import BasicContainer from "@/samples/BasicContainer/BasicContainer";
			
 
				+const backgroundImage =
			
 
				+  "https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png";
			
 
				+export default {
			
 
				+  // components: { BasicContainer },
			
 
				+  name: "Login_01",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      backgroundImage: backgroundImage,
			
 
				+      user: {
			
 
				+        username: "",
			
 
				+        password: "",
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  created() {},
			
 
				+  methods: {
			
 
				+    submitBtn() {
			
 
				+      this.$refs["form"].validate(valid => {
			
 
				+        if (valid) {
			
 
				+          this.$message({
			
 
				+            message: "登录成功",
			
 
				+            type: "success",
			
 
				+          });
			
 
				+        }
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="scss" scoped>
			
 
				+.user-login {
			
 
				+  .user-login-bg {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    background-size: cover;
			
 
				+  }
			
 
				+  .el-checkbox__label {
			
 
				+    color: #999;
			
 
				+    font-size: 13px;
			
 
				+  }
			
 
				+  .content-wrapper {
			
 
				+    position: absolute;
			
 
				+    top: -100px;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    max-width: 1080px;
			
 
				+    margin: 0 auto;
			
 
				+    display: flex;
			
 
				+    justify-content: space-around;
			
 
				+    align-items: center;
			
 
				+    .slogan {
			
 
				+      text-align: center;
			
 
				+      color: blue;
			
 
				+      font-size: 36px;
			
 
				+      letter-spacing: 2px;
			
 
				+      line-height: 48px;
			
 
				+    }
			
 
				+  }
			
 
				+  .form-container {
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    flex-direction: column;
			
 
				+    padding: 30px 40px;
			
 
				+    background-color: #fff;
			
 
				+    border-radius: 6px;
			
 
				+    box-shadow: 1px 1px 2px #eee;
			
 
				+  }
			
 
				+  .el-form-item {
			
 
				+    margin-bottom: 15px;
			
 
				+  }
			
 
				+  .form-Item {
			
 
				+    position: relative;
			
 
				+    flex-direction: column;
			
 
				+  }
			
 
				+  .form-line {
			
 
				+    position: relative;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    &:after {
			
 
				+      content: "";
			
 
				+      position: absolute;
			
 
				+      bottom: 3px;
			
 
				+      left: 0;
			
 
				+      width: 100%;
			
 
				+      box-sizing: border-box;
			
 
				+      border-width: 1px;
			
 
				+      border-style: solid;
			
 
				+      border-top: 0;
			
 
				+      border-left: 0;
			
 
				+      border-right: 0;
			
 
				+      border-color: #dcdcdc;
			
 
				+      border-radius: 0;
			
 
				+    }
			
 
				+  }
			
 
				+  .el-input {
			
 
				+    width: 240px;
			
 
				+    // FIXME: 此处css没有生效
			
 
				+    input {
			
 
				+      border: none;
			
 
				+      margin: 0;
			
 
				+      padding-left: 10px;
			
 
				+      font-size: 13px;
			
 
				+    }
			
 
				+  }
			
 
				+  .form-title {
			
 
				+    margin: 0 0 20px;
			
 
				+    text-align: center;
			
 
				+    color: #3080fe;
			
 
				+    letter-spacing: 12px;
			
 
				+  }
			
 
				+  .input-icon {
			
 
				+    color: #999;
			
 
				+  }
			
 
				+  .checkbox {
			
 
				+    margin-left: 5px;
			
 
				+  }
			
 
				+  .submit-btn {
			
 
				+    margin-bottom: 25px;
			
 
				+    width: 100%;
			
 
				+    background: #3080fe;
			
 
				+    border-radius: 28px;
			
 
				+  }
			
 
				+  .tips {
			
 
				+  }
			
 
				+  .link {
			
 
				+    color: #999;
			
 
				+    text-decoration: none;
			
 
				+    font-size: 13px;
			
 
				+  }
			
 
				+  .line {
			
 
				+    color: #dcd6d6;
			
 
				+    margin: 0 8px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 720px) {
			
 
				+  .user-login {
			
 
				+    .content-wrapper {
			
 
				+      margin: 20px auto;
			
 
				+      top: 40px;
			
 
				+      max-width: 300px;
			
 
				+      display: block;
			
 
				+      .slogan {
			
 
				+        color: #666;
			
 
				+        font-size: 22px;
			
 
				+        line-height: 30px;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,18 @@
 
				 <template>
			
 
				   <div class="home">
			
 
				-    <img alt="Vue logo" src="../assets/logo.png" />
			
 
				-    <HelloWorld msg="Welcome to Your Vue.js App" />
			
 
				+    <h1 class="text-center">
			
 
				+      以下为部分样例页面
			
 
				+    </h1>
			
 
				+
			
 
				+    <ul>
			
 
				+      <li><router-link to="/samples/login_01">登录页_01</router-link></li>
			
 
				+      <li><router-link to="/samples/layout_01">Layout_01</router-link></li>
			
 
				+    </ul>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-// @ is an alias to /src
			
 
				-import HelloWorld from "@/components/HelloWorld.vue";
			
 
				-
			
 
				 export default {
			
 
				   name: "Home",
			
 
				-  components: {
			
 
				-    HelloWorld,
			
 
				-  },
			
 
				 };
			
 
				 </script>
			
--- a/yarn.lock
+++ b/yarn.lock
@@ -9330,7 +9330,7 @@ sass-loader@^8.0.2:
 
				     schema-utils "^2.6.1"
			
 
				     semver "^6.3.0"
			
 
				 
			
 
				-sass@^1.26.3:
			
 
				+sass@^1.26.5:
			
 
				   version "1.26.5"
			
 
				   resolved "https://registry.npm.taobao.org/sass/download/sass-1.26.5.tgz#2d7aecfbbabfa298567c8f06615b6e24d2d68099"
			
 
				   integrity sha1-LXrs+7q/ophWfI8GYVtuJNLWgJk=