feat: 添加首页横幅图片，更新页面样式和内容
This commit is contained in:
BIN
src/assets/images/home-banner.jpg
Normal file
BIN
src/assets/images/home-banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 515 KiB |
BIN
src/assets/images/home-banner.png
Normal file
BIN
src/assets/images/home-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
BIN
src/assets/images/home-bg.png
Normal file
BIN
src/assets/images/home-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
@@ -12,28 +12,28 @@ const { t } = useI18n();
|
|||||||
<ion-tab-button tab="home" href="/layout/home">
|
<ion-tab-button tab="home" href="/layout/home">
|
||||||
<div class="flex-col-center gap-1">
|
<div class="flex-col-center gap-1">
|
||||||
<ion-icon aria-hidden="true" :icon="homeOutline" class="icon" />
|
<ion-icon aria-hidden="true" :icon="homeOutline" class="icon" />
|
||||||
<ion-label>首页</ion-label>
|
<ion-label>改革先锋</ion-label>
|
||||||
</div>
|
</div>
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
|
|
||||||
<ion-tab-button tab="service" href="/layout/service">
|
<ion-tab-button tab="service" href="/layout/service">
|
||||||
<div class="flex-col-center gap-1">
|
<div class="flex-col-center gap-1">
|
||||||
<ion-icon aria-hidden="true" :icon="gridOutline" class="icon" />
|
<ion-icon aria-hidden="true" :icon="gridOutline" class="icon" />
|
||||||
<ion-label>服务</ion-label>
|
<ion-label>思想引领</ion-label>
|
||||||
</div>
|
</div>
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
|
|
||||||
<ion-tab-button tab="video" href="/layout/home">
|
<ion-tab-button tab="video" href="/layout/product">
|
||||||
<div class="flex-col-center gap-1">
|
<div class="flex-col-center gap-1">
|
||||||
<ion-icon aria-hidden="true" :icon="videocamOutline" class="icon" />
|
<ion-icon aria-hidden="true" :icon="videocamOutline" class="icon" />
|
||||||
<ion-label>我的</ion-label>
|
<ion-label>业务办理</ion-label>
|
||||||
</div>
|
</div>
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
|
|
||||||
<ion-tab-button tab="profile" href="/layout/profile">
|
<ion-tab-button tab="profile" href="/layout/profile">
|
||||||
<div class="flex-col-center gap-1">
|
<div class="flex-col-center gap-1">
|
||||||
<ion-icon aria-hidden="true" :icon="personOutline" class="icon" />
|
<ion-icon aria-hidden="true" :icon="personOutline" class="icon" />
|
||||||
<ion-label>我们</ion-label>
|
<ion-label>我的事务</ion-label>
|
||||||
</div>
|
</div>
|
||||||
</ion-tab-button>
|
</ion-tab-button>
|
||||||
</ion-tab-bar>
|
</ion-tab-bar>
|
||||||
|
|||||||
@@ -49,10 +49,10 @@ const newsList = ref([
|
|||||||
|
|
||||||
// 快捷入口
|
// 快捷入口
|
||||||
const quickActions = ref([
|
const quickActions = ref([
|
||||||
{ id: 1, name: "签到", icon: calendarOutline, color: "#c41e3a" },
|
{ id: 1, name: "签到", icon: calendarOutline, color: "#c32120" },
|
||||||
{ id: 2, name: "团队中心", icon: peopleOutline, color: "#c41e3a" },
|
{ id: 2, name: "团队中心", icon: peopleOutline, color: "#c32120" },
|
||||||
{ id: 3, name: "战略改革", icon: rocketOutline, color: "#c41e3a" },
|
{ id: 3, name: "战略改革", icon: rocketOutline, color: "#c32120" },
|
||||||
{ id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c41e3a" },
|
{ id: 4, name: "在线客服", icon: chatbubblesOutline, color: "#c32120" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function handleQuickAction(action: any) {
|
function handleQuickAction(action: any) {
|
||||||
@@ -98,168 +98,104 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ion-page>
|
<ion-page>
|
||||||
<ion-header class="ion-no-border">
|
<ion-header class="ion-no-border header">
|
||||||
<ion-toolbar class="ion-toolbar">
|
<ion-toolbar class="ion-toolbar">
|
||||||
<ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
|
<div slot="start" class="font-semibold">
|
||||||
<IconParkOutlineApplicationMenu slot="icon-only" />
|
国务院深化改革战略推进委员会
|
||||||
</ion-button>
|
</div>
|
||||||
<ion-title>{{ $t('home.title') }}</ion-title>
|
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content :fullscreen="true" class="home-page">
|
<ion-content :fullscreen="true" class="home-page ion-padding">
|
||||||
<!-- 背景装饰 -->
|
<div class="absolute top-0 left-0 w-full h-50 home-pg -z-1" />
|
||||||
<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">
|
<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">
|
|
||||||
<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">
|
<section class="mb-5 mt-5">
|
||||||
|
<div class="grid grid-cols-4 gap-4 bg-white/95 p-5 rounded-2xl shadow-lg">
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-2xl shadow-sm overflow-hidden cursor-pointer relative"
|
v-for="action in quickActions"
|
||||||
@click="handleAnnouncementClick(announcements[currentAnnouncementIndex])"
|
:key="action.id"
|
||||||
|
class="flex flex-col items-center gap-2 cursor-pointer transition-transform active:scale-95"
|
||||||
|
@click="handleQuickAction(action)"
|
||||||
>
|
>
|
||||||
<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
|
<div
|
||||||
v-for="news in newsList"
|
class="w-13 h-13 rounded-xl flex-center shadow-lg"
|
||||||
:key="news.id"
|
:style="{ background: action.color }"
|
||||||
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">
|
<ion-icon :icon="action.icon" class="text-3xl text-white" />
|
||||||
<img :src="news.image" :alt="news.title" class="w-full h-full object-cover">
|
</div>
|
||||||
<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">
|
<span class="text-xs text-[#333] font-medium text-center">{{ action.name }}</span>
|
||||||
热点
|
</div>
|
||||||
</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">
|
</div>
|
||||||
<h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
|
<div class="p-4">
|
||||||
{{ news.title }}
|
<h4 class="text-base font-bold text-[#1a1a1a] mb-2 leading-snug">
|
||||||
</h4>
|
{{ news.title }}
|
||||||
<p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
|
</h4>
|
||||||
{{ news.subtitle }}
|
<p class="text-sm text-[#666] mb-3 leading-relaxed line-clamp-2">
|
||||||
</p>
|
{{ news.subtitle }}
|
||||||
<div class="flex items-center gap-4 text-xs text-[#999]">
|
</p>
|
||||||
<span class="flex items-center gap-1">
|
<div class="flex items-center gap-4 text-xs text-[#999]">
|
||||||
<ion-icon :icon="timeOutline" class="text-sm" />
|
<span class="flex items-center gap-1">
|
||||||
{{ news.time }}
|
<ion-icon :icon="timeOutline" class="text-sm" />
|
||||||
</span>
|
{{ news.time }}
|
||||||
<span class="flex items-center gap-1">
|
</span>
|
||||||
<ion-icon :icon="eyeOutline" class="text-sm" />
|
<span class="flex items-center gap-1">
|
||||||
{{ news.views }}
|
<ion-icon :icon="eyeOutline" class="text-sm" />
|
||||||
</span>
|
{{ news.views }}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-page>
|
</ion-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang='css' scoped>
|
<style lang='css' scoped>
|
||||||
.home-page {
|
.ion-toolbar {
|
||||||
--background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
|
--background: #c32120;
|
||||||
|
--color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-pg {
|
||||||
|
background: linear-gradient(180deg, #c32120 0%, #c32120 55%, #fef5f1 100%);
|
||||||
|
}
|
||||||
|
/* .home-page {
|
||||||
|
--background: linear-gradient(180deg, #c41e3a 0%, #e8756d 15%, #f5d5c8 35%, #fef5f1 50%, #fef5f1 65%, #f5d5c8 85%);
|
||||||
|
} */
|
||||||
|
|
||||||
/* 中国风图案 */
|
/* 中国风图案 */
|
||||||
.chinese-pattern {
|
.chinese-pattern {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Reference in New Issue
Block a user