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