360 lines
11 KiB
Vue
360 lines
11 KiB
Vue
<template>
|
||
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||
<!-- 顶部 Banner -->
|
||
<view class="hero">
|
||
<view class="hero-badge">
|
||
<text class="badge-dot">•</text>
|
||
<text class="badge-text">距春节还有 15 天</text>
|
||
</view>
|
||
<view class="hero-title">
|
||
<text class="year">2026</text>
|
||
<text class="main">新春祝福</text>
|
||
</view>
|
||
<text class="hero-sub">新年快乐，万事如意</text>
|
||
<image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" />
|
||
</view>
|
||
|
||
<!-- 功能入口宫格 -->
|
||
<view class="feature-grid">
|
||
<view
|
||
v-for="(item, idx) in features"
|
||
:key="idx"
|
||
class="feature-item"
|
||
@tap="onFeatureTap(item)"
|
||
>
|
||
<image class="feature-icon" :src="item.icon" mode="aspectFill" />
|
||
<view class="feature-texts">
|
||
<text class="feature-title">{{ item.title }}</text>
|
||
<text class="feature-sub">{{ item.subtitle }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 大家都在用 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">大家都在用</text>
|
||
<text class="section-more" @tap="onMore('use')">更多</text>
|
||
</view>
|
||
<scroll-view scroll-x class="cards-scroll" show-scrollbar="false">
|
||
<view class="cards-wrap">
|
||
<view v-for="(card, i) in popularCards" :key="i" class="use-card" @tap="previewCard(card)">
|
||
<image :src="card.cover" class="use-cover" mode="aspectFill" />
|
||
<view class="use-info">
|
||
<text class="use-title">{{ card.title }}</text>
|
||
<text class="use-sub">{{ card.sub }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 最新祝福 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<view class="section-bar"></view>
|
||
<text class="section-title">最新祝福</text>
|
||
</view>
|
||
|
||
<view class="feed-list">
|
||
<view v-for="(post, i) in feeds" :key="i" class="feed-item">
|
||
<view class="feed-header">
|
||
<image :src="post.avatar" class="feed-avatar" mode="aspectFill" />
|
||
<view class="feed-user">
|
||
<text class="feed-name">{{ post.name }}</text>
|
||
<text class="feed-time">{{ post.time }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="feed-content">
|
||
<text class="feed-text">{{ post.text }}</text>
|
||
<image v-if="post.image" :src="post.image" class="feed-image" mode="aspectFill" />
|
||
</view>
|
||
<view class="feed-actions">
|
||
<view class="action" @tap="like(i)">
|
||
<text class="icon">❤</text>
|
||
<text>{{ post.likes }}</text>
|
||
</view>
|
||
<view class="action" @tap="comment(i)">
|
||
<text class="icon">💬</text>
|
||
<text>{{ post.comments }}</text>
|
||
</view>
|
||
<view class="action" @tap="share(i)">
|
||
<text class="icon">↗</text>
|
||
<text>分享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="see-more" @tap="onMore('feed')">查看更多祝福…</view>
|
||
</view>
|
||
|
||
<!-- 底部中间发布按钮 -->
|
||
<view class="fab" @tap="createGreeting">
|
||
<text class="fab-plus">＋</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||
import { getBavBarHeight } from '@/utils/system'
|
||
|
||
const features = ref([
|
||
{ title: '新春祝福卡片', subtitle: '龙年贺卡', icon: 'https://file.lihailezzc.com/resource/6b6cb83abf3a9c9b78a4744238b5b851.png', type: 'card' },
|
||
{ title: '视频拜年', subtitle: 'AI合成短视频', icon: 'https://file.lihailezzc.com/resource/1a7b4b9d2b9b4bcb88f14c9f1ef4413a.png', type: 'video' },
|
||
{ title: '新春头像装饰', subtitle: '锦上添花', icon: 'https://file.lihailezzc.com/resource/5e7d2b8d1c34c22f9c4f4f4cb4cba70d.png', type: 'avatar_decor' },
|
||
{ title: '马年主题头像框', subtitle: '2026限定', icon: 'https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png', type: 'avatar_frame' },
|
||
])
|
||
|
||
const popularCards = ref([
|
||
{ title: '极简祝福金框', sub: '极简风格', cover: 'https://file.lihailezzc.com/resource/7a5b2f2f5d6c42b5b21b8b1c9b28a3a1.jpg' },
|
||
{ title: '红包封面', sub: '新春限定', cover: 'https://file.lihailezzc.com/resource/9b3d2a1a4c7b4a4a9e3b94c4a2b9c3e2.jpg' },
|
||
{ title: '新春大拜年卡', sub: '全家福', cover: 'https://file.lihailezzc.com/resource/3a2b1c9d7e6f5a4b3c2d1e0f9a8b7c6d.jpg' }
|
||
])
|
||
|
||
const feeds = ref([
|
||
{
|
||
name: '陈小明',
|
||
time: '刚刚',
|
||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||
text: '祝大家新的一年万事如意，阖家幸福！龙年行大运，喜气满满～✨',
|
||
image: 'https://file.lihailezzc.com/resource/02b7d1f8a9c34f2b8a2a7d4e9b1a5c8d.jpg',
|
||
likes: 12,
|
||
comments: 3
|
||
},
|
||
{
|
||
name: '李华',
|
||
time: '5分钟前',
|
||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||
text: '新年快乐！祝朋友们身体健康、工作顺利，2026马到成功～',
|
||
image: '',
|
||
likes: 8,
|
||
comments: 2
|
||
},
|
||
{
|
||
name: '王伟',
|
||
time: '10分钟前',
|
||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||
text: '给你们拜年啦！',
|
||
image: 'https://file.lihailezzc.com/resource/1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f.jpg',
|
||
likes: 6,
|
||
comments: 1
|
||
}
|
||
])
|
||
|
||
const onFeatureTap = (item) => {
|
||
uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
|
||
// 可跳转到对应功能页面
|
||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
||
}
|
||
|
||
const previewCard = (card) => {
|
||
uni.previewImage({ urls: [card.cover] })
|
||
}
|
||
|
||
const onMore = (type) => {
|
||
uni.showToast({ title: '即将开放～', icon: 'none' })
|
||
}
|
||
|
||
const like = (index) => {
|
||
feeds.value[index].likes += 1
|
||
}
|
||
|
||
const comment = (index) => {
|
||
uni.showToast({ title: '评论功能开发中～', icon: 'none' })
|
||
}
|
||
|
||
const share = () => {
|
||
uni.showShareMenu && uni.showShareMenu()
|
||
}
|
||
|
||
const createGreeting = () => {
|
||
uni.showToast({ title: '去发布祝福～', icon: 'none' })
|
||
}
|
||
|
||
onPullDownRefresh(() => {
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
uni.showToast({ title: '已为你更新内容', icon: 'success' })
|
||
}, 600)
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.spring-page {
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 顶部 Banner */
|
||
.hero {
|
||
position: relative;
|
||
margin: 24rpx;
|
||
padding: 32rpx;
|
||
border-radius: 24rpx;
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #e52e2e 0%, #c61a1a 100%);
|
||
overflow: hidden;
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 999rpx;
|
||
padding: 8rpx 16rpx;
|
||
font-size: 22rpx;
|
||
.badge-dot { margin-right: 8rpx; }
|
||
}
|
||
.hero-title {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
align-items: baseline;
|
||
.year {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
margin-right: 12rpx;
|
||
}
|
||
.main {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.hero-sub {
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
opacity: 0.9;
|
||
}
|
||
.hero-decor {
|
||
position: absolute;
|
||
right: 12rpx;
|
||
bottom: 12rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
opacity: 0.3;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
|
||
/* 功能入口宫格 - 2x2 */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-gap: 20rpx;
|
||
padding: 0 24rpx;
|
||
margin-top: 8rpx;
|
||
|
||
.feature-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-radius: 18rpx;
|
||
background: #f9f5f0;
|
||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||
}
|
||
.feature-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
margin-right: 16rpx;
|
||
background: #fff;
|
||
}
|
||
.feature-texts {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.feature-title {
|
||
font-size: 28rpx; color: #222; font-weight: 600;
|
||
}
|
||
.feature-sub {
|
||
font-size: 22rpx; color: #888; margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 通用区块标题 */
|
||
.section {
|
||
margin-top: 28rpx;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 24rpx;
|
||
.section-bar {
|
||
width: 10rpx; height: 30rpx; border-radius: 6rpx; background: #ff3b30; margin-right: 12rpx;
|
||
}
|
||
.section-title { font-size: 28rpx; color: #222; flex: 1; font-weight: 600; }
|
||
.section-more { font-size: 24rpx; color: #999; }
|
||
}
|
||
}
|
||
|
||
/* 大家都在用 - 横滑卡片 */
|
||
.cards-scroll {
|
||
margin-top: 16rpx;
|
||
padding-left: 24rpx;
|
||
}
|
||
.cards-wrap { display: flex; }
|
||
.use-card {
|
||
width: 260rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 18rpx;
|
||
border-radius: 18rpx;
|
||
background: #fff;
|
||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
|
||
.use-cover { width: 100%; height: 200rpx; }
|
||
.use-info { padding: 16rpx; }
|
||
.use-title { font-size: 26rpx; color: #333; font-weight: 600; }
|
||
.use-sub { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||
}
|
||
|
||
/* 已移除：.cards-scroll、feed-list、feed-item、feed-header、feed-avatar、feed-user、feed-name、feed-time、feed-content、feed-text、feed-image、feed-actions、.see-more */
|
||
.feed-list { padding: 0 24rpx; }
|
||
.feed-item {
|
||
padding: 22rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.feed-header { display: flex; align-items: center; }
|
||
.feed-avatar {
|
||
width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 16rpx;
|
||
}
|
||
.feed-user { display: flex; flex-direction: column; }
|
||
.feed-name { font-size: 26rpx; color: #333; font-weight: 600; }
|
||
.feed-time { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||
.feed-content { margin-top: 12rpx; }
|
||
.feed-text { font-size: 26rpx; color: #333; line-height: 1.6; }
|
||
.feed-image { width: 100%; height: 280rpx; border-radius: 12rpx; margin-top: 12rpx; background: #f6f6f6; }
|
||
.feed-actions {
|
||
margin-top: 12rpx;
|
||
display: flex;
|
||
.action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-right: 24rpx;
|
||
color: #666;
|
||
.icon { margin-right: 8rpx; }
|
||
}
|
||
}
|
||
|
||
.see-more {
|
||
margin: 24rpx; padding: 18rpx 0; text-align: center;
|
||
color: #999; font-size: 24rpx;
|
||
}
|
||
|
||
/* 发布悬浮按钮 */
|
||
.fab {
|
||
position: fixed;
|
||
left: 50%; transform: translateX(-50%);
|
||
bottom: 60rpx;
|
||
width: 100rpx; height: 100rpx;
|
||
border-radius: 50%;
|
||
background: #ff3b30;
|
||
color: #fff;
|
||
display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.4);
|
||
.fab-plus { font-size: 48rpx; line-height: 1; }
|
||
}
|
||
</style> |