feat: 添加固定头部组件,优化各页面的头部展示逻辑

This commit is contained in:
2026-01-19 04:44:23 +07:00
parent 85c33c082d
commit 9cc2b2bea1
5 changed files with 24 additions and 15 deletions

View File

@@ -66,6 +66,6 @@
.ion-toolbar {
--background: #c32120;
--min-height: 58px;
--min-height: 50px;
--color: white;
}

View File

@@ -44,12 +44,9 @@ async function handleSignup() {
<ion-buttons slot="start">
<back-button />
</ion-buttons>
<!-- <ion-title>签到</ion-title> -->
</ion-toolbar>
</ion-header>
<ion-content>
<!-- 顶部横幅 -->
<ion-content :fullscreen="true">
<img src="@/assets/images/signup-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
<div class="ion-padding">
@@ -58,7 +55,7 @@ async function handleSignup() {
<div class="relative z-1">
<div class="flex items-center justify-center gap-2 mb-4">
<img src="@/assets/images/icon-1.png" class="size-6">
<div class="text-4xl text-[#c41e3a] font-bold m-0">
<div class="text-3xl text-[#c41e3a] font-bold m-0">
初心如磐 使命如坚
</div>
<img src="@/assets/images/icon-1.png" class="size-6">

View File

@@ -47,7 +47,13 @@ function handleSubscribe(product: any, event: Event) {
<template>
<ion-page>
<ion-content>
<ion-header class="ion-no-border">
<ion-toolbar class="ion-toolbar">
<img slot="start" src="@/assets/images/icon-1.png" class="h-8 w-8 ml-2" alt="Logo">
<ion-title>锐意进取</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<img src="@/assets/images/product-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
<!-- 基金产品列表 -->

View File

@@ -63,10 +63,13 @@ async function handleLogout() {
<template>
<ion-page>
<!-- <ion-header class="ion-no-border">
<ion-toolbar />
</ion-header> -->
<ion-content>
<ion-header class="ion-no-border">
<ion-toolbar class="ion-toolbar">
<img slot="start" src="@/assets/images/icon-1.png" class="h-8 w-8 ml-2" alt="Logo">
<ion-title>深化改革</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<!-- 顶部横幅和用户信息 -->
<div class="relative -z-1">
<img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
@@ -194,9 +197,6 @@ async function handleLogout() {
</template>
<style lang='css' scoped>
/* ion-toolbar {
--background: url("@/assets/images/user-header.jpg");
} */
.card {
background: linear-gradient(180deg, #ffeef1, #ffffff 15%);
}

View File

@@ -45,7 +45,13 @@ onMounted(() => {
<template>
<ion-page>
<ion-content>
<ion-header class="ion-no-border">
<ion-toolbar class="ion-toolbar">
<img slot="start" src="@/assets/images/icon-1.png" class="h-8 w-8 ml-2" alt="Logo">
<ion-title>革新求进</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<img src="@/assets/images/service-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
<!-- 新闻列表区域 -->