first commit

.eslintrc.js

     '@vue/standard'
   ],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-console': 'off',
+    'no-debugger': 'off',
+    'no-trailing-spaces': 0,
+    indent: 0,
+    'space-before-function-paren': 0
   },
   parserOptions: {
     parser: 'babel-eslint'

package-lock.json

       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.6.tgz",
         "resolve": "^1.4.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.10",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.10.tgz",
+          "integrity": "sha1-iluDkfjMcBPacDQRzltYVwYwDX8="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.4",
       "integrity": "sha1-4oYhwbNsDEVW/ccLT0p/4WoYZuM=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.12.0.tgz",
+      "integrity": "sha1-qJO8Ea5Pfbt+nVQWBvI+ZD8THuQ=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.1",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.1.tgz",
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1571055779038&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
       "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.12.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.12.0.tgz?cache=0&sync_timestamp=1564641434608&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.12.0.tgz",
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-cli-plugin-element": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-element/download/vue-cli-plugin-element-1.0.1.tgz",
+      "integrity": "sha1-NOWPtls2z1mvrxT1AyiOXleLFVQ=",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",

package.json

   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "element-ui": "^2.4.5",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuex": "^3.0.1"
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/App.vue

 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <router-view></router-view>
   </div>
 </template>
 
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
+<script>
+export default {
+  name: 'app'
 }
+</script>
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
+<style>
 </style>

src/assets/css/gobal.css

+a {
+    text-decoration: none;;
+}

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Login.vue

+<template>
+    <div class="bg">
+       <div class="welcome">
+           <img src="../assets/images/pt1.png" alt="">
+       </div>
+       <div class="box1">
+           <div class="input1" >用户名</div>
+           <div class="input2">密码</div>
+           <el-checkbox class="checkbox1">记住密码</el-checkbox>
+           <router-link class="login" to="./user">登录</router-link>
+            <p>
+           <span>还没有账号?<a>立即注册</a></span>
+       </p>
+       </div>
+       
+      
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {}
+    }
+   
+}
+</script>
+<style scoped>
+a {
+    text-decoration: none;
+}
+.bg {
+    /* position: relative;
+    margin: 20px auto;
+    min-width:1280px;
+    background:url(../assets/images/bg1.png) no-repeat; */
+     position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            min-width: 800px;
+            z-index: -10;
+            zoom: 1;
+            background: url(../assets/images/bg1.png) no-repeat center 0;
+            background-color: #fff;
+            background-size: cover;
+            -webkit-background-size: cover;
+            -o-background-size: cover;
+             background-position: center 0; 
+    
+}
+.welcome {
+    width: 286px;
+    height: 30.5px;
+    position: absolute;
+    top: 203px;
+    left: 496px;
+}
+.box1 {
+    position: relative;
+    width: 434.5px;
+    height: 369px;
+    position: absolute;
+    top: 261px;
+    left: 422px;
+    background:url(../assets/images/2.png);
+    color: #5D5D5D;
+}
+.input1,.input2 {
+    position: relative;
+    box-sizing: border-box;
+    width: 368.5px;
+    height: 47px;
+    background-color: #fff;
+    position: absolute;
+    left: 33px;
+    line-height: 47px;
+    padding-left: 54.5px;
+    font-size: 15px;
+    
+}
+.input1 {
+    top: 54.5px;
+}
+.input1::before {
+    position:absolute;
+    top: 12.5px;
+    left: 19.5px;
+    content: "";
+    width: 24.95px;
+    height: 22px;
+    background:url(../assets/images/User.png);
+}
+.input2 {
+    top: 123px;
+}
+.input2::before {
+     position:absolute;
+    top: 12.5px;
+    left: 19.5px;
+    content: "";
+    width: 24.95px;
+    height: 22px; 
+    background:url(../assets/images/Key.png);
+}
+.checkbox1 {
+    position: absolute;
+    top: 200px;
+    left: 32.5px;
+}
+.login {
+    position: absolute;
+    top: 253px;
+    left: 33px;
+    display: block;
+    width: 369.5px;
+    height: 52.5px;
+    background-color:#529BFF;
+    text-align: center;
+    line-height: 52.5px;
+    font-size: 20px;
+    color: #fff;
+
+}
+.box1 p {
+    position: absolute;
+    bottom: 20px;
+    left: 31px;
+    font-size: 14px;
+
+}
+.box1 p a {
+    color: rgb(0, 153, 255)
+}
+</style>

src/components/User.vue

