09/09 13:37

筛选组件完成

.eslintignore

@@ -2,3 +2,5 @@ build/*.js
 src/assets
 public
 dist
+*.vue
+

.eslintrc.js

@@ -14,185 +14,6 @@ module.exports = {
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
-    "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
-    "vue/name-property-casing": ["error", "PascalCase"],
-    "vue/no-v-html": "off",
-    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
+   
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue-admin-template",
+  "name": "dy-admin-manager",
   "version": "4.2.1",
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "Pan <panfree23@gmail.com>",

src/App.vue

@@ -9,3 +9,16 @@ export default {
   name: 'App'
 }
 </script>
+<style >
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  background-color: #eef4f9;
+}
+/* 出去多选框中的关闭按钮 */
+.el-select__tags .el-tag__close.el-icon-close {
+  display: none;
+}
+</style>

src/components/Breadcrumb/index.vue

@@ -32,8 +32,8 @@ export default {
       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: 'Dashboard' }}].concat(matched)
+      if (!this.isboard(first)) {
+        matched = [{ path: '/board', meta: { title: 'Dashboard' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -58,6 +58,9 @@ export default {
         return
       }
       this.$router.push(this.pathCompile(path))
+    },
+    isboard(){
+      
     }
   }
 }

src/components/Pagination/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="{'hidden':hidden}"
+       class="pagination-container">
+    <el-pagination :background="background"
+                   :current-page.sync="currentPage"
+                   :page-size.sync="pageSize"
+                   :layout="layout"
+                   :page-sizes="pageSizes"
+                   :total="total"
+                   v-bind="$attrs"
+                   @size-change="handleSizeChange"
+                   @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 10
+    },
+    pageSizes: {
+      type: Array,
+      default () {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total,sizes,->,prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get () {
+        return this.page
+      },
+      set (val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get () {
+        return this.limit
+      },
+      set (val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange (val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange (val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/layout/components/AppMain.vue

@@ -1,6 +1,7 @@
 <template>
   <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
+    <transition name="fade-transform"
+                mode="out-in">
       <router-view :key="key" />
     </transition>
   </section>
@@ -10,7 +11,7 @@
 export default {
   name: 'AppMain',
   computed: {
-    key() {
+    key () {
       return this.$route.path
     }
   }
@@ -25,8 +26,8 @@ export default {
   position: relative;
   overflow: hidden;
 }
-.fixed-header+.app-main {
-  padding-top: 50px;
+.fixed-header + .app-main {
+  padding-top: 80px;
 }
 </style>
 

src/layout/components/Navbar.vue

@@ -1,29 +1,40 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb class="breadcrumb-container" />
+    <!-- <breadcrumb class="breadcrumb-container" /> -->
 
     <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
+      <div class="msginfo">
+        <img src="@/assets/images/base/base-bell.png"
+             alt="">
+        <div class="active"></div>
+      </div>
+      <el-dropdown class="avatar-container"
+                   trigger="click">
+
         <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <img src="@/assets/images/base/placehorder-icon.png"
+               class="user-avatar" />
+          <!-- <i class="el-icon-caret-bottom" /> -->
+          <span>XXX老師</span>
         </div>
-        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-menu slot="dropdown"
+                          class="user-dropdown">
           <router-link to="/">
-            <el-dropdown-item>
-              Home
-            </el-dropdown-item>
+            <el-dropdown-item>Home</el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+          <a target="_blank"
+             href="https://github.com/PanJiaChen/vue-admin-template/">
             <el-dropdown-item>Github</el-dropdown-item>
           </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+          <a target="_blank"
+             href="https://panjiachen.github.io/vue-element-admin-site/#/">
             <el-dropdown-item>Docs</el-dropdown-item>
           </a>
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+            <span style="display:block;"
+                  @click="logout">Log Out</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -32,51 +43,57 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
+import { mapGetters } from "vuex";
+// import Breadcrumb from '@/components/Breadcrumb'
+// import Hamburger from '@/components/Hamburger'
 
 export default {
   components: {
-    Breadcrumb,
-    Hamburger
+    // Breadcrumb,
+    // Hamburger
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
+    ...mapGetters(["sidebar", "avatar"])
+  },
+  mounted () {
+    // 手动加入
+    this.toggleSideBar();
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+    toggleSideBar () {
+      this.$store.dispatch("app/toggleSideBar");
     },
-    async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    async logout () {
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 80px;
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
-
+  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
+  h2 {
+    font-size: 18px;
+    line-height: 80px;
+    margin: 0 0 0 30px;
+    display: inline-block;
+  }
   .hamburger-container {
-    line-height: 46px;
+    line-height: 80px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -85,14 +102,34 @@ export default {
   }
 
   .right-menu {
+    min-width: 204px;
     float: right;
     height: 100%;
-    line-height: 50px;
-
+    line-height: 80px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     &:focus {
       outline: none;
     }
-
+    .msginfo {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-right: 34px;
+      position: relative;
+      cursor: pointer;
+      .active {
+        position: absolute;
+        width: 11px;
+        height: 11px;
+        background-color: #f97215;
+        border-radius: 50%;
+        top: 20px;
+        right: -4px;
+      }
+    }
     .right-menu-item {
       display: inline-block;
       padding: 0 8px;
@@ -103,26 +140,38 @@ export default {
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      height: 80px;
+      margin-right: 42px;
+      cursor: pointer;
 
       .avatar-wrapper {
-        margin-top: 5px;
         position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        span {
+          margin-left: 15px;
+          font-size: 16px;
+          font-weight: 500;
+          color: rgba(68, 68, 68, 1);
+        }
 
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
+          width: 50px;
+          height: 50px;
+          border: 3px solid #f0f2f5;
+          border-radius: 50%;
         }
 
         .el-icon-caret-bottom {

src/layout/components/Sidebar/Link.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from "@/utils/validate";
 
 export default {
   props: {
@@ -20,17 +20,17 @@ export default {
     linkProps(url) {
       if (isExternal(url)) {
         return {
-          is: 'a',
+          is: "a",
           href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
+          target: "_blank",
+          rel: "noopener"
+        };
       }
       return {
-        is: 'router-link',
+        is: "router-link",
         to: url
-      }
+      };
     }
   }
-}
+};
 </script>

src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container"
+       :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
-      </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+      <router-link key="collapse"
+                   class="sidebar-logo-link"
+                   to="/">
+        <img src="@/assets/images/base/logo.png"
+             class="sidebar-logo" />
       </router-link>
     </transition>
   </div>
@@ -21,12 +20,6 @@ export default {
       type: Boolean,
       required: true
     }
-  },
-  data() {
-    return {
-      title: 'Vue Admin Template',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
-    }
   }
 }
 </script>
@@ -42,11 +35,12 @@ export default {
 }
 
 .sidebar-logo-container {
+  // top:10px;
   position: relative;
   width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  height: 81px;
+  line-height: 81px;
+  // background: #2b2f3a;
   text-align: center;
   overflow: hidden;
 
@@ -55,10 +49,14 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 170px;
+      // height: 210px;
+      vertical-align: middle;
+    }
+    & .sidebar-logo-bottom {
+      width: 170px;
+      height: 85px;
       vertical-align: middle;
-      margin-right: 12px;
     }
 
     & .sidebar-title {

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,20 @@
 <template>
   <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
+    <logo v-if="showLogo"
+          :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+      <el-menu :default-active="activeMenu"
+               :collapse="isCollapse"
+               :background-color="variables.menuBg"
+               :text-color="variables.menuText"
+               :unique-opened="false"
+               :active-text-color="variables.menuActiveText"
+               :collapse-transition="false"
+               mode="vertical">
+        <sidebar-item v-for="route in routes"
+                      :key="route.path"
+                      :item="route"
+                      :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -30,10 +32,10 @@ export default {
     ...mapGetters([
       'sidebar'
     ]),
-    routes() {
+    routes () {
       return this.$router.options.routes
     },
-    activeMenu() {
+    activeMenu () {
       const route = this.$route
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
@@ -42,14 +44,15 @@ export default {
       }
       return path
     },
-    showLogo() {
+    showLogo () {
       return this.$store.state.settings.sidebarLogo
     },
-    variables() {
+    variables () {
       return variables
     },
-    isCollapse() {
+    isCollapse () {
       return !this.sidebar.opened
+
     }
   }
 }

src/layout/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+  <div :class="classObj"
+       class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened"
+         class="drawer-bg"
+         @click="handleClickOutside" />
     <sidebar class="sidebar-container" />
     <div class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
@@ -24,16 +27,16 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
-    sidebar() {
+    sidebar () {
       return this.$store.state.app.sidebar
     },
-    device() {
+    device () {
       return this.$store.state.app.device
     },
-    fixedHeader() {
+    fixedHeader () {
       return this.$store.state.settings.fixedHeader
     },
-    classObj() {
+    classObj () {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
@@ -43,7 +46,7 @@ export default {
     }
   },
   methods: {
-    handleClickOutside() {
+    handleClickOutside () {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
     }
   }
@@ -51,43 +54,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
-    &.mobile.openSidebar{
-      position: fixed;
-      top: 0;
-    }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
-
-  .fixed-header {
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
   }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+.main-container {
+  padding: 15px 25px 0 15px;
+  box-sizing: border-box;
+}
 </style>

src/main.js

@@ -4,7 +4,7 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
 
 import '@/styles/index.scss' // global css
 

src/router/index.js

@@ -42,19 +42,45 @@ export const constantRoutes = [
     component: () => import('@/views/404'),
     hidden: true
   },
-
   {
     path: '/',
+    redirect: '/main',
+    component: Layout,
+    children: [
+      {
+        path: 'main',
+        name: 'main',
+        component: () => import('@/views/main/index'),
+        meta: { title: '首页' }
+      }
+    ]
+  },
+  {
+    path: '/teamDetail',
+    component: Layout,
+    children: [
+      {
+        path: 'teamDetail',
+        name: 'teamDetail',
+        component: () => import('@/views/teamDetail/index'),
+        meta: { title: '乐团详情' }
+      }
+    ]
+  },
+  {
+    path: '/teamBuild',
     component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
-    }]
+    children: [
+      {
+        path: 'teamBuild',
+        name: 'teamBuild',
+        component: () => import('@/views/teamBuild/index'),
+        meta: { title: '创建乐团' }
+      }
+    ]
   },
 
+
   {
     path: '/example',
     component: Layout,
@@ -66,13 +92,13 @@ export const constantRoutes = [
         path: 'table',
         name: 'Table',
         component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
+        meta: { title: 'Table' }
       },
       {
         path: 'tree',
         name: 'Tree',
         component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
+        meta: { title: 'Tree' }
       }
     ]
   },
@@ -85,7 +111,7 @@ export const constantRoutes = [
         path: 'index',
         name: 'Form',
         component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
+        meta: { title: 'Form' }
       }
     ]
   },
@@ -154,7 +180,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
+        meta: { title: 'External Link' }
       }
     ]
   },
@@ -172,7 +198,7 @@ const createRouter = () => new Router({
 const router = createRouter()
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
+export function resetRouter () {
   const newRouter = createRouter()
   router.matcher = newRouter.matcher // reset router
 }

src/settings.js

@@ -1,16 +1,16 @@
 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: '大雅乐盟后台管理系统',
 
   /**
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false
+  sidebarLogo: true
 }

src/store/modules/app.js

@@ -10,7 +10,8 @@ const state = {
 
 const mutations = {
   TOGGLE_SIDEBAR: state => {
-    state.sidebar.opened = !state.sidebar.opened
+    // state.sidebar.opened = !state.sidebar.opened
+    state.sidebar.opened = true;
     state.sidebar.withoutAnimation = false
     if (state.sidebar.opened) {
       Cookies.set('sidebarStatus', 1)
@@ -29,13 +30,13 @@ const mutations = {
 }
 
 const actions = {
-  toggleSideBar({ commit }) {
+  toggleSideBar ({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
-  closeSideBar({ commit }, { withoutAnimation }) {
+  closeSideBar ({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },
-  toggleDevice({ commit }, device) {
+  toggleDevice ({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   }
 }

src/styles/variables.scss

@@ -1,15 +1,15 @@
 // sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
+$menuText:#80BBB7;
+$menuActiveText:#fff;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
-$menuHover:#263445;
+$menuBg:#13817A;
+$menuHover:#13817A;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+$subMenuBg:#0E605B;
+$subMenuHover:#0E605B;
 
-$sideBarWidth: 210px;
+$sideBarWidth: 225px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/utils/scroll-to.js

@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

src/views/login/index.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      auto-complete="on"
+      label-position="left"
+    >
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">大雅乐盟后台管理系统</h3>
       </div>
 
       <el-form-item prop="username">
@@ -41,96 +47,107 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button
+        :loading="loading"
+        type="primary"
+        style="width:100%;margin-bottom:30px;"
+        @click.native.prevent="handleLogin"
+      >登录</el-button>
 
       <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
+        <span>password: any</span>
       </div>
-
     </el-form>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+import { validUsername } from "@/utils/validate";
 
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
+        callback(new Error("Please enter the correct user name"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
+        callback(new Error("The password can not be less than 6 digits"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       loginForm: {
-        username: 'admin',
-        password: '111111'
+        username: "admin",
+        password: "111111"
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+        username: [
+          { required: true, trigger: "blur", validator: validateUsername }
+        ],
+        password: [
+          { required: true, trigger: "blur", validator: validatePassword }
+        ]
       },
       loading: false,
-      passwordType: 'password',
+      passwordType: "password",
       redirect: undefined
-    }
+    };
   },
   watch: {
     $route: {
       handler: function(route) {
-        this.redirect = route.query && route.query.redirect
+        this.redirect = route.query && route.query.redirect;
       },
       immediate: true
     }
   },
   methods: {
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
+      if (this.passwordType === "password") {
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || '/' })
-            this.loading = false
-          }).catch(() => {
-            this.loading = false
-          })
+          this.loading = true;
+          this.$store
+            .dispatch("user/login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" });
+              this.loading = false;
+            })
+            .catch(() => {
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     }
   }
-}
+};
 </script>
 
 <style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -173,9 +190,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
 .login-container {
   min-height: 100%;

src/views/main/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="m-conainer">
+    <h2>乐团列表</h2>
+    <div class="m-core">
+      <el-button type="primary"
+                 class="newBand">
+        新建乐团
+      </el-button>
+      <el-form :inline="true"
+               class="topForm"
+               v-model="topForm">
+        <el-form-item>
+          <el-select v-model="topForm.school">
+            <el-option v-for="(item,index) in schools"
+                       :key="index"
+                       :label="item.text"
+                       :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- 多选 -->
+        <el-form-item>
+          <el-select class='multiple'
+                     v-model="topForm.status"
+                     multiple
+                     collapse-tags>
+            <el-option v-for="(item,index) in nowStatus"
+                       :key="index"
+                       :label="item.text"
+                       :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="searchWrap">
+        <p>查询条件:</p>
+        <div class="searchItem"
+             @click="closeSearch(item)"
+             v-for="(item,index) in searchLsit">
+          {{ item.key }}
+          <i class="el-icon-close"></i>
+        </div>
+      </div>
+      <div class="tableWrap">
+        <el-table style="width: 100%"
+                  :data='tableData'>
+          <el-table-column prop="num"
+                           align='center'
+                           label="乐团编号">
+          </el-table-column>
+          <el-table-column prop="name"
+                           align='center'
+                           label="乐团名称">
+          </el-table-column>
+          <el-table-column prop="status"
+                           align='center'
+                           label="乐团状态">
+          </el-table-column>
+          <el-table-column prop="type"
+                           align='center'
+                           label="收费类型">
+          </el-table-column>
+          <el-table-column prop="teacher"
+                           align='center'
+                           label="教务老师">
+          </el-table-column>
+          <el-table-column prop="captain"
+                           align='center'
+                           label="乐团团长">
+          </el-table-column>
+          <el-table-column prop="captain"
+                           align='center'
+                           label="成团人数">
+          </el-table-column>
+          <el-table-column prop="readers"
+                           align='center'
+                           label="在读人数">
+          </el-table-column>
+          <el-table-column prop="course"
+                           align='center'
+                           label="当前课时">
+          </el-table-column>
+          <el-table-column prop="timer"
+                           align='center'
+                           label="成团时间">
+          </el-table-column>
+          <el-table-column prop="handle"
+                           align='center'
+                           width='200px'
+                           label="操作">
+          </el-table-column>
+        </el-table>
+        <!-- 分页器 -->
+        <!-- 分页 -->
+        <pagination :total="rules.total"
+                    :page.sync="rules.page"
+                    :limit.sync="rules.limit"
+                    :page-sizes="rules.page_size"
+                    @pagination="getList" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+import { truncate } from 'fs';
+export default {
+  name: "Main",
+  data () {
+    return {
+      topForm: {
+        school: '',
+        status: [],
+      },
+      schools: [{ // 学校数组
+        value: 1, text: '张三团'
+      }, {
+        value: 2, text: '李四团'
+      }],
+      nowStatus: [{ // 状态数组
+        value: 1, text: '缴费'
+      },
+      {
+        value: 2, text: '未缴费'
+      }, {
+        value: 3, text: '缴费中'
+      }],
+      searchLsit: [], // 存储选择后的数组
+      tableData: [], // table数据
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      }
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    },
+    setSearchList (obj) {
+      // 
+      // 没有相同的key=>添加这个对象
+      // 有相同的key => 替换这个对象
+      if (obj.type == 1) {
+        let flag = false;
+        this.searchLsit = this.searchLsit.map(item => {
+          if (item.id == obj.id) {
+            item = obj;
+            flag = true;
+          }
+          return item;
+        })
+        if (!flag) {
+          this.searchLsit.push(obj)
+        }
+      } else {
+        let flag = false;
+        this.searchLsit = this.searchLsit.map(item => {
+          if (item.key == obj.key) {
+            // 多选框的再次点击=> 等于 就是删除
+            item = obj;
+            flag = true;
+          }
+          return item;
+        })
+        if (!flag) {
+          this.searchLsit.push(obj)
+        }
+      }
+
+    },
+    closeSearch (item) {
+      // 1.删除search里的元素
+      if (item.type == 1) {
+        for (let some in this.searchLsit) {
+          if (this.searchLsit[some].id == item.id) {
+            this.searchLsit.splice(some, 1);
+          }
+        }
+        // 2.清空对应元素所对应的的值
+        this.topForm[item.id] = '';
+      } else {
+        for (let i = 0; i < this.topForm[item.id].length; i++) {
+          if (this.topForm[item.id][i] == item.value) {
+            this.topForm[item.id].splice(i, 1);
+          }
+        }
+        // 处理search
+        for (let some in this.searchLsit) {
+          if (this.searchLsit[some].value == item.value && this.searchLsit[some].id == item.id) {
+            this.searchLsit.splice(some, 1);
+          }
+          // id: 'school', key: this.schools[item].text, value: val, type: 1 
+        }
+
+
+      }
+    }
+
+  },
+  watch: {
+    chioseSchool (val) {
+      if (val != '') {
+        // 遍历获取文字
+        for (let item in this.schools) {
+          if (this.schools[item].value == val) {
+            this.setSearchList({ id: 'school', key: this.schools[item].text, value: val, type: 1 })
+          }
+        }
+      }
+    },
+    chioseStauts (val, oldval) {
+      //  这里取出来是数组 [1,2,3]    添加  删除  修改
+      if (val != '') {
+        // 遍历获取文字
+        for (let i = 0; i < val.length; i++) {
+          for (let item in this.nowStatus) {
+            if (this.nowStatus[item].value == val[i] && val.length > oldval.length) {
+              this.setSearchList({ id: 'status', key: this.nowStatus[item].text, value: val[i], type: 2 })
+            }
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    chioseSchool () {
+      return this.topForm.school
+    },
+    chioseStauts () {
+      return this.topForm.status
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.select {
+  font-size: 14px;
+}
+.m-conainer {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    position: relative;
+  }
+  .m-core {
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    padding: 20px 0;
+    .newBand {
+      margin-bottom: 20px;
+      background-color: #14928a;
+      border: 1px solid #14928a;
+      cursor: pointer;
+    }
+    select {
+      border: none;
+    }
+  }
+  .searchWrap {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(119, 119, 119, 1);
+    height: 30px;
+    margin-bottom: 30px;
+    p {
+      font-size: 16px;
+      padding-left: 4px;
+    }
+    .searchItem {
+      margin-left: 20px;
+      position: relative;
+      box-sizing: border-box;
+      min-width: 116px;
+      padding: 0 18px;
+      height: 30px;
+      line-height: 30px;
+      background: rgba(246, 246, 246, 1);
+      border-radius: 15px;
+      color: #777;
+      font-size: 14px;
+      .el-icon-close {
+        position: absolute;
+        right: 5px;
+        top: 8px;
+      }
+    }
+  }
+}
+</style>
+<style >
+.el-form-item__content {
+  font-size: 16px;
+}
+.el-select {
+  width: 100px;
+}
+.multiple.el-select {
+  width: 150px;
+}
+</style>

src/views/teamBuild/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class='cb-container'>
+    <h2>
+      <div class='squrt'></div> 建团申请
+    </h2>
+    <div class="cb-core">
+      <!-- 面包屑导航 -->
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">基本信息</el-breadcrumb-item>
+        <el-breadcrumb-item>声部设置</el-breadcrumb-item>
+        <el-breadcrumb-item>财务设置</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'teamBuild'
+}
+</script>
+<style lang="scss">
+.cb-container {
+  padding: 10px 30px 30px;
+  h2 {
+    height: 40px;
+    line-height: 40px;
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 10px;
+    .squrt {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 40px;
+      width: 20px;
+      background-color: #14928a;
+    }
+  }
+  .cb-core {
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    padding: 20px 40px;
+  }
+}
+</style>

src/views/teamDetail/components/classList.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="c-container">
+    <el-form :inline="true"
+             class="topFrom"
+             v-model="topFrom">
+      <el-form-item label="声部数量:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+      <el-form-item label="合奏班数量:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+      <el-form-item label="在读人数:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+      <el-form-item label="退团人数:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- 搜索标题 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item label="班级名称">
+        <el-select v-model="searchForm.name">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="课程类型">
+        <el-select v-model="searchForm.status">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-input placeholder="请输入搜索信息"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   icon='el-icon-search'>搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align='center'
+                         label="班级名称">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="课程类型">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="主教老师">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="助教老师">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="当前课次">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="在读人数">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="退团人数">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="退团人数">
+          <template slot-scope="scope">
+            <div>
+              <el-button type='text'>添加学员</el-button>
+              <el-button type='text'>老师修改</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  data () {
+    return {
+      topFrom: {
+        someClass: '111',
+        someClass1: 'hahahahh '
+      },
+      searchForm: {
+        name: '',
+        status: ''
+      },
+      tableList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.c-container {
+  .topFrom {
+    margin: 20px 30px 0;
+    width: 800px;
+  }
+  .searchForm {
+    margin: 0 30px;
+  }
+}
+</style>

src/views/teamDetail/components/courseList.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class='cl-container'>
+    <el-form :inline="true"
+             class="topFrom"
+             v-model="topFrom">
+      <el-form-item label="合奏1班进度:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+      <el-form-item label="包含班级:">
+        <div>{{ topFrom.someClass1 }}</div>
+      </el-form-item>
+    </el-form>
+    <el-form :inline="true"
+             style='margin-top:0;'
+             class="topFrom"
+             v-model="topFrom">
+      <el-form-item label="合奏1班进度:">
+        <el-input :disabled="true"
+                  v-model="topFrom.someClass"></el-input>
+      </el-form-item>
+      <el-form-item label="包含班级:">
+        <div>{{ topFrom.someClass1 }}</div>
+      </el-form-item>
+    </el-form>
+    <!-- 搜索类型 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item label="班级名称">
+        <el-select v-model="searchForm.classname">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="课程状态">
+        <el-select v-model="searchForm.classStatus">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style='margin-left:50px;'>
+        <el-input placeholder="请输入搜索信息"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   icon='el-icon-search'>搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align='center'
+                         label="学员姓名">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="学员状态">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="年级班级">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="性别">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="报名专业">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="调剂专业">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="乐器来源">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="联系电话">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="所在班级">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="实缴总额">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="操作">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         size="small">在读</el-button>
+              <el-button type="text"
+                         size="small">暂停</el-button>
+              <el-button type="text"
+                         size="small">退团</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  data () {
+    return {
+      topFrom: {
+        someClass: '111',
+        someClass1: 'hahahahh '
+      },
+      searchForm: {
+        classname: '',
+        classStatus: ''
+      },
+      tableList: [],
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.cl-container {
+  .topFrom {
+    margin: 20px 30px 0;
+    .classlist {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      ul {
+        li {
+          list-style: none;
+        }
+      }
+    }
+  }
+  .searchForm {
+    margin: 0 30px;
+  }
+}
+</style>

src/views/teamDetail/components/studentList.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class='stu-container'>
+    <el-form :inline="true"
+             class='topFrom'
+             v-model="topFrom">
+      <el-form-item label="预计招生:">
+        <el-input v-model="topFrom.expect"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="在读人数:">
+        <el-input v-model="topFrom.expect"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="实收总额:">
+        <el-input v-model="topFrom.allmoney"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="实际招生:">
+        <el-input v-model="topFrom.students"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="退团人数:">
+        <el-input v-model="topFrom.signout"
+                  :disabled="true"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- 搜索类型 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item label="学员状态">
+        <el-select v-model="searchForm.status">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="合奏班">
+        <el-select v-model="searchForm.all">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="单技课班">
+        <el-select v-model="searchForm.single">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item style='margin-left:50px;'>
+        <el-input placeholder="请输入搜索信息"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   icon='el-icon-search'>搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align='center'
+                         label="学员姓名">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="学员状态">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="年级班级">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="性别">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="报名专业">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="调剂专业">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="乐器来源">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="联系电话">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="所在班级">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="实缴总额">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="操作">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         size="small">在读</el-button>
+              <el-button type="text"
+                         size="small">暂停</el-button>
+              <el-button type="text"
+                         size="small">退团</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  data () {
+    return {
+      topFrom: { // 顶部的禁选框集合
+        expect: '2', // 预期招生
+        studing: '5', // 在读人数
+        allmoney: '100', //实收总额
+        students: '5', // 实际招生人数
+        signout: '10', // 退团总数
+      },
+      searchForm: { // 搜索框
+        status: '1', // 学员状态
+        all: '2', // 合奏班
+        single: '4' // 单技课
+      },
+      tableList: [], //
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.stu-container {
+  .topFrom {
+    margin: 20px 30px 0;
+    width: 1000px;
+  }
+  .searchForm {
+    margin: 0 30px;
+  }
+}
+</style>

src/views/teamDetail/components/teacherList.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class='t-container'>
+    <el-form :inline="true"
+             class='topFrom'
+             v-model="topFrom">
+      <el-form-item label="主教老师:">
+        <el-input v-model="topFrom.core"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="全职老师:">
+        <el-input v-model="topFrom.fulltime"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="课酬总计:">
+        <el-input v-model="topFrom.allmoney"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="助教老师:">
+        <el-input v-model="topFrom.assistant"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="兼职老师:">
+        <el-input v-model="topFrom.parttimer"
+                  :disabled="true"></el-input>
+      </el-form-item>
+      <el-form-item label="乐团团长:">
+        <el-input v-model="topFrom.captain"
+                  :disabled="true"></el-input>
+      </el-form-item>
+    </el-form>
+    <!-- 搜索类型 -->
+    <el-form :inline="true"
+             class="searchForm"
+             v-model="searchForm">
+      <el-form-item label="学员状态">
+        <el-select v-model="searchForm.status">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="合奏班">
+        <el-select v-model="searchForm.all">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="单技课班">
+        <el-select v-model="searchForm.single">
+          <el-option label="哈哈哈"
+                     value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-input placeholder="请输入搜索信息"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary"
+                   icon='el-icon-search'>搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <div class="tableWrap">
+      <el-table :data='tableList'>
+        <el-table-column align='center'
+                         label="老师编号">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师姓名">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师职位">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师类型">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师状态">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="调剂专业">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="执教班级">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="老师课酬">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="出清次数">
+        </el-table-column>
+        <el-table-column align='center'
+                         label="操作">
+          <template slot-scope="scope">
+            <div>
+              <el-button type="text"
+                         size="small">全职</el-button>
+              <el-button type="text"
+                         size="small">兼职</el-button>
+              <el-button type="text"
+                         size="small">全职试用</el-button>
+              <el-button type="text"
+                         size="small">兼职试用</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="rules.total"
+                  :page.sync="rules.page"
+                  :limit.sync="rules.limit"
+                  :page-sizes="rules.page_size"
+                  @pagination="getList" />
+    </div>
+  </div>
+</template>
+<script>
+import pagination from '@/components/Pagination/index'
+export default {
+  data () {
+    return {
+      topFrom: { // 顶部的禁选框集合
+        core: '2', // 主教老师
+        fulltime: '5', // 全职老师
+        allmoney: '100', //课酬总计
+        assistant: '5', // 助教老师
+        parttimer: '10', // 兼职老师
+        captain: '10' //乐团团长
+      },
+      searchForm: { // 搜索框
+        status: '1', // 学员状态
+        all: '2', // 合奏班
+        single: '4' // 单技课
+      },
+      tableList: [], //
+      rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      },
+    }
+  },
+  components: {
+    pagination
+  },
+  methods: {
+    getList () {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scope>
+.t-container {
+  .topFrom {
+    margin: 20px 30px 0;
+    width: 1000px;
+  }
+  .searchForm {
+    margin: 0 30px;
+  }
+}
+</style>

src/views/teamDetail/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class='td-container'>
+    <h2>
+      武汉小学乐团
+      <div class="term">第一学期</div>
+      <div class="term active">第一学期</div>
+    </h2>
+    <div class="td-core">
+      <p class='msg'>乐团状态:开团中</p>
+      <!-- navMenu -->
+      <el-tabs v-model="activeName"
+               type="card"
+               @tab-click="handleClick">
+        <el-tab-pane label="基本信息"
+                     name="1">
+        </el-tab-pane>
+        <el-tab-pane label="老师列表"
+                     name="2">
+          <teacherList />
+        </el-tab-pane>
+        <el-tab-pane label="学员列表"
+                     name="3">
+          <studentList />
+        </el-tab-pane>
+        <el-tab-pane label="班级详情"
+                     name="4">
+          <classList />
+        </el-tab-pane>
+        <el-tab-pane label="课表详情"
+                     name="5">
+
+        </el-tab-pane>
+        <el-tab-pane label="基本信息"
+                     name="6">
+          <courseList />
+        </el-tab-pane>
+        <el-tab-pane label="课酬调整"
+                     name="7">
+        </el-tab-pane>
+      </el-tabs>
+      <!-- <div class="contentWrap">
+        <keep-alive>
+          <transition name="fade"
+                      mode="out-in">
+            <studentList v-if="activeName == 3" />
+            <teacherList v-if="activeName == 2" />
+            <courseList v-if="activeName == 4" />
+            <classList v-if="activeName == 5" />
+          </transition>
+        </keep-alive>
+      </div> -->
+    </div>
+  </div>
+</template>
+<script>
+import studentList from '@/views/teamDetail/components/studentList'
+import teacherList from '@/views/teamDetail/components/teacherList'
+import courseList from '@/views/teamDetail/components/courseList'
+import classList from '@/views/teamDetail/components/classList'
+export default {
+  data () {
+    return {
+      activeName: '2',
+    }
+  },
+  methods: {
+    handleClick (val) {
+      this.activeIndex = val;
+    }
+  },
+  components: {
+    studentList,
+    teacherList,
+    courseList,
+    classList
+  }
+}
+</script>
+<style lang="scss" scoped>
+.td-container {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 18px 95px 55px 60px;
+  h2 {
+    height: 48px;
+    line-height: 48px;
+    position: relative;
+    padding-left: 30px;
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .td-core {
+    background-color: #fff;
+    min-height: calc(100vh - 160px);
+    padding: 0 40px;
+    .msg {
+      text-align: right;
+    }
+  }
+  .term {
+    height: 32px;
+    line-height: 32px;
+    border-radius: 24px;
+    width: 100px;
+    color: #14928a;
+    border: 1px solid rgba(20, 146, 138, 1);
+    font-size: 14px;
+    text-align: center;
+    margin-right: 12px;
+    &:nth-child(1) {
+      margin-left: 47px;
+    }
+  }
+  .term.active {
+    color: #fff;
+    background-color: #14928a;
+  }
+}
+</style>
+<style >
+.el-tabs__item.is-active {
+  color: #14928a;
+  font-size: 14px;
+  font-weight: 600;
+}
+.el-tabs__item:hover {
+  color: #14928a;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>

vue.config.js

@@ -24,7 +24,7 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: '/',
+  publicPath: './',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',