首页及部分样式

build/utils.js

@@ -54,12 +54,35 @@ exports.cssLoaders = function (options) {
       return ['vue-style-loader'].concat(loaders)
     }
   }
+  function lessResourceLoader() {
+    var loaders = [
+        cssLoader,
+        'less-loader',
+        {
+            loader: 'sass-resources-loader',
+            options: {
+                resources: [
+                    path.resolve(__dirname, '../src/style/global.less'),
+                ]
+            }
+                    }
+    ];
+    if (options.extract) {
+        return ExtractTextPlugin.extract({
+            use: loaders,
+            fallback: 'vue-style-loader'
+        })
+    } else {
+        return ['vue-style-loader'].concat(loaders)
+    }
+}
 
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
+    // less: generateLoaders('less'),
+    less: lessResourceLoader(),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),

config/index.js

@@ -9,7 +9,7 @@ module.exports = {
 
     // Paths
     assetsSubDirectory: 'static',
-    assetsPublicPath: './',
+    assetsPublicPath: '/',
     proxyTable: {
       '/mall': {
         target: "http://192.168.110.93/chnmuseum-party/",

package-lock.json

@@ -9495,6 +9495,127 @@
       "dev": true,
       "optional": true
     },
+    "sass-resources-loader": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-2.1.1.tgz",
+      "integrity": "sha512-/KrD5mEBTj3ZQ49thKSThhpv1OFhc82JbWA0bmv9yANRuPIlQrydNpZG82jdy4pEWY0QcQTGyd5OmCb3xVeZsw==",
+      "dev": true,
+      "requires": {
+        "async": "^3.2.0",
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "async": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
+          "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==",
+          "dev": true
+        },
+        "big.js": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+          "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

package.json

@@ -55,6 +55,7 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-resources-loader": "^2.1.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "style-loader": "^0.23.0",

src/App.vue

 <template>
   <div id="app">
-    <router-view v-if="isRouterAlive"/>
+     <top-bar></top-bar>
+     <breadcrumb v-if="$route.meta.showBreadcrumb"></breadcrumb>    
+     <!-- <div :class="'appContent' {}"> -->
+        <div v-bind:class="[{ hasBread: $route.meta.showBreadcrumb }, 'appContent']">
+          <router-view />
+     </div>
   </div>
 </template>
 
 <script>
+import topBar from '@/components/topbar'
+import breadcrumb from '@/components/breadcrumb'
 export default {
   name: 'App',
   provide () {
@@ -12,6 +19,7 @@ export default {
       reload: this.reload
     }
   },
+  components:{topBar,breadcrumb},
   data () {
     return {
       isRouterAlive: true
@@ -28,14 +36,23 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
   @import "common/fonts/font.css";
+  @import 'style/common.less';
   #app {
     width: 100%;
     height: 100%;
-    /*min-width: 998px;*/
-    background: #f5f5f5;
+    background: @page-bg-white;
     overflow: hidden;
     font-family: fz;
   }
+  .appContent{
+    width: 100%;
+    height: calc(100vh - 76px);
+    overflow:hidden;
+    padding: 20px;
+    &.hasBread{
+      height: calc(100vh - 112px);
+    }
+  }
 </style>

src/components/breadcrumb.vue

+<template>
+<div class="breadcrumb-wrapper">
+    <i class="icon-loc"></i>
+    <span class="breadcrumb__item active" @click="goIndex">
+        <span>首页</span>
+        <i class="el-icon-arrow-right"></i>
+    </span>
+    <span class="breadcrumb__item">
+        <span>{{currentPageName}}</span>
+    </span>    
+</div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            currentPageName:''
+        }
+    },
+    mounted(){
+        this.currentPageName = this.$route.meta.title
+    },
+    methods:{
+        goIndex(){
+            this.$router.push('/index')
+        }
+    },
+    watch:{
+        $route() {
+          this.currentPageName = this.$route.meta.title
+          console.log(this.$route)
+      }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.breadcrumb-wrapper{
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    padding-left: 20px;
+    background-color:@party-white;
+    .icon-loc{
+        display: inline-block;
+        width: 11px;
+        height: 16px;
+        background-color: @party-pink;
+        margin-right: 10px;
+        vertical-align: middle;
+    }
+    .breadcrumb__item{ 
+        span{
+            color: #151515;
+        }
+        &.active{
+            cursor: pointer;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/components/index.js

+import partyPagination from './pagination'
+import partyTable from './table'
+export {
+    partyPagination,
+    partyTable
+}
\ No newline at end of file

src/components/pagination.vue

+<template>
+    <div class="partyt-pagination">
+         <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page.sync="currentPage"
+            :page-size=pageSize
+            layout="prev, pager, next, jumper"
+            :total="total">
+         </el-pagination> 
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            currentPage:1
+        }
+    },
+    props:{
+        total:{
+            type:Number,
+            default:0
+        },
+        pageSize:{
+            type:Number,
+            default:20
+        }
+    },
+    methods:{
+        handleCurrentChange(val){
+            console.log('currentPage' + val + '页')
+        }
+    }
+}
+</script>
\ No newline at end of file

src/components/table.vue

+<template>
+    <div class="partyt-table">
+         <el-table :data="list" style="width: 100%">
+             <el-table-column 
+                v-for="(item,index) in feildList" 
+                :key="index"
+                :prop="item.prop"
+                :label="item.label">
+            </el-table-column>
+    </el-table>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+
+        }
+    },
+    props:{
+        list:{
+            type:Array,
+            default:()=>{return []}
+        },
+        feildList:{
+            type:Array,
+            default:()=>{return []}
+        }
+    }
+}
+</script>
\ No newline at end of file