+<template>
+    <div class="box">
+        <div class="boxHead">
+            <div class="pic">
+              
+            </div>
+            <div class="logo"></div>
+            <div class="logoeng"></div>
+            <div class="user"></div>
+            <span class="name">你好</span>
+            <i class="el-icon-caret-bottom"></i>
+        </div>
+        <div class="boxBody">
+    <!-- 左侧菜单栏 -->
+    <div class="card1">
+        <el-menu
+      >
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-menu"></i>
+          <span class="text">基础信息</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="1-1">班级管理</el-menu-item>
+          <el-menu-item index="1-2">学生管理</el-menu-item>
+          <el-menu-item index="1-3">教师管理</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+          </el-menu>
+        <el-menu
+      >
+      <el-submenu >
+        <template slot="title">
+          <i class="el-icon-receiving"></i>
+          <span class="text">试题库</span>
+        </template>
+      </el-submenu>
+          </el-menu>
+        <el-menu
+      >
+      <el-submenu>
+        <template slot="title">
+          <i class="el-icon-document"></i>
+          <span class="text">作业管理</span>
+        </template>
+       
+      </el-submenu>
+      <el-submenu >
+        <template slot="title">
+          <i class="el-icon-s-marketing"></i>
+          <span class="text">阶段学情</span>
+        </template>
+       
+      </el-submenu>
+          </el-menu>
+    </div>
+    <!-- 卡片视图 -->
+    <el-card class="card2">
+    <el-row :gutter="40" >
+        <el-col :span="4">
+        <el-checkbox label="未毕业" name="type" style="fontSize:7px"></el-checkbox>
+        </el-col>
+        <el-col :span="4" >
+        <el-checkbox label="已毕业" name="type"></el-checkbox>
+        </el-col>
+         <el-col :span="7">
+        <el-select v-model="value" placeholder="所属学科" size="mini" style="padding:0" >
+            <el-option >
+             </el-option>
+        </el-select>
+        </el-col>
+        <el-col :span="3">
+    <el-date-picker
+      type="date"
+      placeholder="选择日期" size="mini" style="width:60px">
+    </el-date-picker>
+        </el-col>
+        <el-col :span="2">
+            <el-button type="primary" size='mini'>搜索</el-button>
+        </el-col>
+        <!-- <el-col :span="2">
+            <el-button type="primary">添加</el-button>
+        </el-col> -->
+      </el-row>
+      <el-row>
+          <el-table border stripe style="fontSize:7px">
+        <el-table-column
+      type="selection"
+      width="40px">
+    </el-table-column>
+        <el-table-column label="序号" prop="" width="47px" ></el-table-column>
+        <el-table-column label="班级名称" prop="" width="75px"></el-table-column>
+        <el-table-column label="人数" prop="" width="60px"></el-table-column>
+        <el-table-column label="主负责人" prop="" width="80px"></el-table-column>
+        <el-table-column label="学科" prop="" width="60px"></el-table-column>
+        <el-table-column label="教师" prop="" width="50px"></el-table-column>
+        <el-table-column label="操作" prop="" width="50px">
+            <template>
+               
+            </template>
+        </el-table-column>
+          </el-table>
+      </el-row>
+      <!-- 分页区域-->
+       <el-pagination
+        background
+      :current-page="1"
+      :page-sizes="[100, 200, 300, 400]"
+      :page-size="1"
+      layout=" prev, pager, next,total,jumper"
+      :total="3">
+    </el-pagination>
+    </el-card>
+    </div>
+    </div>
+</template>
+<script >
+
+    
+</script>
+<style scoped>
+.pic {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    top: 7.8px;
+    left: 9px;
+    background-color: pink;
+   
+}
+.logo {
+    position: absolute;
+    width: 76px;
+    height: 13.5px;
+    top: 12.5px;
+    left: 43.5px;
+    background-color: pink;
+}
+.logoeng {
+   
+}
+.name {
+    position: absolute;
+    display: inline-block;
+    height: 9px;
+    line-height: 9px;
+    top: 19px;
+    left: 864px;
+    font-size: 9px;
+    color: #fff;
+}
+.boxHead i {
+    position: absolute;
+    top: 15px;
+    left: 921.5px;
+    color: #fff;
+}
+.user {
+    position: absolute;
+    top: 12px;
+    left: 835px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background-color: pink;
+}
+.pic img {
+    width: 100%;
+  
+}
+.box {
+    position: relative;
+    background-color: #EEF2F8;
+    width: 960px;
+    height: 540px;
+    margin: 0 auto;
+}
+.boxHead {
+ width:960px;
+height:44px;
+background:rgba(82,155,255,1);
+}
+.boxBody {
+    margin: 10px auto 0;
+    width: 650px;
+    height: 441.5px;
+    
+
+}
+
+.card1 {
+    float: left;
+   overflow: hidden;
+    width: 123px;
+    height: 441.5px;
+    font-size: 7px;
+    background-color: #fff;
+    
+}
+.el-menu-item {
+    font-size: 7px;
+}
+
+.card2 {
+     float: right;
+width:503px;
+height:442px;
+background:rgba(255,255,255,1);
+
+}
+.el-menu {
+    border: none;
+    
+}
+.text {
+    font-size: 7px;
+}
+.card2 {
+    width: 503px;
+    height: 100%;
+}
+.el-table-column {
+    font-size: 7px!important;
+}
+.el-table {
+    margin-top: 10px;
+}
+.el-pagination {
+    margin-top: 10px;
+}
+</style>

src/main.js

 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './plugins/element.js'
 
 Vue.config.productionTip = false
 

src/plugins/element.js

+import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+
+Vue.use(Element)

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+
+import Login from '../components/Login.vue'
+import User from '../components/User.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
+  { path: '/', redirect: '/login' },
   {
-    path: '/',
-    name: 'home',
-    component: Home
+    path: '/login',
+    component: Login
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/user',
+    component: User
   }
 ]
 

vue.config.js

+module.exports = {
+  lintOnSave: false
+}