更改

src/components/Breadcrumb/index.vue

@@ -1,111 +0,0 @@
-<template>
-  <!-- <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb> -->
-  <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
-  <el-breadcrumb-item :to="{ path: '/' }" class="active">首页</el-breadcrumb-item>
-  <el-breadcrumb-item :to="{ path: '/log/log' }">日志</el-breadcrumb-item> -->
-<!-- </el-breadcrumb> -->
-<div class="flex">
-  <span class="addr active">首页</span>
-  <!-- <span> &gt;</span> -->
-  <span class="addr" @click="nextto('/log')">日志</span>
-</div>
-
-  
-</template>
-
-<script>
-import pathToRegexp from 'path-to-regexp'
-
-export default {
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    nextto(to){
-      this.$router.push({ path: to });
-    },
-    getBreadcrumb() {
-      // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
-
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
-      }
-
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
-    isDashboard(route) {
-      const name = route && route.name
-      if (!name) {
-        return false
-      }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
-    },
-    pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
-    },
-    handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
-      }
-      this.$router.push(this.pathCompile(path))
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-  margin-left: 8px;
-
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-.flex{
-  display: flex;
-}
-.addr{
-  margin: 15px 35px 0 0;
-  color: #333;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; 
-  font-weight: 700;
-  &:hover {
-        color: #409eff;
-        cursor: pointer;
-        // background-color: $subMenuHover !important;
-      }
-}
-.active{
-  color: #409eff;
-  cursor: text !important;
-  border-bottom: 3px solid #409eff;
-}
-</style>

src/layout/components/AppMain.vue

@@ -1,41 +0,0 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <router-view :key="key" />
-    </transition>
-  </section>
-</template>
-
-<script>
-
-export default {
-  name: 'AppMain',
-  computed: {
-    key() {
-      return this.$route.path
-    }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
- 
-  min-height: calc(100% - 50px);
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-}
-.fixed-header+.app-main {
-  padding-top: 50px;
-}
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>

src/layout/components/Navtitle.vue

@@ -138,48 +138,8 @@ export default {
       return name == this.name ? "active " : "";
     },
     nextto(to) {
-      this.$router.push({ path: to });
-    },
-    getBreadcrumb() {
-      // only show routes with meta.title
-      let matched = this.$route.matched.filter(
-        (item) => item.meta && item.meta.title
-      );
-      const first = matched[0];
-
-      if (!this.isDashboard(first)) {
-        matched = [{ path: "/dashboard", meta: { title: "首页" } }].concat(
-          matched
-        );
-      }
-
-      this.levelList = matched.filter(
-        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
-      );
-    },
-    isDashboard(route) {
-      const name = route && route.name;
-      if (!name) {
-        return false;
-      }
-      return (
-        name.trim().toLocaleLowerCase() === "Dashboard".toLocaleLowerCase()
-      );
-    },
-    pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route;
-      var toPath = pathToRegexp.compile(path);
-      return toPath(params);
-    },
-    handleLink(item) {
-      const { redirect, path } = item;
-      if (redirect) {
-        this.$router.push(redirect);
-        return;
-      }
-      this.$router.push(this.pathCompile(path));
-    },
+      this.$router.push({ name: to });
+    }
   },
 };
 </script>

src/layout/components/Statusbar.vue

@@ -19,8 +19,6 @@
 
 <script>
 import { mapGetters, mapActions, mapState } from "vuex";
-import Breadcrumb from "@/components/Breadcrumb";
-import Hamburger from "@/components/Hamburger";
 import { setToken, getToken, removeToken } from "@/utils/auth"; // get token from cookie
 export default {
   components: {},

src/layout/components/index.js

@@ -1,4 +1,3 @@
 export { default as Navtitle } from './Navtitle'
-export { default as AppMain } from './AppMain'
 export { default as Title } from './Title'
 export { default as Statusbar } from './Statusbar'

src/router/index.js

@@ -3,33 +3,6 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-/* Layout */
-
-
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
 export const constantRoutes = [{
     path: '/login',
     name: "/login",

src/views/dashboard/index.vue

@@ -498,7 +498,7 @@ export default {
     nextto(to, access = true) {
       console.log(to, access);
       if (access) {
-        this.$router.push({ path: to });
+        this.$router.push({name: to });
       }
     },
 

src/views/login/index.vue

@@ -5,7 +5,59 @@
 
     <div class="main1">
       <div class="login-frame">
-        <el-form
+        <div class="login-form">
+<div class="title-container">
+            <div class="title">
+              <span>登录</span>
+            </div>
+          </div>
+
+          <div>
+            <span class="svg-container" style="margin-left: 10px">
+              <svg-icon icon-class="user" />
+            </span>
+            <el-input
+              ref="user_name"
+              v-model="loginForm.user_name"
+              placeholder="帐户"
+              name="user_name"
+              type="text"
+              tabindex="1"
+              auto-complete="on"
+            />
+          </div>
+<div>
+
+
+        
+            <span class="svg-container" style="margin-left: 10px">
+              <svg-icon icon-class="password" />
+            </span>
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model="loginForm.password"
+              :type="passwordType"
+              placeholder="密码"
+              name="password"
+              tabindex="2"
+              auto-complete="on"
+              @input="oninput"
+              @keydown.enter.native="handleSubmit"
+            />
+          </div>
+
+          <button
+            class="a"
+            :class="{active:active}"
+            :loading="loading"
+            style="width: 100%; margin-top: 27px"
+            @click="handleSubmit"
+          >
+            登录
+          </button>        
+        </div>
+        <!-- <el-form
           ref="loginForm"
           :model="loginForm"
           :rules="loginRules"
@@ -67,7 +119,7 @@
           >
             登录
           </button>
-        </el-form>
+        </el-form> -->
       </div>
     </div>
   </div>
@@ -95,6 +147,7 @@ export default {
       }
     };
     return {
+      active:false,
       loginForm: {
         user_name: "",
         password: "",
@@ -134,17 +187,12 @@ export default {
       "set_loading",
       "statusInit",
     ]),
-
-    showPwd() {
-      if (this.passwordType === "password") {
-        this.passwordType = "";
-      } else {
-        this.passwordType = "password";
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus();
-      });
+    oninput(e){
+     
+      this.active = e !=""
+       console.log('input',e,this.active)
     },
+    
     handleSubmit(e) {
       console.log("开始登录", e);
       if (e.pointerType == "mouse" || e.code == "Enter") {
@@ -161,7 +209,7 @@ export default {
               console.log(this.$router);
               that.$router.push({ name: "/" });
               that.getUserInfo();
-            }, 1000);
+            }, 10000);
           }
         });
       }