src/components/topbar.vue

+<template>
+<div class="top-bar">
+    <div class="top-bar-left">
+        <div class="logo"></div>
+        <span class="title f24">中国国家博物馆建党百年展点播院线服务平台</span>
+    </div>
+    <div class="top-bar-right">
+         <div class="avatar"></div>
+         <div class="user-name f16 ">{{userName}}</div>
+         <div class="line"></div>
+         <div class="login-out"></div>
+    </div>
+</div>
+</template>
+<script>
+
+export default{
+    data() {
+        return{
+            userName:'admin,北京市政府'
+        }
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    }
+}
+</script>
+<style lang="less" scoped>
+.top-bar{
+    background-color: @party-red;
+    width: 100%;
+    height: 76px;
+    line-height: 76px;
+    padding:0 30px;
+    overflow:hidden;
+    .top-bar-left{
+        float: left;
+        .logo{
+            width: 46px;
+            height: 36px;
+            display: inline-block;
+            vertical-align: middle;
+            background-color: pink;
+        }
+        .title{
+           color: @party-white; 
+           vertical-align: middle;
+           padding-left: 16px;
+        }
+    }
+    .top-bar-right{
+        float: right;
+        > *{
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .avatar{
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: pink;
+        }
+        .user-name{
+            font-size: 16px;
+            line-height: 16px;
+            color: @party-white;
+        }
+        .line{
+            width: 2px;
+            height: 18px;
+            background-color: @party-white;
+            margin: 0 15px;
+        }
+        .login-out{
+            width: 20px;
+            height: 20px;
+            background-color: pink;
+        }
+
+    }
+}
+
+</style>

src/config/menu.js

+export const menuList = [
+    {
+      title:'内容管理',
+      menu:[
+          {
+              subtitle:'视频管理',
+              subMenu:[
+                  {label:'视频版权方管理', imgUrl:''},
+                  {label:'视频分类管理', imgUrl:''},
+                  {label:'视频内容管理', imgUrl:''},
+                  {label:'视频汇出', imgUrl:''}, 
+              ]
+          },
+          {
+              subtitle:'展板管理',
+              subMenu:[
+                  {label:'展板版权方管理', imgUrl:''},
+                  {label:'展板分类管理', imgUrl:''},
+                  {label:'展板内容管理', imgUrl:''},
+              ]
+          },
+          {
+              subtitle:'展板管理',
+              subMenu:[
+                  {label:'学习内容管理', imgUrl:''},
+                  {label:'互动管理', imgUrl:''}
+              ]
+          },
+      ]
+    },
+    {
+       title:'统计数据',
+        menu:[
+             {
+              subtitle:'统计图表',
+              subMenu:[
+                  {label:'统计概览', imgUrl:''},
+                  {label:'互动统计', imgUrl:''},
+                  {label:'趋势分析', imgUrl:''}
+              ]
+          },
+          {
+              subtitle:'统计账号',
+              subMenu:[
+                  {label:'统计账号管理', imgUrl:''}
+              ]
+          },
+         ]
+    },
+     {
+        title:'审核管理',
+         menu:[
+             {
+              subtitle:'内容及账号审核',
+              subMenu:[
+                  {label:'视频及展板审核', imgUrl:''},
+                  {label:'账号禁用审核', imgUrl:''}
+              ]
+          }
+         ]
+    },
+    {
+        title:'机顶盒管理',
+         menu:[
+             {
+              subtitle:'机顶盒信息及运维管理',
+              subMenu:[
+                  {label:'机顶盒信息管理', imgUrl:''},
+                  {label:'机顶盒运维信息管理', imgUrl:''},
+                  {label:'机顶盒运维账号管理', imgUrl:''}
+                   
+              ]
+          }
+         ]
+    },
+    {
+        title:'系统管理',
+         menu:[
+             {
+              subtitle:'机构及信息管理',
+              subMenu:[
+                {label:'机构管理', imgUrl:'',url:'/organ'},
+                {label:'日志管理', imgUrl:'',url:'/organ'},
+                {label:'app版本管理', imgUrl:''},
+                {label:'app界面自定义', imgUrl:''},
+                {label:'修改密码', imgUrl:''},
+              ]
+            },
+            {
+                subtitle:'系统账号管理',
+                subMenu:[
+                  {label:'用户账号管理', imgUrl:'',url:'/users'},
+                  {label:'单位管理员账号管理', imgUrl:'',url:'/unitAdmin'},        
+                ]
+              },
+         ]
+    },
+]
\ No newline at end of file

src/page/index/index.vue

+<template>
+<div class="index-container">
+   <div class="panel-box" v-for="(item,index) in menuList" :key="index">
+       <div class="panel-box-title">
+            <span class="panel-box-title-wrapper">
+                <i class="panel-box-title-icon"></i>
+                <span>{{item.title}}</span>
+            </span>
+            <div class="panel-box-title-img"></div>
+       </div>
+       <div class="panel-box-content">
+           <div class="panel-sub-box" v-for="(subItem,subIndex) in item.menu" :key="subIndex">
+             <div class="panel-box-sub-title">
+                 <span class="line"></span>
+                 <span class="panel-box-sub-title_name">{{subItem.subtitle}}</span>
+             </div>
+             <ul >
+                 <li v-for="(menu,mIndex) in subItem.subMenu" :key="mIndex" @click="goPage(menu.url)">
+                    <i class="icon-memu"></i>
+                    <span class="menu-label">{{menu.label}}</span>
+                 </li>
+             </ul>
+           </div>
+       </div>
+   </div>
+</div>
+</template>
+<script>
+import { menuList } from '@/config/menu'
+export default{
+    data() {
+        return{
+           menuList:menuList
+        }
+    },
+    mounted(){
+
+    },
+    methods:{
+        goPage(path){
+            if(path){
+                this.$router.push(path)
+            }
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@media screen and (max-width: 1440px) {
+    .index-container{
+        width: 100%;
+    }
+   .panel-sub-box ul li{
+        padding:1.25vw 10px;
+        .menu-label{
+            font-size: 14px;
+        }
+   }
+}
+@media  (min-width:1441px) and (max-width:1680px)  {
+    .index-container{
+        width: 96%;
+    }
+     .panel-sub-box ul li{
+        padding:1.25vw 20px;
+        .menu-label{
+            font-size: 14px;
+        }
+   }
+}
+@media  (min-width:1681px){
+   .index-container{
+        width: 92%;
+    }
+    .panel-sub-box ul li{
+        padding:1.25vw;
+        .menu-label{
+            font-size: 16px;
+        }
+   }
+}
+.index-container{
+    margin: 0 auto;
+    height: 100%;
+    overflow-y: auto;
+    .panel-box{
+        background: @party-white;
+        border: 1px solid @party-white;
+        box-shadow: 0 4px 16px 0 rgba(0,0,0,0.10);
+        border-radius: 8px;
+        border-radius: 8px;
+        margin-bottom: 24px;
+        display: flex;
+        padding: 40px 20px 20px 20px;
+        .panel-box-title{
+            padding-right: 3.125vw;
+        }
+        .panel-box-title-wrapper{          
+            .panel-box-title-icon{
+                display: inline-block;
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                background-color: @party-pink;
+                vertical-align: middle;
+                margin-right: 18px;
+            }
+            span{
+                font-size: 20px;
+                line-height: 20px;
+                font-weight: bold;
+                color: @font-color;
+                vertical-align: middle;
+            }
+        }
+        .panel-box-title-img{
+            width: 10.4vw;
+            height: 10.4vw;
+            max-width: 200px;
+            max-height: 200px;
+            background-color:@party-pink ;
+            margin-top: 20px;
+        }
+        .panel-box-content{
+            padding-left: 20px;
+            display: flex
+        }
+        .panel-box-sub-title{
+            border-bottom:1px solid @party-border-color;
+            line-height: 24px;
+            padding-bottom: 20px;
+            box-sizing: content-box;
+            .line{
+                display: inline-block;
+                width: 4px;
+                height: 18px;
+                background-color:@party-black;    
+                vertical-align: middle;
+            }
+            .panel-box-sub-title_name{
+                font-size: 18px;
+                line-height: 18px;
+                font-weight: bold;
+                color: @font-color;
+                vertical-align: middle;
+                margin-left: 12px;
+            }
+
+        }
+        .panel-sub-box{
+             &:not(:first-child){
+                margin-left: 3.125vw;
+             }
+            ul{
+                display: flex;
+                padding-top: 20px;
+                li{
+                    width: 6.67vw;
+                    height:8.33vw ;
+                    max-width: 128px;
+                    max-height: 160px;
+                    text-align: center;
+                    background: @party-bg-gray;
+                    border-radius: 8px;
+                    color: @font-color;
+                    &:not(:first-child){
+                        margin-left: 20px;
+                    }
+                    &.active,&:hover{
+                        background: @party-red;
+                        box-shadow: 0 8px 4px -4px rgba(155,30,35,0.40);
+                        border-radius: 8px;
+                        border-radius: 8px;
+                        color: @party-white;
+                        cursor: pointer;
+                         color:@party-white;
+                    }
+                    .icon-memu{
+                        display: block;
+                        width: 2.08vw;
+                        height: 2.08vw;
+                        border-radius:50%;
+                        margin: 0 auto 0.83vw;
+                        background-image: linear-gradient(180deg, #FFF7E8 0%, #FFEDCC 100%);
+                        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
+                    }
+                    .menu-label{                
+                        line-height: 24px;
+                        text-shadow: 0 2px 4px rgba(0,0,0,0.20);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/page/statistics/overview.vue

+<template>
+    <p>预览</p>
+</template>
\ No newline at end of file

src/page/system/organ.vue

+<template>
+  <div class="oran-wrapper">
+        <div></div>
+  </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    }
+}
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/page/system/unitAdmin.vue

+<template>
+  <div class="unit-admin-wrapper">
+
+  </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    mounted(){
+
+    },
+    methods:{
+        
+    }
+}
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/page/system/users.vue

+<template>
+  <div class="user-wrapper">
+      <div class="search-container">
+
+      </div>
+      <div class="table-content">
+          <party-table></party-table>
+      </div>
+      <party-pagination/>
+  </div>
+</template>
+<script>
+import { partyPagination,partyTable } from '@/components/index'
+export default {
+    data(){
+        return{
+
+        }
+    },
+    components:{ partyPagination, partyTable},
+    mounted(){
+
+    },
+    methods:{
+        
+    }
+}
+</script>
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/router/index.js

@@ -67,6 +67,7 @@ const menuRouter = r => require.ensure([],()=>r(require('@/page/end/menuRouter')
 const login = r => require.ensure([],()=>r(require('@/components/end/login')),'login');
 // 忘记密码
 const forgetPassword = r => require.ensure([],()=>r(require('@/components/end/forgetPassword')),'forgetPassword');
+// 首页
 
 const router = new Router({
   routes: [
@@ -75,6 +76,42 @@ const router = new Router({
        name: '登录',
        component: login
       },
+      {
+        path: '/index',
+        name: '首页',
+        component: () => import('@/page/index/index'),
+        meta:{
+          isRequireLogin:true,
+          showBreadcrumb:false
+        }
+       },
+       {
+        path: '/organ',
+        name: '机构管理',
+        component: () => import('@/page/system/organ'),
+        meta:{
+          showBreadcrumb:true,
+          title:'机构管理',
+        }
+       },
+       {
+        path: '/users',
+        name: '用户管理',
+        component: () => import('@/page/system/users'),
+        meta:{
+          showBreadcrumb:true,
+          title:'用户管理',
+        }
+       },
+       {
+        path: '/unitAdmin',
+        name: '单位管理员账号管理',
+        component: () => import('@/page/system/unitAdmin'),
+        meta:{
+          showBreadcrumb:true,
+          title:'单位管理员账号管理',
+        }
+       },
       {
        path: '/forgetPassword',
        name: '忘记密码',

src/style/global.less

+@party-red:#9B1E23;
+@page-bg-white:#F9F9F9;
+@party-white:#FFFFFF;
+@font-color:#333333;
+@party-pink:pink;
+@party-border-color:#EEEEEE;
+@party-black:#000000;
+@party-bg-gray:#F8F8F8;
+
+.ft($fz){
+    font-size: $fz;
+}
+.f14{ font-size: 14px; }
+.f16{ font-size: 14px; }
+.f18{ font-size: 18px; }
+.f24{ font-size: 24px; }
+
+.inline-block{
+    display: inline-block;
+}