feat: 添加加密货币图标到账户选择界面,并优化样式
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user