@@ -292,15 +340,12 @@ $cursor: #fff;
   height: 38px;
   background-color: #aeaeae;
   border: 1px solid #dcdfe6;
-  border-radius: 5px;
+  border-radius: 4px;
 }
-.b {
-  font-size: 13px;
-  color: #fff;
-  height: 38px;
+.active {  
   background-color: #02a7f0;
-  border-radius: 3px;
-  border: 1px solid #dcdfe6;
+  // border-radius: 4px;
+  border: 1px solid #02a7f0;
   cursor: pointer;
 }
 .w {

tests/unit/components/Breadcrumb.spec.js

@@ -1,98 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils'
-import VueRouter from 'vue-router'
-import ElementUI from 'element-ui'
-import Breadcrumb from '@/components/Breadcrumb/index.vue'
-
-const localVue = createLocalVue()
-localVue.use(VueRouter)
-localVue.use(ElementUI)
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    children: [{
-      path: 'dashboard',
-      name: 'dashboard'
-    }]
-  },
-  {
-    path: '/menu',
-    name: 'menu',
-    children: [{
-      path: 'menu1',
-      name: 'menu1',
-      meta: { title: 'menu1' },
-      children: [{
-        path: 'menu1-1',
-        name: 'menu1-1',
-        meta: { title: 'menu1-1' }
-      },
-      {
-        path: 'menu1-2',
-        name: 'menu1-2',
-        redirect: 'noredirect',
-        meta: { title: 'menu1-2' },
-        children: [{
-          path: 'menu1-2-1',
-          name: 'menu1-2-1',
-          meta: { title: 'menu1-2-1' }
-        },
-        {
-          path: 'menu1-2-2',
-          name: 'menu1-2-2'
-        }]
-      }]
-    }]
-  }]
-
-const router = new VueRouter({
-  routes
-})
-
-describe('Breadcrumb.vue', () => {
-  const wrapper = mount(Breadcrumb, {
-    localVue,
-    router
-  })
-  it('dashboard', () => {
-    router.push('/dashboard')
-    const len = wrapper.findAll('.el-breadcrumb__inner').length
-    expect(len).toBe(1)
-  })
-  it('normal route', () => {
-    router.push('/menu/menu1')
-    const len = wrapper.findAll('.el-breadcrumb__inner').length
-    expect(len).toBe(2)
-  })
-  it('nested route', () => {
-    router.push('/menu/menu1/menu1-2/menu1-2-1')
-    const len = wrapper.findAll('.el-breadcrumb__inner').length
-    expect(len).toBe(4)
-  })
-  it('no meta.title', () => {
-    router.push('/menu/menu1/menu1-2/menu1-2-2')
-    const len = wrapper.findAll('.el-breadcrumb__inner').length
-    expect(len).toBe(3)
-  })
-  // it('click link', () => {
-  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
-  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
-  //   const second = breadcrumbArray.at(1)
-  //   console.log(breadcrumbArray)
-  //   const href = second.find('a').attributes().href
-  //   expect(href).toBe('#/menu/menu1')
-  // })
-  // it('noRedirect', () => {
-  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
-  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
-  //   const redirectBreadcrumb = breadcrumbArray.at(2)
-  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
-  // })
-  it('last breadcrumb', () => {
-    router.push('/menu/menu1/menu1-2/menu1-2-1')
-    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
-    const redirectBreadcrumb = breadcrumbArray.at(3)
-    expect(redirectBreadcrumb.contains('a')).toBe(false)
-  })
-})