From e54a6dcea66c8a69bcc897e1e1fade11e3ab0294 Mon Sep 17 00:00:00 2001 From: wangqing Date: Fri, 11 Dec 2020 18:32:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/btn.scss | 83 ++++++++ src/assets/styles/element-ui.scss | 75 +++++++ src/assets/styles/element-variables.scss | 30 +++ src/assets/styles/example.scss | 7 - src/assets/styles/{ => form}/home.scss | 0 src/assets/styles/form/index.scss | 138 +++++++++++++ src/assets/styles/form/mixin.scss | 32 +++ src/assets/styles/index.scss | 249 +++++++++++++---------- src/assets/styles/mixin.scss | 85 +++++--- src/assets/styles/sidebar.scss | 191 +++++++++++++++++ src/assets/styles/transition.scss | 42 ++++ src/assets/styles/variables.scss | 35 ++++ src/main.js | 2 + src/views/form/PreView1.vue | 2 +- src/views/form/ProjectForm.vue | 6 +- src/views/form/RightPanel.vue | 2 +- src/views/form/editor.vue | 82 ++++---- src/views/form/index.vue | 19 +- src/views/form/publish.vue | 25 ++- src/views/form/setting.vue | 11 +- src/views/form/statistics.vue | 15 +- src/views/form/theme.vue | 10 +- src/views/form/write.vue | 45 ++-- src/views/official/introduction.vue | 1 - src/views/project/MyProject.vue | 177 +++++++++++----- 25 files changed, 1076 insertions(+), 288 deletions(-) create mode 100644 src/assets/styles/btn.scss create mode 100644 src/assets/styles/element-ui.scss create mode 100644 src/assets/styles/element-variables.scss delete mode 100644 src/assets/styles/example.scss rename src/assets/styles/{ => form}/home.scss (100%) create mode 100644 src/assets/styles/form/index.scss create mode 100644 src/assets/styles/form/mixin.scss create mode 100644 src/assets/styles/sidebar.scss create mode 100644 src/assets/styles/transition.scss create mode 100644 src/assets/styles/variables.scss diff --git a/src/assets/styles/btn.scss b/src/assets/styles/btn.scss new file mode 100644 index 0000000..87e01f5 --- /dev/null +++ b/src/assets/styles/btn.scss @@ -0,0 +1,83 @@ +@import './variables.scss'; +@mixin colorBtn($color) { + background: $color; + &:hover { + color: $color; + &::before, + &::after { + background: $color; + } + } +} +.blue-btn { + @include colorBtn($blue); +} +.light-blue-btn { + @include colorBtn($light-blue); +} +.red-btn { + @include colorBtn($red); +} +.pink-btn { + @include colorBtn($pink); +} +.green-btn { + @include colorBtn($green); +} +.tiffany-btn { + @include colorBtn($tiffany); +} +.yellow-btn { + @include colorBtn($yellow); +} +.pan-btn { + font-size: 14px; + color: #fff; + padding: 14px 36px; + border-radius: 8px; + border: none; + outline: none; + transition: 600ms ease all; + position: relative; + display: inline-block; + &:hover { + background: #fff; + &::before, + &::after { + width: 100%; + transition: 600ms ease all; + } + } + &::before, + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + height: 2px; + width: 0; + transition: 400ms ease all; + } + &::after { + right: inherit; + top: inherit; + left: 0; + bottom: 0; + } +} +.custom-button { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #fff; + color: #fff; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: 0; + margin: 0; + padding: 10px 15px; + font-size: 14px; + border-radius: 4px; +} diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss new file mode 100644 index 0000000..5442f24 --- /dev/null +++ b/src/assets/styles/element-ui.scss @@ -0,0 +1,75 @@ +// cover some element-ui styles +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} +.el-upload { + input[type="file"] { + display: none !important; + } +} +.el-upload__input { + display: none; +} +.cell { + .el-tag { + margin-right: 0; + } +} +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} +.fixed-width { + .el-button--mini { + padding: 7px 10px; + min-width: 60px; + } +} +.status-col { + .cell { + padding: 0 10px; + text-align: center; + .el-tag { + margin-right: 0; + } + } +} + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block; + } +} + +// fix date-picker ui bug in filter-item +.el-range-editor.el-input__inner { + display: inline-flex !important; +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/element-variables.scss new file mode 100644 index 0000000..e594cfa --- /dev/null +++ b/src/assets/styles/element-variables.scss @@ -0,0 +1,30 @@ +/** +* I think element-ui's default theme color is too light for long-term use. +* So I modified the default color and you can modify it to your liking. +**/ + +/* theme color */ +$--color-primary: #1890ff; +$--color-success: #13ce66; +$--color-warning: #ffba00; +$--color-danger: #ff4949; +// $--color-info: #1E1E1E; + +$--button-font-weight: 400; + +// $--color-text-regular: #1f2d3d; + +$--border-color-light: #dfe4ed; +$--border-color-lighter: #e6ebf5; + +$--table-border: 1px solid #dfe6ec; + +/* icon font path, required */ +$--font-path: "~element-ui/lib/theme-chalk/fonts"; +@import "~element-ui/packages/theme-chalk/src/index"; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + theme: $--color-primary; +} diff --git a/src/assets/styles/example.scss b/src/assets/styles/example.scss deleted file mode 100644 index bb9d8db..0000000 --- a/src/assets/styles/example.scss +++ /dev/null @@ -1,7 +0,0 @@ -// 改目录下可存放第三方样式文件，或者公用样式 -// 该例子可在 view/example/sprite.vue 里查看 -.sprites { - div { - border: 1px solid #000; - } -} diff --git a/src/assets/styles/home.scss b/src/assets/styles/form/home.scss similarity index 100% rename from src/assets/styles/home.scss rename to src/assets/styles/form/home.scss diff --git a/src/assets/styles/form/index.scss b/src/assets/styles/form/index.scss new file mode 100644 index 0000000..bc218b3 --- /dev/null +++ b/src/assets/styles/form/index.scss @@ -0,0 +1,138 @@ +$editorTabsborderColor: #121315; +body, +html { + margin: 0; + padding: 0; + background: #fff; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; +} +input, +textarea { + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; +} +.editor-tabs { + background: $editorTabsborderColor; + .el-tabs__header { + margin: 0; + border-bottom-color: $editorTabsborderColor; + .el-tabs__nav { + border-color: $editorTabsborderColor; + } + } + .el-tabs__item { + height: 32px; + line-height: 32px; + color: #888a8e; + border-left: 1px solid $editorTabsborderColor !important; + background: #363636; + margin-right: 5px; + user-select: none; + } + .el-tabs__item.is-active { + background: #1e1e1e; + border-bottom-color: #1e1e1e !important; + color: #fff; + } + .el-icon-edit { + color: #f1fa8c; + } + .el-icon-document { + color: #a95812; + } + :focus.is-active.is-focus:not(:active) { + box-shadow: none; + border-radius: 0; + } +} + +// home +.right-scrollbar { + .el-scrollbar__view { + padding: 12px 18px 15px 15px; + } +} +.el-scrollbar__wrap { + box-sizing: border-box; + overflow-x: hidden !important; + margin-bottom: 0 !important; +} +.center-tabs { + .el-tabs__header { + margin-bottom: 0 !important; + } + .el-tabs__item { + width: 50%; + text-align: center; + } + .el-tabs__nav { + width: 100%; + } +} +.reg-item { + padding: 12px 6px; + background: #f8f8f8; + position: relative; + border-radius: 4px; + .close-btn { + position: absolute; + right: -6px; + top: -6px; + display: block; + width: 16px; + height: 16px; + line-height: 16px; + background: rgba(0, 0, 0, 0.2); + border-radius: 50%; + color: #fff; + text-align: center; + z-index: 1; + cursor: pointer; + font-size: 12px; + &:hover { + background: rgba(210, 23, 23, 0.5); + } + } + & + .reg-item { + margin-top: 18px; + } +} +.action-bar { + & .el-button + .el-button { + margin-left: 15px; + } + & i { + font-size: 20px; + vertical-align: middle; + position: relative; + top: -1px; + } +} +.custom-tree-node { + width: 100%; + font-size: 14px; + .node-operation { + float: right; + } + i[class*="el-icon"] + i[class*="el-icon"] { + margin-left: 6px; + } + .el-icon-plus { + color: #409eff; + } + .el-icon-delete { + color: #157a0c; + } +} +.el-scrollbar__view { + overflow-x: hidden; +} +.el-rate { + display: inline-block; + vertical-align: text-top; +} +.el-upload__tip { + line-height: 1.2; +} diff --git a/src/assets/styles/form/mixin.scss b/src/assets/styles/form/mixin.scss new file mode 100644 index 0000000..96ac7e2 --- /dev/null +++ b/src/assets/styles/form/mixin.scss @@ -0,0 +1,32 @@ +@mixin action-bar { + .action-bar { + height: 33px; + background: #f2fafb; + padding: 0 15px; + box-sizing: border-box; + .bar-btn { + display: inline-block; + padding: 0 6px; + line-height: 32px; + color: #8285f5; + cursor: pointer; + font-size: 14px; + user-select: none; + & i { + font-size: 20px; + } + &:hover { + color: #4348d4; + } + } + .bar-btn + .bar-btn { + margin-left: 8px; + } + .delete-btn { + color: #f56c6c; + &:hover { + color: #ea0b30; + } + } + } +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index bc218b3..3f0727b 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,138 +1,161 @@ -$editorTabsborderColor: #121315; -body, -html { +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; +@import './btn.scss'; +body { + height: 100%; margin: 0; - padding: 0; - background: #fff; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; -} -input, -textarea { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; -} -.editor-tabs { - background: $editorTabsborderColor; - .el-tabs__header { - margin: 0; - border-bottom-color: $editorTabsborderColor; - .el-tabs__nav { - border-color: $editorTabsborderColor; - } - } - .el-tabs__item { - height: 32px; - line-height: 32px; - color: #888a8e; - border-left: 1px solid $editorTabsborderColor !important; - background: #363636; - margin-right: 5px; - user-select: none; - } - .el-tabs__item.is-active { - background: #1e1e1e; - border-bottom-color: #1e1e1e !important; - color: #fff; - } - .el-icon-edit { - color: #f1fa8c; - } - .el-icon-document { - color: #a95812; - } - :focus.is-active.is-focus:not(:active) { - box-shadow: none; - border-radius: 0; - } + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } - -// home -.right-scrollbar { - .el-scrollbar__view { - padding: 12px 18px 15px 15px; - } +label { + font-weight: 700; } -.el-scrollbar__wrap { +html { + height: 100%; + margin: 0; box-sizing: border-box; - overflow-x: hidden !important; - margin-bottom: 0 !important; } -.center-tabs { - .el-tabs__header { - margin-bottom: 0 !important; - } - .el-tabs__item { - width: 50%; - text-align: center; - } - .el-tabs__nav { - width: 100%; - } +#app { + margin: 0; + height: 100%; } -.reg-item { - padding: 12px 6px; - background: #f8f8f8; - position: relative; - border-radius: 4px; - .close-btn { - position: absolute; - right: -6px; - top: -6px; +*, +*::before, +*::after { + box-sizing: inherit; +} +.no-padding { + padding: 0 !important; +} +.padding-content { + padding: 4px 0; +} +a:focus, +a:active { + outline: none; +} +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} +div:focus { + outline: none; +} +.fr { + float: right; +} +.fl { + float: left; +} +.pr-5 { + padding-right: 5px; +} +.pl-5 { + padding-left: 5px; +} +.block { + display: block; +} +.pointer { + cursor: pointer; +} +.inlineBlock { + display: block; +} +.clearfix { + &::after { + visibility: hidden; display: block; - width: 16px; - height: 16px; - line-height: 16px; - background: rgba(0, 0, 0, 0.2); - border-radius: 50%; - color: #fff; - text-align: center; - z-index: 1; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} +aside { + background: #eef1f6; + padding: 8px 24px; + margin-bottom: 20px; + border-radius: 2px; + display: block; + line-height: 32px; + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + color: #2c3e50; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + a { + color: #337ab7; cursor: pointer; - font-size: 12px; &:hover { - background: rgba(210, 23, 23, 0.5); + color: rgb(32, 160, 255); } } - & + .reg-item { - margin-top: 18px; - } } -.action-bar { - & .el-button + .el-button { - margin-left: 15px; - } - & i { - font-size: 20px; - vertical-align: middle; - position: relative; - top: -1px; - } + +//main-container全局样式 +.app-container { + padding: 20px; +} +.components-container { + margin: 30px 50px; + position: relative; } -.custom-tree-node { +.pagination-container { + margin-top: 30px; +} +.text-center { + text-align: center; +} +.sub-navbar { + height: 50px; + line-height: 50px; + position: relative; width: 100%; - font-size: 14px; - .node-operation { - float: right; + text-align: right; + padding-right: 20px; + transition: 600ms ease position; + background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); + .subtitle { + font-size: 20px; + color: #fff; } - i[class*="el-icon"] + i[class*="el-icon"] { - margin-left: 6px; + &.draft { + background: #d0d0d0; } - .el-icon-plus { - color: #409eff; + &.deleted { + background: #d0d0d0; } - .el-icon-delete { - color: #157a0c; +} +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + &:hover { + color: rgb(32, 160, 255); } } -.el-scrollbar__view { - overflow-x: hidden; +.filter-container { + padding-bottom: 10px; + .filter-item { + display: inline-block; + vertical-align: middle; + margin-bottom: 10px; + } } -.el-rate { - display: inline-block; - vertical-align: text-top; + +//refine vue-multiselect plugin +.multiselect { + line-height: 16px; } -.el-upload__tip { - line-height: 1.2; +.multiselect--active { + z-index: 1000 !important; } diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 96ac7e2..90321d5 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -1,32 +1,57 @@ -@mixin action-bar { - .action-bar { - height: 33px; - background: #f2fafb; - padding: 0 15px; - box-sizing: border-box; - .bar-btn { - display: inline-block; - padding: 0 6px; - line-height: 32px; - color: #8285f5; - cursor: pointer; - font-size: 14px; - user-select: none; - & i { - font-size: 20px; - } - &:hover { - color: #4348d4; - } - } - .bar-btn + .bar-btn { - margin-left: 8px; - } - .delete-btn { - color: #f56c6c; - &:hover { - color: #ea0b30; - } - } +@mixin clearfix { + &::after { + content: ""; + display: table; + clear: both; + } +} +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} +@mixin pct($pct) { + width: #{$pct}; + position: relative; + margin: 0 auto; +} +@mixin triangle($width, $height, $color, $direction) { + $width: $width/2; + $color-border-style: $height solid $color; + $transparent-border-style: $width solid transparent; + + height: 0; + width: 0; + @if $direction==up { + border-bottom: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + @else if $direction==right { + border-left: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } + @else if $direction==down { + border-top: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + @else if $direction==left { + border-right: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; } } diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss new file mode 100644 index 0000000..2400f95 --- /dev/null +++ b/src/assets/styles/sidebar.scss @@ -0,0 +1,191 @@ +#app { + .main-container { + min-height: 100%; + transition: margin-left 0.28s; + margin-left: $sideBarWidth; + position: relative; + } + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $menuBg; + height: 100%; + position: fixed; + font-size: 0; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + .scrollbar-wrapper { + overflow-x: hidden !important; + } + .el-scrollbar__bar.is-vertical { + right: 0; + } + .el-scrollbar { + height: 100%; + } + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + .is-horizontal { + display: none; + } + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + .svg-icon { + margin-right: 16px; + } + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + .is-active > .el-submenu__title { + color: $subMenuActiveText !important; + } + & .nest-menu .el-submenu > .el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: $subMenuBg !important; + &:hover { + background-color: $subMenuHover !important; + } + } + } + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + .main-container { + margin-left: 54px; + } + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + .el-tooltip { + padding: 0 !important; + .svg-icon { + margin-left: 20px; + } + .sub-el-icon { + margin-left: 19px; + } + } + } + .el-submenu { + overflow: hidden; + & > .el-submenu__title { + padding: 0 !important; + .svg-icon { + margin-left: 20px; + } + .sub-el-icon { + margin-left: 19px; + } + .el-submenu__icon-arrow { + display: none; + } + } + } + .el-menu--collapse { + .el-submenu { + & > .el-submenu__title { + & > span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0; + } + .sidebar-container { + transition: transform 0.28s; + width: $sideBarWidth !important; + } + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + .withoutAnimation { + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + & > .el-menu { + .svg-icon { + margin-right: 16px; + } + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + } + .nest-menu .el-submenu > .el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + &::-webkit-scrollbar { + width: 6px; + } + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/src/assets/styles/transition.scss b/src/assets/styles/transition.scss new file mode 100644 index 0000000..73e52bc --- /dev/null +++ b/src/assets/styles/transition.scss @@ -0,0 +1,42 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all 0.5s; +} +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all 0.5s; +} +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} +.breadcrumb-move { + transition: all 0.5s; +} +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss new file mode 100644 index 0000000..eff6f98 --- /dev/null +++ b/src/assets/styles/variables.scss @@ -0,0 +1,35 @@ +// base color +$blue:#324157; +$light-blue:#3a71a8; +$red:#c03639; +$pink: #e65d6e; +$green: #30b08f; +$tiffany: #4ab7bd; +$yellow:#fec171; +$panGreen: #30b08f; + +// sidebar +$menuText:#bfcbd9; +$menuActiveText:#409eff; +$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 + +$menuBg:#304156; +$menuHover:#263445; + +$subMenuBg:#1f2d3d; +$subMenuHover:#001528; + +$sideBarWidth: 210px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menutext: $menuText; + menuactivetext: $menuActiveText; + submenuactivetext: $subMenuActiveText; + menubg: $menuBg; + menuhover: $menuHover; + submenubg: $subMenuBg; + submenuhover: $subMenuHover; + sidebarwidth: $sideBarWidth; +} diff --git a/src/main.js b/src/main.js index 8f696d7..e1fe1d4 100644 --- a/src/main.js +++ b/src/main.js @@ -9,6 +9,8 @@ import Cookies from 'js-cookie' import router from './router/index' import api from './api' import store from './store/index' +import '@/assets/styles/index.scss' // global css + // 全局组件自动注册 import '@/components/autoRegister' import VueClipboard from 'vue-clipboard2' diff --git a/src/views/form/PreView1.vue b/src/views/form/PreView1.vue index 231b8ca..4a502d5 100644 --- a/src/views/form/PreView1.vue +++ b/src/views/form/PreView1.vue @@ -87,7 +87,7 @@ export default { this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' }, mounted() { - this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => { + this.$api.get(`/user/project/details/${this.$route.query.key}`).then(res => { if (res.data) { let fields = res.data.projectItems.map(item => { return dbDataConvertForItemJson(item) diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue index 0ad4ec8..93dc77c 100644 --- a/src/views/form/ProjectForm.vue +++ b/src/views/form/ProjectForm.vue @@ -12,13 +12,13 @@ :src="projectTheme.headImgUrl" fit="scale-down"> - +

{{ formConf.title }}

 - +

{{ formConf.description }}

@@ -103,7 +103,7 @@ export default { this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small' }, mounted() { - this.$api.get(`/user/project/details/query/${this.projectKey}`).then(res => { + this.$api.get(`/user/project/details/${this.projectKey}`).then(res => { if (res.data) { let fields = res.data.projectItems.map(item => { return dbDataConvertForItemJson(item) diff --git a/src/views/form/RightPanel.vue b/src/views/form/RightPanel.vue index 2920b62..5e87099 100644 --- a/src/views/form/RightPanel.vue +++ b/src/views/form/RightPanel.vue @@ -971,7 +971,7 @@ export default { diff --git a/src/views/form/index.vue b/src/views/form/index.vue index fd02a42..a04a2c5 100644 --- a/src/views/form/index.vue +++ b/src/views/form/index.vue @@ -18,11 +18,13 @@ - - - - - +
+ + + + + +
@@ -32,6 +34,7 @@ import theme from './theme' import setting from './setting' import publish from './publish' import statistics from './statistics' + export default { components: { editor, @@ -43,14 +46,16 @@ export default { data() { return { activeIndex: '5', - projectKey: '' + isEdit: false, + projectKey:'' } }, computed: {}, watch: {}, mounted() { this.projectKey = this.$route.query.key - console.log(this.projectKey) + this.isEdit = !!this.$route.query.active + this.activeIndex=this.$route.query.active }, methods: { handleSelect(key, keyPath) { diff --git a/src/views/form/publish.vue b/src/views/form/publish.vue index 7ad4b3a..7ebf1e3 100644 --- a/src/views/form/publish.vue +++ b/src/views/form/publish.vue @@ -42,7 +42,8 @@
下载分享二维码 + }">下载分享二维码 +
@@ -66,6 +67,7 @@ export default { mounted() { let url = window.location.protocol + '//' + window.location.host this.writeLink = `${url}/project/write?key=${this.projectKey}` + this.getProjectStatus() }, data() { return { @@ -74,8 +76,15 @@ export default { qrCodeUrl: '' } }, methods: { + getProjectStatus() { + this.$api.get(`/user/project/${this.projectKey}`).then(res => { + if (res.data.status != 1) { + this.publishStatus = true + } + }) + }, publishProject() { - this.$api.post(`/user/project/publish/${this.projectKey}`).then(res => { + this.$api.post(`/user/project/publish`, {key: this.projectKey}).then(res => { this.publishStatus = true this.msgSuccess('发布成功') }) @@ -84,12 +93,12 @@ export default { this.qrCodeUrl = dataUrl }, downloadFile(fileName, content) { - let aLink = document.createElement('a'); - let blob = this.base64ToBlob(content); //new Blob([content]); - let evt = document.createEvent("HTMLEvents"); - evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 - aLink.download = fileName; - aLink.href = URL.createObjectURL(blob); + let aLink = document.createElement('a') + let blob = this.base64ToBlob(content) //new Blob([content]); + let evt = document.createEvent('HTMLEvents') + evt.initEvent('click', true, true)//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 + aLink.download = fileName + aLink.href = URL.createObjectURL(blob) // aLink.dispatchEvent(evt); aLink.click() }, diff --git a/src/views/form/setting.vue b/src/views/form/setting.vue index ed82d4d..1656f7b 100644 --- a/src/views/form/setting.vue +++ b/src/views/form/setting.vue @@ -474,7 +474,8 @@ class="setting-input" style="width: 80%" v-model="userProjectSettingData.shareDesc"/> -
+