feat: 表单蓝色主题

master
ssc 3 years ago
parent 2e04609107
commit e7aac8a7e3
  1. 9
      src/views/plugin/workflow/mixins/theme.js
  2. 63
      src/views/plugin/workflow/styles/theme/blue.scss
  3. 6
      src/views/plugin/workflow/styles/theme/border.scss
  4. 6
      src/views/plugin/workflow/styles/theme/default.scss

@ -1,4 +1,3 @@
import { getStore, setStore } from '@/util/store'
export default { export default {
data() { data() {
return { return {
@ -9,20 +8,24 @@ export default {
}, { }, {
label: '边框', label: '边框',
value: 'border' value: 'border'
}, {
label: '蓝色',
value: 'blue'
}] }]
} }
}, },
created() { created() {
const theme = getStore({ name: 'wf-theme' }) const theme = localStorage.getItem("wf-form-theme")
if (theme || theme == '') this.theme = theme || 'default' if (theme || theme == '') this.theme = theme || 'default'
else this.theme = 'default'
}, },
watch: { watch: {
theme: { theme: {
handler(val) { handler(val) {
if (val) { if (val) {
import(`../styles/theme/${val}.scss`) import(`../styles/theme/${val}.scss`)
localStorage.setItem('wf-form-theme', val)
} }
setStore({ name: 'wf-theme', content: val })
}, },
immediate: true immediate: true
}, },

@ -0,0 +1,63 @@
// form - border
.wf-theme-blue {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail {
.avue-form__group,
.avue-form__row {
border: 1px solid #cbdcf0 !important;
}
.el-col {
border: none;
}
.el-col:nth-child(1) {
border-top: 1px solid #cbdcf0 !important;
}
.el-row {
border: none;
}
.el-form-item>.el-form-item__content {
border-left: 1px solid #cbdcf0 !important;
}
.el-table__row .el-form-item__content {
border-left: none !important;
}
.avue-form__row {
margin-bottom: 0px !important;
}
.el-form-item {
margin-bottom: 0px !important;
background: #eef6ff !important;
}
.el-form-item__label {
color: #01418a !important;
text-align: center !important;
}
.el-input.is-disabled .el-input__inner,
.el-range-editor.is-disabled,
.el-textarea.is-disabled .el-textarea__inner {
border: 1px solid transparent;
background: #fff;
background-color: #fff;
}
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
display: none;
}
}
}

@ -1,5 +1,11 @@
// form - border // form - border
.wf-theme-border { .wf-theme-border {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail { .avue--detail {
.avue-form__group, .avue-form__group,
.avue-form__row { .avue-form__row {

@ -1,4 +1,10 @@
.wf-theme-default { .wf-theme-default {
//google chrome explore
-webkit-print-color-adjust: exact;
//firefox explore
-moz-print-color-adjust: exact;
color-adjust: exact;
.avue--detail { .avue--detail {
.el-col { .el-col {
margin-bottom: 0 !important; margin-bottom: 0 !important;

Loading…
Cancel
Save