root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新多个组件的样式和逻辑，优化用户体验和代码可读性

Browse Source
This commit is contained in:
Seven
2026-01-13 21:59:51 +07:00
parent bc8da8a27a
commit 6faa846089
5 changed files with 28 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/trade-settings/bank-management/add.vue
View File

@@ -135,13 +135,13 @@ function formatCardNumber(value: string) {
<ErrorMessage name="accountName" class="text-red-500 text-sm mt-1" />
</div>
<div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-xl p-4">
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
<div class="flex gap-3">
<ion-icon
:icon="shieldCheckmark"
class="text-amber-500 text-xl mt-0.5 shrink-0"
/>
<div class="text-sm text-amber-700 dark:text-amber-300">
<div class="text-sm text-amber-600">
<p class="font-medium mb-1">
{{ t('bankCard.form.security.title') }}
</p>

75
src/views/trade-settings/bank-management/index.vue
View File

@@ -115,20 +115,16 @@ onUpdated(() => {
<IonContent :fullscreen="true">
<div class="min-h-full">
<div v-if="bankCards?.length === 0" class="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center">
<div class="w-20 h-20 rounded-full bg-[#171717] flex items-center justify-center mb-6 shadow-lg">
<div class="w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-lg">
<ion-icon :icon="cardOutline" class="text-4xl text-white" />
</div>
<h3 class="text-xl font-semibold text-text-200 mb-2">
{{ t('bankCard.empty.title') }}
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-8">
<p class="text-sm leading-relaxed mb-8">
{{ t('bankCard.empty.description') }}
</p>
<ion-button
expand="block"
fill="outline"
@click="handleAddCard"
>
<ion-button expand="block" fill="solid" @click="handleAddCard">
<ion-icon slot="start" :icon="addOutline" />
{{ t('bankCard.empty.addButton') }}
</ion-button>
@@ -136,15 +132,10 @@ onUpdated(() => {
<div v-else class="p-4">
<div class="mb-6">
<div
class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 flex items-center cursor-pointer transition-all duration-300 border-2 border-dashed border-gray-200 dark:border-gray-600"
@click="handleAddCard"
>
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
<ion-icon :icon="addOutline" class="text-white text-xl" />
</div>
<span class="font-semibold text-#151515 dark:text-white">{{ t('bankCard.list.addCard') }}</span>
</div>
<ion-button expand="block" @click="handleAddCard">
<ion-icon slot="start" :icon="addOutline" class="text-xl" />
{{ t('bankCard.list.addCard') }}
</ion-button>
</div>
<!-- 银行卡列表 -->
@@ -156,16 +147,16 @@ onUpdated(() => {
<div
v-for="card in bankCards"
:key="card.id"
class="bg-gray-50 dark:bg-gray-900 rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
class="bg-faint rounded-2xl mb-4 overflow-hidden shadow-sm transition-all duration-300 relative"
>
<div class="p-5 flex items-center justify-between">
<div class="flex items-center flex-1">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 text-white font-bold text-sm shadow-sm bg-[#0F5AA6]">
<div class="w-12 h-12 rounded-xl flex items-center justify-center mr-4 font-bold text-sm shadow-sm bg-[#0F5AA6]">
<span class="text-white">{{ card.bankCode }}</span>
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<h4 class="text-lg font-semibold text-#151515 dark:text-white m-0">
<h4 class="text-lg font-semibold m-0">
{{ card.bankName }}
</h4>
<span
@@ -175,13 +166,13 @@ onUpdated(() => {
{{ t('bankCard.list.defaultCard') }}
</span>
</div>
<p class="text-gray-600 dark:text-gray-400 text-base m-0 mb-2 tracking-wider">
<p class="text-base m-0 mb-2 tracking-wider">
{{ card.maskAccountNumber }}
</p>
<div class="flex gap-4 text-sm text-gray-500 dark:text-gray-400">
<span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded-md text-xs">
<div class="flex gap-4 text-sm">
<ui-tag size="small">
{{ t('bankCard.list.debitCard') }}
</span>
</ui-tag>
<span>{{ card.accountName }}</span>
</div>
</div>
@@ -190,7 +181,6 @@ onUpdated(() => {
<div class="ml-4">
<ion-button
fill="clear"
class="[--color:var(--color-gray-600)] [--background:transparent] w-10 h-10 hover:[--background:var(--color-gray-100)]"
@click="handleCardOptions(card)"
>
<ion-icon slot="icon-only" :icon="ellipsisHorizontal" />
@@ -207,12 +197,12 @@ onUpdated(() => {
</div>
<!-- 底部提示 -->
<div class="rounded-xl p-4 mt-4 b-2px bg-gray-50 dark:bg-gray-900">
<div class="flex items-center gap-3 mb-3 text-sm text-gray-600 dark:text-gray-400">
<div class="rounded-xl p-4 mt-4 b-2px bg-faint">
<div class="flex items-center gap-3 mb-3 text-sm">
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
<span>{{ t('bankCard.tips.encryption') }}</span>
</div>
<div class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-3 text-sm">
<ion-icon :icon="checkmarkCircle" class="text-base text-green-500" />
<span>{{ t('bankCard.tips.support') }}</span>
</div>
@@ -223,33 +213,4 @@ onUpdated(() => {
</IonPage>
</template>
<style scoped>
@media (max-width: 768px) {
.p-4 {
padding: 0.75rem;
}
.p-8 {
padding: 1.5rem;
}
.w-20 {
width: 4.25rem;
height: 4.25rem;
}
.p-5 {
padding: 1rem;
}
.w-12 {
width: 2.75rem;
height: 2.75rem;
font-size: 0.75rem;
}
.text-lg {
font-size: 1rem;
}
}
</style>
<style lang="css" scoped></style>