├── src ├── css │ ├── style.css │ ├── style.less │ └── simditor.css ├── assets │ ├── logo.png │ ├── banner.jpg │ └── dogLogo.svg ├── components │ ├── CommentList.vue │ ├── PictureAdmin.vue │ ├── UserAdmin.vue │ ├── DataBoard.vue │ ├── Login.vue │ ├── BlogList.vue │ ├── DashBoard.vue │ ├── Detail.vue │ └── newBlog.vue ├── store │ ├── index.js │ └── blog.js ├── App.vue ├── router │ └── router.js └── main.js ├── static └── .gitkeep ├── imgs ├── detail.jpg ├── blogList.jpg ├── pcIndex.png ├── adminLogin.jpg ├── dashBoard.jpg └── mobileIndex.png ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── index.html ├── README.md └── package.json /src/css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/style.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /imgs/detail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/detail.jpg -------------------------------------------------------------------------------- /imgs/blogList.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/blogList.jpg -------------------------------------------------------------------------------- /imgs/pcIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/pcIndex.png -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /imgs/adminLogin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/adminLogin.jpg -------------------------------------------------------------------------------- /imgs/dashBoard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/dashBoard.jpg -------------------------------------------------------------------------------- /imgs/mobileIndex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/imgs/mobileIndex.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkjoebinbin/cheng-blog/HEAD/src/assets/banner.jpg -------------------------------------------------------------------------------- /src/components/CommentList.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/PictureAdmin.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/UserAdmin.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "postcss-import": {}, 7 | "autoprefixer": {} 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": [["component",[ 9 | { 10 | "libraryName":"element-ui", 11 | "styleLibraryName":"theme-chalk" 12 | } 13 | ]],"transform-runtime"] 14 | } 15 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | //import {Message} from 'element-ui' 4 | 5 | Vue.use(Vuex); 6 | 7 | 8 | import blog from './blog.js' 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | export default new Vuex.Store({ 18 | modules:{ 19 | blog 20 | }, 21 | 22 | 23 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpack 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 41 | 42 | 50 | -------------------------------------------------------------------------------- /src/components/DataBoard.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 给基友写的一套博客前后台 2 | [前台主页地址:www.kc9m.com][1] 3 | 4 | 5 | [后台地址:kc9m.com/admin/admin.html][2] 6 | 7 | 8 | 9 | 10 | 11 | **不啰嗦,先看图** 12 | 13 | ![adminIndex][3] 14 | 15 | 16 | ![dashBoard][4] 17 | 18 | 19 | ![blogList][5] 20 | 21 | 22 | ![detail][6] 23 | 24 | 25 | ![pcIndex][7] 26 | 27 | 28 | [1]: http://kc9m.com 29 | [2]: http://kc9m.com/admin/admin.html 30 | [3]: https://github.com/pkjoebinbin/cheng-blog/blob/master/imgs/adminLogin.jpg 31 | [4]: https://github.com/pkjoebinbin/cheng-blog/blob/master/imgs/dashBoard.jpg 32 | [5]: https://github.com/pkjoebinbin/cheng-blog/blob/master/imgs/blogList.jpg 33 | [6]: https://github.com/pkjoebinbin/cheng-blog/blob/master/imgs/detail.jpg 34 | [7]: https://github.com/pkjoebinbin/cheng-blog/blob/master/imgs/pcIndex.png 35 | 36 | 37 | 38 | 39 | **前台页面** 40 | 41 | > 前台使用传统JQuery+PHP的做法。前端负责写页面模版,后端套模版渲染数据。博客项目来看的话,seo还是蛮重要的,服务端渲染更有优势。这个就好办多了,HTML+CSS咔咔就是一顿干,直接丢给后端基友。搞定!! 42 | 43 |
44 | 45 | **后台页面** 46 | 47 | > 技术栈:Vue全家桶+elementUI+AntV+PHP+MYSQL 48 | 49 | 后台依然是基友提供php接口,全页面Ajax请求加载。相对于我自己的博客,虽然这次开发需求差不多,但运用了新的技术和完全前后分离的开发模式,开发过程还是踩了很多坑的。 50 | 51 |
52 | 53 | 54 | **引入Vuex状态管理** 55 | 56 | > 官方解释就是更方便友好的管理组件间共享的数据,如非父子组件间的数据状态共享。 57 | 58 |
59 | 60 | **前后端彻底分离开发** 61 | 62 | > 之前的项目合作时,每当后台数据接口修改后,都需要把文件发一份给我到本地,貌似看起来是前后分离,但当修改量庞大时,操作也相当繁琐。使用webpack提供的代理模式,可以轻松解决跨域问题。只需配置好代理参数,基友修改好接口上传服务器后,前端直接调用接口即可。 63 | 64 | 65 |
66 | 67 | **elementUI框架使用** 68 | 69 | > 个人感觉,其实并没有自己纯手写来的好看,但胜在效率高,节省不少时间。 70 | 71 |
72 | 73 | **数据可视化** 74 | 75 | > 引入了阿里巴巴开源的的AntV可视化框架,整体视觉风格还不错看。 76 | -------------------------------------------------------------------------------- /src/router/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Login from '@/components/Login' 4 | import DashBoard from '@/components/DashBoard' 5 | import BlogList from '@/components/BlogList' 6 | import CommentList from '@/components/CommentList' 7 | import PictureAdmin from '@/components/PictureAdmin' 8 | import UserAdmin from '@/components/UserAdmin' 9 | import Detail from '@/components/Detail' 10 | import DataBoard from '@/components/DataBoard' 11 | 12 | 13 | Vue.use(Router) 14 | 15 | export default new Router({ 16 | routes: [ 17 | 18 | 19 | 20 | 21 | { 22 | path:'/Login', 23 | name:'Login', 24 | component:Login 25 | }, 26 | 27 | { 28 | path:'/DashBoard', 29 | name:'DashBoard', 30 | component:DashBoard, 31 | children:[ 32 | { 33 | path:'/DashBoard/bloglist/list/:list', 34 | name:'bloglist', 35 | component:BlogList, 36 | }, 37 | 38 | { 39 | path:'/DashBoard/commentlist', 40 | name:'commentlist', 41 | component:CommentList, 42 | }, 43 | 44 | { 45 | path:'/DashBoard/pictureadmin', 46 | name:'pcitureadmin', 47 | component:PictureAdmin, 48 | }, 49 | 50 | { 51 | path:'/DashBoard/useradmin', 52 | name:'useradmin', 53 | component:UserAdmin, 54 | }, 55 | { 56 | path:'/DashBoard/Detail/id/:id', 57 | name:'Detail', 58 | component:Detail 59 | }, 60 | 61 | { 62 | path:'/DashBoard/DataBoard', 63 | name:'DataBoard', 64 | component:DataBoard 65 | } 66 | 67 | 68 | ] 69 | 70 | }, 71 | 72 | 73 | 74 | 75 | { 76 | path:'*',redirect:'/Login' 77 | } 78 | 79 | ] 80 | }) 81 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "stevejoe <403060825@qq.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "@antv/g2": "^3.0.3", 14 | "element-ui": "^2.0.7", 15 | "jquery": "^3.2.1", 16 | "simditor": "^2.3.6", 17 | "vue": "^2.5.2", 18 | "vue-resource": "^1.3.4", 19 | "vue-router": "^3.0.1", 20 | "vuex": "^3.0.1" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-component": "^0.10.1", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-preset-env": "^1.3.2", 29 | "babel-preset-stage-2": "^6.22.0", 30 | "babel-register": "^6.22.0", 31 | "chalk": "^2.0.1", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "eventsource-polyfill": "^0.9.6", 35 | "extract-text-webpack-plugin": "^3.0.0", 36 | "file-loader": "^1.1.4", 37 | "friendly-errors-webpack-plugin": "^1.6.1", 38 | "html-webpack-plugin": "^2.30.1", 39 | "less": "^2.7.3", 40 | "less-loader": "^4.0.5", 41 | "node-notifier": "^5.1.2", 42 | "optimize-css-assets-webpack-plugin": "^3.2.0", 43 | "ora": "^1.2.0", 44 | "portfinder": "^1.0.13", 45 | "postcss-import": "^11.0.0", 46 | "postcss-loader": "^2.0.8", 47 | "rimraf": "^2.6.0", 48 | "semver": "^5.3.0", 49 | "shelljs": "^0.7.6", 50 | "style-loader": "^0.19.0", 51 | "url-loader": "^0.5.8", 52 | "vue-loader": "^13.3.0", 53 | "vue-style-loader": "^3.0.1", 54 | "vue-template-compiler": "^2.5.2", 55 | "webpack": "^3.6.0", 56 | "webpack-bundle-analyzer": "^2.9.0", 57 | "webpack-dev-server": "^2.9.1", 58 | "webpack-merge": "^4.1.0" 59 | }, 60 | "engines": { 61 | "node": ">= 4.0.0", 62 | "npm": ">= 3.0.0" 63 | }, 64 | "browserslist": [ 65 | "> 1%", 66 | "last 2 versions", 67 | "not ie <= 8" 68 | ] 69 | } 70 | -------------------------------------------------------------------------------- /src/components/Login.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 80 | 81 | -------------------------------------------------------------------------------- /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 App from './App' 5 | import Router from './router/router.js' 6 | import resource from 'vue-resource' 7 | import './css/style.css' 8 | import $ from 'jquery' 9 | import { 10 | Pagination, 11 | Autocomplete, 12 | Menu, 13 | Submenu, 14 | MenuItem, 15 | MenuItemGroup, 16 | Input, 17 | InputNumber, 18 | Radio, 19 | RadioGroup, 20 | RadioButton, 21 | Checkbox, 22 | CheckboxButton, 23 | CheckboxGroup, 24 | Switch, 25 | Select, 26 | Option, 27 | OptionGroup, 28 | Button, 29 | ButtonGroup, 30 | Table, 31 | TableColumn, 32 | Tabs, 33 | TabPane, 34 | Tag, 35 | Icon, 36 | Row, 37 | Col, 38 | Upload, 39 | Badge, 40 | Tooltip, 41 | Container, 42 | Header, 43 | Aside, 44 | Main, 45 | Footer, 46 | Loading, 47 | 48 | 49 | Notification} from 'element-ui' 50 | //import 'element-ui/lib/theme-chalk/index.css' 51 | 52 | import Store from './store/index.js' 53 | 54 | //import $ from 'jquery' 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | Vue.config.productionTip = false 63 | 64 | 65 | Vue.use(Pagination) 66 | 67 | Vue.use(Autocomplete) 68 | Vue.use(Tooltip) 69 | Vue.use(Menu) 70 | Vue.use(Submenu) 71 | Vue.use(MenuItem) 72 | Vue.use(MenuItemGroup) 73 | Vue.use(Input) 74 | Vue.use(InputNumber) 75 | Vue.use(Radio) 76 | Vue.use(RadioGroup) 77 | Vue.use(RadioButton) 78 | Vue.use(Checkbox) 79 | Vue.use(CheckboxButton) 80 | Vue.use(CheckboxGroup) 81 | Vue.use(Switch) 82 | Vue.use(Select) 83 | Vue.use(Option) 84 | Vue.use(OptionGroup) 85 | Vue.use(Button) 86 | Vue.use(ButtonGroup) 87 | Vue.use(Table) 88 | Vue.use(TableColumn) 89 | 90 | 91 | 92 | 93 | 94 | Vue.use(Tabs) 95 | Vue.use(TabPane) 96 | Vue.use(Tag) 97 | 98 | 99 | 100 | Vue.use(Icon) 101 | Vue.use(Row) 102 | Vue.use(Col) 103 | Vue.use(Upload) 104 | Vue.use(Badge) 105 | Vue.use(Container) 106 | Vue.use(Header) 107 | Vue.use(Aside) 108 | Vue.use(Main) 109 | Vue.use(Footer) 110 | Vue.use(Loading.directive) 111 | 112 | 113 | 114 | Vue.use(resource); 115 | /* eslint-disable no-new */ 116 | 117 | Vue.prototype.Host = ''; 118 | Vue.prototype.$loading = Loading.service; 119 | 120 | 121 | var vm = new Vue({ 122 | el: '#app', 123 | store:Store, 124 | router:Router, 125 | template: '', 126 | components: { App }, 127 | data:{ 128 | message:'1', 129 | }, 130 | 131 | created(){ 132 | 133 | } 134 | 135 | 136 | 137 | }) 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.4 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 | target:'http://kc9m.com', 16 | changeOrigin:true, 17 | pathRewrite:{ 18 | '^/test':'' 19 | } 20 | } 21 | }, 22 | 23 | // Various Dev Server settings 24 | host: 'localhost', // can be overwritten by process.env.HOST 25 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 26 | autoOpenBrowser: false, 27 | errorOverlay: true, 28 | notifyOnErrors: true, 29 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 30 | 31 | // Use Eslint Loader? 32 | // If true, your code will be linted during bundling and 33 | // linting errors and warnings will be shown in the console. 34 | useEslint: true, 35 | // If true, eslint errors and warnings will also be shown in the error overlay 36 | // in the browser. 37 | showEslintErrorsInOverlay: false, 38 | 39 | /** 40 | * Source Maps 41 | */ 42 | 43 | // https://webpack.js.org/configuration/devtool/#development 44 | devtool: 'eval-source-map', 45 | 46 | // If you have problems debugging vue-files in devtools, 47 | // set this to false - it *may* help 48 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 49 | cacheBusting: true, 50 | 51 | // CSS Sourcemaps off by default because relative paths are "buggy" 52 | // with this option, according to the CSS-Loader README 53 | // (https://github.com/webpack/css-loader#sourcemaps) 54 | // In our experience, they generally work as expected, 55 | // just be aware of this issue when enabling this option. 56 | cssSourceMap: false, 57 | }, 58 | 59 | build: { 60 | // Template for index.html 61 | index: path.resolve(__dirname, '../dist/admin.html'), 62 | 63 | // Paths 64 | assetsRoot: path.resolve(__dirname, '../dist'), 65 | assetsSubDirectory: 'static', 66 | assetsPublicPath: './', 67 | 68 | /** 69 | * Source Maps 70 | */ 71 | 72 | productionSourceMap: false, 73 | // https://webpack.js.org/configuration/devtool/#production 74 | devtool: '#source-map', 75 | 76 | // Gzip off by default as many popular static hosts such as 77 | // Surge or Netlify already gzip all static assets for you. 78 | // Before setting to `true`, make sure to: 79 | // npm install --save-dev compression-webpack-plugin 80 | productionGzip: false, 81 | productionGzipExtensions: ['js', 'css'], 82 | 83 | // Run the build command with an extra argument to 84 | // View the bundle analyzer report after build finishes: 85 | // `npm run build --report` 86 | // Set to `true` or `false` to always turn it on or off 87 | bundleAnalyzerReport: process.env.npm_config_report 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/BlogList.vue: -------------------------------------------------------------------------------- 1 | 62 | 63 | 64 | 65 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /src/components/DashBoard.vue: -------------------------------------------------------------------------------- 1 | 86 | 87 | 136 | 137 | -------------------------------------------------------------------------------- /src/components/Detail.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 38 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /src/components/newBlog.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 38 | 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /src/assets/dogLogo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/store/blog.js: -------------------------------------------------------------------------------- 1 | 2 | import Vue from 'vue' 3 | import {Message,MessageBox} from 'element-ui' 4 | 5 | 6 | const state = { 7 | 8 | Page:1, 9 | bloglist:null, 10 | 11 | tagList:null, 12 | 13 | blogTotal:null, 14 | search:null, 15 | detail:{ 16 | title:null, 17 | label:null, 18 | img:null, 19 | center:null, 20 | classify:null, 21 | id:null, 22 | }, 23 | 24 | detailLength:null, 25 | nowLength:null, 26 | 27 | 28 | 29 | 30 | 31 | 32 | }; 33 | 34 | 35 | const actions = { 36 | 37 | //获取列表数据 38 | getListData:({commit},params)=>{ 39 | 40 | Vue.http.post( 41 | '/index/Article/ArticleList', 42 | {class:params}, 43 | {emulateJSON:true} 44 | ).then(function(res){ 45 | commit('currentPageResize'); 46 | commit('add',res.data) 47 | 48 | },function(res){ 49 | console.log(res); 50 | Message({ 51 | message:'网络错误,请重新刷新', 52 | type:'error', 53 | center:true, 54 | duration:0, 55 | showClose:true 56 | 57 | }) 58 | 59 | }) 60 | }, 61 | 62 | 63 | //搜索 64 | search({commit},router){ 65 | 66 | if(state.search == '' || state.search == null){ 67 | MessageBox.alert('请输入内容','反馈',{ 68 | confirmButtonText: '确定', 69 | }) 70 | return false; 71 | }else{ 72 | Vue.http.post( 73 | '/index/Article/ArticleList', 74 | {title:state.search}, 75 | {emulateJSON:true} 76 | ).then(function(res){ 77 | router.push({ name: 'bloglist',params: { list:'search' } }); 78 | commit('add',res.data); 79 | commit('currentPageResize'); 80 | 81 | },function(res){ 82 | console.log(res); 83 | Message({ 84 | message:'网络错误,请重新刷新', 85 | type:'error', 86 | center:true, 87 | duration:0, 88 | showClose:true 89 | 90 | }) 91 | 92 | }) 93 | } 94 | 95 | 96 | }, 97 | 98 | 99 | //登录 100 | login:({commit},params)=>{ 101 | Vue.http.post( 102 | '/index/Login/Login', 103 | {kuser:params.user,kpwd:params.password}, 104 | {emulateJSON:true} 105 | ).then(function(res){ 106 | if(res.data === 200){ 107 | sessionStorage.setItem("kongUserName",params.user); 108 | MessageBox.alert('登录成功','反馈',{ 109 | confirmButtonText: '确定', 110 | callback:function(){ 111 | 112 | params.router.push({ name:'DataBoard'}); 113 | } 114 | }) 115 | }else if(res.data === 201){ 116 | MessageBox.alert('密码或用户名错误','反馈',{ 117 | confirmButtonText: '确定', 118 | }) 119 | return false; 120 | } 121 | },function(res){ 122 | alert('网络错误,请刷新后重试') 123 | }) 124 | }, 125 | 126 | 127 | //分页器获取分页列表 128 | changePage({commit},params){ 129 | 130 | 131 | 132 | if(params.list=='search'){ 133 | Vue.http.post( 134 | '/index/Article/ArticleList', 135 | {title:state.search,page:params.size}, 136 | {emulateJSON:true} 137 | ).then(function(res){ 138 | commit('add',res.data) 139 | },function(res){ 140 | 141 | }) 142 | 143 | }else{ 144 | Vue.http.post( 145 | '/index/Article/ArticleList', 146 | {class:params.list,page:params.size}, 147 | {emulateJSON:true} 148 | ).then(function(res){ 149 | commit('add',res.data) 150 | },function(res){ 151 | 152 | }) 153 | } 154 | 155 | 156 | 157 | 158 | }, 159 | 160 | //获取分类列表的总数 161 | getCount({commit},list){ 162 | Vue.http.post( 163 | '/index/Article/ArticleCount', 164 | {class:list}, 165 | {emulateJSON:true} 166 | ).then(function(res){ 167 | commit('blogTotal',res.data); 168 | 169 | },function(res){ 170 | console.log(res) 171 | 172 | }) 173 | }, 174 | 175 | 176 | //获取所有标签列表 177 | getTagList:({commit})=>{ 178 | Vue.http.post( 179 | '/index/Article/gainLabel', 180 | {emulateJSON:true} 181 | ).then(function(res){ 182 | commit('getTagList',res.data) 183 | 184 | },function(res){ 185 | console.log(res) 186 | 187 | }) 188 | }, 189 | 190 | 191 | //获取详情列表 192 | getDetail:({commit},data) =>{ 193 | 194 | if(data[0]==='newBlog'){ 195 | commit('cleanDetail'); 196 | }else{ 197 | Vue.http.post( 198 | '/index/Article/adminArticle', 199 | {id:data[0]}, 200 | {emulateJSON:true} 201 | ).then(function(res){ 202 | 203 | commit('getDetail',[res.data,data[1]]) 204 | 205 | },function(res){ 206 | console.log(res) 207 | 208 | }) 209 | } 210 | 211 | }, 212 | 213 | //删除操作 214 | deleteBlog:({commit},scope) =>{ 215 | 216 | MessageBox.confirm('此操作将永久删除该文件, 是否继续?','提示',{ 217 | confirmButtonText :'确定', 218 | cancelButtonText : '取消', 219 | type:'warning' 220 | }).then(function(){ 221 | 222 | Vue.http.post( 223 | '/index/Article/delArticle', 224 | {id:scope.row.id}, 225 | {emulateJSON:true} 226 | ).then(function(res){ 227 | 228 | 229 | if(res.data == 200){ 230 | commit('deleteBlog',scope.$index) 231 | }else{ 232 | Message({ 233 | message:'网络错误请刷新后重试', 234 | type:'error', 235 | center:true 236 | }) 237 | } 238 | 239 | 240 | },function(res){ 241 | console.log(res.data) 242 | 243 | }) 244 | 245 | 246 | }).catch(function(){ 247 | return false; 248 | }) 249 | }, 250 | 251 | 252 | //提交修改博客 253 | xiugaiBlog({commit},router){ 254 | 255 | commit('nowLength'); 256 | 257 | var classify = this.getters.detail.classify; 258 | 259 | //判断下是否有修改过,没有就不提交 260 | if(state.nowLength === state.detailLength || this.getters.detail.title===''|| this.getters.detail.img==='' || this.getters.detail.label==='' || this.getters.detail.center ==='' ){ 261 | 262 | MessageBox.alert('请完整填写内容或做出修改,没修改你保存个屁!','反馈',{ 263 | confirmButtonText:'确定', 264 | }); 265 | 266 | return false; 267 | 268 | }else{ 269 | 270 | Vue.http.post( 271 | '/index/Article/addArticle', 272 | { 273 | id:this.getters.detail.id, 274 | title:this.getters.detail.title, 275 | class:this.getters.detail.classify, 276 | label:this.getters.detail.label, 277 | center:this.getters.detail.center, 278 | img:this.getters.detail.img, 279 | }, 280 | {emulateJSON:true} 281 | ).then(function(res){ 282 | if(res.data == 200){ 283 | MessageBox.alert('修改成功','反馈',{ 284 | confirmButtonText:'确定', 285 | callback:function(){ 286 | router.push({ name: 'bloglist',params: { list:classify } }) 287 | 288 | } 289 | }) 290 | } 291 | 292 | },function(res){ 293 | console.log(res.data) 294 | }); 295 | 296 | } 297 | 298 | 299 | 300 | 301 | }, 302 | 303 | 304 | //详情页路由离开时验证 305 | testBeforeRouteLeave({commit},router){ 306 | if(router.from.params.id =='newBlog'){ 307 | if(this.getters.detail.title !==''|| this.getters.detail.img !=='' || this.getters.detail.label !=='' || this.getters.detail.center !=='' ){ 308 | MessageBox.confirm('内容未保存,是否离开?','提示',{ 309 | confirmButtonText :'确定', 310 | cancelButtonText : '取消', 311 | type:'warning' 312 | }).then(function(){ 313 | router.next(); 314 | 315 | }).catch(function(){ 316 | return false; 317 | }) 318 | }else{ 319 | router.next(); 320 | } 321 | }else{ 322 | commit('nowLength'); 323 | if(this.state.blog.nowLength!==this.state.blog.detailLength){ 324 | MessageBox.confirm('内容未保存,是否离开?','提示',{ 325 | confirmButtonText :'确定', 326 | cancelButtonText : '取消', 327 | type:'warning' 328 | }).then(function(){ 329 | router.next(); 330 | 331 | }).catch(function(){ 332 | return false; 333 | }) 334 | }else{ 335 | router.next(); 336 | 337 | } 338 | 339 | } 340 | }, 341 | 342 | //添加博客 343 | submitBlog({dispatch,commit},router){ 344 | 345 | 346 | 347 | var classify = this.getters.detail.classify; 348 | 349 | 350 | 351 | if(this.getters.detail.title===''|| this.getters.detail.img==='' || this.getters.detail.label==='' || this.getters.detail.center ==='' ){ 352 | 353 | MessageBox.alert('没写内容你提交个屁啊!','反馈',{ 354 | confirmButtonText:'确定', 355 | }) 356 | return false; 357 | }else{ 358 | Vue.http.post( 359 | '/index/Article/addArticle', 360 | { 361 | title:this.getters.detail.title, 362 | class:this.getters.detail.classify, 363 | label:this.getters.detail.label, 364 | center:this.getters.detail.center, 365 | img:this.getters.detail.img, 366 | }, 367 | {emulateJSON:true} 368 | ).then(function(res){ 369 | if(res.data == 200){ 370 | 371 | MessageBox.alert('添加成功','反馈',{ 372 | confirmButtonText:'确定', 373 | callback:function(){ 374 | router.push({ name: 'bloglist',params: { list:classify } }) 375 | 376 | } 377 | }) 378 | } 379 | 380 | },function(res){ 381 | console.log(res.data) 382 | }) 383 | } 384 | 385 | 386 | }, 387 | 388 | 389 | }; 390 | 391 | 392 | 393 | const mutations = { 394 | 395 | //添加列表内容 396 | add(state,data){ 397 | 398 | state.bloglist = data.list; 399 | state.blogTotal = data.count.length; 400 | 401 | 402 | }, 403 | 404 | //目前的博文所有字段长度 405 | nowLength(state){ 406 | state.nowLength = this.getters.detail.title.length 407 | + this.getters.detail.img.length 408 | + this.getters.detail.label.length 409 | + this.getters.detail.center.length; 410 | }, 411 | 412 | //清除列表内容 413 | cleanBlogList(state){ 414 | state.bloglist =null; 415 | console.log(state.bloglist) 416 | }, 417 | 418 | //清除详情页所有内容 419 | cleanDetail(state){ 420 | state.detail.title =''; 421 | state.detail.label =''; 422 | state.detail.img =''; 423 | state.detail.center =''; 424 | state.detail.classify =1; 425 | state.detail.id =''; 426 | state.detailLength = 0; 427 | 428 | 429 | }, 430 | 431 | //修改blog总数 432 | blogTotal(state,data){ 433 | state.blogTotal = data; 434 | }, 435 | 436 | 437 | //获取所有标签 438 | getTagList(state,data){ 439 | state.tagList = data 440 | }, 441 | 442 | 443 | //获取详情内容 444 | getDetail(state,data){ 445 | 446 | state.detail.title = data[0].Title; 447 | state.detail.label = data[0].labelling; 448 | state.detail.img = data[0].img; 449 | state.detail.center = data[0].center; 450 | state.detail.classify = data[0].classify; 451 | state.detail.id = data[0].id 452 | 453 | //setValue是把数据填充到富文本里,是富文本提供的函数 454 | data[1].setValue(state.detail.center) 455 | 456 | 457 | //获取标题,标签,图片,内容的长度 458 | var countLength = state.detail.title.length 459 | + state.detail.label.length 460 | + state.detail.img.length 461 | + state.detail.center.length; 462 | 463 | state.detailLength = countLength 464 | 465 | 466 | 467 | 468 | 469 | Message({ 470 | message:'详情博客获取成功', 471 | type:'success', 472 | center:true 473 | }) 474 | }, 475 | 476 | //修改img时改变state状态 477 | changeImg(state,message){ 478 | 479 | state.detail.img = message 480 | 481 | }, 482 | 483 | //修改title时改变state状态 484 | changeTitle(state,message){ 485 | 486 | 487 | state.detail.title = message 488 | 489 | 490 | 491 | }, 492 | 493 | //修改时改变state状态 494 | changeLabel(state,message){ 495 | state.detail.label = message 496 | 497 | }, 498 | 499 | //改变classify 500 | changeClassify(state,message){ 501 | state.detail.classify = message; 502 | 503 | }, 504 | 505 | 506 | changeCenter(state,message){ 507 | state.detail.center = message; 508 | 509 | }, 510 | 511 | 512 | //删除列表内的某条数据 513 | deleteBlog(state,index){ 514 | state.bloglist.splice(index,1); 515 | Message({ 516 | message:'删除成功', 517 | center:true 518 | }) 519 | 520 | }, 521 | 522 | 523 | //获取搜索输入内容 524 | searchChange(state,data){ 525 | state.search = data; 526 | 527 | }, 528 | 529 | //分页复位 530 | currentPageResize(state){ 531 | state.Page = 1; 532 | 533 | }, 534 | 535 | //分页改变,更改状态值 536 | currentPageChange(state,data){ 537 | state.Page = data; 538 | } 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | }; 559 | 560 | 561 | 562 | const getters ={ 563 | 564 | detail(state){ 565 | 566 | return state.detail 567 | }, 568 | 569 | blogTotal(state){ 570 | return state.blogTotal; 571 | }, 572 | 573 | currentPage(state){ 574 | 575 | return state.Page; 576 | }, 577 | 578 | search(state){ 579 | return state.search; 580 | } 581 | 582 | 583 | }; 584 | 585 | 586 | 587 | export default{ 588 | state, 589 | actions, 590 | mutations, 591 | getters 592 | } -------------------------------------------------------------------------------- /src/css/simditor.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Simditor v2.3.8 3 | * http://simditor.tower.im/ 4 | * 2017-12-11 5 | */ 6 | @font-face { 7 | font-family: 'Simditor'; 8 | src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | .simditor-icon { 13 | display: inline-block; 14 | font: normal normal normal 14px/1 'Simditor'; 15 | font-size: inherit; 16 | text-rendering: auto; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | transform: translate(0, 0); 20 | } 21 | 22 | .simditor-icon-code:before { 23 | content: '\f000'; 24 | } 25 | 26 | .simditor-icon-bold:before { 27 | content: '\f001'; 28 | } 29 | 30 | .simditor-icon-italic:before { 31 | content: '\f002'; 32 | } 33 | 34 | .simditor-icon-underline:before { 35 | content: '\f003'; 36 | } 37 | 38 | .simditor-icon-times:before { 39 | content: '\f004'; 40 | } 41 | 42 | .simditor-icon-strikethrough:before { 43 | content: '\f005'; 44 | } 45 | 46 | .simditor-icon-list-ol:before { 47 | content: '\f006'; 48 | } 49 | 50 | .simditor-icon-list-ul:before { 51 | content: '\f007'; 52 | } 53 | 54 | .simditor-icon-quote-left:before { 55 | content: '\f008'; 56 | } 57 | 58 | .simditor-icon-table:before { 59 | content: '\f009'; 60 | } 61 | 62 | .simditor-icon-link:before { 63 | content: '\f00a'; 64 | } 65 | 66 | .simditor-icon-picture-o:before { 67 | content: '\f00b'; 68 | } 69 | 70 | .simditor-icon-minus:before { 71 | content: '\f00c'; 72 | } 73 | 74 | .simditor-icon-indent:before { 75 | content: '\f00d'; 76 | } 77 | 78 | .simditor-icon-outdent:before { 79 | content: '\f00e'; 80 | } 81 | 82 | .simditor-icon-unlink:before { 83 | content: '\f00f'; 84 | } 85 | 86 | .simditor-icon-caret-down:before { 87 | content: '\f010'; 88 | } 89 | 90 | .simditor-icon-caret-right:before { 91 | content: '\f011'; 92 | } 93 | 94 | .simditor-icon-upload:before { 95 | content: '\f012'; 96 | } 97 | 98 | .simditor-icon-undo:before { 99 | content: '\f013'; 100 | } 101 | 102 | .simditor-icon-smile-o:before { 103 | content: '\f014'; 104 | } 105 | 106 | .simditor-icon-tint:before { 107 | content: '\f015'; 108 | } 109 | 110 | .simditor-icon-font:before { 111 | content: '\f016'; 112 | } 113 | 114 | .simditor-icon-html5:before { 115 | content: '\f017'; 116 | } 117 | 118 | .simditor-icon-mark:before { 119 | content: '\f018'; 120 | } 121 | 122 | .simditor-icon-align-center:before { 123 | content: '\f019'; 124 | } 125 | 126 | .simditor-icon-align-left:before { 127 | content: '\f01a'; 128 | } 129 | 130 | .simditor-icon-align-right:before { 131 | content: '\f01b'; 132 | } 133 | 134 | .simditor-icon-font-minus:before { 135 | content: '\f01c'; 136 | } 137 | 138 | .simditor-icon-markdown:before { 139 | content: '\f01d'; 140 | } 141 | 142 | .simditor-icon-checklist:before { 143 | content: '\f01e'; 144 | } 145 | 146 | .simditor { 147 | position: relative; 148 | border: 1px solid #c9d8db; 149 | } 150 | .simditor .simditor-wrapper { 151 | position: relative; 152 | background: #ffffff; 153 | } 154 | .simditor .simditor-wrapper > textarea { 155 | display: none !important; 156 | width: 100%; 157 | box-sizing: border-box; 158 | font-family: monaco; 159 | font-size: 16px; 160 | line-height: 1.6; 161 | border: none; 162 | padding: 22px 15px 40px; 163 | min-height: 300px; 164 | outline: none; 165 | background: transparent; 166 | resize: none; 167 | } 168 | .simditor .simditor-wrapper .simditor-placeholder { 169 | display: none; 170 | position: absolute; 171 | left: 0; 172 | z-index: 0; 173 | padding: 22px 15px; 174 | font-size: 16px; 175 | font-family: arial, sans-serif; 176 | line-height: 1.5; 177 | color: #999999; 178 | background: transparent; 179 | } 180 | .simditor .simditor-wrapper.toolbar-floating .simditor-toolbar { 181 | position: fixed; 182 | top: 0; 183 | z-index: 10; 184 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); 185 | } 186 | .simditor .simditor-wrapper .simditor-image-loading { 187 | width: 100%; 188 | height: 100%; 189 | position: absolute; 190 | top: 0; 191 | left: 0; 192 | z-index: 2; 193 | } 194 | .simditor .simditor-wrapper .simditor-image-loading .progress { 195 | width: 100%; 196 | height: 100%; 197 | background: rgba(0, 0, 0, 0.4); 198 | position: absolute; 199 | bottom: 0; 200 | left: 0; 201 | } 202 | .simditor .simditor-body { 203 | padding: 22px 15px 40px; 204 | height:450px; 205 | overflow:auto; 206 | outline: none; 207 | cursor: text; 208 | position: relative; 209 | z-index: 1; 210 | background: transparent; 211 | } 212 | .simditor .simditor-body a.selected { 213 | background: #b3d4fd; 214 | } 215 | .simditor .simditor-body a.simditor-mention { 216 | cursor: pointer; 217 | } 218 | .simditor .simditor-body .simditor-table { 219 | position: relative; 220 | } 221 | .simditor .simditor-body .simditor-table.resizing { 222 | cursor: col-resize; 223 | } 224 | .simditor .simditor-body .simditor-table .simditor-resize-handle { 225 | position: absolute; 226 | left: 0; 227 | top: 0; 228 | width: 10px; 229 | height: 100%; 230 | cursor: col-resize; 231 | } 232 | .simditor .simditor-body pre { 233 | /*min-height: 28px;*/ 234 | box-sizing: border-box; 235 | -moz-box-sizing: border-box; 236 | word-wrap: break-word !important; 237 | white-space: pre-wrap !important; 238 | } 239 | .simditor .simditor-body img { 240 | cursor: pointer; 241 | } 242 | .simditor .simditor-body img.selected { 243 | box-shadow: 0 0 0 4px #cccccc; 244 | } 245 | .simditor .simditor-paste-bin { 246 | position: fixed; 247 | bottom: 10px; 248 | right: 10px; 249 | width: 1px; 250 | height: 20px; 251 | font-size: 1px; 252 | line-height: 1px; 253 | overflow: hidden; 254 | padding: 0; 255 | margin: 0; 256 | opacity: 0; 257 | -webkit-user-select: text; 258 | } 259 | .simditor .simditor-toolbar { 260 | border-bottom: 1px solid #eeeeee; 261 | background: #ffffff; 262 | width: 100%; 263 | } 264 | .simditor .simditor-toolbar > ul { 265 | margin: 0; 266 | padding: 0 0 0 6px; 267 | list-style: none; 268 | } 269 | .simditor .simditor-toolbar > ul > li { 270 | position: relative; 271 | display: inline-block; 272 | font-size: 0; 273 | } 274 | .simditor .simditor-toolbar > ul > li > span.separator { 275 | display: inline-block; 276 | background: #cfcfcf; 277 | width: 1px; 278 | height: 18px; 279 | margin: 11px 15px; 280 | vertical-align: middle; 281 | } 282 | .simditor .simditor-toolbar > ul > li > .toolbar-item { 283 | display: inline-block; 284 | width: 46px; 285 | height: 40px; 286 | outline: none; 287 | color: #333333; 288 | font-size: 15px; 289 | line-height: 40px; 290 | vertical-align: middle; 291 | text-align: center; 292 | text-decoration: none; 293 | } 294 | .simditor .simditor-toolbar > ul > li > .toolbar-item span { 295 | opacity: 0.6; 296 | } 297 | .simditor .simditor-toolbar > ul > li > .toolbar-item span.simditor-icon { 298 | display: inline; 299 | line-height: normal; 300 | } 301 | .simditor .simditor-toolbar > ul > li > .toolbar-item:hover span { 302 | opacity: 1; 303 | } 304 | .simditor .simditor-toolbar > ul > li > .toolbar-item.active { 305 | background: #eeeeee; 306 | } 307 | .simditor .simditor-toolbar > ul > li > .toolbar-item.active span { 308 | opacity: 1; 309 | } 310 | .simditor .simditor-toolbar > ul > li > .toolbar-item.disabled { 311 | cursor: default; 312 | } 313 | .simditor .simditor-toolbar > ul > li > .toolbar-item.disabled span { 314 | opacity: 0.3; 315 | } 316 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title span:before { 317 | content: "H"; 318 | font-size: 19px; 319 | font-weight: bold; 320 | font-family: 'Times New Roman'; 321 | } 322 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h1 span:before { 323 | content: 'H1'; 324 | font-size: 18px; 325 | } 326 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h2 span:before { 327 | content: 'H2'; 328 | font-size: 18px; 329 | } 330 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-title.active-h3 span:before { 331 | content: 'H3'; 332 | font-size: 18px; 333 | } 334 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-image { 335 | position: relative; 336 | overflow: hidden; 337 | } 338 | .simditor .simditor-toolbar > ul > li > .toolbar-item.toolbar-item-image > input[type=file] { 339 | position: absolute; 340 | right: 0px; 341 | top: 0px; 342 | opacity: 0; 343 | font-size: 100px; 344 | cursor: pointer; 345 | } 346 | .simditor .simditor-toolbar > ul > li.menu-on .toolbar-item { 347 | position: relative; 348 | z-index: 20; 349 | background: #ffffff; 350 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 351 | } 352 | .simditor .simditor-toolbar > ul > li.menu-on .toolbar-item span { 353 | opacity: 1; 354 | } 355 | .simditor .simditor-toolbar > ul > li.menu-on .toolbar-menu { 356 | display: block; 357 | } 358 | .simditor .simditor-toolbar .toolbar-menu { 359 | display: none; 360 | position: absolute; 361 | top: 40px; 362 | left: 0; 363 | z-index: 21; 364 | background: #ffffff; 365 | text-align: left; 366 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); 367 | } 368 | .simditor .simditor-toolbar .toolbar-menu:before { 369 | content: ''; 370 | display: block; 371 | width: 46px; 372 | height: 4px; 373 | background: #ffffff; 374 | position: absolute; 375 | top: -3px; 376 | left: 0; 377 | } 378 | .simditor .simditor-toolbar .toolbar-menu ul { 379 | min-width: 160px; 380 | list-style: none; 381 | margin: 0; 382 | padding: 10px 1px; 383 | } 384 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item { 385 | display: block; 386 | font-size: 16px; 387 | line-height: 2em; 388 | padding: 0 10px; 389 | text-decoration: none; 390 | color: #666666; 391 | } 392 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item:hover { 393 | background: #f6f6f6; 394 | } 395 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h1 { 396 | font-size: 24px; 397 | color: #333333; 398 | } 399 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h2 { 400 | font-size: 22px; 401 | color: #333333; 402 | } 403 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h3 { 404 | font-size: 20px; 405 | color: #333333; 406 | } 407 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h4 { 408 | font-size: 18px; 409 | color: #333333; 410 | } 411 | .simditor .simditor-toolbar .toolbar-menu ul > li .menu-item.menu-item-h5 { 412 | font-size: 16px; 413 | color: #333333; 414 | } 415 | .simditor .simditor-toolbar .toolbar-menu ul > li .separator { 416 | display: block; 417 | border-top: 1px solid #cccccc; 418 | height: 0; 419 | line-height: 0; 420 | font-size: 0; 421 | margin: 6px 0; 422 | } 423 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color { 424 | width: 96px; 425 | } 426 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list { 427 | height: 40px; 428 | margin: 10px 6px 6px 10px; 429 | padding: 0; 430 | min-width: 0; 431 | } 432 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li { 433 | float: left; 434 | margin: 0 4px 4px 0; 435 | } 436 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color { 437 | display: block; 438 | width: 16px; 439 | height: 16px; 440 | background: #dfdfdf; 441 | border-radius: 2px; 442 | } 443 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color:hover { 444 | opacity: 0.8; 445 | } 446 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color.font-color-default { 447 | background: #333333; 448 | } 449 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-1 { 450 | background: #E33737; 451 | } 452 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-2 { 453 | background: #e28b41; 454 | } 455 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-3 { 456 | background: #c8a732; 457 | } 458 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-4 { 459 | background: #209361; 460 | } 461 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-5 { 462 | background: #418caf; 463 | } 464 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-6 { 465 | background: #aa8773; 466 | } 467 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-color .color-list li .font-color-7 { 468 | background: #999999; 469 | } 470 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table { 471 | background: #ffffff; 472 | padding: 1px; 473 | } 474 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table { 475 | border: none; 476 | border-collapse: collapse; 477 | border-spacing: 0; 478 | table-layout: fixed; 479 | } 480 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td { 481 | padding: 0; 482 | cursor: pointer; 483 | } 484 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td:before { 485 | width: 16px; 486 | height: 16px; 487 | border: 1px solid #ffffff; 488 | background: #f3f3f3; 489 | display: block; 490 | content: ""; 491 | } 492 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-create-table table td.selected:before { 493 | background: #cfcfcf; 494 | } 495 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-edit-table { 496 | display: none; 497 | } 498 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-table .menu-edit-table ul li { 499 | white-space: nowrap; 500 | } 501 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-image .menu-item-upload-image { 502 | position: relative; 503 | overflow: hidden; 504 | } 505 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-image .menu-item-upload-image input[type=file] { 506 | position: absolute; 507 | right: 0px; 508 | top: 0px; 509 | opacity: 0; 510 | font-size: 100px; 511 | cursor: pointer; 512 | } 513 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment { 514 | width: 100%; 515 | } 516 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment ul { 517 | min-width: 100%; 518 | } 519 | .simditor .simditor-toolbar .toolbar-menu.toolbar-menu-alignment .menu-item { 520 | text-align: center; 521 | } 522 | .simditor .simditor-popover { 523 | display: none; 524 | padding: 5px 8px 0; 525 | background: #ffffff; 526 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); 527 | border-radius: 2px; 528 | position: absolute; 529 | z-index: 2; 530 | } 531 | .simditor .simditor-popover .settings-field { 532 | margin: 0 0 5px 0; 533 | font-size: 12px; 534 | height: 25px; 535 | line-height: 25px; 536 | } 537 | .simditor .simditor-popover .settings-field label { 538 | display: inline-block; 539 | margin: 0 5px 0 0; 540 | } 541 | .simditor .simditor-popover .settings-field input[type=text] { 542 | display: inline-block; 543 | width: 200px; 544 | box-sizing: border-box; 545 | font-size: 12px; 546 | } 547 | .simditor .simditor-popover .settings-field input[type=text].image-size { 548 | width: 83px; 549 | } 550 | .simditor .simditor-popover .settings-field .times { 551 | display: inline-block; 552 | width: 26px; 553 | font-size: 12px; 554 | text-align: center; 555 | } 556 | .simditor .simditor-popover.link-popover .btn-unlink, .simditor .simditor-popover.image-popover .btn-upload, .simditor .simditor-popover.image-popover .btn-restore { 557 | display: inline-block; 558 | margin: 0 0 0 5px; 559 | color: #333333; 560 | font-size: 14px; 561 | outline: 0; 562 | } 563 | .simditor .simditor-popover.link-popover .btn-unlink span, .simditor .simditor-popover.image-popover .btn-upload span, .simditor .simditor-popover.image-popover .btn-restore span { 564 | opacity: 0.6; 565 | } 566 | .simditor .simditor-popover.link-popover .btn-unlink:hover span, .simditor .simditor-popover.image-popover .btn-upload:hover span, .simditor .simditor-popover.image-popover .btn-restore:hover span { 567 | opacity: 1; 568 | } 569 | .simditor .simditor-popover.image-popover .btn-upload { 570 | position: relative; 571 | display: inline-block; 572 | overflow: hidden; 573 | vertical-align: middle; 574 | } 575 | .simditor .simditor-popover.image-popover .btn-upload input[type=file] { 576 | position: absolute; 577 | right: 0px; 578 | top: 0px; 579 | opacity: 0; 580 | height: 100%; 581 | width: 28px; 582 | } 583 | .simditor.simditor-mobile .simditor-wrapper.toolbar-floating .simditor-toolbar { 584 | position: absolute; 585 | top: 0; 586 | z-index: 10; 587 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); 588 | } 589 | 590 | .simditor .simditor-body, .editor-style { 591 | font-size: 16px; 592 | font-family: arial, sans-serif; 593 | line-height: 1.6; 594 | color: #333; 595 | outline: none; 596 | word-wrap: break-word; 597 | } 598 | .simditor .simditor-body > :first-child, .editor-style > :first-child { 599 | margin-top: 0 !important; 600 | } 601 | .simditor .simditor-body a, .editor-style a { 602 | color: #4298BA; 603 | text-decoration: none; 604 | word-break: break-all; 605 | } 606 | .simditor .simditor-body a:visited, .editor-style a:visited { 607 | color: #4298BA; 608 | } 609 | .simditor .simditor-body a:hover, .editor-style a:hover { 610 | color: #0F769F; 611 | } 612 | .simditor .simditor-body a:active, .editor-style a:active { 613 | color: #9E792E; 614 | } 615 | .simditor .simditor-body a:hover, .simditor .simditor-body a:active, .editor-style a:hover, .editor-style a:active { 616 | outline: 0; 617 | } 618 | .simditor .simditor-body h1, .simditor .simditor-body h2, .simditor .simditor-body h3, .simditor .simditor-body h4, .simditor .simditor-body h5, .simditor .simditor-body h6, .editor-style h1, .editor-style h2, .editor-style h3, .editor-style h4, .editor-style h5, .editor-style h6 { 619 | font-weight: normal; 620 | margin: 40px 0 20px; 621 | color: #000000; 622 | } 623 | .simditor .simditor-body h1, .editor-style h1 { 624 | font-size: 24px; 625 | } 626 | .simditor .simditor-body h2, .editor-style h2 { 627 | font-size: 22px; 628 | } 629 | .simditor .simditor-body h3, .editor-style h3 { 630 | font-size: 20px; 631 | } 632 | .simditor .simditor-body h4, .editor-style h4 { 633 | font-size: 18px; 634 | } 635 | .simditor .simditor-body h5, .editor-style h5 { 636 | font-size: 16px; 637 | } 638 | .simditor .simditor-body h6, .editor-style h6 { 639 | font-size: 16px; 640 | } 641 | .simditor .simditor-body p, .simditor .simditor-body div, .editor-style p, .editor-style div { 642 | word-wrap: break-word; 643 | margin: 0 0 15px 0; 644 | color: #333; 645 | word-wrap: break-word; 646 | } 647 | .simditor .simditor-body b, .simditor .simditor-body strong, .editor-style b, .editor-style strong { 648 | font-weight: bold; 649 | } 650 | .simditor .simditor-body i, .simditor .simditor-body em, .editor-style i, .editor-style em { 651 | font-style: italic; 652 | } 653 | .simditor .simditor-body u, .editor-style u { 654 | text-decoration: underline; 655 | } 656 | .simditor .simditor-body strike, .simditor .simditor-body del, .editor-style strike, .editor-style del { 657 | text-decoration: line-through; 658 | } 659 | .simditor .simditor-body ul, .simditor .simditor-body ol, .editor-style ul, .editor-style ol { 660 | list-style: disc outside none; 661 | margin: 15px 0; 662 | padding: 0 0 0 40px; 663 | line-height: 1.6; 664 | } 665 | .simditor .simditor-body ul li, .simditor .simditor-body ol li, .editor-style ul li, .editor-style ol li { 666 | list-style-type: inherit; 667 | } 668 | .simditor .simditor-body ul ul, .simditor .simditor-body ul ol, .simditor .simditor-body ol ul, .simditor .simditor-body ol ol, .editor-style ul ul, .editor-style ul ol, .editor-style ol ul, .editor-style ol ol { 669 | padding-left: 30px; 670 | } 671 | .simditor .simditor-body ul ul, .simditor .simditor-body ol ul, .editor-style ul ul, .editor-style ol ul { 672 | list-style: circle outside none; 673 | } 674 | .simditor .simditor-body ul ul ul, .simditor .simditor-body ol ul ul, .editor-style ul ul ul, .editor-style ol ul ul { 675 | list-style: square outside none; 676 | } 677 | .simditor .simditor-body ol, .editor-style ol { 678 | list-style: decimal; 679 | } 680 | .simditor .simditor-body blockquote, .editor-style blockquote { 681 | border-left: 6px solid #ddd; 682 | padding: 5px 0 5px 10px; 683 | margin: 15px 0 15px 15px; 684 | } 685 | .simditor .simditor-body blockquote > :first-child, .editor-style blockquote > :first-child { 686 | margin-top: 0; 687 | } 688 | .simditor .simditor-body code, .editor-style code { 689 | display: inline-block; 690 | padding: 0 4px; 691 | margin: 0 5px; 692 | background: #eeeeee; 693 | border-radius: 3px; 694 | font-size: 13px; 695 | font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace; 696 | } 697 | .simditor .simditor-body pre, .editor-style pre { 698 | padding: 10px 5px 10px 10px; 699 | margin: 15px 0; 700 | display: block; 701 | line-height: 18px; 702 | background: #F0F0F0; 703 | border-radius: 3px; 704 | font-size: 13px; 705 | font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace; 706 | white-space: pre; 707 | word-wrap: normal; 708 | overflow-x: auto; 709 | } 710 | .simditor .simditor-body pre code, .editor-style pre code { 711 | display: block; 712 | padding: 0; 713 | margin: 0; 714 | background: none; 715 | border-radius: 0; 716 | } 717 | .simditor .simditor-body hr, .editor-style hr { 718 | display: block; 719 | height: 0px; 720 | border: 0; 721 | border-top: 1px solid #ccc; 722 | margin: 15px 0; 723 | padding: 0; 724 | } 725 | .simditor .simditor-body table, .editor-style table { 726 | width: 100%; 727 | table-layout: fixed; 728 | border-collapse: collapse; 729 | border-spacing: 0; 730 | margin: 15px 0; 731 | } 732 | .simditor .simditor-body table thead, .editor-style table thead { 733 | background-color: #f9f9f9; 734 | } 735 | .simditor .simditor-body table td, .simditor .simditor-body table th, .editor-style table td, .editor-style table th { 736 | min-width: 40px; 737 | height: 30px; 738 | border: 1px solid #ccc; 739 | vertical-align: top; 740 | padding: 2px 4px; 741 | text-align: left; 742 | box-sizing: border-box; 743 | } 744 | .simditor .simditor-body table td.active, .simditor .simditor-body table th.active, .editor-style table td.active, .editor-style table th.active { 745 | background-color: #ffffee; 746 | } 747 | .simditor .simditor-body img, .editor-style img { 748 | margin: 0 5px; 749 | vertical-align: middle; 750 | } 751 | --------------------------------------------------------------------------------