feat: 优化划转账户选择界面,增加间距和样式调整
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user