feat: 更新首页和服务页面，优化布局和样式，添加新闻列表功能
This commit is contained in:
@@ -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 }}
|
||||
|
||||
@@ -1,11 +1,95 @@
|
||||
<script lang='ts' setup>
|
||||
import {
|
||||
chevronForwardOutline,
|
||||
eyeOutline,
|
||||
newspaperOutline,
|
||||
timeOutline,
|
||||
} from "ionicons/icons";
|
||||
|
||||
const newsList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "深化改革进入新阶段",
|
||||
subtitle: "全面推进现代化建设，开创新局面",
|
||||
time: "2026-01-16 10:30",
|
||||
views: 1520,
|
||||
image: "https://picsum.photos/seed/news1/400/250",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "团队协作再创佳绩",
|
||||
subtitle: "凝心聚力，共筑梦想，携手共进新时代",
|
||||
time: "2026-01-15 16:20",
|
||||
views: 2340,
|
||||
image: "https://picsum.photos/seed/news2/400/250",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "战略布局取得重大突破",
|
||||
subtitle: "科学谋划，精准施策，推动高质量发展",
|
||||
time: "2026-01-14 09:15",
|
||||
views: 1890,
|
||||
image: "https://picsum.photos/seed/news3/400/250",
|
||||
},
|
||||
]);
|
||||
|
||||
function handleNewsClick(news: any) {
|
||||
console.log("查看新闻:", news.title);
|
||||
// TODO: 跳转到新闻详情
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ion-page>
|
||||
<ion-content>
|
||||
11
|
||||
<ion-content class="ion-padding">
|
||||
<!-- 新闻列表区域 -->
|
||||
<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"
|
||||
@click="handleNewsClick(news)"
|
||||
>
|
||||
<div class="relative w-full h-45 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>
|
||||
</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]">
|
||||
<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>
|
||||
</section>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user