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-16 22:35:03 +07:00
parent 73f755cc23
commit 4de39d439f
2 changed files with 114 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,9 +100,9 @@ onUnmounted(() => {
<ion-page>
<ion-header class="ion-no-border header">
<ion-toolbar class="ion-toolbar">
<div slot="start" class="flex items-center px-5 py-3">
<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-md">
<div class="font-semibold text-lg">
国务院深化改革战略推进委员会
</div>
</div>
@@ -115,23 +115,23 @@ onUnmounted(() => {
<img src="@/assets/images/home-banner.jpg" class="h-40 w-full object-cover rounded-2xl shadow-lg mb-5" alt="首页横幅">
<!-- 快捷入口区域 -->
<section class="mb-5 mt-5">
<div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg">
<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
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)"
class="w-13 h-13 rounded-xl flex-center shadow-lg"
:style="{ background: action.color }"
>
<div
class="w-13 h-13 rounded-xl flex-center shadow-lg"
:style="{ background: action.color }"
>
<ion-icon :icon="action.icon" class="text-3xl text-white" />
</div>
<span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
<ion-icon :icon="action.icon" class="text-3xl text-white" />
</div>
<span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
</div>
<!-- </div> -->
</section>
<!-- 新闻列表区域 -->
@@ -152,23 +152,25 @@ onUnmounted(() => {
<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"
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-full h-45 overflow-hidden">
<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-3 left-3 bg-gradient-to-br from-[#c41e3a] to-[#8b1a2e] text-white px-3 py-1 rounded-xl text-xs font-semibold shadow-lg">
<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>
</div>
<div class="p-4">
<h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
{{ news.title }}
</h4>
<p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
{{ news.subtitle }}
</p>
<div class="flex items-center gap-4 text-xs text-[#999]">
<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 }}