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 class="relative flex flex-col">
<div class="relative flex flex-col gap-3">
<Field name="fromAccount">
<template #default="{ field, value }">
<ion-select
v-bind="field"
:model-value="value"
class="ui-select"
interface="action-sheet"
toggle-icon=""
: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 #default="{ value }">
<div class="flex flex-col">
<span class="text-sm text-text-500">{{ t('transfer.from') }}</span>
<div class="px-4 py-3 rounded-lg">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
</div>
</div>
</template>
</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
fill="solid"
color="primary"
@click="swapAccounts"
>
<ion-icon slot="icon-only" :icon="swapVerticalOutline" />
<ion-icon slot="icon-only" :icon="swapVerticalOutline" class="text-xl" />
</ion-button>
</div>
<Field name="toAccount">
<template #default="{ field, value }">
<ion-select
v-bind="field"
:model-value="value"
class="ui-select"
interface="action-sheet"
toggle-icon=""
: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 #default="{ value }">
<div class="flex flex-col">
<span class="text-sm text-text-500">{{ t('transfer.to') }}</span>
<div class="px-4 py-3 rounded-lg">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
</div>
</div>
</template>
</Field>
</div>