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

fix: page

Browse Source
This commit is contained in:
zzc
2026-02-24 17:43:36 +08:00
parent 28f0f83531
commit 5e49b247db
2 changed files with 166 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
components/LuckyPopup/LuckyPopup.vue
View File

@@ -20,19 +20,19 @@
<!-- 结果阶段 --> <!-- 结果阶段 -->
<view v-else class="result-container"> <view v-else class="result-container">
<view class="lucky-card"> <view class="lucky-card" id="lucky-card">
<!-- 头部渐变区 --> <!-- 头部渐变区 -->
<view class="card-header"> <view class="card-header">
<view class="header-decor left">福</view> <view class="header-decor left">福</view>
<view class="header-decor right">禧</view> <view class="header-decor right">禧</view>
<text class="header-label">今日好运指数</text> <text class="header-label">今日好运指数</text>
<view class="score-wrap"> <view class="score-wrap">
<text class="score">{{ resultData.score }}</text> <text class="score">{{ resultData.score }}</text>
<text class="percent">%</text> <text class="percent">%</text>
</view> </view>
<text class="lucky-word">{{ resultData.luckyWord }}</text> <text class="lucky-word">{{ resultData.luckyWord }}</text>
<view class="tag-year">2026 CNY SPECIAL</view> <view class="tag-year">2026 CNY SPECIAL</view>
</view> </view>
@@ -65,7 +65,9 @@
<view class="elements-row"> <view class="elements-row">
<view class="el-item"> <view class="el-item">
<text class="label">颜色</text> <text class="label">颜色</text>
<text class="value color-val">{{ resultData.luckyColor }}</text> <text class="value color-val">{{
resultData.luckyColor
}}</text>
</view> </view>
<view class="divider"></view> <view class="divider"></view>
<view class="el-item"> <view class="el-item">
@@ -85,26 +87,26 @@
</view> </view>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<view class="action-buttons"> <view class="bottom-actions">
<button class="share-btn" open-type="share"> <view class="action-btn" @tap="onSaveImage">
<uni-icons type="redo" size="18" color="#fff" style="margin-right: 8rpx;" /> <uni-icons type="download" size="24" color="#fff" />
<text>分享我的今日好运</text> <text class="btn-label">保存</text>
</button> </view>
<button class="reward-btn" @tap="onGetReward">
<view class="btn-content">
<view class="main-row">
<uni-icons type="gift" size="18" color="#fff" style="margin-right: 8rpx;" />
<text>领取今日好运奖励</text>
</view>
<text class="sub-text">已解锁免费头像模板等奖励</text>
</view>
</button>
</view>
<!-- 关闭按钮 --> <button class="action-btn share-btn" open-type="share">
<view class="close-btn" @tap="close"> <uni-icons type="paperplane" size="24" color="#fff" />
<uni-icons type="closeempty" size="24" color="#fff" /> <text class="btn-label">好友</text>
</button>
<view class="action-btn" @tap="onShareMoments">
<uni-icons type="camera" size="24" color="#fff" />
<text class="btn-label">朋友圈</text>
</view>
<view class="action-btn close-btn" @tap="close">
<uni-icons type="closeempty" size="24" color="#fff" />
<text class="btn-label">关闭</text>
</view>
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
@@ -112,30 +114,26 @@
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from "vue";
const popup = ref(null); const popup = ref(null);
const isAnimating = ref(true); const isAnimating = ref(true);
const isFlipping = ref(false); const isFlipping = ref(false);
const showLight = ref(false); const showLight = ref(false);
const loadingText = ref('好运加载中...'); const loadingText = ref("好运加载中...");
const resultData = ref({ const resultData = ref({
score: 88, score: 88,
luckyWord: '鸿运当头', luckyWord: "鸿运当头",
yi: '沟通合作、尝试新事物', yi: "沟通合作、尝试新事物",
ji: '熬夜、冲动消费', ji: "熬夜、冲动消费",
luckyColor: '如意金', luckyColor: "如意金",
luckyNumber: '6', luckyNumber: "6",
luckyDirection: '东南', luckyDirection: "东南",
quote: '今天适合向前一步，好运正在回应你的努力。' quote: "今天适合向前一步，好运正在回应你的努力。",
}); });
const texts = [ const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
'好运加载中...',
'今日能量汇集中 ✨',
'正在计算你的幸运指数...'
];
const open = () => { const open = () => {
isAnimating.value = true; isAnimating.value = true;
@@ -143,7 +141,7 @@ const open = () => {
showLight.value = false; showLight.value = false;
loadingText.value = texts[0]; loadingText.value = texts[0];
popup.value.open(); popup.value.open();
startAnimation(); startAnimation();
}; };
@@ -166,7 +164,7 @@ const startAnimation = () => {
clearInterval(timer); clearInterval(timer);
isFlipping.value = true; isFlipping.value = true;
showLight.value = true; showLight.value = true;
// 动画结束后显示结果 // 动画结束后显示结果
setTimeout(() => { setTimeout(() => {
isAnimating.value = false; isAnimating.value = false;
@@ -174,9 +172,12 @@ const startAnimation = () => {
}, 1800); }, 1800);
}; };
const onGetReward = () => { const onSaveImage = () => {
uni.showToast({ title: '奖励已领取', icon: 'success' }); uni.showToast({ title: "保存功能开发中", icon: "none" });
// 这里可以跳转到任务中心或直接发放奖励 };
const onShareMoments = () => {
uni.showToast({ title: "请点击右上角分享", icon: "none" });
}; };
defineExpose({ open, close }); defineExpose({ open, close });
@@ -187,7 +188,7 @@ defineExpose({ open, close });
/* 动画容器 */ /* 动画容器 */
.animation-container { .animation-container {
width: 600rpx; width: 600rpx;
height: 800rpx; height: 850rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -196,23 +197,24 @@ defineExpose({ open, close });
} }
.card-flip-wrapper { .card-flip-wrapper {
width: 400rpx; width: 100%;
height: 560rpx; height: 100%;
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
&.flipped { &.flipped {
transform: rotateY(180deg); transform: rotateY(180deg);
} }
} }
.card-front, .card-back { .card-front,
.card-back {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 32rpx; border-radius: 40rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -223,13 +225,13 @@ defineExpose({ open, close });
.card-front { .card-front {
background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
z-index: 2; z-index: 2;
.loading-circle { .loading-circle {
width: 120rpx; width: 120rpx;
height: 120rpx; height: 120rpx;
position: relative; position: relative;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.particle { .particle {
position: absolute; position: absolute;
width: 20rpx; width: 20rpx;
@@ -237,14 +239,22 @@ defineExpose({ open, close });
background: #ffd700; background: #ffd700;
border-radius: 50%; border-radius: 50%;
animation: orbit 1.5s linear infinite; animation: orbit 1.5s linear infinite;
&.p1 { animation-delay: 0s; } &.p1 {
&.p2 { animation-delay: -0.375s; } animation-delay: 0s;
&.p3 { animation-delay: -0.75s; } }
&.p4 { animation-delay: -1.125s; } &.p2 {
animation-delay: -0.375s;
}
&.p3 {
animation-delay: -0.75s;
}
&.p4 {
animation-delay: -1.125s;
}
} }
} }
.loading-text { .loading-text {
color: #ffd700; color: #ffd700;
font-size: 28rpx; font-size: 28rpx;
@@ -261,7 +271,11 @@ defineExpose({ open, close });
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%); background: radial-gradient(
circle,
rgba(255, 215, 0, 0.8) 0%,
transparent 70%
);
opacity: 0; opacity: 0;
animation: flash 0.6s ease-out forwards; animation: flash 0.6s ease-out forwards;
pointer-events: none; pointer-events: none;
@@ -277,11 +291,12 @@ defineExpose({ open, close });
.lucky-card { .lucky-card {
width: 100%; width: 100%;
height: 850rpx;
background: #fff; background: #fff;
border-radius: 40rpx; border-radius: 40rpx;
overflow: hidden; overflow: hidden;
margin-bottom: 40rpx; margin-bottom: 40rpx;
.card-header { .card-header {
height: 360rpx; height: 360rpx;
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%); background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
@@ -291,80 +306,84 @@ defineExpose({ open, close });
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #fff; color: #fff;
.header-decor { .header-decor {
position: absolute; position: absolute;
top: 20rpx; top: 20rpx;
font-size: 24rpx; font-size: 24rpx;
opacity: 0.6; opacity: 0.6;
&.left { left: 30rpx; } &.left {
&.right { right: 30rpx; } left: 30rpx;
}
&.right {
right: 30rpx;
}
} }
.header-label { .header-label {
font-size: 24rpx; font-size: 24rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
opacity: 0.9; opacity: 0.9;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
.score-wrap { .score-wrap {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
line-height: 1; line-height: 1;
margin-bottom: 16rpx; margin-bottom: 16rpx;
.score { .score {
font-size: 120rpx; font-size: 120rpx;
font-weight: bold; font-weight: bold;
text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
} }
.percent { .percent {
font-size: 40rpx; font-size: 40rpx;
margin-left: 4rpx; margin-left: 4rpx;
font-weight: 500; font-weight: 500;
} }
} }
.lucky-word { .lucky-word {
font-size: 48rpx; font-size: 48rpx;
font-weight: bold; font-weight: bold;
letter-spacing: 4rpx; letter-spacing: 4rpx;
text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
margin-bottom: 32rpx; margin-bottom: 32rpx;
} }
.tag-year { .tag-year {
background: rgba(0,0,0,0.15); background: rgba(0, 0, 0, 0.15);
padding: 8rpx 24rpx; padding: 8rpx 24rpx;
border-radius: 30rpx; border-radius: 30rpx;
font-size: 20rpx; font-size: 20rpx;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
} }
.card-body { .card-body {
padding: 40rpx 32rpx; padding: 40rpx 32rpx;
.yi-ji-grid { .yi-ji-grid {
display: flex; display: flex;
gap: 24rpx; gap: 24rpx;
margin-bottom: 32rpx; margin-bottom: 32rpx;
.grid-item { .grid-item {
flex: 1; flex: 1;
background: #fbfbfb; background: #fbfbfb;
border-radius: 20rpx; border-radius: 20rpx;
padding: 24rpx; padding: 24rpx;
border: 2rpx solid #f5f5f5; border: 2rpx solid #f5f5f5;
.item-title { .item-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 12rpx; margin-bottom: 12rpx;
text { text {
font-size: 24rpx; font-size: 24rpx;
font-weight: bold; font-weight: bold;
@@ -372,7 +391,7 @@ defineExpose({ open, close });
margin-left: 8rpx; margin-left: 8rpx;
} }
} }
.item-content { .item-content {
font-size: 22rpx; font-size: 22rpx;
color: #666; color: #666;
@@ -380,19 +399,19 @@ defineExpose({ open, close });
} }
} }
} }
.lucky-elements { .lucky-elements {
background: #fbfbfb; background: #fbfbfb;
border-radius: 20rpx; border-radius: 20rpx;
padding: 24rpx; padding: 24rpx;
border: 2rpx solid #f5f5f5; border: 2rpx solid #f5f5f5;
margin-bottom: 32rpx; margin-bottom: 32rpx;
.elements-title { .elements-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
text { text {
font-size: 26rpx; font-size: 26rpx;
font-weight: bold; font-weight: bold;
@@ -400,35 +419,35 @@ defineExpose({ open, close });
margin-left: 8rpx; margin-left: 8rpx;
} }
} }
.elements-row { .elements-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.el-item { .el-item {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.label { .label {
font-size: 20rpx; font-size: 20rpx;
color: #999; color: #999;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.value { .value {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
&.color-val { &.color-val {
color: #d84315; color: #d84315;
} }
} }
} }
.divider { .divider {
width: 2rpx; width: 2rpx;
height: 40rpx; height: 40rpx;
@@ -436,7 +455,7 @@ defineExpose({ open, close });
} }
} }
} }
.quote-text { .quote-text {
text-align: center; text-align: center;
font-size: 22rpx; font-size: 22rpx;
@@ -445,86 +464,77 @@ defineExpose({ open, close });
} }
} }
} }
.action-buttons { .bottom-actions {
width: 100%; width: 100%;
margin-bottom: 40rpx; display: flex;
justify-content: space-around;
.share-btn { padding: 0 40rpx;
background: rgba(255, 255, 255, 0.2); box-sizing: border-box;
border: 2rpx solid rgba(255, 255, 255, 0.3);
color: #fff; .action-btn {
font-size: 30rpx;
font-weight: 600;
height: 96rpx;
border-radius: 48rpx;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; background: none;
margin-bottom: 24rpx; border: none;
backdrop-filter: blur(10rpx);
&::after { border: none; }
}
.reward-btn {
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 0.3);
height: 120rpx;
border-radius: 60rpx;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10rpx);
padding: 0; padding: 0;
margin: 0;
&::after { border: none; } line-height: 1.2;
.btn-content { &::after {
border: none;
}
:deep(.uni-icons) {
width: 88rpx;
height: 88rpx;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; align-items: center;
backdrop-filter: blur(10rpx);
.main-row { border: 2rpx solid rgba(255, 255, 255, 0.2);
display: flex; margin-bottom: 12rpx;
align-items: center; transition: all 0.3s;
margin-bottom: 4rpx; }
text { &:active :deep(.uni-icons) {
color: #fff; background: rgba(255, 255, 255, 0.25);
font-size: 30rpx; transform: scale(0.95);
font-weight: 600; }
}
} .btn-label {
font-size: 24rpx;
.sub-text { color: #fff;
font-size: 20rpx; opacity: 0.9;
color: rgba(255, 255, 255, 0.8);
}
} }
} }
} }
.close-btn {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 2rpx solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
}
} }
@keyframes orbit { @keyframes orbit {
0% { transform: rotate(0deg) translateX(40rpx) rotate(0deg); } 0% {
100% { transform: rotate(360deg) translateX(40rpx) rotate(-360deg); } transform: rotate(0deg) translateX(40rpx) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
}
} }
@keyframes flash { @keyframes flash {
0% { opacity: 0; transform: scale(0.8); } 0% {
50% { opacity: 1; transform: scale(1.2); } opacity: 0;
100% { opacity: 0; transform: scale(1.5); } transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(1.5);
}
} }
</style> </style>

4
pages/index/index.vue
View File

@@ -193,10 +193,10 @@
</view> </view>
<!-- Floating Share Button --> <!-- Floating Share Button -->
<button class="float-share-btn" open-type="share"> <!-- <button class="float-share-btn" open-type="share">
<uni-icons type="upload" size="18" color="#d81e06" /> <uni-icons type="upload" size="18" color="#d81e06" />
<text>分享今日运势</text> <text>分享今日运势</text>
</button> </button> -->
<view class="bottom-spacer"></view> <view class="bottom-spacer"></view>