feat: 添加加密货币图标到账户选择界面,并优化样式

This commit is contained in:
2025-12-25 19:32:26 +07:00
parent 979be74f88
commit 5042f92693

View File

@@ -7,6 +7,7 @@ import { ErrorMessage, Field, Form } from "vee-validate";
import * as yup from "yup";
import { client, safeClient } from "@/api";
import { AssetCodeEnum } from "@/api/enum";
import { getCryptoIcon } from "@/config/crypto";
const { t } = useI18n();
const router = useRouter();
@@ -151,7 +152,10 @@ function getAccountTypeName(type: AccountType) {
lines="none"
>
<ion-radio :value="item">
{{ item }}
<div class="flex items-center gap-2">
<component :is="getCryptoIcon(item)" class="w-6 h-6" />
{{ item }}
</div>
</ion-radio>
</ion-item>
</div>
@@ -165,8 +169,8 @@ function getAccountTypeName(type: AccountType) {
<div class="relative flex flex-col gap-3">
<Field name="fromAccount">
<template #default="{ value }">
<div class="flex flex-col bg-text-850 rounded-2xl p-3">
<span class="text-sm text-text-500">{{ t('transfer.from') }}</span>
<div class="flex flex-col bg-text-900 rounded-2xl p-3">
<span class="text-xs text-text-500">{{ t('transfer.from') }}</span>
<div class="pt-2">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
</div>
@@ -178,6 +182,7 @@ function getAccountTypeName(type: AccountType) {
<ion-button
fill="solid"
color="primary"
class="swap-btn"
@click="swapAccounts"
>
<ion-icon slot="icon-only" :icon="swapVerticalOutline" class="text-xl" />
@@ -186,8 +191,8 @@ function getAccountTypeName(type: AccountType) {
<Field name="toAccount">
<template #default="{ value }">
<div class="flex flex-col bg-text-850 rounded-2xl p-3">
<span class="text-sm text-text-500">{{ t('transfer.to') }}</span>
<div class="flex flex-col bg-text-900 rounded-2xl p-3">
<span class="text-xs text-text-500">{{ t('transfer.to') }}</span>
<div class="pt-2">
<span class="text-base font-medium">{{ getAccountTypeName(value) }}</span>
</div>
@@ -242,3 +247,9 @@ function getAccountTypeName(type: AccountType) {
</ion-content>
</ion-page>
</template>
<style lang="css" scoped>
.swap-btn {
--border-radius: 100%;
}
</style>