mirror of
https://gitee.com/wangkang/udf.git
synced 2026-10-26 06:33:43 +00:00
更新
This commit is contained in:
iizmg
+51
-88
@@ -1,82 +1,36 @@
|
||||
<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>
|
||||
<div id="app" :style="appStyle">
|
||||
<el-container :style="mainElContainerStyle">
|
||||
<el-header :style="mainElHeaderStyle" :height="mainElHeaderStyle.height">
|
||||
<el-button class="mainMenuBtn" :style="mainMenuBtnStyle" type="text">
|
||||
<i class="el-icon-menu"></i>
|
||||
</el-button>
|
||||
<a class="mainLogoBtn">
|
||||
<span>
|
||||
<i>{{mainLogo.appLogoName}}</i>
|
||||
<i>{{mainLogo.appName}}</i>
|
||||
</span>
|
||||
</a>
|
||||
<div class="mainMenuRightDiv">
|
||||
<div class="bellDiv">
|
||||
<el-badge is-dot>
|
||||
<i class="el-icon-bell"></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div class="avatarDiv">
|
||||
<el-avatar shape="square" size="large" icon="el-icon-user-solid">
|
||||
</el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-scrollbar style="height:100%">
|
||||
<el-backtop target=".el-scrollbar__wrap">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
</el-backtop>
|
||||
<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>
|
||||
main
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-scrollbar>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
@@ -85,25 +39,34 @@
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
const item = {
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
};
|
||||
return {
|
||||
tableData: Array(20).fill(item),
|
||||
style: {
|
||||
height: null
|
||||
appStyle: {
|
||||
background: "#F2F2F2"
|
||||
},
|
||||
mainLogo: {
|
||||
appLogoName: 'UDF',
|
||||
appName: 'ADMIN',
|
||||
},
|
||||
mainElContainerStyle: {
|
||||
height: 0
|
||||
},
|
||||
mainElHeaderStyle: {
|
||||
height: "50",
|
||||
background: "rgb(255, 255, 255)"
|
||||
},
|
||||
mainMenuBtnStyle: {
|
||||
background: "none rgb(255, 106, 0)",
|
||||
color: "rgb(255, 255, 255)"
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.getHeight);
|
||||
this.getHeight()
|
||||
window.addEventListener('resize', this.getMainElContainerStyleHeight);
|
||||
this.getMainElContainerStyleHeight();
|
||||
},
|
||||
methods: {
|
||||
getHeight() {
|
||||
this.style.height = window.innerHeight + 'px';
|
||||
getMainElContainerStyleHeight() {
|
||||
this.mainElContainerStyle.height = window.innerHeight + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
#app {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'Microsoft yahei';
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #62caff !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,19 +1,101 @@
|
||||
#app {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'Microsoft yahei';
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
body .el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #62caff !important;
|
||||
}
|
||||
|
||||
|
||||
.el-container {
|
||||
|
||||
.el-aside {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
line-height: 60px;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px 0px;
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.mainMenuBtn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 0px !important;
|
||||
box-sizing: border-box;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0px;
|
||||
outline: medium;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease-out;
|
||||
border-width: initial;
|
||||
border-style: none;
|
||||
border-color: initial;
|
||||
border-image: initial;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.mainLogoBtn {
|
||||
height: 50px;
|
||||
padding: 0px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
|
||||
.appLogo {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainMenuRightDiv {
|
||||
float: right;
|
||||
height: 50px;
|
||||
|
||||
.avatarDiv {
|
||||
height: 50px;
|
||||
padding-right: 12px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bellDiv {
|
||||
height: 50px;
|
||||
padding-right: 25px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-main {
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@ 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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user