From 95aca8e0c3f037b843c660a7e1221572a00f8034 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 21 Apr 2017 18:50:13 +0800 Subject: [PATCH] add view && refine css --- src/assets/iconfont/iconfont.js | 18 ++ src/router/index.js | 29 ++- src/styles/editor.scss | 348 ----------------------------- src/styles/element-ui.scss | 61 +++++ src/styles/index.scss | 208 +---------------- src/styles/mixin.scss | 2 +- src/views/example/dynamictable.vue | 39 ++++ src/views/theme/index.vue | 85 +++++++ 8 files changed, 242 insertions(+), 548 deletions(-) delete mode 100644 src/styles/editor.scss create mode 100644 src/styles/element-ui.scss create mode 100644 src/views/example/dynamictable.vue create mode 100644 src/views/theme/index.vue diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js index 966280ff..acba8d0e 100644 --- a/src/assets/iconfont/iconfont.js +++ b/src/assets/iconfont/iconfont.js @@ -14,12 +14,30 @@ '' + '' + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + '' + '' + '' + '' + '' + '' + + '' + + '' + + '' + + '' + + '' + + '' + '' + '' + '' + diff --git a/src/router/index.js b/src/router/index.js index 2bfd0d13..a19fdbe7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -39,13 +39,17 @@ const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve const LineMarker = resolve => require(['../views/charts/line'], resolve); const MixChart = resolve => require(['../views/charts/mixchart'], resolve); -/* excel*/ +/* error log*/ const ErrorLog = resolve => require(['../views/errlog/index'], resolve); /* excel*/ const ExcelDownload = resolve => require(['../views/excel/index'], resolve); +/* theme*/ +const Theme = resolve => require(['../views/theme/index'], resolve); +/* example*/ +const DynamicTable = resolve => require(['../views/example/dynamictable'], resolve); /* admin*/ @@ -86,7 +90,7 @@ export default new Router({ name: '组件', icon: 'zujian', children: [ - { path: 'index', component: componentsIndex, name: '介绍' }, + { path: 'index', component: componentsIndex, name: '介绍 ' }, { path: 'tinymce', component: Tinymce, name: '富文本编辑器' }, { path: 'markdown', component: Markdown, name: 'Markdown' }, { path: 'jsoneditor', component: JsonEditor, name: 'JSON编辑器' }, @@ -146,6 +150,27 @@ export default new Router({ { path: 'download', component: ExcelDownload, name: '导出excel' } ] }, + { + path: '/theme', + component: Layout, + redirect: 'noredirect', + name: 'theme', + icon: 'theme', + noDropdown: true, + children: [ + { path: 'index', component: Theme, name: '换肤' } + ] + }, + { + path: '/example', + component: Layout, + redirect: 'noredirect', + name: '综合实例', + icon: 'zonghe', + children: [ + { path: 'dynamictable', component: DynamicTable, name: '动态table' } + ] + }, // { // path: '/admin', // component: Layout, diff --git a/src/styles/editor.scss b/src/styles/editor.scss deleted file mode 100644 index de696c2d..00000000 --- a/src/styles/editor.scss +++ /dev/null @@ -1,348 +0,0 @@ -//富文本 -//移除 至static/tinymce/skins/lightgray.content.min.css - .small-size { - width: 800px; - margin: 0 auto; - } - img{ - max-height: 300px; - } - .note-color .dropdown-menu li .btn-group{ - &:first-child{ - display: none; - } - } - //禁止图片缩放 - .note-control-sizing { - display: none; - } - .panel-body { - $blue: #1478F0; - font-size: 16px; - line-height: 1.4em; - & > :last-child { - margin-bottom: 0; - } - img { - max-width: 100%; - display: block; - margin: 0 auto; - } - table { - width: 100% !important; - } - embed { - max-width: 100%; - margin-bottom: 30px; - } - p { - // margin-bottom: 1em; - text-align: justify; - word-break: break-all; - } - ul { - margin-bottom: 30px; - } - li { - margin-left: 20px; - margin-bottom: 30px; - } - a { - color: $blue; - } - hr { - margin: 1em auto; - border: none; - padding: 0; - width: 100%; - height: 1px; - background: #DCDCDC; - } - //add type.css start - blockquote p { - font-size: 16px; - letter-spacing: 1px; - line-height: 28px; - color: #333; - } - blockquote p:last-of-type { - margin-bottom: 0; - } - /* HTML5 媒体文件跟 img 保持一致 */ - audio, - canvas, - video { - display: inline-block; - *display: inline; - *zoom: 1; - } - /* 要注意表单元素并不继承父级 font 的问题 */ - button, - input, - select, - textarea { - font: 500 14px/1.8 'Hiragino Sans GB', Microsoft YaHei, sans-serif; - } - /* 去掉各Table cell 的边距并让其边重合 */ - table { - border-collapse: collapse; - border-spacing: 0; - } - /* IE bug fixed: th 不继承 text-align*/ - th { - text-align: inherit; - } - /* 去除默认边框 */ - fieldset, - img { - border: 0; - } - /* 解决 IE6-7 图片缩放锯齿问题 */ - img { - -ms-interpolation-mode: bicubic; - } - /* ie6 7 8(q) bug 显示为行内表现 */ - iframe { - display: block; - } - /* 块/段落引用 */ - blockquote { - position: relative; - font-size: 16px; - letter-spacing: 1px; - line-height: 28px; - margin-bottom: 40px; - padding: 20px; - background: #f0f2f5; - &:before{ - position: absolute; - content: " \300D"; - top: 10px; - left: 2px; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - color: #333; - } - &:after{ - position: absolute; - content: " \300D"; - right: 6px; - bottom: 12px; - color: #333; - } - } - blockquote blockquote { - padding: 0 0 0 1em; - margin-left: 2em; - border-left: 3px solid $blue; - } - /* Firefox 以外，元素没有下划线，需添加 */ - acronym, - abbr { - border-bottom: 1px dotted; - font-variant: normal; - } - /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ - abbr { - cursor: help; - } - /* 一致的 del 样式 */ - del { - text-decoration: line-through; - } - address, - caption, - cite, - code, - del, - em, - th, - var { - font-style: normal; - font-weight: 500; - } - em { - font-style: normal; - font-family: sans-serif; - font-weight: bold; - } - /* 对齐是排版最重要的因素, 别让什么都居中 */ - caption, - th { - text-align: left; - } - q:before, - q:after { - content: ''; - } - /* 统一上标和下标 */ - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: text-top; - } - :root sub, - :root sup { - vertical-align: baseline; - /* for ie9 and other mordern browsers */ - } - sup { - top: -0.5em; - } - sub { - bottom: -0.25em; - } - /* 让链接在 hover 状态下显示下划线 */ - a:hover { - text-decoration: underline; - } - /* 默认不显示下划线，保持页面简洁 */ - ins, - a { - text-decoration: none; - } - u, - .typo-u { - text-decoration: underline; - } - /* 标记，类似于手写的荧光笔的作用 */ - mark { - background: #fffdd1; - } - /* 代码片断 */ - pre, - code { - font-family: "Courier New", Courier, monospace; - } - pre { - border: 1px solid #ddd; - border-left-width: 0.4em; - background: #fbfbfb; - padding: 10px; - } - /* 底部印刷体、版本等标记 */ - small { - font-size: 12px; - color: #888; - } - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 18px; - font-weight: 700; - color: #1478f0; - border-left: 5px solid #1478f0; - padding-left: 10px; - margin: 30px 0; - } - h2 { - font-size: 1.2em; - } - /* 保证块/段落之间的空白隔行 */ - .typo p, - .typo pre, - .typo ul, - .typo ol, - .typo dl, - .typo form, - .typo hr, - .typo table, - .typo-p, - .typo-pre, - .typo-ul, - .typo-ol, - .typo-dl, - .typo-form, - .typo-hr, - .typo-table { - margin-bottom: 15px; - line-height: 25px; - } - /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ - .typo h1, - .typo h2, - .typo h3, - .typo h4, - .typo h5, - .typo h6, - .typo-h1, - .typo-h2, - .typo-h3, - .typo-h4, - .typo-h5, - .typo-h6 { - margin-bottom: 0.4em; - line-height: 1.5; - } - .typo h1, - .typo-h1 { - font-size: 1.8em; - } - .typo h2, - .typo-h2 { - font-size: 1.6em; - } - .typo h3, - .typo-h3 { - font-size: 1.4em; - } - .typo h4, - .typo-h0 { - font-size: 1.2em; - } - .typo h5, - .typo h6, - .typo-h5, - .typo-h6 { - font-size: 1em; - } - /* 在文章中，应该还原 ul 和 ol 的样式 */ - .typo ul, - .typo-ul { - margin-left: 1.3em; - list-style: disc; - } - .typo ol, - .typo-ol { - list-style: decimal; - margin-left: 1.9em; - } - .typo li ul, - .typo li ol, - .typo-ul ul, - .typo-ul ol, - .typo-ol ul, - .typo-ol ol { - margin-top: 0; - margin-bottom: 0; - margin-left: 2em; - } - .typo li ul, - .typo-ul ul, - .typo-ol ul { - list-style: circle; - } - /* 同 ul/ol，在文章中应用 table 基本格式 */ - .typo table th, - .typo table td, - .typo-table th, - .typo-table td { - border: 1px solid #ddd; - padding: 5px 10px; - } - .typo table th, - .typo-table th { - background: #fbfbfb; - } - .typo table thead th, - .typo-table thead th { - background: #f1f1f1; - } - } - - diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss new file mode 100644 index 00000000..a6670d59 --- /dev/null +++ b/src/styles/element-ui.scss @@ -0,0 +1,61 @@ + //覆盖一些element-ui样式 +.block-checkbox { + display: block; +} + +.operation-container { + .cell { + padding: 10px !important; + } + .el-button { + &:nth-child(3) { + margin-top: 10px; + margin-left: 0px; + } + &:nth-child(4) { + margin-top: 10px; + } + } +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + +.cell { + .el-tag { + margin-right: 8px; + } +} + +.small-padding { + .cell { + padding-left: 8px; + padding-right: 8px; + } +} + +.status-col { + .cell { + padding: 0 10px; + text-align: center; + .el-tag { + margin-right: 0px; + } + } +} + +//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + diff --git a/src/styles/index.scss b/src/styles/index.scss index 5e99cb98..802ba24a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,14 +1,11 @@ @import './btn.scss'; -// @import './editor.scss'; +@import './element-ui.scss'; @import "./mixin.scss"; body { - //height: 100%; - //overflow-y: scroll; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; - //@include scrollBar; } label { @@ -66,19 +63,14 @@ a:hover { display: block; } +.pointer { + cursor: pointer; +} + .inlineBlock { display: block; } -.components-container { - margin: 30px 50px; - position: relative; -} - -.editor-container .CodeMirror { - height: 100%!important; -} - code { background: #eef1f6; padding: 20px 10px; @@ -103,77 +95,21 @@ code { opacity: 0; } -//editor -//.editor-placeholder { -// margin: 0 auto; -// display: block; -// .editor-placeholder-title { -// text-align: center; -// font-size: 20px; -// padding-bottom: 5px; -// } -// .editor-placeholder-image { -// display: block; -// max-height: 100px; -// margin: 0 auto; -// } -//} //main-container全局样式 .app-container { padding: 20px; - //min-height: 100%; } - -//element ui upload -.upload-container { - .el-upload { - width: 100%; - .el-upload-dragger { - width: 100%; - height: 200px; - } - } +.components-container { + margin: 30px 50px; + position: relative; } - -.singleImageUpload2.upload-container { - .el-upload { - width: 100%; - height: 100%; - .el-upload-dragger { - width: 100%; - height: 100%; - .el-icon-upload { - margin: 30% 0 16px; - } - } - } -} - -.editor-video-upload { - @include clearfix; - margin-bottom: 10px; - .el-upload { - float: left; - width: 100px; - } - .el-upload-list { - float: left; - .el-upload-list__item:first-child { - margin-top: 0px; - } - } -} - -.el-upload-list--picture-card { - float: left; -} - .pagination-container { margin-top: 30px; } -.pointer { - cursor: pointer; + +.editor-container .CodeMirror { + height: 100%!important; } .wscn-icon { @@ -274,26 +210,6 @@ code { } } -//文章页textarea修改样式 -.article-textarea { - textarea { - padding-right: 40px; - resize: none; - border: none; - border-radius: 0px; - border-bottom: 1px solid #bfcbd9; - } -} - -//实时新闻创建页特殊处理 -.recentNews-container { - p { - display: inline-block; - } - .el-collapse-item__content { - padding-right: 0px; - } -} //refine vue-multiselect plugin .multiselect { @@ -304,108 +220,6 @@ code { z-index: 1000 !important; } -//reset element ui -.block-checkbox { - display: block; -} - -//上传页面不显示删除icon -.mediaUpload-container { - .el-upload__btn-delete { - display: none !important; - } -} - -.operation-container { - .cell { - padding: 10px !important; - } - .el-button { - &:nth-child(3) { - margin-top: 10px; - margin-left: 0px; - } - &:nth-child(4) { - margin-top: 10px; - } - } -} - -.el-upload { - input[type="file"] { - display: none !important; - } -} - -.el-upload__input { - display: none; -} - -.cell { - .el-tag { - margin-right: 8px; - } -} - -.small-padding { - .cell { - padding-left: 8px; - padding-right: 8px; - } -} - -.status-col { - .cell { - padding: 0 10px; - text-align: center; - .el-tag { - margin-right: 0px; - } - } -} - -//.el-form-item__content{ -// margin-left: 0px!important; -//} -.no-border { - .el-input-group__prepend, - .el-input__inner, - .el-date-editor__editor, - .multiselect__tags { - border: none; - } -} - -.el-select__tags { - max-width: 100% !important; -} - -.small-space .el-form-item { - margin-bottom: 10px; -} - -.no-padding { - .el-dropdown-menu__item { - padding: 0px; - } - .el-dropdown-menu { - padding: 0px; - } -} - -.no-hover { - .el-dropdown-menu__item:not(.is-disabled):hover { - background-color: #fff; - } -} - -.el-tooltip-fullwidth { - width: 100%; - .el-tooltip__rel { - width: 100%; - } -} - //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 .el-dialog { transform: none; diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss index fc61542b..4368917e 100644 --- a/src/styles/mixin.scss +++ b/src/styles/mixin.scss @@ -54,4 +54,4 @@ border-top: $transparent-border-style; border-bottom: $transparent-border-style; } -} \ No newline at end of file +} diff --git a/src/views/example/dynamictable.vue b/src/views/example/dynamictable.vue new file mode 100644 index 00000000..b2b844fc --- /dev/null +++ b/src/views/example/dynamictable.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue new file mode 100644 index 00000000..2ee2b587 --- /dev/null +++ b/src/views/theme/index.vue @@ -0,0 +1,85 @@ + + + + + +