From 22d8bde665446494fa04495f043b414094e02def Mon Sep 17 00:00:00 2001 From: xuhuajiao <13476289682@163.com> Date: Mon, 30 May 2022 17:20:29 +0800 Subject: [PATCH] =?UTF-8?q?=E8=91=97=E5=BD=95=E7=95=8C=E9=9D=A2=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/variables.scss | 3 + src/assets/styles/yxk-admin.scss | 88 +++++- .../category/descriptionPreview/form.json | 4 +- .../category/descriptionPreview/index.vue | 296 ++++++------------ .../descriptionPreview/module/PreviewForm.vue | 135 ++++++++ .../descriptionPreview/module/SettingForm.vue | 103 ++++++ 6 files changed, 415 insertions(+), 214 deletions(-) create mode 100644 src/views/category/descriptionPreview/module/PreviewForm.vue create mode 100644 src/views/category/descriptionPreview/module/SettingForm.vue diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 486ab95..8236271 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -27,6 +27,8 @@ $mainContainerBg: #021941; $mainContainerBorder: 1px solid #113D72; $inputBorder: #339CFF; +$desPreviewColor: #3A99FD; + :export { menuText: $menuText; @@ -42,4 +44,5 @@ $inputBorder: #339CFF; mainContainerBorder: $mainContainerBorder; mainContainerBg: $mainContainerBg; inputBorder: $inputBorder; + desPreviewColor: $desPreviewColor; } diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss index c8c6aa3..755dd40 100644 --- a/src/assets/styles/yxk-admin.scss +++ b/src/assets/styles/yxk-admin.scss @@ -197,7 +197,7 @@ margin-bottom: 20px; .el-button{ margin-left: 0; - background-color: #3A99FD; + background-color: $desPreviewColor; } } @@ -570,12 +570,9 @@ } .el-form{ .el-form-item__label{ - line-height: 36px; color: $subMenuActiveText; } .el-input__inner{ - height: 36px; - line-height: 36px; color: #fff; border: 1px solid $subMenuActiveText; background-color: transparent !important; @@ -625,11 +622,24 @@ padding: 8px 28px; } .el-button--primary{ - background-color: #3A99FD; + background-color: $desPreviewColor; } } } +.el-form{ + .el-form-item__label{ + line-height: 36px; + } + .el-input__inner{ + height: 36px; + line-height: 36px; + } + .el-select { + height: 36px; + } +} + // el-tree 最终节点不显示箭头 .is-leaf::before { color: transparent; @@ -729,4 +739,70 @@ background: url(~@/assets/images/avatar.png) no-repeat #fff; background-size: cover; overflow: hidden; -} \ No newline at end of file +} + +// 著录界面表单 +.des-form{ + .el-form-item__label{ + font-weight: normal; + color: $desPreviewColor; + } + .el-input__inner{ + width: 200px; + color: $desPreviewColor; + background: #021941 !important; + border: none; + &::placeholder{ + color: $desPreviewColor !important; + } + &::-webkit-input-placeholder{ + color: $desPreviewColor !important; + } + } + .el-input__icon{ + color: $desPreviewColor !important; + } + .checkbox-item{ + height: 36px; + line-height: 36px; + text-align: right; + .el-form-item__content{ + margin-left: 0 !important; + } + .el-checkbox__input.is-disabled .el-checkbox__inner{ + background-color: transparent; + border-color: $subMenuActiveText; + &::after{ + border-color: $desPreviewColor; + } + } + span{ + // margin-right: 10px; + color: $desPreviewColor; + } + } + .input-num{ + display: flex; + justify-content: flex-end; + .el-input__inner{ + width: 50px; + } + .el-form-item__content{ + display: flex; + justify-content: flex-start; + margin-left: 0 !important; + .el-input{ + width: 60px; + } + } + span{ + color: $desPreviewColor; + line-height: 36px; + } + } +} + + + + + diff --git a/src/views/category/descriptionPreview/form.json b/src/views/category/descriptionPreview/form.json index 88b218c..1f46f3a 100644 --- a/src/views/category/descriptionPreview/form.json +++ b/src/views/category/descriptionPreview/form.json @@ -75,7 +75,7 @@ "fieldName": "th", "fieldCnName": "题号", "isInputClass": "textarea", - "isDisplayWidth": 516, + "isDisplayWidth": 510, "isFullRow": 1, "isRequired": 0 }, @@ -174,7 +174,7 @@ "fieldName": "bz", "fieldCnName": "备注", "isInputClass": "text", - "isDisplayWidth": 516, + "isDisplayWidth": 510, "isFullRow": 1, "isRequired": 0 }] diff --git a/src/views/category/descriptionPreview/index.vue b/src/views/category/descriptionPreview/index.vue index f738469..1c47b88 100644 --- a/src/views/category/descriptionPreview/index.vue +++ b/src/views/category/descriptionPreview/index.vue @@ -12,143 +12,83 @@
-

