mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-09-10 12:04:38 +08:00
界面美化
修改lyaout 样式
This commit is contained in:
rongxingsun
parent
cd6b2a27b9
commit
9d87b89627
@ -3,6 +3,7 @@ const path = require('path')
|
||||
const utils = require('./utils')
|
||||
const config = require('../config')
|
||||
const vueLoaderConfig = require('./vue-loader.conf')
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||
|
||||
function resolve (dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
@ -85,6 +86,9 @@ module.exports = {
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin()
|
||||
],
|
||||
node: {
|
||||
// prevent webpack from injecting useless setImmediate polyfill because Vue
|
||||
// source contains it (although only uses it if it's native).
|
||||
|
||||
30
package.json
30
package.json
@ -34,20 +34,20 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.0",
|
||||
"clipboard": "1.7.1",
|
||||
"clipboard": "2.0.1",
|
||||
"codemirror": "5.39.2",
|
||||
"connect": "3.6.6",
|
||||
"driver.js": "0.5.2",
|
||||
"dropzone": "5.2.0",
|
||||
"driver.js": "0.6.2",
|
||||
"dropzone": "5.5.1",
|
||||
"echarts": "4.1.0",
|
||||
"element-ui": "2.4.4",
|
||||
"element-ui": "2.4.5",
|
||||
"file-saver": "1.3.8",
|
||||
"font-awesome": "4.7.0",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsonlint": "1.6.3",
|
||||
"jszip": "3.1.5",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"normalize.css": "7.0.0",
|
||||
"normalize.css": "8.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"screenfull": "3.3.2",
|
||||
"showdown": "1.8.6",
|
||||
@ -55,16 +55,16 @@
|
||||
"sortablejs": "1.7.0",
|
||||
"vue": "2.5.16",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-i18n": "7.3.2",
|
||||
"vue-i18n": "8.0.0",
|
||||
"vue-multiselect": "2.1.0",
|
||||
"vue-router": "3.0.1",
|
||||
"vue-splitpane": "1.0.2",
|
||||
"vuedraggable": "^2.16.0",
|
||||
"vuex": "3.0.1",
|
||||
"xlsx": "^0.11.16"
|
||||
"xlsx": "^0.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "8.5.0",
|
||||
"autoprefixer": "^9.0.2",
|
||||
"babel-core": "6.26.3",
|
||||
"babel-eslint": "8.2.6",
|
||||
"babel-helper-vue-jsx-merge-props": "2.0.3",
|
||||
@ -78,10 +78,10 @@
|
||||
"chalk": "2.4.1",
|
||||
"copy-webpack-plugin": "4.5.2",
|
||||
"cross-env": "5.2.0",
|
||||
"css-loader": "0.28.7",
|
||||
"eslint": "4.19.1",
|
||||
"css-loader": "1.0.0",
|
||||
"eslint": "5.2.0",
|
||||
"eslint-friendly-formatter": "4.0.1",
|
||||
"eslint-loader": "2.0.0",
|
||||
"eslint-loader": "2.1.0",
|
||||
"eslint-plugin-html": "4.0.5",
|
||||
"file-loader": "1.1.11",
|
||||
"friendly-errors-webpack-plugin": "1.7.0",
|
||||
@ -107,12 +107,12 @@
|
||||
"svg-sprite-loader": "3.8.0",
|
||||
"uglifyjs-webpack-plugin": "1.2.7",
|
||||
"url-loader": "1.0.1",
|
||||
"vue-loader": "14.2.3",
|
||||
"vue-style-loader": "3.0.3",
|
||||
"vue-loader": "15.2.6",
|
||||
"vue-style-loader": "4.1.1",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"webpack": "4.16.1",
|
||||
"webpack": "4.16.3",
|
||||
"webpack-bundle-analyzer": "2.13.1",
|
||||
"webpack-cli": "3.0.8",
|
||||
"webpack-cli": "3.1.0",
|
||||
"webpack-dev-server": "3.1.5",
|
||||
"webpack-merge": "4.1.3"
|
||||
},
|
||||
|
||||
@ -44,7 +44,7 @@ export default {
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
line-height: 60px;
|
||||
margin-left: 10px;
|
||||
.no-redirect {
|
||||
color: #97a8be;
|
||||
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Log in',
|
||||
logIn: 'Login',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
any: 'any',
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: 180px;
|
||||
margin-left: 240px;
|
||||
position: relative;
|
||||
}
|
||||
// 侧边栏
|
||||
.sidebar-container {
|
||||
transition: width 0.28s;
|
||||
width: 180px !important;
|
||||
width: 240px !important;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
@ -31,14 +31,15 @@
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.is-vertical {
|
||||
right: -6px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
@ -47,22 +48,24 @@
|
||||
}
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 36px !important;
|
||||
width: 64px !important;
|
||||
}
|
||||
.main-container {
|
||||
margin-left: 36px;
|
||||
margin-left: 64px;
|
||||
}
|
||||
.submenu-title-noDropdown {
|
||||
padding-left: 10px !important;
|
||||
font-size: 16px;
|
||||
padding-left: 24px !important;
|
||||
position: relative;
|
||||
.el-tooltip {
|
||||
padding: 0 10px !important;
|
||||
padding: 0 24px !important;
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
&>.el-submenu__title {
|
||||
padding-left: 10px !important;
|
||||
font-size: 16px;
|
||||
padding-left: 24px !important;
|
||||
.el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
@ -84,14 +87,14 @@
|
||||
}
|
||||
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
|
||||
.sidebar-container .el-submenu .el-menu-item {
|
||||
min-width: 180px !important;
|
||||
min-width: 240px !important;
|
||||
background-color: $subMenuBg !important;
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: 180px !important;
|
||||
min-width: 240px !important;
|
||||
}
|
||||
|
||||
//适配移动端
|
||||
@ -101,12 +104,12 @@
|
||||
}
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: 180px !important;
|
||||
width: 240px !important;
|
||||
}
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-180px, 0, 0);
|
||||
transform: translate3d(-240px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLocalStorgae() {
|
||||
setLocalStorage() {
|
||||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
|
||||
},
|
||||
addTodo(e) {
|
||||
@ -82,30 +82,30 @@ export default {
|
||||
text,
|
||||
done: false
|
||||
})
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
}
|
||||
e.target.value = ''
|
||||
},
|
||||
toggleTodo(val) {
|
||||
val.done = !val.done
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
},
|
||||
deleteTodo(todo) {
|
||||
this.todos.splice(this.todos.indexOf(todo), 1)
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
},
|
||||
editTodo({ todo, value }) {
|
||||
todo.text = value
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
},
|
||||
clearCompleted() {
|
||||
this.todos = this.todos.filter(todo => !todo.done)
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
},
|
||||
toggleAll({ done }) {
|
||||
this.todos.forEach(todo => {
|
||||
todo.done = done
|
||||
this.setLocalStorgae()
|
||||
this.setLocalStorage()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -82,12 +82,12 @@ export default {
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 0px !important;
|
||||
.hamburger-container {
|
||||
line-height: 58px;
|
||||
height: 50px;
|
||||
line-height: 68px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
@ -118,11 +118,11 @@ export default {
|
||||
vertical-align: 15px;
|
||||
}
|
||||
.avatar-container {
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
margin-right: 30px;
|
||||
.avatar-wrapper {
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
|
||||
@ -106,6 +106,9 @@ export default {
|
||||
this.selectedTag = tag
|
||||
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
|
||||
this.left = e.clientX - offsetLeft + 15 // 15: margin right
|
||||
if ((e.view.innerWidth - this.left) < (100 + offsetLeft)) {
|
||||
this.left = e.view.innerWidth - 100 - offsetLeft
|
||||
}
|
||||
this.top = e.clientY
|
||||
},
|
||||
closeMenu() {
|
||||
@ -119,21 +122,22 @@ export default {
|
||||
.tags-view-container {
|
||||
.tags-view-wrapper {
|
||||
background: #fff;
|
||||
height: 34px;
|
||||
height: 54px;
|
||||
border-bottom: 1px solid #d8dce5;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
||||
.tags-view-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border: 1px solid #d8dce5;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
margin-top: 16px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
@ -185,15 +189,17 @@ export default {
|
||||
.el-icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: 2px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-left: 3px;
|
||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 100% 50%;
|
||||
&:before {
|
||||
transform: scale(.6);
|
||||
transform: scale(.9);
|
||||
display: inline-block;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #b4bccc;
|
||||
|
||||
@ -165,6 +165,10 @@ $light_gray:#eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
height: 47px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.el-form-item {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
@ -188,7 +192,7 @@ $light_gray:#eee;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 520px;
|
||||
width: 460px;
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 120px auto;
|
||||
}
|
||||
@ -242,6 +246,7 @@ $light_gray:#eee;
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
bottom: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user