Browse Source

fix(consume): 调整红包选项布局防止换行问题

将红包选项放入flex容器并允许换行,解决选项在小屏幕下换行导致的布局问题
zhangyong/feature-20260113094820-现金重构
zhangrenyuan 1 month ago
parent
commit
4e2a3c17d1
  1. 9
      src/views/consume/gold/addCoinConsume.vue

9
src/views/consume/gold/addCoinConsume.vue

@ -743,9 +743,14 @@ onMounted(async function () {
@blur="validateRedLimit()" />
</el-form-item> -->
<el-form-item prop="sumGold" :label="t('common_add.consumeTotalGold')">
<el-input v-model="addConsume.sumGold" style="width: 120px" @blur="validateRedLimit()" :disabled="addConsume.redMoney === 1" />
<el-radio v-model="addConsume.redMoney" :label="1" style="margin-left: 10px;">{{ t('common_add.使用红包') }}</el-radio>
<div style="display: flex; align-items: flex-start;">
<el-input v-model="addConsume.sumGold" style="width: 120px; flex-shrink: 0;" @blur="validateRedLimit()"
:disabled="addConsume.redMoney === 1" />
<div style="display: flex; flex-wrap: wrap; margin-left: 10px;">
<el-radio v-model="addConsume.redMoney" :label="1">{{ t('common_add.使用红包') }}</el-radio>
<el-radio v-model="addConsume.redMoney" :label="0">{{ t('common_add.不使用红包') }}</el-radio>
</div>
</div>
</el-form-item>
<el-form-item v-if="addConsume.redMoney === 1" :label="t('common_add.选择红包')">

Loading…
Cancel
Save