fix: gretting page

This commit is contained in:
zzc
2026-02-03 12:35:26 +08:00
parent 72ebb8253d
commit 239db8e609
2 changed files with 55 additions and 70 deletions

View File

@@ -166,7 +166,7 @@ onShareAppMessage(async () => {
}); });
getRewardByShare(); getRewardByShare();
return { return {
title: "新春祝福", title: "马年运势我已经抽过了,你的会是什么?",
path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareTokenRes.shareToken}` : `/pages/fortune/index?shareToken=${shareTokenRes.shareToken}`}`, path: `${cardId.value ? `/pages/fortune/detail?shareToken=${shareTokenRes.shareToken}` : `/pages/fortune/index?shareToken=${shareTokenRes.shareToken}`}`,
imageUrl: imageUrl:
"https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png", "https://file.lihailezzc.com/resource/cfed2edbfa19250b836a87a4bbf0d5ad.png",

View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="wallpaper-page"> <view class="wallpaper-page">
<NavBar title="精美壁纸" /> <NavBar title="新春精美壁纸" />
<!-- Category Tabs --> <!-- Category Tabs -->
<view class="category-tabs"> <view class="category-tabs">
@@ -41,12 +41,6 @@
@tap="previewImage(index)" @tap="previewImage(index)"
/> />
<view class="action-overlay"> <view class="action-overlay">
<view
class="action-btn download"
@tap.stop="downloadWallpaper(item)"
>
<text class="icon"></text>
</view>
<button <button
class="action-btn share" class="action-btn share"
open-type="share" open-type="share"
@@ -55,6 +49,12 @@
> >
<text class="icon"></text> <text class="icon"></text>
</button> </button>
<view
class="action-btn download"
@tap.stop="downloadWallpaper(item)"
>
<text class="icon"></text>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -244,46 +244,21 @@ const shareWallpaper = (item) => {};
<style lang="scss" scoped> <style lang="scss" scoped>
.wallpaper-page { .wallpaper-page {
height: 100vh; height: 100vh;
background-color: #7a0909; /* Dark Red Background */ background-color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
} }
.nav-bar { .category-tabs {
display: flex; padding: 0;
align-items: center; background-color: #ffffff;
padding: 16rpx 24rpx; border-bottom: 1rpx solid #eeeeee;
/* background: #7A0909; */
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
} }
.back {
font-size: 50rpx;
margin-right: 24rpx;
line-height: 1;
color: #ffd700; /* Gold */
/* 增大点击区域 */
padding: 20rpx;
margin-left: -20rpx;
}
.nav-title {
font-size: 34rpx;
font-weight: 600;
color: #ffd700; /* Gold */
flex: 1;
text-align: center;
margin-right: 50rpx; /* Balance back button */
}
.category-tabs {
padding: 20rpx 0;
/* background-color: #7A0909; */
}
.tabs-scroll { .tabs-scroll {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
@@ -291,51 +266,54 @@ const shareWallpaper = (item) => {};
.tabs-content { .tabs-content {
display: inline-flex; display: inline-flex;
padding: 0 24rpx; padding: 0 30rpx;
gap: 20rpx;
} }
.tab-item { .tab-item {
padding: 12rpx 32rpx; padding: 24rpx 30rpx;
border-radius: 999rpx; font-size: 30rpx;
font-size: 28rpx; color: #999999;
color: #ffd700; position: relative;
background: rgba(0, 0, 0, 0.3);
border: 2rpx solid transparent;
transition: all 0.3s; transition: all 0.3s;
font-weight: 500;
} }
.tab-item.active { .tab-item.active {
background: linear-gradient(90deg, #ff3b30 0%, #ff9500 100%); color: #e60012;
color: #fff; font-weight: bold;
border-color: #ffd700;
font-weight: 600; &::after {
box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3); content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80rpx;
height: 4rpx;
background-color: #e60012;
border-radius: 2rpx;
}
} }
.wallpaper-scroll { .wallpaper-scroll {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
/* padding: 24rpx; */
box-sizing: border-box; box-sizing: border-box;
} }
.grid-container { .grid-container {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(2, 1fr);
padding: 24rpx; gap: 30rpx;
justify-content: space-between; padding: 30rpx;
} }
.grid-item { .grid-item {
width: 340rpx;
height: 600rpx; height: 600rpx;
border-radius: 24rpx; border-radius: 32rpx;
overflow: hidden; overflow: hidden;
margin-bottom: 24rpx;
position: relative; position: relative;
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.3); background: #f5f5f5;
background: #333;
} }
.wallpaper-img { .wallpaper-img {
@@ -356,22 +334,29 @@ const shareWallpaper = (item) => {};
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1rpx solid rgba(255, 255, 255, 0.3); border: 1rpx solid rgba(255, 255, 255, 0.2);
padding: 0;
margin: 0;
line-height: 1;
&::after {
border: none;
}
}
.action-btn.share .icon {
font-size: 30rpx;
} }
.action-btn .icon { .action-btn .icon {
color: #fff; color: #fff;
font-size: 32rpx; font-size: 36rpx;
font-weight: bold; font-weight: normal;
}
.action-btn.share .icon {
font-size: 28rpx;
} }
.loading-state, .loading-state,
@@ -379,7 +364,7 @@ const shareWallpaper = (item) => {};
.no-more { .no-more {
text-align: center; text-align: center;
padding: 40rpx; padding: 40rpx;
color: rgba(255, 255, 255, 0.6); color: #999999;
font-size: 24rpx; font-size: 24rpx;
} }
</style> </style>