diff --git a/README.md b/README.md index 958c0b744c4b7492f0c5e553b0d18357f8e21f84..e8de81132bc67e1beff873574f71b713a6484c77 100644 --- a/README.md +++ b/README.md @@ -57,16 +57,23 @@ npm run build (打包发布) ### 效果预览 -![动态图](https://github.com/artdong/vue-admin/blob/develop/assets/screenshot/vue2-admin-grace-v1.1.gif?raw=true) +![动态图](https://upload-images.jianshu.io/upload_images/3100736-41a17e53122c0609.gif?raw=true) + +### 深色主题效果预览 + +![动态图](https://upload-images.jianshu.io/upload_images/3100736-b0f8985f5dd5f4c7.gif?raw=true) #### 欢迎关注我的微信公众号`全栈弄潮儿` ，获取更多学习资源及技术文章等 * 微信公众号二维码，扫一扫或者搜索"全栈弄潮儿"即可关注 - +

+ +

#### 脑筋急转弯（微信小程序） - - +

+ +

diff --git a/assets/screenshot/vue2-admin-grace-dark.gif b/assets/screenshot/vue2-admin-grace-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..dc16ccf89b4f6417550210693fe64a74894b59cd Binary files /dev/null and b/assets/screenshot/vue2-admin-grace-dark.gif differ diff --git a/assets/scss/components/_animation.scss b/assets/scss/components/_animation.scss deleted file mode 100644 index 486fe6e92b43c9e5032bc3dfc60803ecb497448a..0000000000000000000000000000000000000000 --- a/assets/scss/components/_animation.scss +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes fadeIn { - 0% { - opacity: 0 - } - 100% { - opacity: 1 - } -} diff --git a/assets/scss/components/_base.scss b/assets/scss/components/_base.scss deleted file mode 100644 index d7efd51465a1dec38c993826f8ffe20e8aad6447..0000000000000000000000000000000000000000 --- a/assets/scss/components/_base.scss +++ /dev/null @@ -1,78 +0,0 @@ -html { - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; -} - -html, body { - height: 100%; - background-color: #eff0f4; -} - -.fl { - float: left; -} - -.fr { - float: right; -} - -.align_center { - text-align: center; -} - -.align_left { - text-align: left; -} - -.align_right { - text-align: right; -} - -.ofh { - overflow: hidden; -} - -.hide { - display: none; -} - -.block { - display: block; -} - -.relative { - position: relative; -} - -.absolute { - position: absolute; -} - -.m_auto { - margin: auto; -} - -.width_100 { - width: 100%; -} - -.height_100 { - height: 100%; -} - -.nowrap { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.d_box { - display: flex; - box-sizing: border-box; - flex: 1; - width: 100%; -} - -.d_boxflex { - flex: 1; - display: block; -} diff --git a/assets/scss/components/_dialog.scss b/assets/scss/components/_dialog.scss deleted file mode 100644 index 57520c9c737a8621fa5dba901456e3e2b15f3a0b..0000000000000000000000000000000000000000 --- a/assets/scss/components/_dialog.scss +++ /dev/null @@ -1,10 +0,0 @@ -.v-shade { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - z-index: 9999; -} diff --git a/assets/scss/components/_editor.scss b/assets/scss/components/_editor.scss deleted file mode 100644 index 24441a0057e68e4ea51701afa1a43f8a674e15b2..0000000000000000000000000000000000000000 --- a/assets/scss/components/_editor.scss +++ /dev/null @@ -1,6 +0,0 @@ -.media-message-edit{ - margin-left: 350px; - .form-item{ - width: 400px; - } -} diff --git a/assets/scss/components/_layout.scss b/assets/scss/components/_layout.scss deleted file mode 100644 index 54da5c612325b7aefc33bb7aa4d70455f3e1c32a..0000000000000000000000000000000000000000 --- a/assets/scss/components/_layout.scss +++ /dev/null @@ -1,185 +0,0 @@ -.body-warp { - animation: fadeIn .5s ease; -} - -.left-side { - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 220px; - height: 100%; - overflow-y: auto; - background-color: #424f63; - .logo { - margin: 10px auto; - text-align: center; - } - .menu-box { - background-color: #424f63; - .menu-list, .el-submenu__title { - height: 45px; - line-height: 45px; - color: #fff; - background-color: #424f63; - .icon { - width: 16px; - font-size: 14px; - } - .text { - margin-left: 10px; - } - &.is-active, &:hover { - background-color: #353f4f !important; - color: #65cea7; - } - } - } -} - -.main-content { - position: relative; - margin-left: 220px; - padding-top: 50px; - .header-section { - position: fixed; - top: 0; - left: inherit; - width: 100%; - height: 50px; - background-color: #fff; - border-bottom: 1px solid #eff0f4; - z-index: 100; - .search { - margin: 6.5px 10px; - float: left; - width: 220px; - height: 35px; - font-size: 14px; - } - .menu-right { - position: relative; - float: right; - margin-right: 235px; - text-align: right; - font-size: 0; - z-index: 999; - .notification-list { - position: relative; - display: inline-block; - z-index: 999; - .notification-btn { - display: block; - padding: 0 15px; - height: 50px; - line-height: 50px; - font-size: 14px; - background: #fff; - color: #333; - cursor: pointer; - transition: background ease 0.2s; - &:hover { - color: #fff; - background: #424f63; - .icon { - border-color: #fff; - border-right: 4px solid #424f63; - border-left: 4px solid #424f63; - } - } - img { - vertical-align: middle; - margin-right: 5px; - width: 26px; - border-radius: 2px; - } - .icon { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-color: #424f63; - border-top: 4px solid; - border-right: 4px solid #fff; - border-left: 4px solid #fff; - } - } - } - } - } - .wrapper { - padding: 15px; - } - .panel { - margin-bottom: 20px; - background-color: #fff; - border-radius: 4px; - box-shadow: 0 1px 1px rgba(0, 0, 0, .05); - .panel-title { - padding: 0 15px; - color: #535351; - height: 45px; - line-height: 45px; - font-size: 14px; - font-weight: bold; - text-transform: uppercase; - border-bottom: 1px dotted rgba(0, 0, 0, 0.2); - .panel_title_select { - display: inline-block; - .el-input__inner { - height: 28px; - } - } - } - .panel-body { - padding: 15px; - overflow: hidden; - font-weight: normal; - .bottom-toolbar { - margin-top: 15px; - padding: 15px 0; - } - } - } - .footer { - background: #fff; - padding: 15px; - color: #7A7676; - font-size: 12px; - position: static; - bottom: 0; - width: 100%; - border-top: 1px solid #eff0f4; - } -} - -.dropdown-menu { - position: absolute; - right: 0; - top: 100%; - width: 200px; - padding: 5px; - border-radius: 5px; - background: #65cea7; - .dropdown-list { - padding: 0; - line-height: normal; - } - .dropdown-btn { - display: block; - color: #fff; - font-size: 13px; - padding: 7px 10px; - text-align: left; - border-radius: 3px; - cursor: pointer; - &:hover { - background: #2a323f; - color: #fff; - } - .icon { - margin-right: 5px; - } - } -} diff --git a/assets/scss/components/_media.scss b/assets/scss/components/_media.scss deleted file mode 100644 index a07907ff2324d432486bf69ed6876c2bcde85ca0..0000000000000000000000000000000000000000 --- a/assets/scss/components/_media.scss +++ /dev/null @@ -1,6 +0,0 @@ -.media-message-thumb { - padding: 10px; - width: 300px; - border: 1px solid #e7e7eb; - background-color: #f8f8f8; -} diff --git a/assets/scss/components/_reset.scss b/assets/scss/components/_reset.scss deleted file mode 100644 index 7bac8dd6d13b5274868a21dae49fd0940cbd5f1b..0000000000000000000000000000000000000000 --- a/assets/scss/components/_reset.scss +++ /dev/null @@ -1,42 +0,0 @@ -* { - word-break: break-all; - word-wrap: break-word; - padding: 0; - margin: 0; - outline: 0; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -a { - font-weight: 300; - text-decoration: none; - &:active, &:hover { - outline: 0; - } -} - -i { - font-style: normal; -} - -img { - width: auto; - height: auto; - max-width: 100% !important; - vertical-align: middle; - -ms-interpolation-mode: bicubic; - &:not([src*="/"]) { - display: none !important; - } -} - -ol, ul, li { - list-style-type: none; - list-style: none; -} - -input, textarea, button { - border: 0; - border-radius: 0; - appearance: none; -} diff --git a/assets/scss/components/_scroll-bar.scss b/assets/scss/components/_scroll-bar.scss deleted file mode 100644 index 3f3314912dcb424e815bf9e4ec27bf56f1e0617f..0000000000000000000000000000000000000000 --- a/assets/scss/components/_scroll-bar.scss +++ /dev/null @@ -1,24 +0,0 @@ -::-webkit-scrollbar-track-piece { - width: 6px; - background: #424f63; - border: 0; - border-radius: 3px; -} - -::-webkit-scrollbar { - width: 6px; - height: 6px; - border: 0; - background: #424f63; - border-radius: 3px; -} - -::-webkit-scrollbar-thumb { - background-color: #65cea7; - border: 0; - border-radius: 3px; -} - -::-webkit-scrollbar-thumb:hover { - background-color: #57be98 -} diff --git a/assets/scss/components/_start_loading.scss b/assets/scss/components/_start_loading.scss deleted file mode 100644 index d8907b18bfcfb401ecc82faeb5f06867028fd2be..0000000000000000000000000000000000000000 --- a/assets/scss/components/_start_loading.scss +++ /dev/null @@ -1,15 +0,0 @@ -mainbody{ - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-color: #50cf77; - background-image: url(~assets/images/start_loading.svg); - background-repeat: no-repeat; - background-position: center; - background-size: 80px 80px; - z-index: 9999; -} diff --git a/assets/scss/main.scss b/assets/scss/main.scss deleted file mode 100644 index eea269c13840455ff347ce2e2b09b9f00bc02426..0000000000000000000000000000000000000000 --- a/assets/scss/main.scss +++ /dev/null @@ -1,19 +0,0 @@ -@charset "utf-8"; - -//reset -@import "./components/_reset"; -//base -@import "./components/_base"; -//animation -@import "./components/_animation"; -//start_loading -@import "./components/_start_loading"; -//dialog -@import "./components/_dialog"; -//scroll -@import "./components/_scroll-bar"; -//Layout 布局 -@import "./components/_layout"; -//素材布局 -@import "./components/_media"; - diff --git a/package-lock.json b/package-lock.json index 9cc6c0a6c60e5c3d5372f9e76d776ce936dc6cc3..a04a2846fc16be487ec4d74703fd668513cab323 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,11 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@tinymce/tinymce-vue": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-3.2.3.tgz", + "integrity": "sha512-SMjpAQg2BLtYmnx4s3rKiAFxgXCx4uKWu8XmcvsZoYl5kvF4yaoqx70ovYJvT83ucpO7n6pewnQL3O4lR2WF3Q==" + }, "abbrev": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", @@ -3087,13 +3092,15 @@ "dev": true }, "element-ui": { - "version": "1.4.13", - "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-1.4.13.tgz", - "integrity": "sha512-EGdw/qC2RUmCDzAy3X06LL+jDWmrMezMndviE5CnUDi2XcZz/uZUVVj6bJ6piY+Flw7HNO+Ed81LXrdZ2v+nXA==", + "version": "2.13.2", + "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz", + "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==", "requires": { "async-validator": "~1.8.1", "babel-helper-vue-jsx-merge-props": "^2.0.0", "deepmerge": "^1.2.0", + "normalize-wheel": "^1.0.1", + "resize-observer-polyfill": "^1.5.0", "throttle-debounce": "^1.0.1" } }, @@ -5998,6 +6005,11 @@ "sort-keys": "^1.0.0" } }, + "normalize-wheel": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", + "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" + }, "normalize.css": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-5.0.0.tgz", @@ -7880,6 +7892,11 @@ "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.12.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz", diff --git a/package.json b/package.json index a9d0afd1c4847ed085318d8cf8d4db9c8dc1d72a..932b2bb1b1c67cddb682e7db6d2ea4027f11a687 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-admin", - "version": "1.1.0", + "version": "2.0.0", "description": "vue2 admin project", "author": "alex <1029278668@qq.com>", "license": "MIT", @@ -14,7 +14,7 @@ "axios": "^0.15.3", "babylonjs": "^3.2.0-beta.3", "echarts": "^3.3.2", - "element-ui": "^1.2.8", + "element-ui": "2.13.2", "file-saver": "^1.3.8", "font-awesome": "^4.7.0", "normalize.css": "^5.0.0", diff --git a/src/main.js b/src/main.js index 33ec2b6d8c1f0fe36475f488a0566fe112522dc4..fa66fa60629929bb26c4b841c02fec46a9e2496e 100644 --- a/src/main.js +++ b/src/main.js @@ -3,7 +3,8 @@ import Vue from 'vue' import App from './App' import 'normalize.css' import ElementUI from 'element-ui' -import 'element-ui/lib/theme-default/index.css' +// import 'element-ui/lib/theme-default/index.css' +import 'element-ui/lib/theme-chalk/index.css' //import './assets/theme/theme-green/index.css' import VueRouter from 'vue-router' import store from './vuex/store' diff --git a/src/views/Home.vue b/src/views/Home.vue index e5673d2b370eb4dc340c46a774b277efcaa96590..52d361bb603bb7f1a6efac190a1abe325623310f 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -88,7 +88,7 @@ -