feat: 更新默认布局,替换图标并调整底部导航栏高度;优化产品页面和个人资料页面的样式
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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)"
|
||||||
>
|
>
|
||||||
|
<div class="flex-center gap-2">
|
||||||
<ion-icon slot="start" :icon="cardOutline" />
|
<ion-icon slot="start" :icon="cardOutline" />
|
||||||
我要申购
|
<span>我要申购</span>
|
||||||
|
</div>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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]" />
|
||||||
|
|||||||
Reference in New Issue
Block a user