zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make page

Browse Source
This commit is contained in:
zzc
2026-01-15 08:43:10 +08:00
parent f34899eb81
commit 3d2d20dd5f
21 changed files with 4315 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
pages/index/index.vue
View File

@@ -4,14 +4,14 @@
<view class="hero">
<view class="hero-badge">
<text class="badge-dot">•</text>
<text class="badge-text">距春节还有 25 天</text>
<text class="badge-text">距春节还有 30 天</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" />
<!-- <image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" /> -->
</view>
<!-- 功能入口宫格 -->
@@ -22,9 +22,14 @@
class="feature-item"
@tap="onFeatureTap(item)"
>
<image class="feature-icon" :src="item.icon" mode="aspectFill" :style="{
backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC'
}"/>
<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>
@@ -53,10 +58,17 @@
<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>
<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>
<text class="use-cta" @tap.stop="onCta(card)"
>{{ card.cta }} ></text
>
</view>
</view>
</view>
@@ -65,75 +77,112 @@
</template>
<script setup>
import { ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import { getBavBarHeight } from '@/utils/system'
import { ref } from "vue";
import { onPullDownRefresh, onShareAppMessage } 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' },
])
{
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: "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: "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'
}
])
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.showToast({ title: `进入：${item.title}`, icon: "none" });
// uni.navigateTo({ url: `/pages/${item.type}/index` })
}
};
const previewCard = (card) => {
uni.previewImage({ urls: [card.cover] })
}
uni.previewImage({ urls: [card.cover] });
};
const onMore = () => {
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
}
uni.showToast({ title: "更多模板即将上线～", icon: "none" });
};
const onCta = (card) => {
uni.showToast({ title: `${card.cta} · ${card.title}`, icon: 'none' })
}
uni.showToast({ title: `${card.cta} · ${card.title}`, icon: "none" });
};
onPullDownRefresh(() => {
setTimeout(() => {
uni.stopPullDownRefresh()
uni.showToast({ title: '已为你更新内容', icon: 'success' })
}, 600)
})
uni.stopPullDownRefresh();
uni.showToast({ title: "已为你更新内容", icon: "success" });
}, 600);
});
onShareAppMessage(() => {
return {
title: "新春祝福",
path: "/pages/detail/index",
imageUrl: "/static/images/bg.jpg",
success: function (res) {
uni.showToast({ title: "分享成功", icon: "success" });
},
fail: function (res) {
uni.showToast({ title: "分享失败", icon: "none" });
},
};
});
</script>
<style lang="scss" scoped>
.spring-page {
min-height: 100vh;
box-sizing: border-box;
background: #F8F6F6;
background: #f8f6f6;
}
/* 顶部 Banner */
@@ -152,23 +201,41 @@ onPullDownRefresh(() => {
.hero-badge {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.2);
background: rgba(255, 255, 255, 0.2);
border-radius: 999rpx;
padding: 8rpx 16rpx;
font-size: 22rpx;
.badge-dot { margin-right: 8rpx; }
.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; }
.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-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;
position: absolute;
right: 12rpx;
bottom: 12rpx;
width: 160rpx;
height: 160rpx;
opacity: 0.3;
border-radius: 16rpx;
}
}
@@ -181,13 +248,14 @@ onPullDownRefresh(() => {
margin-top: 8rpx;
.feature-item {
position: relative;
display: flex;
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);
padding: 20rpx;
border-radius: 18rpx;
background: #fff;
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
}
.feature-item::after {
content: "";
@@ -198,66 +266,147 @@ onPullDownRefresh(() => {
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-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;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
padding: 5rpx;
}
.feature-texts {
margin-top: 20rpx;
display: flex;
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; }
.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 {
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; }
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-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;
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;
position: relative;
width: 120rpx;
height: 120rpx;
border-radius: 16rpx;
overflow: hidden;
margin-right: 16rpx;
}
.thumb {
width: 100%;
height: 100%;
}
.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;
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;
}
.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; }
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>
.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>