fix(ui): 优化图片列表下拉选择器及表单项的样式与布局

This commit is contained in:
log1997
2025-12-08 15:37:46 +08:00
parent 0fa0dc50b2
commit af34ac8c00
3 changed files with 27 additions and 20 deletions

View File

@@ -301,40 +301,42 @@ onMounted(() => {
</label>
<select
v-model="backgroundImageValue" data-choose-theme
class="w-full max-w-xs border-solid select border-1"
class="box-border w-full max-w-xs truncate border-solid select border-1"
>
<option disabled selected>
<option disabled selected class="w-full truncate">
{{ t('table.backgroundImage') }}
</option>
<option
v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
:value="item"
:title="item.name"
class="box-border w-full truncate"
>
{{ item.name }}
<span class="truncate w-option-xs">{{ item.name }}</span>
</option>
</select>
<span class="label">请先前往图片管理上传图片</span>
</div>
<div class="grid grid-cols-2 gap-4 w-full">
<div class="flex flex-col max-w-xs items-center gap-1 form-control">
<div class="grid w-full grid-cols-2 gap-4">
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
<label class="label">
<span class="label-text">{{ t('table.cardColor') }}</span>
</label>
<ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
</div>
<div class="flex flex-col max-w-xs items-center gap-1 form-control">
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
<label class="label">
<span class="label-text">{{ t('table.winnerColor') }}</span>
</label>
<ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
</div>
<div class="flex flex-col max-w-xs gap-1 items-center form-control">
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
<label class="label">
<span class="label-text">{{ t('table.textColor') }}</span>
</label>
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
</div>
<div class="flex flex-col max-w-xs gap-1 form-control items-center">
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
<label class="label">
<span class="label-text">{{ t('table.highlightColor') }}</span>
</label>
@@ -377,7 +379,7 @@ onMounted(() => {
其他设置
</legend>
<div class="flex items-center justify-between w-full max-w-xs mb-3 gap-2 form-control">
<div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
<div class="label">
<span class="label-text">{{ t('table.alwaysDisplay') }}</span>
</div>