From 39402f074165da8bfef08bc0055727cba03783c8 Mon Sep 17 00:00:00 2001 From: wangqing Date: Wed, 12 May 2021 17:52:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9Ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/form/home.scss | 33 ++--- src/assets/styles/form/index.scss | 3 +- src/assets/styles/form/mixin.scss | 5 +- src/assets/styles/index.scss | 2 +- src/assets/styles/mixin.scss | 51 ++++++++ src/assets/styles/resources/utils.scss | 52 -------- src/assets/styles/resources/variables.scss | 1 - src/components/Form/DescText/index.vue | 20 +++ src/components/Form/ImageSelect/index.vue | 83 ++++++++++++ src/components/Form/index.js | 8 ++ src/router/modules/form.js | 24 ++++ src/router/modules/root.js | 6 +- src/views/account/ForgetPwd.vue | 3 +- src/views/form/RightPanel.vue | 3 +- src/views/form/logic.vue | 13 +- src/views/form/newIndex.vue | 70 ++++++++++ src/views/home/NewIndex.vue | 142 +++++++++++++++++++++ src/views/official/index.vue | 2 +- src/views/test.vue | 1 - 19 files changed, 436 insertions(+), 86 deletions(-) delete mode 100644 src/assets/styles/resources/utils.scss delete mode 100644 src/assets/styles/resources/variables.scss create mode 100644 src/components/Form/DescText/index.vue create mode 100644 src/components/Form/ImageSelect/index.vue create mode 100644 src/components/Form/index.js create mode 100644 src/router/modules/form.js create mode 100644 src/views/form/newIndex.vue create mode 100644 src/views/home/NewIndex.vue diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss index 5a71384..c1a46c4 100644 --- a/src/assets/styles/form/home.scss +++ b/src/assets/styles/form/home.scss @@ -1,11 +1,11 @@ -$selectedColor: #fafafa; -$lighterBlue: #e4efff; +@import '../element-variables.scss'; +$selectedColor: rgba(24, 144, 255, 0.05); +$lighterBlue: #1890ff; .form-edit-container { position: relative; width: 100%; - height: 100%; + height: calc(100vh - 60px); overflow-y: hidden; - font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; } .components-list { padding: 8px; @@ -42,34 +42,35 @@ $lighterBlue: #e4efff; font-size: 15px; } &:hover { - border: 1px dashed #4144f8; - color: #4480f5; + border: 1px dashed $--color-primary; + color: $--color-primary; .svg-icon { - color: #4144f8; + color: $--color-primary; } } } .left-board { width: 260px; position: absolute; - left: 40px; + left: 10px; top: 0; - height: 100vh; + margin-top: 5px; + height: calc(100vh - 80px); + background-color: rgba(255, 255, 255, 100); + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 100); } .el-menu.el-menu--horizontal { border-bottom: none; } .left-scrollbar { - height: calc(100vh - 290px); + height: calc(100vh - 80px); overflow: hidden; margin: 5px; border-radius: 7px; - background-color: rgba(255, 255, 255, 100); - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 100); } .center-scrollbar { - height: calc(100vh - 230px); + height: calc(100vh - 60px); overflow: hidden; width: 90%; margin: 20px auto 0; @@ -91,7 +92,7 @@ $lighterBlue: #e4efff; right: 0; text-align: center; font-size: 18px; - color: #0067f3; + color: $--color-primary; letter-spacing: 4px; } .action-bar { @@ -135,7 +136,7 @@ $lighterBlue: #e4efff; right: 0; top: 0; height: 3px; - background: rgb(89, 89, 223); + background: $--color-primary; z-index: 2; } } diff --git a/src/assets/styles/form/index.scss b/src/assets/styles/form/index.scss index bc218b3..5e04dc4 100644 --- a/src/assets/styles/form/index.scss +++ b/src/assets/styles/form/index.scss @@ -1,3 +1,4 @@ +@import '../element-variables.scss'; $editorTabsborderColor: #121315; body, html { @@ -120,7 +121,7 @@ textarea { margin-left: 6px; } .el-icon-plus { - color: #409eff; + color: $--color-primary; } .el-icon-delete { color: #157a0c; diff --git a/src/assets/styles/form/mixin.scss b/src/assets/styles/form/mixin.scss index 96ac7e2..01e78b5 100644 --- a/src/assets/styles/form/mixin.scss +++ b/src/assets/styles/form/mixin.scss @@ -1,3 +1,4 @@ +@import '../element-variables.scss'; @mixin action-bar { .action-bar { height: 33px; @@ -8,7 +9,7 @@ display: inline-block; padding: 0 6px; line-height: 32px; - color: #8285f5; + color: $--color-primary; cursor: pointer; font-size: 14px; user-select: none; @@ -16,7 +17,7 @@ font-size: 20px; } &:hover { - color: #4348d4; + color: $--color-primary; } } .bar-btn + .bar-btn { diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 50c04f2..5b930b0 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -9,7 +9,7 @@ body { -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; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; } label { font-weight: 700; diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss index 90321d5..3762dca 100644 --- a/src/assets/styles/mixin.scss +++ b/src/assets/styles/mixin.scss @@ -55,3 +55,54 @@ border-bottom: $transparent-border-style; } } +// @mixin 通过 @include 调用使用 +// % 通过 @extend 调用使用 +// 文字超出隐藏，默认为单行超出隐藏，可设置多行 +@mixin text-overflow($line: 1, $fixed-width: true) { + @if ($line==1 and $fixed-width==true) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + @else { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $line; + overflow: hidden; + } +} + +// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中 +@mixin position-center($type: x) { + position: absolute; + @if ($type==x) { + left: 50%; + transform: translateX(-50%); + } + @if ($type==y) { + top: 50%; + transform: translateY(-50%); + } + @if ($type==xy) { + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + } +} + +// 文字两端对齐 +%justify-align { + text-align: justify; + text-align-last: justify; +} + +// 清除浮动 +%clearfix { + zoom: 1; + &::before, + &::after { + content: ''; + display: block; + clear: both; + } +} diff --git a/src/assets/styles/resources/utils.scss b/src/assets/styles/resources/utils.scss deleted file mode 100644 index 841b850..0000000 --- a/src/assets/styles/resources/utils.scss +++ /dev/null @@ -1,52 +0,0 @@ -// @mixin 通过 @include 调用使用 -// % 通过 @extend 调用使用 - -// 文字超出隐藏，默认为单行超出隐藏，可设置多行 -@mixin text-overflow($line: 1, $fixed-width: true) { - @if ($line==1 and $fixed-width==true) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - @else { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: $line; - overflow: hidden; - } -} - -// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中 -@mixin position-center($type: x) { - position: absolute; - @if ($type==x) { - left: 50%; - transform: translateX(-50%); - } - @if ($type==y) { - top: 50%; - transform: translateY(-50%); - } - @if ($type==xy) { - left: 50%; - top: 50%; - transform: translateX(-50%) translateY(-50%); - } -} - -// 文字两端对齐 -%justify-align { - text-align: justify; - text-align-last: justify; -} - -// 清除浮动 -%clearfix { - zoom: 1; - &::before, - &::after { - content: ''; - display: block; - clear: both; - } -} diff --git a/src/assets/styles/resources/variables.scss b/src/assets/styles/resources/variables.scss deleted file mode 100644 index d314af3..0000000 --- a/src/assets/styles/resources/variables.scss +++ /dev/null @@ -1 +0,0 @@ -// 全局变量 diff --git a/src/components/Form/DescText/index.vue b/src/components/Form/DescText/index.vue new file mode 100644 index 0000000..c2bc77c --- /dev/null +++ b/src/components/Form/DescText/index.vue @@ -0,0 +1,20 @@ + + + diff --git a/src/components/Form/ImageSelect/index.vue b/src/components/Form/ImageSelect/index.vue new file mode 100644 index 0000000..67b3af0 --- /dev/null +++ b/src/components/Form/ImageSelect/index.vue @@ -0,0 +1,83 @@ + + + + diff --git a/src/components/Form/index.js b/src/components/Form/index.js new file mode 100644 index 0000000..31fb11f --- /dev/null +++ b/src/components/Form/index.js @@ -0,0 +1,8 @@ +const ImageSelect = require('./ImageSelect/index').default +const DescText = require('./DescText/index').default +export default { + install: Vue => { + Vue.component(ImageSelect.name, ImageSelect) + Vue.component(DescText.name, DescText) + } +} diff --git a/src/router/modules/form.js b/src/router/modules/form.js new file mode 100644 index 0000000..b8ddda5 --- /dev/null +++ b/src/router/modules/form.js @@ -0,0 +1,24 @@ +export default [ + { + path: '/form1', + meta: {requireLogin: false}, + component: () => import(/* webpackChunkName: 'root' */ '@/views/form/newIndex.vue'), + children: [ + { + path: '', + meta: {requireLogin: true}, + component: () => import(/* webpackChunkName: 'root' */ '@/views/form/editor') + }, + { + path: 'logic', + meta: {requireLogin: true}, + component: () => import(/* webpackChunkName: 'root' */ '@/views/form/logic') + }, + { + path: 'statistics', + meta: {requireLogin: true}, + component: () => import(/* webpackChunkName: 'root' */ '@/views/form/statistics') + } + ] + } +] diff --git a/src/router/modules/root.js b/src/router/modules/root.js index e2bc9eb..94a65b2 100644 --- a/src/router/modules/root.js +++ b/src/router/modules/root.js @@ -20,12 +20,12 @@ export default [ component: () => import(/* webpackChunkName: 'root' */ '@/views/official/index.vue'), children: [ { - path: '/', + path: '', meta: {requireLogin: false}, component: () => import(/* webpackChunkName: 'root' */ '@/views/official/introduction.vue') }, { - path: '/login', + path: 'login', meta: {requireLogin: false}, component: () => import(/* webpackChunkName: 'root' */ '@/views/account/login.vue') }, @@ -54,7 +54,7 @@ export default [ { path: '/home1', meta: {requireLogin: false}, - component: () => import(/* webpackChunkName: 'root' */ '@/views/home/newIndex') + component: () => import(/* webpackChunkName: 'root' */ '@/views/home/NewIndex') }, { path: '/home', diff --git a/src/views/account/ForgetPwd.vue b/src/views/account/ForgetPwd.vue index cb045e3..a3a23b6 100644 --- a/src/views/account/ForgetPwd.vue +++ b/src/views/account/ForgetPwd.vue @@ -65,7 +65,7 @@ /> - + 提交 @@ -260,6 +260,7 @@ export default { diff --git a/src/views/home/NewIndex.vue b/src/views/home/NewIndex.vue new file mode 100644 index 0000000..de15d72 --- /dev/null +++ b/src/views/home/NewIndex.vue @@ -0,0 +1,142 @@ + + + + + diff --git a/src/views/official/index.vue b/src/views/official/index.vue index 8f3b9c9..a00d198 100644 --- a/src/views/official/index.vue +++ b/src/views/official/index.vue @@ -21,7 +21,7 @@ 控 制 台 登 录 diff --git a/src/views/test.vue b/src/views/test.vue index 64ce195..558b94c 100644 --- a/src/views/test.vue +++ b/src/views/test.vue @@ -30,7 +30,6 @@ export default { methods: { success(params) { // eslint-disable-next-line no-debugger - debugger // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证 console.log(params) },