root/financial
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-17 02:23:38 +07:00
parent 029f8d7be6
commit 396ec713c3
16 changed files with 151 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/home/index.vue
View File

@@ -45,6 +45,22 @@ const newsList = ref([
views: 1890,
image: "https://picsum.photos/seed/news3/400/250",
},
{
id: 4,
title: "深化改革进入新阶段",
subtitle: "全面推进现代化建设，开创新局面",
time: "2026-01-16 10:30",
views: 1520,
image: "https://picsum.photos/seed/news1/400/250",
},
{
id: 5,
title: "团队协作再创佳绩",
subtitle: "凝心聚力，共筑梦想，携手共进新时代",
time: "2026-01-15 16:20",
views: 2340,
image: "https://picsum.photos/seed/news2/400/250",
},
]);
// 快捷入口
@@ -98,100 +114,100 @@ onUnmounted(() => {
<template>
<ion-page>
<ion-header class="ion-no-border header">
<ion-toolbar class="ion-toolbar">
<div slot="start" class="flex items-center px-3 py-3">
<img src="@/assets/images/guohui.png" alt="国徽" class="inline-block h-10 mr-2">
<div class="font-semibold text-lg">
国务院深化改革战略推进委员会
<ion-content :fullscreen="true" class="home-page">
<!-- <ion-header class="ion-no-border header">
<ion-toolbar class="ion-toolbar">
<div slot="start" class="flex items-center px-3 py-3">
<img src="@/assets/images/guohui.png" alt="国徽" class="inline-block h-10 mr-2">
<div class="font-semibold text-lg">
国务院深化改革战略推进委员会
</div>
</div>
</div>
</ion-toolbar>
</ion-header>
</ion-toolbar>
</ion-header> -->
<ion-content :fullscreen="true" class="home-page ion-padding">
<div class="absolute top-0 left-0 w-full h-50 home-pg -z-1" />
<img src="@/assets/images/home-banner.jpg" class="h-60 w-full object-cover" alt="首页横幅">
<img src="@/assets/images/home-banner.jpg" class="h-40 w-full object-cover rounded-2xl shadow-lg mb-5" alt="首页横幅">
<!-- 快捷入口区域 -->
<section class="mt-10 mb-5 grid grid-cols-4 gap-4">
<!-- <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg"> -->
<div
v-for="action in quickActions"
:key="action.id"
class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
@click="handleQuickAction(action)"
>
<div class="ion-padding-horizontal">
<!-- 快捷入口区域 -->
<section class="my-5 grid grid-cols-4 gap-4">
<!-- <div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg"> -->
<div
class="w-13 h-13 rounded-xl flex-center shadow-lg"
:style="{ background: action.color }"
v-for="action in quickActions"
:key="action.id"
class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
@click="handleQuickAction(action)"
>
<ion-icon :icon="action.icon" class="text-3xl text-white" />
<div
class="w-12 h-12 rounded-full flex-center shadow-lg"
:style="{ background: action.color }"
>
<ion-icon :icon="action.icon" class="text-xl text-white" />
</div>
<span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
</div>
<span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
</div>
<!-- </div> -->
</section>
<!-- </div> -->
</section>
<!-- 新闻列表区域 -->
<section class="mb-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<ion-icon :icon="newspaperOutline" class="text-2xl text-[#c41e3a]" />
<h3 class="text-lg font-bold text-[#1a1a1a] m-0">
新闻动态
</h3>
</div>
<ion-button fill="clear" size="small" class="text-sm text-white h-8">
更多
<ion-icon slot="end" :icon="chevronForwardOutline" />
</ion-button>
</div>
<div class="flex flex-col gap-4">
<div
v-for="news in newsList"
:key="news.id"
class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
@click="handleNewsClick(news)"
>
<div class="relative w-28 h-28 flex-shrink-0 overflow-hidden">
<img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
<div class="news-badge absolute top-2 left-2 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg">
热点
<!-- 新闻列表区域 -->
<section class="mt-10 mb-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<img src="@/assets/images/icon.png" class="size-7">
<div class="text-xl font-bold text-[#1a1a1a]">
新闻动态
</div>
</div>
<div class="flex-1 p-4 flex flex-col justify-between">
<div>
<div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
{{ news.title }}
<ion-button fill="clear" size="small" class="text-sm text-white h-8">
更多
<ion-icon slot="end" :icon="chevronForwardOutline" />
</ion-button>
</div>
<div class="flex flex-col gap-4">
<div
v-for="news in newsList"
:key="news.id"
class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
@click="handleNewsClick(news)"
>
<div class="relative w-28 h-28 flex-shrink-0 overflow-hidden">
<img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
<div class="news-badge absolute top-2 left-2 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg">
热点
</div>
<p class="text-sm text-[#666] leading-relaxed line-clamp-2">
{{ news.subtitle }}
</p>
</div>
<div class="flex items-center gap-4 text-xs text-[#999] mt-2">
<span class="flex items-center gap-1">
<ion-icon :icon="timeOutline" class="text-sm" />
{{ news.time }}
</span>
<span class="flex items-center gap-1">
<ion-icon :icon="eyeOutline" class="text-sm" />
{{ news.views }}
</span>
<div class="flex-1 p-4 flex flex-col justify-between">
<div>
<div class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug line-clamp-2">
{{ news.title }}
</div>
<p class="text-sm text-[#666] leading-relaxed line-clamp-2">
{{ news.subtitle }}
</p>
</div>
<div class="flex items-center gap-4 text-xs text-[#999] mt-2">
<span class="flex items-center gap-1">
<ion-icon :icon="timeOutline" class="text-sm" />
{{ news.time }}
</span>
<span class="flex items-center gap-1">
<ion-icon :icon="eyeOutline" class="text-sm" />
{{ news.views }}
</span>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>
.ion-toolbar {
--background: #c32120;
--color: #fff;
/* --background: #c32120; */
/* --color: #fff; */
}
.home-pg {

35
src/views/product/index.vue
View File

@@ -70,35 +70,20 @@ function handleSubscribe(product: any, event: Event) {
<template>
<ion-page>
<!-- <ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="px-5 py-3">
<div class="text-xl font-bold text-white m-0">
业务办理
</div>
<p class="text-sm text-white/80 m-0 mt-1">
精选优质基金产品
</p>
</div>
</ion-toolbar>
</ion-header> -->
<ion-content class="ion-padding">
<div class="absolute top-0 left-0 w-full h-30 header-bg -z-1" />
<ion-content>
<img src="@/assets/images/product-banner.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
<!-- 基金产品列表 -->
<section class="mb-5">
<section class="mb-5 -mt-5 ion-padding-horizontal">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
<h3 class="text-lg font-bold text-[#1a1a1a] m-0">
热门产品
</h3>
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<img src="@/assets/images/icon.png" class="size-7">
<div class="text-xl font-bold text-[#1a1a1a]">
基金产品
</div>
</div>
</div>
<ion-button fill="clear" size="small" class="text-sm text-[#c41e3a] h-8 font-semibold">
全部
<ion-icon slot="end" :icon="chevronForwardOutline" />
</ion-button>
</div>
<div class="flex flex-col gap-4">

30
src/views/profile/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<script lang='ts' setup>
</script>
<template>
<ion-page>
<ion-content>
<img src="@/assets/images/profile-banner.jpg" class="h-50 w-full object-cover" alt="我的横幅">
<div class="absolute top-10 left-5 flex-center gap-3">
<ion-avatar class="size-18">
<img alt="Silhouette of a person's head" src="@/assets/images/avatar.jpg">
</ion-avatar>
<div>
<div class="text-primary text-xl font-bold">
周少华
</div>
<div class="text-primary text-sm font-semibold">
手机号：138****1234
</div>
<div class="text-primary text-sm font-semibold">
邀请码：ABCD1234
</div>
</div>
</div>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped></style>

16
src/views/service/index.vue
View File

@@ -41,20 +41,18 @@ function handleNewsClick(news: any) {
<template>
<ion-page>
<ion-content class="ion-padding">
<ion-content>
<img src="@/assets/images/service-banner1.jpg" class="h-50 w-full object-cover" alt="服务页横幅">
<!-- 新闻列表区域 -->
<section class="mb-5">
<section class="mb-5 -mt-5 ion-padding-horizontal">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<ion-icon :icon="newspaperOutline" class="text-2xl text-[#c41e3a]" />
<h3 class="text-lg font-bold text-[#1a1a1a] m-0">
<img src="@/assets/images/icon.png" class="size-7">
<div class="text-xl font-bold text-[#1a1a1a]">
新闻动态
</h3>
</div>
</div>
<ion-button fill="clear" size="small" class="text-sm text-white h-8">
更多
<ion-icon slot="end" :icon="chevronForwardOutline" />
</ion-button>
</div>
<div class="flex flex-col gap-4">
<div