├── static └── .gitkeep ├── .eslintignore ├── src ├── assets │ ├── images │ │ ├── logo.png │ │ ├── photo.png │ │ ├── default │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ ├── 9.png │ │ │ ├── 10.png │ │ │ ├── 11.png │ │ │ ├── 12.png │ │ │ ├── 13.png │ │ │ ├── 14.png │ │ │ ├── 15.png │ │ │ └── 16.png │ │ └── login-bg.svg │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.css │ │ ├── demo_fontclass.html │ │ ├── demo_unicode.html │ │ ├── demo_symbol.html │ │ ├── demo.css │ │ ├── iconfont.svg │ │ └── iconfont.js │ └── css │ │ └── style.css ├── components │ ├── layout │ │ ├── Home.vue │ │ └── Sidenav.vue │ ├── IframeTest.vue │ ├── admin │ │ └── Login.vue │ ├── list │ │ ├── Edit.vue │ │ └── Index.vue │ ├── form │ │ ├── Base.vue │ │ └── Step.vue │ ├── news │ │ ├── List.vue │ │ └── Add.vue │ ├── goods │ │ ├── Uploader.vue │ │ ├── List.vue │ │ └── Add.vue │ └── dashboard │ │ ├── Index.vue │ │ └── Workplace.vue ├── App.vue ├── main.js └── router │ └── index.js ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── README.md ├── .postcssrc.js ├── index.html ├── .babelrc ├── .eslintrc.js └── package.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/assets/images/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/photo.png -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/assets/images/default/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/1.png -------------------------------------------------------------------------------- /src/assets/images/default/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/2.png -------------------------------------------------------------------------------- /src/assets/images/default/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/3.png -------------------------------------------------------------------------------- /src/assets/images/default/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/4.png -------------------------------------------------------------------------------- /src/assets/images/default/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/5.png -------------------------------------------------------------------------------- /src/assets/images/default/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/6.png -------------------------------------------------------------------------------- /src/assets/images/default/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/7.png -------------------------------------------------------------------------------- /src/assets/images/default/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/8.png -------------------------------------------------------------------------------- /src/assets/images/default/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/9.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"', 4 | host: '0.0.0.0', 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/images/default/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/10.png -------------------------------------------------------------------------------- /src/assets/images/default/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/11.png -------------------------------------------------------------------------------- /src/assets/images/default/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/12.png -------------------------------------------------------------------------------- /src/assets/images/default/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/13.png -------------------------------------------------------------------------------- /src/assets/images/default/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/14.png -------------------------------------------------------------------------------- /src/assets/images/default/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/15.png -------------------------------------------------------------------------------- /src/assets/images/default/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenxi2015/vue-admin/HEAD/src/assets/images/default/16.png -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-admin 2 | 一个基于vuejs2.* 和elementUI 2.*的后台前端框架 3 | # Install 4 | ``` 5 | npm install 6 | ``` 7 | 运行dev 8 | ``` 9 | npm run dev 10 | ``` 11 | 运行build 12 | ``` 13 | npm run build 14 | ``` 15 | 16 | 访问：http://localhost:8080 17 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | blog 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/layout/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 19 | 22 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": [ 12 | [ 13 | "component", 14 | [ 15 | { 16 | "libraryName": "element-ui", 17 | "styleLibraryName": "theme-chalk" 18 | } 19 | ] 20 | ] 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 28 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import router from './router' 5 | import ElementUI from 'element-ui' 6 | // import Axios from 'axios' 7 | import layer from 'vue-layer' 8 | import 'element-ui/lib/theme-chalk/index.css' 9 | import './assets/fonts/iconfont.css' 10 | import './assets/css/style.css' 11 | import App from './App' 12 | 13 | // window.$ = window.jQuery = require('jquery') // 引入jquery 14 | 15 | Vue.use(ElementUI, { size: 'medium' }) 16 | // Vue.use(ElementUI) 17 | // Vue.use(Button) 18 | // Vue.use(Select) 19 | // Vue.use(Axios) 20 | 21 | Vue.config.productionTip = false 22 | Vue.prototype.$layer = layer(Vue) 23 | 24 | /* eslint-disable no-new */ 25 | new Vue({ 26 | el: '#app', 27 | router, 28 | components: { App }, 29 | template: '' 30 | }) 31 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint' 7 | }, 8 | env: { 9 | browser: true, 10 | }, 11 | extends: [ 12 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 13 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 14 | 'plugin:vue/essential', 15 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 16 | 'standard' 17 | ], 18 | // required to lint *.vue files 19 | plugins: [ 20 | 'vue' 21 | ], 22 | // add your custom rules here 23 | rules: { 24 | // allow async-await 25 | 'generator-star-spacing': 'off', 26 | // allow debugger during development 27 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import AdminLogin from '@/components/admin/Login' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | redirect: '/home' 12 | }, 13 | { 14 | path: '/home', 15 | name: 'Home', 16 | component: resolve => require(['../components/layout/Home.vue'], resolve), 17 | children: [ 18 | { 19 | path: '/', 20 | component: resolve => require(['../components/dashboard/Index.vue'], resolve) 21 | }, 22 | { 23 | path: '/dashboardindex', 24 | component: resolve => require(['../components/dashboard/Index.vue'], resolve) 25 | }, 26 | { 27 | path: '/workplace', 28 | component: resolve => require(['../components/dashboard/Workplace.vue'], resolve) 29 | }, 30 | { 31 | path: '/listindex', 32 | component: resolve => require(['../components/list/Index.vue'], resolve) 33 | }, 34 | { 35 | path: '/baseform', 36 | component: resolve => require(['../components/form/Base.vue'], resolve) 37 | }, 38 | { 39 | path: '/stepform', 40 | component: resolve => require(['../components/form/Step.vue'], resolve) 41 | }, 42 | { 43 | path: '/newslist', 44 | component: resolve => require(['../components/news/List.vue'], resolve) 45 | }, 46 | { 47 | path: '/newsadd', 48 | component: resolve => require(['../components/news/Add.vue'], resolve) 49 | }, 50 | { 51 | path: '/goodslist', 52 | component: resolve => require(['../components/goods/List.vue'], resolve) 53 | }, 54 | { 55 | path: '/goodsadd', 56 | component: resolve => require(['../components/goods/Add.vue'], resolve) 57 | } 58 | ] 59 | }, 60 | { 61 | path: '/admin/login', 62 | name: 'AdminLogin', 63 | component: AdminLogin 64 | } 65 | 66 | ] 67 | }) 68 | -------------------------------------------------------------------------------- /src/assets/css/style.css: -------------------------------------------------------------------------------- 1 | .yj-header .el-badge__content.is-fixed {top: 20px !important; right: 20px !important;} 2 | .el-menu-item-group__title {padding: 0px;} 3 | .el-menu-vertical .el-submenu .el-menu {border-radius: 4px !important; margin-left: 4px; border: none;} 4 | 5 | .el-header {background-color: #B3C0D1; color: #333; line-height: 60px;} 6 | .el-aside {color: #333;} 7 | a {text-decoration: none; color: #409EFF} 8 | .logo-sider {background: #002140; height: 60px; color: #fff; font-size: 16px; line-height: 60px; overflow: hidden; text-align: center;} 9 | .logo-sider img {width: 30px; height: 30px; display: inline-block; vertical-align: middle;} 10 | .logo-sider h2 {display: inline-block; vertical-align: middle; font-size: 18px; margin:0 0 0 12px;} 11 | .el-menu-vertical { -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0,21,41,.35);} 12 | .el-menu-vertical:not(.el-menu--collapse) {width: 256px; min-height: 400px; z-index: 99;} 13 | /* .el-menu-vertical .el-menu-item.is-active {background: #1890ff !important;} */ 14 | .el-menu {border-right: none;} 15 | .el-menu li {text-align: left;} 16 | /* .icon-div:hover {background: #e6f7ff} */ 17 | .el-menu--horizontal .el-submenu .el-menu-item {text-align: left;} 18 | .el-menu-demo {float: right;} 19 | .el-menu--horizontal .el-submenu>.el-menu {width: 100px !important; } 20 | .header-admin-logo .el-menu-item {width: 100px; min-width: 100px;} 21 | .el-autocomplete-suggestion.my-autocomplete li {line-height: normal; padding: 7px;} 22 | .my-autocomplete li .name {text-overflow: ellipsis; overflow: hidden;} 23 | .my-autocomplete li .addr {font-size: 12px; color: #b4b4b4;} 24 | .my-autocomplete li .highlighted .addr {color: #ddd;} 25 | .iconfont {font-size: 20px; width: 24px; text-align: center; vertical-align: middle; margin-right: 5px; color: #FEFEFE;} 26 | .yj-header {text-align: right; font-size: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08);padding-left: 0px; z-index: 99;} 27 | .yj-header .el-menu--horizontal {border-bottom: none;} 28 | .yj-breadcrumb-div {padding: 16px 32px 0; background: #fff; border-bottom: 1px solid #e8e8e8; padding-bottom: 16px;} 29 | .notify .notify-alert h2.notice-title {width: auto !important; margin-top: 0px !important; margin-bottom: 10px !important;} 30 | .notify .notify-iframe {overflow: hidden;} -------------------------------------------------------------------------------- /src/components/IframeTest.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 96 | 97 | 98 | 114 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | // Use Eslint Loader? 24 | // If true, your code will be linted during bundling and 25 | // linting errors and warnings will be shown in the console. 26 | useEslint: true, 27 | // If true, eslint errors and warnings will also be shown in the error overlay 28 | // in the browser. 29 | showEslintErrorsInOverlay: false, 30 | 31 | /** 32 | * Source Maps 33 | */ 34 | 35 | // https://webpack.js.org/configuration/devtool/#development 36 | devtool: 'cheap-module-eval-source-map', 37 | 38 | // If you have problems debugging vue-files in devtools, 39 | // set this to false - it *may* help 40 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 41 | cacheBusting: true, 42 | 43 | cssSourceMap: true 44 | }, 45 | 46 | build: { 47 | // Template for index.html 48 | index: path.resolve(__dirname, '../dist/index.html'), 49 | 50 | // Paths 51 | assetsRoot: path.resolve(__dirname, '../dist'), 52 | assetsSubDirectory: 'static', 53 | assetsPublicPath: '/', 54 | 55 | /** 56 | * Source Maps 57 | */ 58 | 59 | productionSourceMap: true, 60 | // https://webpack.js.org/configuration/devtool/#production 61 | devtool: '#source-map', 62 | 63 | // Gzip off by default as many popular static hosts such as 64 | // Surge or Netlify already gzip all static assets for you. 65 | // Before setting to `true`, make sure to: 66 | // npm install --save-dev compression-webpack-plugin 67 | productionGzip: false, 68 | productionGzipExtensions: ['js', 'css'], 69 | 70 | // Run the build command with an extra argument to 71 | // View the bundle analyzer report after build finishes: 72 | // `npm run build --report` 73 | // Set to `true` or `false` to always turn it on or off 74 | bundleAnalyzerReport: process.env.npm_config_report 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "chenxi2015 ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "lint": "eslint --ext .js,.vue src", 11 | "build": "node build/build.js" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.18.1", 15 | "echarts": "^4.5.0", 16 | "element-ui": "^2.13.0", 17 | "highlight.js": "^9.12.0", 18 | "jquery": "^3.3.1", 19 | "v-charts": "^1.19.0", 20 | "vue": "^2.5.16", 21 | "vue-image-crop-upload": "^2.2.3", 22 | "vue-layer": "^0.8.5", 23 | "vue-quill-editor": "^3.0.5", 24 | "vue-router": "^3.0.1" 25 | }, 26 | "devDependencies": { 27 | "autoprefixer": "^7.1.2", 28 | "babel-core": "^6.22.1", 29 | "babel-eslint": "^8.2.1", 30 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 31 | "babel-loader": "^7.1.1", 32 | "babel-plugin-component": "^1.1.0", 33 | "babel-plugin-syntax-jsx": "^6.18.0", 34 | "babel-plugin-transform-runtime": "^6.22.0", 35 | "babel-plugin-transform-vue-jsx": "^3.5.0", 36 | "babel-preset-env": "^1.3.2", 37 | "babel-preset-stage-2": "^6.22.0", 38 | "chalk": "^2.0.1", 39 | "copy-webpack-plugin": "^4.5.1", 40 | "css-loader": "^0.28.0", 41 | "eslint": "^4.15.0", 42 | "eslint-config-standard": "^10.2.1", 43 | "eslint-friendly-formatter": "^3.0.0", 44 | "eslint-loader": "^1.7.1", 45 | "eslint-plugin-import": "^2.7.0", 46 | "eslint-plugin-node": "^5.2.0", 47 | "eslint-plugin-promise": "^3.4.0", 48 | "eslint-plugin-standard": "^3.0.1", 49 | "eslint-plugin-vue": "^4.0.0", 50 | "extract-text-webpack-plugin": "^3.0.0", 51 | "file-loader": "^1.1.4", 52 | "friendly-errors-webpack-plugin": "^1.6.1", 53 | "html-webpack-plugin": "^2.30.1", 54 | "node-notifier": "^5.1.2", 55 | "optimize-css-assets-webpack-plugin": "^3.2.0", 56 | "ora": "^1.2.0", 57 | "portfinder": "^1.0.13", 58 | "postcss-import": "^11.0.0", 59 | "postcss-loader": "^2.0.8", 60 | "postcss-url": "^7.2.1", 61 | "rimraf": "^2.6.0", 62 | "semver": "^5.3.0", 63 | "shelljs": "^0.7.6", 64 | "uglifyjs-webpack-plugin": "^1.2.3", 65 | "url-loader": "^0.5.8", 66 | "vue-loader": "^13.3.0", 67 | "vue-style-loader": "^3.0.1", 68 | "vue-template-compiler": "^2.5.16", 69 | "webpack": "^3.6.0", 70 | "webpack-bundle-analyzer": "^3.3.2", 71 | "webpack-dev-server": "^3.1.11", 72 | "webpack-merge": "^4.1.0" 73 | }, 74 | "engines": { 75 | "node": ">= 6.0.0", 76 | "npm": ">= 3.0.0" 77 | }, 78 | "browserslist": [ 79 | "> 1%", 80 | "last 2 versions", 81 | "not ie <= 8" 82 | ] 83 | } 84 | -------------------------------------------------------------------------------- /src/components/admin/Login.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 97 | 98 | 99 | 110 | -------------------------------------------------------------------------------- /src/components/list/Edit.vue: -------------------------------------------------------------------------------- 1 | 68 | 122 | 126 | 127 | 136 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1518409670465'); /* IE9*/ 4 | src: url('iconfont.eot?t=1518409670465#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1518409670465') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1518409670465#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-choose:before { content: "\e66a"; } 19 | 20 | .icon-102:before { content: "\e628"; } 21 | 22 | .icon-tubiaoqiehuan:before { content: "\e6a3"; } 23 | 24 | .icon-shouqicaidan:before { content: "\e622"; } 25 | 26 | .icon-zhankaicaidan:before { content: "\e624"; } 27 | 28 | .icon-xuanze:before { content: "\e672"; } 29 | 30 | .icon-shuoming:before { content: "\e63d"; } 31 | 32 | .icon-dashboard:before { content: "\e941"; } 33 | 34 | .icon-group:before { content: "\e950"; } 35 | 36 | .icon-home:before { content: "\e951"; } 37 | 38 | .icon-unlock:before { content: "\e97d"; } 39 | 40 | .icon-user:before { content: "\e97f"; } 41 | 42 | .icon-unlock-o:before { content: "\e9d0"; } 43 | 44 | .icon-user-o:before { content: "\e9d1"; } 45 | 46 | -------------------------------------------------------------------------------- /src/components/form/Base.vue: -------------------------------------------------------------------------------- 1 | 71 | 125 | 129 | 130 | 139 | -------------------------------------------------------------------------------- /src/components/form/Step.vue: -------------------------------------------------------------------------------- 1 | 71 | 125 | 129 | 130 | 139 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    choose
    18 |
    .icon-choose
    19 |
    • 20 | 21 |
  • 22 | 23 |
    说明
    24 |
    .icon-102
    25 |
    • 26 | 27 |
  • 28 | 29 |
    图表切换
    30 |
    .icon-tubiaoqiehuan
    31 |
    • 32 | 33 |
  • 34 | 35 |
    收起菜单
    36 |
    .icon-shouqicaidan
    37 |
    • 38 | 39 |
  • 40 | 41 |
    展开菜单
    42 |
    .icon-zhankaicaidan
    43 |
    • 44 | 45 |
  • 46 | 47 |
    选择
    48 |
    .icon-xuanze
    49 |
    • 50 | 51 |
  • 52 | 53 |
    说明
    54 |
    .icon-shuoming
    55 |
    • 56 | 57 |
  • 58 | 59 |
    dashboard
    60 |
    .icon-dashboard
    61 |
    • 62 | 63 |
  • 64 | 65 |
    group
    66 |
    .icon-group
    67 |
    • 68 | 69 |
  • 70 | 71 |
    home
    72 |
    .icon-home
    73 |
    • 74 | 75 |
  • 76 | 77 |
    unlock
    78 |
    .icon-unlock
    79 |
    • 80 | 81 |
  • 82 | 83 |
    user
    84 |
    .icon-user
    85 |
    • 86 | 87 |
  • 88 | 89 |
    unlock-o
    90 |
    .icon-unlock-o
    91 |
    • 92 | 93 |
  • 94 | 95 |
    user-o
    96 |
    .icon-user-o
    97 |
    • 98 | 99 |
100 | 101 |

font-class引用

102 |
103 | 104 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

105 |

与unicode使用方式相比，具有如下特点：

106 |
    107 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 108 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 109 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 110 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 111 |
112 |

使用步骤如下：

113 |

第一步：引入项目下面生成的fontclass代码：

114 | 115 | 116 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
117 |

第二步：挑选相应图标并获取类名，应用于页面：

118 | 
<i class="iconfont icon-xxx"></i>
119 |
120 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

121 |
122 |
123 | 124 | 125 | -------------------------------------------------------------------------------- /src/components/news/List.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 161 | 163 | 164 | 165 | 168 | -------------------------------------------------------------------------------- /src/components/list/Index.vue: -------------------------------------------------------------------------------- 1 | 76 | 77 | 182 | 183 | 184 | 186 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    choose
    38 |
    &#xe66a;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    说明
    44 |
    &#xe628;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    图表切换
    50 |
    &#xe6a3;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    收起菜单
    56 |
    &#xe622;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    展开菜单
    62 |
    &#xe624;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    选择
    68 |
    &#xe672;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    说明
    74 |
    &#xe63d;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    dashboard
    80 |
    &#xe941;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    group
    86 |
    &#xe950;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    home
    92 |
    &#xe951;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    unlock
    98 |
    &#xe97d;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    user
    104 |
    &#xe97f;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    unlock-o
    110 |
    &#xe9d0;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    user-o
    116 |
    &#xe9d1;
    117 |
    • 118 | 119 |
120 |

unicode引用

121 |
122 | 123 |

unicode是字体在网页端最原始的应用方式，特点是：

124 |
    125 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 126 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 127 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 128 |
129 |
130 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

131 |
132 |

unicode使用步骤如下：

133 |

第一步：拷贝项目下面生成的font-face

134 | 
@font-face {
135 |   font-family: 'iconfont';
136 |   src: url('iconfont.eot');
137 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
138 |   url('iconfont.woff') format('woff'),
139 |   url('iconfont.ttf') format('truetype'),
140 |   url('iconfont.svg#iconfont') format('svg');
141 | }
142 |
143 |

第二步：定义使用iconfont的样式

144 | 
.iconfont{
145 |   font-family:"iconfont" !important;
146 |   font-size:16px;font-style:normal;
147 |   -webkit-font-smoothing: antialiased;
148 |   -webkit-text-stroke-width: 0.2px;
149 |   -moz-osx-font-smoothing: grayscale;
150 | }
151 |
152 |

第三步：挑选相应图标并获取字体编码，应用于页面

153 | 
<i class="iconfont">&#x33;</i>
154 | 155 |
156 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

157 |
158 |
159 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /src/components/goods/Uploader.vue: -------------------------------------------------------------------------------- 1 | 79 | 190 | 193 | 195 | -------------------------------------------------------------------------------- /src/assets/fonts/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    choose
    35 |
    #icon-choose
    36 |
    • 37 | 38 |
  • 39 | 42 |
    说明
    43 |
    #icon-102
    44 |
    • 45 | 46 |
  • 47 | 50 |
    图表切换
    51 |
    #icon-tubiaoqiehuan
    52 |
    • 53 | 54 |
  • 55 | 58 |
    收起菜单
    59 |
    #icon-shouqicaidan
    60 |
    • 61 | 62 |
  • 63 | 66 |
    展开菜单
    67 |
    #icon-zhankaicaidan
    68 |
    • 69 | 70 |
  • 71 | 74 |
    选择
    75 |
    #icon-xuanze
    76 |
    • 77 | 78 |
  • 79 | 82 |
    说明
    83 |
    #icon-shuoming
    84 |
    • 85 | 86 |
  • 87 | 90 |
    dashboard
    91 |
    #icon-dashboard
    92 |
    • 93 | 94 |
  • 95 | 98 |
    group
    99 |
    #icon-group
    100 |
    • 101 | 102 |
  • 103 | 106 |
    home
    107 |
    #icon-home
    108 |
    • 109 | 110 |
  • 111 | 114 |
    unlock
    115 |
    #icon-unlock
    116 |
    • 117 | 118 |
  • 119 | 122 |
    user
    123 |
    #icon-user
    124 |
    • 125 | 126 |
  • 127 | 130 |
    unlock-o
    131 |
    #icon-unlock-o
    132 |
    • 133 | 134 |
  • 135 | 138 |
    user-o
    139 |
    #icon-user-o
    140 |
    • 141 | 142 |
143 | 144 | 145 |

symbol引用

146 |
147 | 148 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 149 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

150 |
    151 |
  • 支持多色图标了，不再受单色限制。
    • 152 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 153 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 154 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 155 |
156 |

使用步骤如下：

157 |

第一步：引入项目下面生成的symbol代码：

158 | 
<script src="./iconfont.js"></script>
159 |

第二步：加入通用css代码（引入一次就行）：

160 | 
<style type="text/css">
161 | .icon {
162 |    width: 1em; height: 1em;
163 |    vertical-align: -0.15em;
164 |    fill: currentColor;
165 |    overflow: hidden;
166 | }
167 | </style>
168 |

第三步：挑选相应图标并获取类名，应用于页面：

169 | 
<svg class="icon" aria-hidden="true">
170 |   <use xlink:href="#icon-xxx"></use>
171 | </svg>
172 |
173 |
174 | 175 | 176 | -------------------------------------------------------------------------------- /src/components/goods/List.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 202 | 203 | 204 | 213 | -------------------------------------------------------------------------------- /src/assets/fonts/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /src/assets/images/login-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 21 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/components/goods/Add.vue: -------------------------------------------------------------------------------- 1 | 118 | 225 | 229 | 230 | 244 | -------------------------------------------------------------------------------- /src/components/layout/Sidenav.vue: -------------------------------------------------------------------------------- 1 | 98 | 99 | 266 | 267 | 271 | 272 | 275 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/assets/fonts/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /src/components/dashboard/Index.vue: -------------------------------------------------------------------------------- 1 | 207 | 208 | 444 | 445 | 446 | 453 | -------------------------------------------------------------------------------- /src/components/dashboard/Workplace.vue: -------------------------------------------------------------------------------- 1 | 207 | 208 | 444 | 445 | 446 | 453 | -------------------------------------------------------------------------------- /src/components/news/Add.vue: -------------------------------------------------------------------------------- 1 | 202 | 444 | 472 | 473 | 502 | --------------------------------------------------------------------------------