This commit is contained in:
udf_admin@163.com
2020-04-23 22:42:36 +08:00
parent 6edc1f1bee
commit 36802fdd90
7 changed files with 174 additions and 16 deletions
+5 -3
View File
@@ -14,10 +14,11 @@
},
"dependencies": {
"axios": "^0.19.2",
"vue-axios": "^2.1.5",
"element-ui": "^2.13.1",
"nprogress": "^0.2.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"element-ui": "^2.13.1"
"vue-axios": "^2.1.5",
"vue-router": "^3.1.6"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
@@ -36,6 +37,7 @@
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"element-theme-chalk": "^2.13.1",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
+101 -2
View File
@@ -1,11 +1,110 @@
<template>
<div id="app">
待开发
<el-container :style="style">
<el-aside width="200px">
<el-scrollbar style="height:100%">
<el-menu style="height:100%">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header>
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-scrollbar style="height:100%">
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: 'App'
name: 'App',
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item),
style: {
height: null
}
}
},
created() {
window.addEventListener('resize', this.getHeight);
this.getHeight()
},
methods: {
getHeight() {
this.style.height = window.innerHeight + 'px';
}
}
}
</script>
+10
View File
@@ -7,3 +7,13 @@
font-size: 13px;
font-weight: 400;
}
body .el-scrollbar__wrap {
overflow-x: hidden;
}
#nprogress .bar {
background: #62caff !important;
}
+28
View File
@@ -0,0 +1,28 @@
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import router from "../../router";
export default {
//初始化
inti() {
//初始化NProgress
this.initNProgress();
},
//初始化NProgress
initNProgress() {
//配置
NProgress.inc(0.2);
NProgress.configure({easing: 'ease', speed: 500, showSpinner: false});
//开始遍历
router.beforeEach((to, from, next) => {
NProgress.start();
next();
});
//结束遍历
router.afterEach(() => {
NProgress.done();
});
}
}
+2 -6
View File
@@ -1,11 +1,7 @@
/* 改变主题色变量 */
$--color-primary: rgb(51, 102, 153);
$--color-success: #dcdfe6 !default;
/* 改变disabled状态下字色 */
$--disabled-color-base: #606266;
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
+19
View File
@@ -0,0 +1,19 @@
.el-container {
.el-aside {
color: #333;
}
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
text-align: right;
font-size: 12px;
}
.el-main {
}
}
+9 -5
View File
@@ -4,21 +4,25 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Glob from './assets/js/glob.js';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/reset.css';
import './assets/css/glob.css';
import './assets/scss/glob.scss';
import './assets/scss/element-variables.scss';
Vue.config.productionTip = false
//use
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueAxios, axios)
Vue.use(VueAxios, axios);
//init
Glob.inti();
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
components: {App},
template: '<App/>'
})