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