界面美化

修改lyaout 样式

build/webpack.base.conf.js

@@ -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).

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",
+    "driver.js": "0.6.2",
-    "dropzone": "5.2.0",
+    "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",
+    "css-loader": "1.0.0",
-    "eslint": "4.19.1",
+    "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-loader": "15.2.6",
-    "vue-style-loader": "3.0.3",
+    "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"
   },

src/components/Breadcrumb/index.vue

@@ -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;

src/lang/en.js

@@ -71,7 +71,7 @@ export default {
   },
   login: {
     title: 'Login Form',
-    logIn: 'Log in',
+    logIn: 'Login',
     username: 'Username',
     password: 'Password',
     any: 'any',

src/styles/sidebar.scss

@@ -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);
       }
     }
   }

src/views/dashboard/admin/components/TodoList/index.vue

@@ -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()
       })
     }
   },

src/views/layout/components/Navbar.vue

@@ -82,12 +82,12 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 60px;
-  line-height: 50px;
+  line-height: 60px;
   border-radius: 0px !important;
   .hamburger-container {
-    line-height: 58px;
+    line-height: 68px;
-    height: 50px;
+    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;

src/views/layout/components/TagsView.vue

@@ -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;
+      height: 40px;
-      line-height: 26px;
+      line-height: 40px;
       border: 1px solid #d8dce5;
       color: #495060;
       background: #fff;
-      padding: 0 8px;
+      padding: 0 15px;
-      font-size: 12px;
+      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;

src/views/login/index.vue

@@ -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>