feat: 更新默认布局,替换图标并调整底部导航栏高度;优化产品页面和个人资料页面的样式

This commit is contained in:
2026-01-17 02:57:08 +07:00
parent e8b63b9710
commit 8bdea03583
3 changed files with 16 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { grid, home, person, wallet } from "ionicons/icons"; import { grid, home, person, radio, wallet } from "ionicons/icons";
const { t } = useI18n(); const { t } = useI18n();
</script> </script>
@@ -18,7 +18,7 @@ const { t } = useI18n();
<ion-tab-button tab="service" href="/layout/service"> <ion-tab-button tab="service" href="/layout/service">
<div class="flex-col-center gap-1"> <div class="flex-col-center gap-1">
<ion-icon aria-hidden="true" :icon="grid" class="icon" /> <ion-icon aria-hidden="true" :icon="radio" class="icon" />
<ion-label>思想引领</ion-label> <ion-label>思想引领</ion-label>
</div> </div>
</ion-tab-button> </ion-tab-button>
@@ -43,7 +43,7 @@ const { t } = useI18n();
<style scoped> <style scoped>
ion-tab-bar { ion-tab-bar {
height: 60px; height: 70px;
--background: white; --background: white;
box-shadow: 0px 0px 12px var(--ion-color-tertiary); box-shadow: 0px 0px 12px var(--ion-color-tertiary);
padding-bottom: var(--ion-safe-area-bottom); padding-bottom: var(--ion-safe-area-bottom);
@@ -51,4 +51,9 @@ ion-tab-bar {
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;
} }
ion-label {
font-size: 0.85rem;
font-weight: 500;
margin-top: 2px;
}
</style> </style>

View File

@@ -119,18 +119,18 @@ function handleSubscribe(product: any, event: Event) {
<div class="grid grid-cols-3 gap-2 mb-2"> <div class="grid grid-cols-3 gap-2 mb-2">
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs text-[#999]">当前价格</span> <span class="text-xs text-[#999]">当前价格</span>
<span class="text-sm font-bold text-[#c41e3a]">¥{{ product.currentPrice }}</span> <span class="text-lg font-bold text-[#c41e3a]">¥{{ product.currentPrice }}</span>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs text-[#999]">到期收益</span> <span class="text-xs text-[#999]">到期收益</span>
<span class="text-sm font-bold text-[#52c41a] flex items-center gap-0.5"> <span class="text-lg font-bold text-[#52c41a] flex items-center gap-0.5">
<ion-icon :icon="trendingUpOutline" class="text-xs" /> <ion-icon :icon="trendingUpOutline" class="text-xs" />
{{ product.expectedReturn }} {{ product.expectedReturn }}
</span> </span>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-xs text-[#999]">产品周期</span> <span class="text-xs text-[#999]">产品周期</span>
<span class="text-sm font-bold text-[#1a1a1a] flex items-center gap-0.5"> <span class="text-lg font-bold text-[#1a1a1a] flex items-center gap-0.5">
<ion-icon :icon="calendarOutline" class="text-xs" /> <ion-icon :icon="calendarOutline" class="text-xs" />
{{ product.period }} {{ product.period }}
</span> </span>
@@ -145,8 +145,10 @@ function handleSubscribe(product: any, event: Event) {
class="subscribe-btn flex-1" class="subscribe-btn flex-1"
@click="handleSubscribe(product, $event)" @click="handleSubscribe(product, $event)"
> >
<ion-icon slot="start" :icon="cardOutline" /> <div class="flex-center gap-2">
我要申购 <ion-icon slot="start" :icon="cardOutline" />
<span>我要申购</span>
</div>
</ion-button> </ion-button>
</div> </div>
</div> </div>

View File

@@ -186,7 +186,7 @@ function handleLogout() {
</section> </section>
<!-- 我的应用 --> <!-- 我的应用 -->
<section class="mb-4"> <section class="my-5">
<div class="card rounded-2xl shadow-lg p-5"> <div class="card rounded-2xl shadow-lg p-5">
<div class="flex items-center gap-2 mb-4"> <div class="flex items-center gap-2 mb-4">
<ion-icon :icon="homeOutline" class="text-2xl text-[#c41e3a]" /> <ion-icon :icon="homeOutline" class="text-2xl text-[#c41e3a]" />