feat: 优化划转账户选择界面,增加间距和样式调整

This commit is contained in:
2025-12-24 18:45:11 +07:00
parent 6f43841b6e
commit d3c82160e2

View File

@@ -162,53 +162,36 @@ function getAccountTypeName(type: AccountType) {
</div> </div>
<!-- 划转账户 --> <!-- 划转账户 -->
<div class="relative flex flex-col"> <div class="relative flex flex-col gap-3">
<Field name="fromAccount"> <Field name="fromAccount">
<template #default="{ field, value }"> <template #default="{ value }">
<ion-select <div class="flex flex-col">
v-bind="field" <span class="text-sm text-text-500">{{ t('transfer.from') }}</span>
:model-value="value" <div class="px-4 py-3 rounded-lg">
class="ui-select" <span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
interface="action-sheet" </div>
toggle-icon="" </div>
:label="t('transfer.from')"
>
<ion-select-option value="funding">
{{ getAccountTypeName("funding") }}
</ion-select-option>
<ion-select-option value="trading">
{{ getAccountTypeName("trading") }}
</ion-select-option>
</ion-select>
</template> </template>
</Field> </Field>
<div class="absolute left-7.5 top-1/2 -translate-y-1/2 z-10"> <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
<ion-button <ion-button
fill="solid"
color="primary" color="primary"
@click="swapAccounts" @click="swapAccounts"
> >
<ion-icon slot="icon-only" :icon="swapVerticalOutline" /> <ion-icon slot="icon-only" :icon="swapVerticalOutline" class="text-xl" />
</ion-button> </ion-button>
</div> </div>
<Field name="toAccount"> <Field name="toAccount">
<template #default="{ field, value }"> <template #default="{ value }">
<ion-select <div class="flex flex-col">
v-bind="field" <span class="text-sm text-text-500">{{ t('transfer.to') }}</span>
:model-value="value" <div class="px-4 py-3 rounded-lg">
class="ui-select" <span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
interface="action-sheet" </div>
toggle-icon="" </div>
:label="t('transfer.to')"
>
<ion-select-option value="funding">
{{ getAccountTypeName("funding") }}
</ion-select-option>
<ion-select-option value="trading">
{{ getAccountTypeName("trading") }}
</ion-select-option>
</ion-select>
</template> </template>
</Field> </Field>
</div> </div>