隐藏字段

+

隐藏字段

- + + +
    +
  • + +

    {{ item.fieldCnName }}

    +     +
    • +
+
- 修改 - 排序 -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 自动补零 - - - - - - 显示一整行 - - - - 输入字段 - - - - 必填字段 - - - - 自动生成 - - - - 自动加一 - - - - 值不重复 - - - - - 位 - - - - + 修改 + 排序
+

界面预览效果

-
- - - - - - - - - - - - - - - - - - - - - - - - -
+
+ + + + + +
+ +
+ 保存 +
+
+ + + + + + +
+ 提示：请通过拖动鼠标来调整当前顺序 + +
+ 保存 +
+
+ + @@ -161,12 +101,9 @@ export default { .des-preview-right{ height: calc(100vh - 274px); padding-right: 10px; - // overflow:hidden; overflow-y: auto; } - .des-preview-left{ - // width: 510px; flex: 1; } .des-title{ @@ -192,6 +129,10 @@ export default { margin-left: 6px; background-image: none; -webkit-text-fill-color: #fff; + transition: all ease-in .5s; + &.arrow-up{ + transform:rotate(180deg); + } } } &::before{ @@ -249,109 +190,52 @@ export default { } } - .des-form{ - width: 496px; - padding: 20px 38px 20px 20px; - margin-top: 30px; - border-radius: 4px; - background-color: #02255F; - ::v-deep .el-form-item__label{ - font-weight: normal; - line-height: 36px; - color: #3A99FD; - } - ::v-deep .el-input__inner{ - width: 200px; - height: 36px; - line-height: 36px; - color: #3A99FD; - background: #021941; - border: none; - &::placeholder{ - color: #3A99FD !important; - } - &::-webkit-input-placeholder{ - color: #3A99FD !important; - } - } - ::v-deep .el-input__icon{ - color: #3A99FD; - } - .checkbox-item{ - height: 36px; - line-height: 36px; - text-align: right; - ::v-deep .el-form-item__content{ - margin-left: 0 !important; - } - ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{ - background-color: transparent; - border-color: #339CFF; - &::after{ - border-color: #3A99FD; - } - } - span{ - margin-right: 10px; - color: #3A99FD; - } - } - .input-num{ - display: flex; - justify-content: flex-end; - ::v-deep .el-input__inner{ - width: 50px; - } - ::v-deep .el-form-item__content{ - display: flex; - justify-content: flex-start; - margin-left: 0 !important; - .el-input{ - width: 60px; - } - } - span{ - color: #3A99FD; - line-height: 36px; - } - } - } .des-preview-right{ width: 658px; margin-left: 20px; - .preview-content{ - width: 630px; - min-height: calc(100vh - 312px); - padding: 20px 15px 20px 0; + } + + .setting-dialog{ + .des-form{ + width: 100%; margin-top: 0; - border-radius: 4px; - background-color: #02255F; + padding: 20px 38px 0 20px; + background-color: transparent; + ::v-deep .el-select, ::v-deep .el-input__inner{ width: 100%; } - ::v-deep .el-textarea__inner{ - width: 100%; - color: #3A99FD; - background: #021941; - border: none; - &::placeholder{ - color: #3A99FD !important; - } - &::-webkit-input-placeholder{ - color: #3A99FD !important; + ::v-deep .input-num{ + .el-input{ + margin-right: 10px; } } - ::v-deep .el-input__prefix{ - text-align: right; - right: 5px !important; - } - .input-popover { - ::v-deep .el-input__suffix{ - right: 10px; + } + } + .preview-dialog{ + ::v-deep .el-dialog{ + width: 680px; + .preview-content{ + max-height: calc(100vh - 330px); + overflow: hidden; + overflow-y: auto; + .el-textarea__inner{ + border: 1px solid #339cff; + background-color: transparent; } } + .el-dialog__header{ + width: 420px; + } } } + .drag-tip{ + display: block; + padding-left: 20px; + padding-bottom: 10px; + font-style: normal; + font-weight: bold; + color: #fff; + } } - diff --git a/src/views/category/descriptionPreview/module/PreviewForm.vue b/src/views/category/descriptionPreview/module/PreviewForm.vue new file mode 100644 index 0000000..2bbd997 --- /dev/null +++ b/src/views/category/descriptionPreview/module/PreviewForm.vue @@ -0,0 +1,135 @@ + + + + diff --git a/src/views/category/descriptionPreview/module/SettingForm.vue b/src/views/category/descriptionPreview/module/SettingForm.vue new file mode 100644 index 0000000..fb67ba0 --- /dev/null +++ b/src/views/category/descriptionPreview/module/SettingForm.vue @@ -0,0 +1,103 @@ + + + +