shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
src/style.css
View File

@@ -4,6 +4,11 @@
themes: all;
}
@utility w-option-xs {
max-width: calc(var(--container-xs) - 90px);
}
/* @plugin "@tailwindcss/typography" */
body,

20
src/views/Config/Global/FaceConfig/index.vue
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>

22
src/views/Config/Prize/PrizeConfig.vue
View File

@@ -176,11 +176,11 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
class="p-0 m-0"
>
<div
v-for="item in prizeList" :key="item.id" class="flex gap-10 items-center justify-center py-5"
v-for="item in prizeList" :key="item.id" class="flex items-center justify-center gap-10 py-5"
:class="currentPrize.id === item.id ? 'border-1 border-dotted rounded-xl' : null"
>
<label class="handle max-w-xs form-control flex items-center justify-center px-2">
<Grip class="handle cursor-move w-10 h-10" />
<label class="flex items-center justify-center max-w-xs px-2 handle form-control">
<Grip class="w-10 h-10 cursor-move handle" />
</label>
<label class="w-1/2 max-w-xs form-control">
<div class="label">
@@ -191,7 +191,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
class="w-full max-w-xs input-sm input input-bordered"
>
</label>
<label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
<label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
<div class="label">
<span class="label-text">{{ t('table.fullParticipation') }}</span>
</div>
@@ -200,7 +200,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
@change="item.isAll = !item.isAll"
>
</label>
<label class="w-1/2 max-w-xs form-control">
<label class="w-1/2 max-w-xs form-control">
<div class="label">
<span class="label-text">{{ t('table.numberParticipants') }}</span>
</div>
@@ -212,7 +212,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<progress class="w-full progress" :value="item.isUsedCount" :max="item.count" />
</div>
</label>
<label class="w-1/2 max-w-xs flex items-center gap-2 form-control">
<label class="flex items-center w-1/2 max-w-xs gap-2 form-control">
<div class="label">
<span class="label-text">{{ t('table.isDone') }}</span>
</div>
@@ -225,15 +225,15 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<div class="label">
<span class="label-text">{{ t('table.image') }}</span>
</div>
<select v-model="item.picture" class="select select-warning select-sm truncate">
<select v-model="item.picture" class="truncate select select-warning select-sm">
<option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }">❌</option>
<option disabled selected>{{ t('table.selectPicture') }}</option>
<option v-for="picItem in localImageList" :key="picItem.id" class="w-full max-w-full" :value="picItem">
<span class="w-full max-w-[200px] truncate" :title="picItem.name">{{ picItem.name }}</span>
<option v-for="picItem in localImageList" :key="picItem.id" :title="picItem.name" class="w-full max-w-full" :value="picItem">
<span class="truncate w-option-xs">{{ picItem.name }}</span>
</option>
</select>
</label>
<label v-if="item.separateCount" class="w-full max-w-xs form-control">
<label v-if="item.separateCount" class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">{{ t('table.onceNumber') }}</span>
</div>
@@ -261,7 +261,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<button v-else class="btn btn-secondary btn-xs">{{ t('button.setting') }}</button>
</div>
</label>
<label class="w-full max-w-xs form-control">
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">{{ t('table.operation') }}</span>
</div>