feat: 更新首页，添加公告和新闻列表，优化样式和交互效果
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { cellular, chatboxEllipses, compass, personCircle, swapHorizontal } from "ionicons/icons";
|
||||
import { gridOutline, homeOutline, personOutline, videocamOutline } from "ionicons/icons";
|
||||
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
@@ -11,22 +11,29 @@ const { t } = useI18n();
|
||||
<ion-tab-bar slot="bottom">
|
||||
<ion-tab-button tab="home" href="/layout/home">
|
||||
<div class="flex-col-center gap-1">
|
||||
<ion-icon aria-hidden="true" :icon="compass" class="icon" />
|
||||
<ion-label>{{ t('tabs.home') }}</ion-label>
|
||||
<ion-icon aria-hidden="true" :icon="homeOutline" class="icon" />
|
||||
<ion-label>首页</ion-label>
|
||||
</div>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="notify" href="/layout/notify">
|
||||
<ion-tab-button tab="service" href="/layout/service">
|
||||
<div class="flex-col-center gap-1">
|
||||
<ion-icon aria-hidden="true" :icon="chatboxEllipses" class="icon" />
|
||||
<ion-label>{{ t('tabs.notify') }}</ion-label>
|
||||
<ion-icon aria-hidden="true" :icon="gridOutline" class="icon" />
|
||||
<ion-label>服务</ion-label>
|
||||
</div>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="user" href="/layout/user">
|
||||
<ion-tab-button tab="video" href="/layout/home">
|
||||
<div class="flex-col-center gap-1">
|
||||
<ion-icon aria-hidden="true" :icon="personCircle" class="icon" />
|
||||
<ion-label>{{ t('tabs.user') }}</ion-label>
|
||||
<ion-icon aria-hidden="true" :icon="videocamOutline" class="icon" />
|
||||
<ion-label>我的</ion-label>
|
||||
</div>
|
||||
</ion-tab-button>
|
||||
|
||||
<ion-tab-button tab="profile" href="/layout/profile">
|
||||
<div class="flex-col-center gap-1">
|
||||
<ion-icon aria-hidden="true" :icon="personOutline" class="icon" />
|
||||
<ion-label>我们</ion-label>
|
||||
</div>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
@@ -37,7 +44,7 @@ const { t } = useI18n();
|
||||
<style scoped>
|
||||
ion-tab-bar {
|
||||
height: 60px;
|
||||
--background: var(--ion-background-color);
|
||||
--background: white;
|
||||
box-shadow: 0px 0px 12px var(--ion-color-tertiary);
|
||||
padding-bottom: var(--ion-safe-area-bottom);
|
||||
}
|
||||
|
||||
@@ -45,10 +45,10 @@ function goToTerms(type: "service" | "privacy") {
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="content-wrapper">
|
||||
<div class="relative z-2 h-full flex flex-col p-10 px-6 pb-5">
|
||||
<!-- 顶部Logo和欢迎语 -->
|
||||
<div class="header-section">
|
||||
<div class="emblem">
|
||||
<div class="text-center mb-10">
|
||||
<div class="flex justify-center mb-5">
|
||||
<div class="emblem-circle">
|
||||
<div class="emblem-inner">
|
||||
<div class="star">
|
||||
@@ -60,16 +60,16 @@ function goToTerms(type: "service" | "privacy") {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="welcome-title">
|
||||
<h1 class="text-4xl font-bold text-[#2c3e50] mb-2 tracking-wider">
|
||||
你好
|
||||
</h1>
|
||||
<h2 class="welcome-subtitle">
|
||||
<h2 class="text-2xl font-semibold text-[#2c3e50] tracking-wide">
|
||||
欢迎登录深化改革
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<div class="form-section">
|
||||
<div class="flex-1 flex flex-col gap-4 max-w-[400px] w-full mx-auto">
|
||||
<!-- 手机号输入 -->
|
||||
<ion-item lines="none" class="input-item">
|
||||
<ion-input
|
||||
@@ -98,20 +98,20 @@ function goToTerms(type: "service" | "privacy") {
|
||||
</ion-item>
|
||||
|
||||
<!-- 协议同意 -->
|
||||
<div class="agreement-section">
|
||||
<div class="flex items-center gap-2 px-1">
|
||||
<ion-checkbox v-model="agreed" class="agreement-checkbox" />
|
||||
<span class="agreement-text">
|
||||
<span class="text-xs text-[#666] leading-snug">
|
||||
我已阅读并同意
|
||||
<a class="link-service" @click="goToTerms('service')">《服务条款》</a>
|
||||
<a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('service')">《服务条款》</a>
|
||||
和
|
||||
<a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
|
||||
<a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('privacy')">《隐私政策》</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="login-button"
|
||||
class="login-button mt-2"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
@@ -223,28 +223,7 @@ function goToTerms(type: "service" | "privacy") {
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容包装器 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40px 24px 20px;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* 国徽 */
|
||||
.emblem {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.emblem-circle {
|
||||
width: 70px;
|
||||
@@ -287,34 +266,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* 欢迎文字 */
|
||||
.welcome-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
.form-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-item {
|
||||
--background: rgba(255, 255, 255, 0.9);
|
||||
@@ -340,14 +291,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 协议同意 */
|
||||
.agreement-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.agreement-checkbox {
|
||||
--size: 20px;
|
||||
--border-radius: 4px;
|
||||
@@ -357,25 +300,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.link-service,
|
||||
.link-privacy {
|
||||
color: #c41e3a;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-service:hover,
|
||||
.link-privacy:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-button {
|
||||
--background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
|
||||
@@ -79,31 +79,31 @@ function goToTerms(type: "service" | "privacy") {
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="content-wrapper">
|
||||
<div class="relative z-2 h-full flex flex-col py-8 px-6 pb-5 overflow-y-auto">
|
||||
<!-- 顶部Logo和标题 -->
|
||||
<div class="header-section">
|
||||
<div class="emblem">
|
||||
<div class="emblem-circle">
|
||||
<div class="emblem-inner">
|
||||
<div class="star">
|
||||
<div class="text-center mb-8 shrink-0">
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="emblem-circle-sm">
|
||||
<div class="emblem-inner-sm">
|
||||
<div class="star-sm">
|
||||
★
|
||||
</div>
|
||||
<div class="emblem-text">
|
||||
<div class="emblem-text-sm">
|
||||
中华人民共和国
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="welcome-title">
|
||||
<h1 class="text-3xl font-bold text-[#1a1a1a] mb-1.5 tracking-wider">
|
||||
创建账号
|
||||
</h1>
|
||||
<h2 class="welcome-subtitle">
|
||||
<h2 class="text-lg font-semibold text-[#2c3e50] tracking-wide">
|
||||
加入深化改革平台
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<div class="form-section">
|
||||
<div class="flex-1 flex flex-col gap-3 max-w-[400px] w-full mx-auto pb-50">
|
||||
<!-- 手机号输入 -->
|
||||
<ion-item lines="none" class="input-item">
|
||||
<ion-input
|
||||
@@ -179,20 +179,20 @@ function goToTerms(type: "service" | "privacy") {
|
||||
</ion-item>
|
||||
|
||||
<!-- 协议同意 -->
|
||||
<div class="agreement-section">
|
||||
<div class="flex items-center gap-2 px-1 pt-2 pb-1">
|
||||
<ion-checkbox v-model="agreed" class="agreement-checkbox" />
|
||||
<span class="agreement-text">
|
||||
<span class="text-xs text-[#666] leading-snug">
|
||||
我已阅读并同意
|
||||
<a class="link-service" @click="goToTerms('service')">《服务条款》</a>
|
||||
<a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('service')">《服务条款》</a>
|
||||
和
|
||||
<a class="link-privacy" @click="goToTerms('privacy')">《隐私政策》</a>
|
||||
<a class="text-[#c41e3a] no-underline cursor-pointer font-medium hover:underline" @click="goToTerms('privacy')">《隐私政策》</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 注册按钮 -->
|
||||
<ion-button
|
||||
expand="block"
|
||||
class="signup-button"
|
||||
class="signup-button mt-2"
|
||||
@click="handleSignup"
|
||||
>
|
||||
注册
|
||||
@@ -304,32 +304,8 @@ function goToTerms(type: "service" | "privacy") {
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容包装器 */
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30px 24px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 头部区域 */
|
||||
.header-section {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 国徽 */
|
||||
.emblem {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.emblem-circle {
|
||||
/* 国徽 - 小尺寸 */
|
||||
.emblem-circle-sm {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
|
||||
@@ -341,7 +317,7 @@ function goToTerms(type: "service" | "privacy") {
|
||||
border: 3px solid #c41e3a;
|
||||
}
|
||||
|
||||
.emblem-inner {
|
||||
.emblem-inner-sm {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
@@ -353,14 +329,14 @@ function goToTerms(type: "service" | "privacy") {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.star {
|
||||
.star-sm {
|
||||
font-size: 20px;
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.emblem-text {
|
||||
.emblem-text-sm {
|
||||
font-size: 5px;
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
@@ -370,35 +346,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
/* 欢迎文字 */
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 6px 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 表单区域 */
|
||||
.form-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-item {
|
||||
--background: rgba(255, 255, 255, 0.95);
|
||||
@@ -424,14 +371,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 协议同意 */
|
||||
.agreement-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 4px 4px;
|
||||
}
|
||||
|
||||
.agreement-checkbox {
|
||||
--size: 20px;
|
||||
--border-radius: 4px;
|
||||
@@ -441,25 +380,6 @@ function goToTerms(type: "service" | "privacy") {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.link-service,
|
||||
.link-privacy {
|
||||
color: #c41e3a;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-service:hover,
|
||||
.link-privacy:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 注册按钮 */
|
||||
.signup-button {
|
||||
--background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
|
||||
|
||||
@@ -1,5 +1,99 @@
|
||||
<script lang='ts' setup>
|
||||
import {
|
||||
calendarOutline,
|
||||
chatbubblesOutline,
|
||||
chevronForwardOutline,
|
||||
eyeOutline,
|
||||
megaphoneOutline,
|
||||
newspaperOutline,
|
||||
peopleOutline,
|
||||
rocketOutline,
|
||||
timeOutline,
|
||||
} from "ionicons/icons";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
|
||||
// 公告数据
|
||||
const announcements = ref([
|
||||
{ id: 1, title: "关于深化改革的重要通知", time: "2026-01-16" },
|
||||
{ id: 2, title: "平台升级维护公告", time: "2026-01-15" },
|
||||
{ id: 3, title: "新年贺词：砥砺前行，共创辉煌", time: "2026-01-01" },
|
||||
]);
|
||||
|
||||
// 新闻数据（模拟数据）
|
||||
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",
|
||||
},
|
||||
]);
|
||||
|
||||
// 快捷入口
|
||||
const quickActions = ref([
|
||||
{ id: 1, name: "签到", icon: calendarOutline, color: "#c41e3a" },
|
||||
{ id: 2, name: "团队中心", icon: peopleOutline, color: "#c41e3a" },
|
||||
{ id: 3, name: "战略改革", icon: rocketOutline, color: "#c41e3a" },
|
||||
{ id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c41e3a" },
|
||||
]);
|
||||
|
||||
function handleQuickAction(action: any) {
|
||||
console.log("点击快捷入口:", action.name);
|
||||
// TODO: 实现各个快捷入口的功能
|
||||
}
|
||||
|
||||
function handleAnnouncementClick(announcement: any) {
|
||||
console.log("查看公告:", announcement.title);
|
||||
// TODO: 跳转到公告详情
|
||||
}
|
||||
|
||||
function handleNewsClick(news: any) {
|
||||
console.log("查看新闻:", news.title);
|
||||
// TODO: 跳转到新闻详情
|
||||
}
|
||||
|
||||
// 走马灯相关
|
||||
const currentAnnouncementIndex = ref(0);
|
||||
let announcementTimer: number | null = null;
|
||||
|
||||
function startAnnouncementCarousel() {
|
||||
announcementTimer = setInterval(() => {
|
||||
currentAnnouncementIndex.value = (currentAnnouncementIndex.value + 1) % announcements.value.length;
|
||||
}, 3000); // 每3秒切换
|
||||
}
|
||||
|
||||
function stopAnnouncementCarousel() {
|
||||
if (announcementTimer) {
|
||||
clearInterval(announcementTimer);
|
||||
announcementTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startAnnouncementCarousel();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopAnnouncementCarousel();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -12,8 +106,282 @@
|
||||
<ion-title>{{ $t('home.title') }}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content :fullscreen="true" class="ion-padding" />
|
||||
|
||||
<ion-content :fullscreen="true" class="home-page">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="bg-decoration">
|
||||
<!-- 中国风图案 -->
|
||||
<div class="chinese-pattern">
|
||||
<svg class="pattern-svg pattern-1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="2" />
|
||||
<circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.5" />
|
||||
<path d="M50 10 L50 30 M50 70 L50 90 M10 50 L30 50 M70 50 L90 50" stroke="rgba(255,255,255,0.15)" stroke-width="2" />
|
||||
</svg>
|
||||
<svg class="pattern-svg pattern-2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30 30 Q50 45 70 30 Q55 50 70 70 Q50 55 30 70 Q45 50 30 30" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 五角星装饰 -->
|
||||
<div class="stars-decoration">
|
||||
<div class="star star-1">
|
||||
★
|
||||
</div>
|
||||
<div class="star star-2">
|
||||
★
|
||||
</div>
|
||||
<div class="star star-3">
|
||||
★
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部波浪 -->
|
||||
<svg class="wave-bottom" viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 80 Q300 40 600 80 T1200 80 L1200 120 L0 120 Z" fill="rgba(255,255,255,0.08)" />
|
||||
<path d="M0 95 Q300 60 600 95 T1200 95 L1200 120 L0 120 Z" fill="rgba(255,255,255,0.05)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="relative z-1 p-4">
|
||||
<!-- 快捷入口区域 -->
|
||||
<section class="mb-5">
|
||||
<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="w-13 h-13 rounded-xl flex-center shadow-lg"
|
||||
:style="{ background: `linear-gradient(135deg, ${action.color}, ${action.color}dd)` }"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- 公告通知区域 - 走马灯 -->
|
||||
<section class="mb-5">
|
||||
<div
|
||||
class="bg-white rounded-2xl shadow-sm overflow-hidden cursor-pointer relative"
|
||||
@click="handleAnnouncementClick(announcements[currentAnnouncementIndex])"
|
||||
>
|
||||
<div class="announcement-carousel relative h-20">
|
||||
<transition-group name="slide">
|
||||
<div
|
||||
v-for="(announcement, index) in announcements"
|
||||
v-show="index === currentAnnouncementIndex"
|
||||
:key="announcement.id"
|
||||
class="flex items-center gap-3 p-4 absolute inset-0"
|
||||
>
|
||||
<div class="text-2xl shrink-0">
|
||||
📢
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm text-[#333] font-medium mb-1 truncate">
|
||||
{{ announcement.title }}
|
||||
</div>
|
||||
<div class="text-xs text-[#999]">
|
||||
{{ announcement.time }}
|
||||
</div>
|
||||
</div>
|
||||
<ion-icon :icon="chevronForwardOutline" class="text-lg text-[#ccc] shrink-0" />
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<!-- 指示器 -->
|
||||
<div class="flex justify-center gap-1.5 pb-2">
|
||||
<div
|
||||
v-for="(announcement, index) in announcements"
|
||||
:key="announcement.id"
|
||||
class="w-1.5 h-1.5 rounded-full transition-all duration-300"
|
||||
:class="index === currentAnnouncementIndex ? 'bg-[#c41e3a] w-4' : 'bg-[#ddd]'"
|
||||
/>
|
||||
</div>
|
||||
</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"
|
||||
@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>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<style lang='css' scoped></style>
|
||||
<style lang='css' scoped>
|
||||
.home-page {
|
||||
--background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
|
||||
}
|
||||
|
||||
/* 中国风图案 */
|
||||
.chinese-pattern {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.pattern-svg {
|
||||
position: absolute;
|
||||
animation: rotate-pattern 30s linear infinite;
|
||||
}
|
||||
|
||||
.pattern-1 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.pattern-2 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
top: 100px;
|
||||
left: 40px;
|
||||
animation-direction: reverse;
|
||||
animation-duration: 40s;
|
||||
}
|
||||
|
||||
@keyframes rotate-pattern {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 五角星装饰 */
|
||||
.stars-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
color: rgba(255, 215, 0, 0.3);
|
||||
font-size: 24px;
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
top: 40px;
|
||||
left: 25%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
top: 80px;
|
||||
right: 30%;
|
||||
font-size: 18px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
top: 130px;
|
||||
left: 15%;
|
||||
font-size: 20px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部波浪 */
|
||||
.wave-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 新闻标签渐变 - 使用 @apply 不支持渐变，需要保留 */
|
||||
.news-badge {
|
||||
box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
|
||||
}
|
||||
|
||||
/* 走马灯动画 */
|
||||
.announcement-carousel {
|
||||
transition: height 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-enter-to,
|
||||
.slide-leave-from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user