From 025d44f91153fe82ceeb075bbf698f47baff7f2e Mon Sep 17 00:00:00 2001 From: hisoka0728 <1399952343@qq.com> Date: Fri, 18 Oct 2024 20:09:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=20=E8=AF=86=E5=88=AB=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E5=8F=82=E6=95=B0mobFormItemAlignMode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + .../form/form-detail/form-item/form-item.tsx | 8 +- .../cascader/ibiz-cascader/ibiz-cascader.scss | 51 ++++++---- .../ibiz-checkbox-list.scss | 11 +++ .../ibiz-checkbox/ibiz-checkbox.scss | 12 +++ .../check-box/ibiz-checkbox/ibiz-checkbox.tsx | 1 + .../ibiz-color-picker/ibiz-color-picker.scss | 5 +- .../ibiz-mpicker/ibiz-mpicker.scss | 97 +++++++++++-------- .../ibiz-picker-select-view.scss | 21 +++- .../data-picker/ibiz-picker/ibiz-picker.scss | 18 +++- .../ibiz-date-picker/ibiz-date-picker.scss | 18 ++++ .../ibiz-dropdown-list.scss | 26 +++++ .../ibiz-dropdown/ibiz-dropdown.scss | 25 +++++ .../ibiz-emoji-picker/ibiz-emoji-picker.scss | 18 +++- .../ibiz-radio/ibiz-radio.scss | 23 ++++- src/editor/rate/ibiz-rate/ibiz-rate.scss | 19 +++- src/editor/span/span-link/span-link.scss | 7 ++ src/editor/span/span/span.scss | 22 ++++- .../stepper/ibiz-stepper/ibiz-stepper.scss | 13 ++- .../switch/ibiz-switch/ibiz-switch.scss | 13 ++- .../ibiz-input-number/ibiz-input-number.scss | 7 ++ src/editor/text-box/input/input.scss | 9 +- .../ibiz-image-select/ibiz-image-select.scss | 11 +++ .../ibiz-image-upload/ibiz-image-upload.scss | 21 +++- 24 files changed, 379 insertions(+), 78 deletions(-) create mode 100644 src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index c86a960452f..ca7d6b9ea6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - 新增直接内容编辑器 - 新增列表门户部件 +- 识别全局参数mobFormItemAlignMode ### Change diff --git a/src/control/form/form-detail/form-item/form-item.tsx b/src/control/form/form-detail/form-item/form-item.tsx index 3934331467c..8b18cd3b04a 100644 --- a/src/control/form/form-detail/form-item/form-item.tsx +++ b/src/control/form/form-detail/form-item/form-item.tsx @@ -27,14 +27,17 @@ export const FormItem = defineComponent({ props.controller.setDataValue(val, name); }; const { captionItemName, caption } = props.modelData; - + const editorContentAlign = computed(() => { + const { mobformitemalignmode } = props.controller.form.controlParams; + return mobformitemalignmode || ibiz.config.form.mobFormItemAlignMode; + }); const captionText = computed(() => { if (captionItemName && props.controller.data) { return props.controller.data[captionItemName.toLowerCase()]; } return caption; }); - return { ns, captionText, c, onValueChange }; + return { ns, captionText, c, onValueChange, editorContentAlign }; }, render() { if (!this.c.state.visible) { @@ -51,6 +54,7 @@ export const FormItem = defineComponent({ disabled: this.controller.state.disabled, readonly: this.controller.model.editor!.readOnly, onChange: this.onValueChange, + class: `${this.ns.be('editor-content-align', this.editorContentAlign)}`, controlParams: editMode ? { ...this.controller.form.controlParams, editmode: editMode } : this.controller.form.controlParams, diff --git a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss index 18a720f570d..faaeb701cec 100644 --- a/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss +++ b/src/editor/cascader/ibiz-cascader/ibiz-cascader.scss @@ -1,27 +1,44 @@ @include b(cascader) { - height: 100%; + height: 100%; - .van-field { - font-size: getCssVar('form-item', 'font-size'); + .van-field { + font-size: getCssVar('form-item', 'font-size'); - &::after { - display: none; - } + &::after { + display: none; } + } - .van-cell--clickable:active { - background-color: transparent; - } + .van-cell--clickable:active { + background-color: transparent; + } - @include m(disabled) { - color: getCssVar('form-item', 'disabled-color'); + @include m(disabled) { + color: getCssVar('form-item', 'disabled-color'); - --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')}; - } + --van-field-input-text-color: #{getCssVar('form-item', 'disabled-color')}; + } + + @include m(readonly) { + --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')}; - @include m(readonly) { - --van-field-input-text-color: #{getCssVar('form-item', 'readonly-color')}; + color: getCssVar('form-item', 'readonly-color'); + } - color: getCssVar('form-item', 'readonly-color'); + &.#{bem('form-item-editor-content-align','right')} { + input { + text-align: right; + } + &.#{bem('cascader','','readonly')} { + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + input { + text-align: left; + } + &.#{bem('cascader','','readonly')} { + text-align: left; } -} \ No newline at end of file + } +} diff --git a/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss b/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss index 4aad8fce37b..44cd80b3228 100644 --- a/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss +++ b/src/editor/check-box-list/ibiz-checkbox-list/ibiz-checkbox-list.scss @@ -29,4 +29,15 @@ $checkbox-list: ('padding': getCssVar('spacing', 'tight') 0, @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); } + + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } } \ No newline at end of file diff --git a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss new file mode 100644 index 00000000000..f5782a5dafc --- /dev/null +++ b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.scss @@ -0,0 +1,12 @@ +@include b(checkbox) { + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.tsx b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.tsx index 4a04318cf33..80cbf19787d 100644 --- a/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.tsx +++ b/src/editor/check-box/ibiz-checkbox/ibiz-checkbox.tsx @@ -6,6 +6,7 @@ import { useNamespace, } from '@ibiz-template/vue3-util'; import { CheckBoxEditorController } from '../check-box-editor.controller'; +import './ibiz-checkbox.scss'; export const IBizCheckbox = defineComponent({ name: 'IBizCheckbox', diff --git a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss index fbd4eb0d8a0..6f36835461d 100644 --- a/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss +++ b/src/editor/color-picker/ibiz-color-picker/ibiz-color-picker.scss @@ -1,7 +1,10 @@ @include b(color-picker) { position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; height: 100%; - + @include e('picker') { &.van-field { position: absolute; diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss index 3614534be19..c39812f6ea5 100644 --- a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss +++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss @@ -1,51 +1,72 @@ /* mpicker 地址栏 */ @include b(mpicker) { - .van-field { - font-size: getCssVar(form-item, font-size); + .van-field { + font-size: getCssVar(form-item, font-size); - &::after { - display: none; - } + &::after { + display: none; } + } - .van-field__right-icon { - button { - color: var(--van-field-right-icon-color); - border: none; - } + .van-field__right-icon { + button { + color: var(--van-field-right-icon-color); + border: none; } + } - .van-field__control--custom { - flex-wrap: wrap; - } + .van-field__control--custom { + flex-wrap: wrap; + } - .van-field__control { - gap: getCssVar(spacing, tight); - } + .van-field__control { + gap: getCssVar(spacing, tight); + } - input:disabled { - color: getCssVar(form-item, disabled-color); - background-color: getCssVar(form-item, disabled-bg-color); - border-color: getCssVar(form-item, disabled-border-color); - -webkit-text-fill-color: getCssVar(form-item, disabled-color); - } + input:disabled { + color: getCssVar(form-item, disabled-color); + background-color: getCssVar(form-item, disabled-bg-color); + border-color: getCssVar(form-item, disabled-border-color); + -webkit-text-fill-color: getCssVar(form-item, disabled-color); + } - @include m(disabled) { - opacity: .8; - } + @include m(disabled) { + opacity: 0.8; + } - @include m(readonly) { - color: getCssVar(form-item, readonly-color); - -webkit-text-fill-color: getCssVar(form-item, readonly-color); - } + @include m(readonly) { + color: getCssVar(form-item, readonly-color); + -webkit-text-fill-color: getCssVar(form-item, readonly-color); + } - @include b(mpicker-select-item) { - display: flex; - gap: getCssVar(spacing, tight); - align-items: center; - justify-content: space-between; - padding: getCssVar(spacing, tight); - background-color: getCssVar(color, disabled, bg); - border-radius: getCssVar('border-radius', 'small'); + @include b(mpicker-select-item) { + display: flex; + gap: getCssVar(spacing, tight); + align-items: center; + justify-content: space-between; + padding: getCssVar(spacing, tight); + background-color: getCssVar(color, disabled, bg); + border-radius: getCssVar('border-radius', 'small'); + } + + &.#{bem('form-item-editor-content-align','right')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('mpicker','','readonly')}{ + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + &.#{bem('mpicker','','readonly')}{ + text-align: right; } -} \ No newline at end of file + } +} diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss index 837f52cfea2..2b76eb2721b 100644 --- a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss +++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss @@ -6,7 +6,7 @@ } @include b(picker-select-view-view) { - height: 100% + height: 100%; } .van-field__button { @@ -27,4 +27,21 @@ color: getCssVar('form-item', 'readonly-color'); } -} \ No newline at end of file + + &.#{bem('form-item-editor-content-align','right')} { + input { + text-align: right; + } + &.#{bem('picker-select-view','','readonly')} { + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + input { + text-align: left; + } + &.#{bem('picker-select-view','','readonly')} { + text-align: left; + } + } +} diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss index 0a2b297f5d7..d9afa15c62c 100644 --- a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss +++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss @@ -78,6 +78,22 @@ @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); -webkit-text-fill-color: getCssVar('form-item', 'readonly-color'); + &.#{bem('form-item-editor-content-align','right')} { + text-align: right; + } + &.#{bem('form-item-editor-content-align','left')} { + text-align: left; + } } -} \ No newline at end of file + &.#{bem('form-item-editor-content-align','right')} { + input { + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + input { + text-align: left; + } + } +} diff --git a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss index 35a54098975..857a42b697c 100644 --- a/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss +++ b/src/editor/date-picker/ibiz-date-picker/ibiz-date-picker.scss @@ -23,6 +23,24 @@ @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); } + + &.#{bem('form-item-editor-content-align','right')} { + input { + text-align: right; + } + &.#{bem('date-picker','','readonly')}{ + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + input { + text-align: left; + } + &.#{bem('date-picker','','readonly')}{ + text-align: left; + } + } + } .rolldate-container .rolldate-mask.rolldate-mask { diff --git a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss index a9f271c09ac..75ba6c0e3d9 100644 --- a/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss +++ b/src/editor/dropdown-list/ibiz-dropdown-list/ibiz-dropdown-list.scss @@ -79,6 +79,32 @@ background-color: getCssVar(color, disabled, bg); border-radius: getCssVar('border-radius', 'small'); } + + + &.#{bem('form-item-editor-content-align','right')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('dropdown-list','','readonly')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + } + &.#{bem('form-item-editor-content-align','left')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + &.#{bem('dropdown-list','','readonly')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + } } @include b(dropdown-list) { diff --git a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss index 8d7b77617c3..7c6821aa2db 100644 --- a/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss +++ b/src/editor/dropdown-list/ibiz-dropdown/ibiz-dropdown.scss @@ -48,6 +48,31 @@ color: getCssVar('form-item', 'readonly-color'); -webkit-text-fill-color: getCssVar('form-item', 'readonly-color'); } + + &.#{bem('form-item-editor-content-align','right')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('dropdown','','readonly')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + } + &.#{bem('form-item-editor-content-align','left')} { + .van-field__control--custom { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + &.#{bem('dropdown','','readonly')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + } } @include b(dropdown-readonly-text-item) { diff --git a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss index a02fc5829a5..c475f923c85 100644 --- a/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss +++ b/src/editor/dropdown-list/ibiz-emoji-picker/ibiz-emoji-picker.scss @@ -36,7 +36,23 @@ @include m('disabled') { display: flex; align-items: center; - opacity: .5; pointer-events: none; + opacity: 0.5; + } + + &.#{bem('form-item-editor-content-align','right')} { + .#{bem('emoji-picker','button')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + } + + &.#{bem('form-item-editor-content-align','left')} { + .#{bem('emoji-picker','button')} { + display: flex; + flex-direction: row; + justify-content: space-between; + } } } diff --git a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss index 936de39b12b..0fa352321b9 100644 --- a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss +++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss @@ -22,4 +22,25 @@ @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); } -} \ No newline at end of file + + &.#{bem('form-item-editor-content-align','right')} { + .van-radio-group--horizontal { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('radio','','readonly')}{ + text-align: right; + } + } + &.#{bem('form-item-editor-content-align','left')} { + .van-radio-group--horizontal { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + &.#{bem('radio','','readonly')}{ + text-align: left; + } + } +} diff --git a/src/editor/rate/ibiz-rate/ibiz-rate.scss b/src/editor/rate/ibiz-rate/ibiz-rate.scss index c14c94acda7..1c7c656bbc5 100644 --- a/src/editor/rate/ibiz-rate/ibiz-rate.scss +++ b/src/editor/rate/ibiz-rate/ibiz-rate.scss @@ -1,7 +1,18 @@ -@include b(rate){ - .van-rate{ - .van-rate__icon--full{ +@include b(rate) { + .van-rate { + .van-rate__icon--full { color: getCssVar(color, primary); } } -} \ No newline at end of file + + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/src/editor/span/span-link/span-link.scss b/src/editor/span/span-link/span-link.scss index 90d6e90bdae..434708563f9 100644 --- a/src/editor/span/span-link/span-link.scss +++ b/src/editor/span/span-link/span-link.scss @@ -8,4 +8,11 @@ @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); } + + &.#{bem('form-item-editor-content-align','right')} { + text-align: right; + } + &.#{bem('form-item-editor-content-align','left')} { + text-align: left; + } } diff --git a/src/editor/span/span/span.scss b/src/editor/span/span/span.scss index d0f01012346..99210265bc5 100644 --- a/src/editor/span/span/span.scss +++ b/src/editor/span/span/span.scss @@ -17,12 +17,28 @@ @include e('code-list') { @include when('reverse-color') { .#{bem('code-list','item')} { - padding: getCssVar(spacing-extra, tight) - getCssVar(spacing-base, tight); - border-radius: getCssVar(border-radius, large); + padding: getCssVar(spacing-extra, tight) getCssVar(spacing-base, tight); color: getCssVar(color, default); background-color: getCssVar('code-list', 'item-color'); + border-radius: getCssVar(border-radius, large); } } } + + &.#{bem('form-item-editor-content-align','right')} { + text-align: right; + .#{bem('span','code-list')}{ + display: flex; + flex-direction: row; + justify-content: flex-end; + } + } + &.#{bem('form-item-editor-content-align','left')} { + text-align: left; + .#{bem('span','code-list')}{ + display: flex; + flex-direction: row; + justify-content: flex-start; + } + } } diff --git a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss index f4aa1c450d3..3e2c679c78a 100644 --- a/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss +++ b/src/editor/stepper/ibiz-stepper/ibiz-stepper.scss @@ -1,6 +1,5 @@ @include b(stepper) { .van-stepper { - .van-stepper__minus, .van-stepper__plus { background-color: getCssVar(color, bg, 1); @@ -18,4 +17,16 @@ @include m(readonly) { color: getCssVar('form-item', 'readonly-color'); } + + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + + } } \ No newline at end of file diff --git a/src/editor/switch/ibiz-switch/ibiz-switch.scss b/src/editor/switch/ibiz-switch/ibiz-switch.scss index 714cef2a7a4..07a4667f33a 100644 --- a/src/editor/switch/ibiz-switch/ibiz-switch.scss +++ b/src/editor/switch/ibiz-switch/ibiz-switch.scss @@ -1,5 +1,14 @@ @include b('switch') { width: 100%; height: 100%; - -} \ No newline at end of file + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } +} diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss index 6a74e78521c..9cf59ec94a8 100644 --- a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss +++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss @@ -34,4 +34,11 @@ font-size: getCssVar('form-item', 'font-size'); font-style: normal; } + + &.#{bem('form-item-editor-content-align','right')} { + text-align: right; + } + &.#{bem('form-item-editor-content-align','left')} { + text-align: left; + } } \ No newline at end of file diff --git a/src/editor/text-box/input/input.scss b/src/editor/text-box/input/input.scss index 0af3adc085b..a097442e64d 100644 --- a/src/editor/text-box/input/input.scss +++ b/src/editor/text-box/input/input.scss @@ -35,4 +35,11 @@ font-size: getCssVar('form-item', 'font-size'); font-style: normal; } -} \ No newline at end of file + + &.#{bem('form-item-editor-content-align','right')} { + text-align: right; + } + &.#{bem('form-item-editor-content-align','left')} { + text-align: left; + } +} diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss index 94b459f3fc3..315cea3a0f1 100644 --- a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss +++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss @@ -9,6 +9,17 @@ } } + &.#{bem('form-item-editor-content-align','right')} { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + &.#{bem('form-item-editor-content-align','left')} { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + @include b(image-select-item-cover) { position: absolute; top: 0; diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss index c105995f0f7..a4714b45224 100644 --- a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss +++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss @@ -31,7 +31,20 @@ } } - + &.#{bem('form-item-editor-content-align','right')} { + .van-uploader { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + } + &.#{bem('form-item-editor-content-align','left')} { + .van-uploader { + display: flex; + flex-direction: row; + justify-content: flex-start; + } + } } .van-uploader__preview-delete--shadow { @@ -45,7 +58,7 @@ text-align: center; background: var(--van-uploader-delete-background); border-radius: 50%; - opacity: .6; + opacity: 0.6; } .van-uploader__preview-delete-icon { @@ -54,7 +67,7 @@ right: 0; font-size: var(--van-uploader-delete-icon-size); color: var(--van-uploader-delete-color); - transform: scale(.7) translate(0%, -10%); + transform: scale(0.7) translate(0%, -10%); } .van-uploader__upload { @@ -81,4 +94,4 @@ height: 100%; } } -} \ No newline at end of file +} -- Gitee