263 lines
8.3 KiB
Vue
263 lines
8.3 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">距春节还有 25 天</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" :style="{
|
||
backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC'
|
||
}"/>
|
||
<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>
|
||
<view class="use-list">
|
||
<view
|
||
v-for="(card, i) in popularCards"
|
||
:key="i"
|
||
class="use-row"
|
||
@tap="previewCard(card)"
|
||
>
|
||
<view class="thumb-wrap">
|
||
<image :src="card.cover" class="thumb" mode="aspectFill" />
|
||
<view v-if="card.type === 'video'" class="thumb-play">▶</view>
|
||
</view>
|
||
<view class="use-right">
|
||
<view class="title-line">
|
||
<text class="use-title">{{ card.title }}</text>
|
||
<text v-if="card.tag" class="tag" :class="`tag--${card.tagType || 'default'}`">{{ card.tag }}</text>
|
||
</view>
|
||
<text class="use-desc">{{ card.desc }}</text>
|
||
<text class="use-cta" @tap.stop="onCta(card)">{{ card.cta }} ></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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:'/static/icon/celebrate.png', type: 'card' },
|
||
{ title: '红包封面', subtitle: '获取新年红包封面', icon: '/static/icon/hongbao.png', type: 'video' },
|
||
{ title: '新春头像挂饰', subtitle: '焕上节日新饰', icon: '/static/icon/guashi.png', type: 'avatar_decor' },
|
||
{ title: '新年运势', subtitle: '抽取新年关键词', icon: '/static/icon/yunshi.png', type: 'avatar_frame' },
|
||
])
|
||
|
||
const popularCards = ref([
|
||
{
|
||
title: '招财进宝金框',
|
||
tag: '热门',
|
||
tagType: 'hot',
|
||
desc: '2026马年限定汉字金框，金光闪烁，财运亨通。适合送亲友的新春祝福。',
|
||
cta: '立即制作',
|
||
cover: 'https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png'
|
||
},
|
||
{
|
||
title: '大吉大利卡片',
|
||
tag: '精选',
|
||
tagType: 'featured',
|
||
desc: '经典红色大拜年卡片，适合送长辈、老师、同学，传递满满的新春喜气。',
|
||
cta: '去写祝福',
|
||
cover: 'https://file.lihailezzc.com/b5fe8ffb-5901-48d2-94fb-48191e36cbf5.png'
|
||
},
|
||
{
|
||
title: '合家团圆模板',
|
||
tag: '爆款',
|
||
tagType: 'hot2',
|
||
desc: '一键生成合家福贺图，支持换装、特效装饰、朋友圈海报等。',
|
||
cta: '开始创作',
|
||
cover: 'https://file.lihailezzc.com/91cd1611-bb87-442b-a338-24e9d79e4ee9.png',
|
||
type: 'video'
|
||
}
|
||
])
|
||
|
||
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 = () => {
|
||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||
}
|
||
|
||
const onCta = (card) => {
|
||
uni.showToast({ title: `${card.cta} · ${card.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: #F8F6F6;
|
||
}
|
||
|
||
/* 顶部 Banner */
|
||
.hero {
|
||
position: relative;
|
||
margin: 24rpx auto;
|
||
padding: 32rpx;
|
||
height: 324rpx;
|
||
width: 92vw;
|
||
border-radius: 24rpx;
|
||
color: #fff;
|
||
background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
|
||
background-size: cover;
|
||
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 {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: left;
|
||
flex-direction: column;
|
||
padding: 20rpx; border-radius: 18rpx;
|
||
background: #fff;
|
||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||
}
|
||
.feature-item::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-bottom-left-radius: 80rpx;
|
||
z-index: 1;
|
||
}
|
||
.feature-item:nth-child(1)::after,
|
||
.feature-item:nth-child(2)::after {
|
||
background: #FEF2F2; /* 可换成你的主题粉 */
|
||
}
|
||
.feature-item:nth-child(3)::after,
|
||
.feature-item:nth-child(4)::after {
|
||
background: #FFFBEC; /* 温柔一点的黄 */
|
||
}
|
||
.feature-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
padding: 5rpx;
|
||
}
|
||
.feature-texts {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.feature-title { font-size: 28rpx; color: #222; font-weight: 600; }
|
||
.feature-sub { font-size: 22rpx; color: #888; margin-top: 4rpx; }
|
||
}
|
||
}
|
||
|
||
/* 通用区块标题 */
|
||
.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: #ff3b30; }
|
||
}
|
||
|
||
/* 大家都在用 - 竖向列表 */
|
||
.use-list { padding: 0 24rpx; margin-top: 16rpx; }
|
||
.use-row {
|
||
display: flex; align-items: center; background: #fff;
|
||
border-radius: 18rpx; box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||
padding: 16rpx; margin-bottom: 18rpx;
|
||
}
|
||
.thumb-wrap {
|
||
position: relative; width: 120rpx; height: 120rpx;
|
||
border-radius: 16rpx; overflow: hidden; margin-right: 16rpx;
|
||
}
|
||
.thumb { width: 100%; height: 100%; }
|
||
.thumb-play {
|
||
position: absolute; right: 8rpx; bottom: 8rpx;
|
||
width: 40rpx; height: 40rpx; border-radius: 50%;
|
||
background: rgba(0,0,0,0.55); color: #fff; font-size: 22rpx;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.use-right { flex: 1; display: flex; flex-direction: column; }
|
||
.title-line { display: flex; align-items: center; }
|
||
.use-title { font-size: 28rpx; color: #222; font-weight: 600; margin-right: 12rpx; }
|
||
.tag {
|
||
font-size: 22rpx; border-radius: 999rpx; padding: 4rpx 10rpx; margin-left: 4rpx;
|
||
&.tag--hot { color: #ff6a00; background: #fff4eb; }
|
||
&.tag--featured { color: #ff4d6d; background: #fff0f3; }
|
||
&.tag--hot2 { color: #7c4dff; background: #f3efff; }
|
||
}
|
||
.use-desc { margin-top: 6rpx; font-size: 24rpx; color: #777; line-height: 1.5; }
|
||
.use-cta { margin-top: 10rpx; font-size: 24rpx; color: #ff3b30; }
|
||
</style> |