1035 lines
27 KiB
Vue
1035 lines
27 KiB
Vue
<template>
|
|
<view class="lucky-popup-container">
|
|
<uni-popup ref="popup" type="center" :mask-click="false">
|
|
<!-- 动画阶段 -->
|
|
<view v-if="isAnimating" class="animation-container">
|
|
<view class="card-flip-wrapper" :class="{ flipped: isFlipping }">
|
|
<view class="card-front">
|
|
<view class="loading-circle">
|
|
<view class="particle p1"></view>
|
|
<view class="particle p2"></view>
|
|
<view class="particle p3"></view>
|
|
<view class="particle p4"></view>
|
|
</view>
|
|
<text class="loading-text">{{ loadingText }}</text>
|
|
</view>
|
|
<view class="card-back"></view>
|
|
</view>
|
|
<view class="light-effect" v-if="showLight"></view>
|
|
</view>
|
|
|
|
<!-- 结果阶段 -->
|
|
<view v-else class="result-container">
|
|
<view class="lucky-card" id="lucky-card">
|
|
<!-- 头部渐变区 -->
|
|
<view class="card-header">
|
|
<!-- Top Bar: User Info & Date -->
|
|
<view class="header-top-bar">
|
|
<view
|
|
class="user-info-row"
|
|
v-if="userInfo && (userInfo.avatarUrl || userInfo.nickName)"
|
|
>
|
|
<image
|
|
class="user-avatar"
|
|
:src="
|
|
userInfo.avatarUrl || '/static/images/default-avatar.png'
|
|
"
|
|
mode="aspectFill"
|
|
/>
|
|
<text class="user-name">{{
|
|
userInfo.nickName || "好运用户"
|
|
}}</text>
|
|
</view>
|
|
<view class="date-tag">{{ currentDateStr }}</view>
|
|
</view>
|
|
|
|
<!-- Main Content: Score & Word -->
|
|
<view class="header-main">
|
|
<text class="header-label">今日好运指数</text>
|
|
<view class="score-wrap">
|
|
<text class="score">{{ resultData.score }}</text>
|
|
<text class="percent">%</text>
|
|
</view>
|
|
<text class="lucky-word">{{ resultData.luckyWord }}</text>
|
|
</view>
|
|
|
|
<!-- Decorators -->
|
|
<view class="header-decor left-bottom">福</view>
|
|
<view class="header-decor right-bottom">禧</view>
|
|
</view>
|
|
|
|
<!-- 内容区 -->
|
|
<view class="card-body">
|
|
<!-- 宜忌 -->
|
|
<view class="yi-ji-grid">
|
|
<view class="grid-item yi">
|
|
<view class="item-title">
|
|
<uni-icons type="checkmarkempty" size="16" color="#d81e06" />
|
|
<text>今日宜</text>
|
|
</view>
|
|
<text class="item-content">{{ resultData.yi }}</text>
|
|
</view>
|
|
<view class="grid-item ji">
|
|
<view class="item-title">
|
|
<uni-icons type="closeempty" size="16" color="#666" />
|
|
<text>今日忌</text>
|
|
</view>
|
|
<text class="item-content">{{ resultData.ji }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 幸运元素 -->
|
|
<view class="lucky-elements">
|
|
<view class="elements-title">
|
|
<uni-icons type="star-filled" size="16" color="#ffca28" />
|
|
<text>幸运元素</text>
|
|
</view>
|
|
<view class="elements-row">
|
|
<view class="el-item">
|
|
<text class="label">颜色</text>
|
|
<text class="value color-val">{{
|
|
resultData.luckyColor
|
|
}}</text>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="el-item">
|
|
<text class="label">数字</text>
|
|
<text class="value">{{ resultData.luckyNumber }}</text>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="el-item">
|
|
<text class="label">方向</text>
|
|
<text class="value">{{ resultData.luckyDirection }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="quote-text">“{{ resultData.quote }}”</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-actions">
|
|
<view class="action-btn" @tap="onSaveImage">
|
|
<uni-icons type="download" size="24" color="#fff" />
|
|
<text class="btn-label">保存</text>
|
|
</view>
|
|
|
|
<button class="action-btn share-btn" open-type="share">
|
|
<uni-icons type="paperplane" 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>
|
|
</uni-popup>
|
|
|
|
<!-- 画布用于生成图片 -->
|
|
<canvas
|
|
type="2d"
|
|
id="luckyCanvas"
|
|
class="lucky-canvas"
|
|
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
|
></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, getCurrentInstance, computed } from "vue";
|
|
import calendar from "@/utils/lunar.js";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
|
import { getShareToken } from "@/utils/common.js";
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
const userStore = useUserStore();
|
|
const userInfo = computed(() => userStore.userInfo);
|
|
const popup = ref(null);
|
|
const isAnimating = ref(true);
|
|
const isFlipping = ref(false);
|
|
const showLight = ref(false);
|
|
const loadingText = ref("好运加载中...");
|
|
const currentDateStr = ref("");
|
|
|
|
// 画布相关
|
|
const canvasWidth = ref(600);
|
|
const canvasHeight = ref(1100);
|
|
|
|
const resultData = ref({
|
|
score: 88,
|
|
luckyWord: "鸿运当头",
|
|
yi: "沟通合作、尝试新事物",
|
|
ji: "熬夜、冲动消费",
|
|
luckyColor: "如意金",
|
|
luckyNumber: "6",
|
|
luckyDirection: "东南",
|
|
quote: "今天适合向前一步，好运正在回应你的努力。",
|
|
});
|
|
|
|
const texts = ["好运加载中...", "今日能量汇集中 ✨", "正在计算你的幸运指数..."];
|
|
|
|
const open = (data = null, skipAnimation = false) => {
|
|
if (data) {
|
|
resultData.value = { ...resultData.value, ...data };
|
|
}
|
|
|
|
const now = new Date();
|
|
const y = now.getFullYear();
|
|
const m = (now.getMonth() + 1).toString().padStart(2, "0");
|
|
const d = now.getDate().toString().padStart(2, "0");
|
|
const lunar = calendar.solar2lunar(now);
|
|
currentDateStr.value = `${y}.${m}.${d} ${lunar.lunarDateStr}`;
|
|
|
|
popup.value.open();
|
|
|
|
if (skipAnimation) {
|
|
isAnimating.value = false;
|
|
isFlipping.value = true; // Ensure flipped state if needed for consistency, though v-else handles view
|
|
showLight.value = false;
|
|
} else {
|
|
isAnimating.value = true;
|
|
isFlipping.value = false;
|
|
showLight.value = false;
|
|
loadingText.value = texts[0];
|
|
startAnimation();
|
|
}
|
|
};
|
|
|
|
const close = () => {
|
|
popup.value.close();
|
|
};
|
|
|
|
const startAnimation = () => {
|
|
// 文字轮播
|
|
let step = 0;
|
|
const timer = setInterval(() => {
|
|
step++;
|
|
if (step < texts.length) {
|
|
loadingText.value = texts[step];
|
|
}
|
|
}, 600);
|
|
|
|
// 1.5s 后翻转
|
|
setTimeout(() => {
|
|
clearInterval(timer);
|
|
isFlipping.value = true;
|
|
showLight.value = true;
|
|
|
|
// 动画结束后显示结果
|
|
setTimeout(() => {
|
|
isAnimating.value = false;
|
|
}, 600);
|
|
}, 1800);
|
|
};
|
|
|
|
const onSaveImage = async () => {
|
|
uni.showLoading({ title: "生成图片中..." });
|
|
|
|
const query = uni.createSelectorQuery().in(proxy);
|
|
query
|
|
.select("#luckyCanvas")
|
|
.fields({ node: true, size: true })
|
|
.exec(async (res) => {
|
|
if (!res[0] || !res[0].node) {
|
|
uni.hideLoading();
|
|
uni.showToast({ title: "Canvas not found", icon: "none" });
|
|
return;
|
|
}
|
|
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext("2d");
|
|
const dpr = uni.getSystemInfoSync().pixelRatio || 2;
|
|
|
|
// Set canvas size (physical pixels)
|
|
canvas.width = res[0].width * dpr;
|
|
canvas.height = res[0].height * dpr;
|
|
|
|
// Reset transform
|
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Scale context
|
|
ctx.scale(dpr, dpr);
|
|
|
|
const W = res[0].width;
|
|
const H = res[0].height;
|
|
|
|
// Helper function to load image
|
|
const loadCanvasImage = (url) => {
|
|
return new Promise((resolve, reject) => {
|
|
const img = canvas.createImage();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = (e) => reject(e);
|
|
img.src = url;
|
|
});
|
|
};
|
|
|
|
try {
|
|
// Load images
|
|
let avatarUrl = "/static/images/default-avatar.png";
|
|
if (userInfo.value && userInfo.value.avatarUrl) {
|
|
avatarUrl = userInfo.value.avatarUrl;
|
|
}
|
|
|
|
const [avatarImg, qrCodeImg] = await Promise.all([
|
|
loadCanvasImage(avatarUrl).catch(() =>
|
|
loadCanvasImage("/static/images/default-avatar.png"),
|
|
),
|
|
loadCanvasImage("/static/images/qrcode.jpg").catch(() => null),
|
|
]);
|
|
|
|
// 1. 绘制背景
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
// 2. 绘制卡片头部渐变
|
|
const headerH = 460;
|
|
const grd = ctx.createLinearGradient(0, 0, 0, headerH);
|
|
grd.addColorStop(0, "#d84315");
|
|
grd.addColorStop(1, "#ffca28");
|
|
ctx.fillStyle = grd;
|
|
ctx.fillRect(0, 0, W, headerH);
|
|
|
|
// --- Top Bar ---
|
|
const topY = 40;
|
|
const avatarSize = 64;
|
|
|
|
// 绘制用户头像 (Top Left)
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(
|
|
40 + avatarSize / 2,
|
|
topY + avatarSize / 2,
|
|
avatarSize / 2,
|
|
0,
|
|
2 * Math.PI,
|
|
);
|
|
ctx.clip();
|
|
if (avatarImg) {
|
|
ctx.drawImage(avatarImg, 40, topY, avatarSize, avatarSize);
|
|
}
|
|
ctx.restore();
|
|
|
|
// 绘制用户昵称
|
|
ctx.textAlign = "left";
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.font = "bold 26px sans-serif";
|
|
ctx.fillText(
|
|
userInfo.value?.nickName || "好运用户",
|
|
40 + avatarSize + 16,
|
|
topY + 42,
|
|
);
|
|
|
|
// 绘制日期 (Top Right)
|
|
const dateStr = currentDateStr.value || "2026 CNY SPECIAL";
|
|
ctx.font = "normal 22px sans-serif";
|
|
const dateWidth = ctx.measureText(dateStr).width + 30;
|
|
const dateX = W - 40 - dateWidth;
|
|
const dateY = topY + 12; // box top
|
|
// date bg
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
|
|
roundRect(ctx, dateX, dateY, dateWidth, 40, 20);
|
|
ctx.fill();
|
|
// date text
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.fillText(dateStr, dateX + 15, dateY + 28);
|
|
|
|
// --- Main Content (Centered) ---
|
|
const centerX = W / 2;
|
|
|
|
// Label
|
|
ctx.textAlign = "center";
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
|
|
ctx.font = "normal 24px sans-serif";
|
|
ctx.fillText("今日好运指数", centerX, 180);
|
|
|
|
// Score
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.font = "bold 140px sans-serif";
|
|
ctx.fillText(resultData.value.score + "%", centerX, 310);
|
|
|
|
// Lucky Word
|
|
ctx.font = "bold 52px sans-serif";
|
|
ctx.fillText(resultData.value.luckyWord, centerX, 390);
|
|
|
|
// Decorators (Bottom Corners)
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
|
|
ctx.font = "normal 24px sans-serif";
|
|
ctx.textAlign = "left";
|
|
ctx.fillText("福", 40, headerH - 20);
|
|
ctx.textAlign = "right";
|
|
ctx.fillText("禧", W - 40, headerH - 20);
|
|
|
|
// 5. 绘制内容区 (宜/忌)
|
|
const gridY = 500;
|
|
const boxW = (W - 64 - 24) / 2;
|
|
const gridH = 140;
|
|
|
|
// 宜
|
|
drawBox(ctx, 32, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
|
ctx.textAlign = "left";
|
|
ctx.font = "bold 24px sans-serif";
|
|
ctx.fillStyle = "#d81e06";
|
|
ctx.fillText("✔ 今日宜", 56, gridY + 44);
|
|
|
|
ctx.font = "normal 22px sans-serif";
|
|
ctx.fillStyle = "#666666";
|
|
wrapText(ctx, resultData.value.yi, 56, gridY + 80, boxW - 48, 30);
|
|
|
|
// 忌
|
|
drawBox(ctx, 32 + boxW + 24, gridY, boxW, gridH, "#fbfbfb", "#f5f5f5");
|
|
ctx.font = "bold 24px sans-serif";
|
|
ctx.fillStyle = "#666666";
|
|
ctx.fillText("✖ 今日忌", 32 + boxW + 24 + 24, gridY + 44);
|
|
|
|
ctx.font = "normal 22px sans-serif";
|
|
wrapText(
|
|
ctx,
|
|
resultData.value.ji,
|
|
32 + boxW + 24 + 24,
|
|
gridY + 80,
|
|
boxW - 48,
|
|
30,
|
|
);
|
|
|
|
// 6. 幸运元素
|
|
const elY = 670;
|
|
const elH = 160;
|
|
drawBox(ctx, 32, elY, W - 64, elH, "#fbfbfb", "#f5f5f5");
|
|
|
|
// 标题
|
|
ctx.font = "bold 26px sans-serif";
|
|
ctx.fillStyle = "#333333";
|
|
ctx.fillText("★ 幸运元素", 56, elY + 46);
|
|
|
|
// 元素内容
|
|
const contentW = W - 64;
|
|
const colW = contentW / 3;
|
|
const startX = 32;
|
|
|
|
const labelY = elY + 90;
|
|
const valY = elY + 126;
|
|
|
|
// 颜色
|
|
ctx.textAlign = "center";
|
|
ctx.font = "normal 20px sans-serif";
|
|
ctx.fillStyle = "#999999";
|
|
ctx.fillText("颜色", startX + colW * 0.5, labelY);
|
|
|
|
ctx.font = "bold 26px sans-serif";
|
|
ctx.fillStyle = "#d84315";
|
|
ctx.fillText(resultData.value.luckyColor, startX + colW * 0.5, valY);
|
|
|
|
// 数字
|
|
ctx.font = "normal 20px sans-serif";
|
|
ctx.fillStyle = "#999999";
|
|
ctx.fillText("数字", startX + colW * 1.5, labelY);
|
|
|
|
ctx.font = "bold 26px sans-serif";
|
|
ctx.fillStyle = "#333333";
|
|
ctx.fillText(resultData.value.luckyNumber, startX + colW * 1.5, valY);
|
|
|
|
// 方向
|
|
ctx.font = "normal 20px sans-serif";
|
|
ctx.fillStyle = "#999999";
|
|
ctx.fillText("方向", startX + colW * 2.5, labelY);
|
|
|
|
ctx.font = "bold 26px sans-serif";
|
|
ctx.fillStyle = "#333333";
|
|
ctx.fillText(
|
|
resultData.value.luckyDirection,
|
|
startX + colW * 2.5,
|
|
valY,
|
|
);
|
|
|
|
// 分隔线
|
|
ctx.strokeStyle = "#eeeeee";
|
|
ctx.lineWidth = 2;
|
|
ctx.beginPath();
|
|
const lineTop = elY + 70;
|
|
const lineBottom = elY + 130;
|
|
ctx.moveTo(startX + colW, lineTop);
|
|
ctx.lineTo(startX + colW, lineBottom);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX + colW * 2, lineTop);
|
|
ctx.lineTo(startX + colW * 2, lineBottom);
|
|
ctx.stroke();
|
|
|
|
// 7. 语录
|
|
ctx.textAlign = "center";
|
|
ctx.font = "italic 22px sans-serif";
|
|
ctx.fillStyle = "#999999";
|
|
wrapTextCentered(
|
|
ctx,
|
|
`“${resultData.value.quote}”`,
|
|
W / 2,
|
|
880,
|
|
W - 80,
|
|
30,
|
|
);
|
|
|
|
// 8. 底部区域 (Footer)
|
|
const footerY = 960;
|
|
|
|
// 分隔线
|
|
ctx.strokeStyle = "#f0f0f0";
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(40, footerY);
|
|
ctx.lineTo(W - 40, footerY);
|
|
ctx.stroke();
|
|
|
|
// 底部左侧文字
|
|
ctx.textAlign = "left";
|
|
ctx.font = "28px sans-serif";
|
|
ctx.fillStyle = "#333333";
|
|
ctx.fillText("扫码开启今日好运", 40, footerY + 60);
|
|
|
|
ctx.font = "normal 20px sans-serif";
|
|
ctx.fillStyle = "#999999";
|
|
ctx.fillText("2026 LUCKY EVERY DAY · 幸运每一天", 40, footerY + 100);
|
|
|
|
// 底部右侧二维码
|
|
if (qrCodeImg) {
|
|
ctx.drawImage(qrCodeImg, W - 140, footerY + 25, 100, 100);
|
|
}
|
|
|
|
// 生成图片
|
|
setTimeout(() => {
|
|
uni.canvasToTempFilePath({
|
|
canvas: canvas,
|
|
width: W,
|
|
height: H,
|
|
destWidth: W * dpr,
|
|
destHeight: H * dpr,
|
|
success: (res) => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => {
|
|
uni.hideLoading();
|
|
uni.showToast({ title: "已保存到相册", icon: "success" });
|
|
},
|
|
fail: () => {
|
|
uni.hideLoading();
|
|
uni.showToast({ title: "保存失败，请授权", icon: "none" });
|
|
},
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
uni.hideLoading();
|
|
uni.showToast({ title: "生成图片失败", icon: "none" });
|
|
console.error(err);
|
|
},
|
|
});
|
|
}, 200);
|
|
} catch (err) {
|
|
console.error(err);
|
|
uni.hideLoading();
|
|
uni.showToast({ title: "生成图片失败", icon: "none" });
|
|
}
|
|
});
|
|
};
|
|
|
|
// 辅助函数：绘制圆角矩形
|
|
function roundRect(ctx, x, y, w, h, r) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + r, y);
|
|
ctx.lineTo(x + w - r, y);
|
|
ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 2 * Math.PI);
|
|
ctx.lineTo(x + w, y + h - r);
|
|
ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
|
|
ctx.lineTo(x + r, y + h);
|
|
ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
|
|
ctx.lineTo(x, y + r);
|
|
ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
|
|
ctx.closePath();
|
|
}
|
|
|
|
// 辅助函数：绘制带背景边框的盒子
|
|
function drawBox(ctx, x, y, w, h, bg, border) {
|
|
ctx.fillStyle = bg;
|
|
ctx.strokeStyle = border;
|
|
ctx.lineWidth = 2;
|
|
roundRect(ctx, x, y, w, h, 20);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 辅助函数：文字换行
|
|
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
|
|
let words = text.split("");
|
|
let line = "";
|
|
for (let n = 0; n < words.length; n++) {
|
|
let testLine = line + words[n];
|
|
let metrics = ctx.measureText(testLine);
|
|
let testWidth = metrics.width;
|
|
if (testWidth > maxWidth && n > 0) {
|
|
ctx.fillText(line, x, y);
|
|
line = words[n];
|
|
y += lineHeight;
|
|
} else {
|
|
line = testLine;
|
|
}
|
|
}
|
|
ctx.fillText(line, x, y);
|
|
}
|
|
|
|
// 辅助函数：文字换行（居中）
|
|
function wrapTextCentered(ctx, text, x, y, maxWidth, lineHeight) {
|
|
let words = text.split("");
|
|
let line = "";
|
|
for (let n = 0; n < words.length; n++) {
|
|
let testLine = line + words[n];
|
|
let metrics = ctx.measureText(testLine);
|
|
let testWidth = metrics.width;
|
|
if (testWidth > maxWidth && n > 0) {
|
|
ctx.fillText(line, x, y);
|
|
line = words[n];
|
|
y += lineHeight;
|
|
} else {
|
|
line = testLine;
|
|
}
|
|
}
|
|
ctx.fillText(line, x, y);
|
|
}
|
|
|
|
const onShareMoments = () => {
|
|
uni.showToast({ title: "请点击右上角分享", icon: "none" });
|
|
};
|
|
|
|
onShareAppMessage(async () => {
|
|
const shareToken = await getShareToken("lucky_card");
|
|
return {
|
|
title: "开启你的每日好运！",
|
|
path: `/pages/index/index?shareToken=${shareToken}`,
|
|
};
|
|
});
|
|
|
|
onShareTimeline(async () => {
|
|
const shareToken = await getShareToken("lucky_card_timeline");
|
|
return {
|
|
title: "开启你的每日好运！",
|
|
query: `shareToken=${shareToken}`,
|
|
};
|
|
});
|
|
|
|
defineExpose({ open, close });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.lucky-popup-container {
|
|
/* 动画容器 */
|
|
.animation-container {
|
|
width: 600rpx;
|
|
height: 920rpx; /* Updated height */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card-flip-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
&.flipped {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
|
|
.card-front,
|
|
.card-back {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 0 40rpx rgba(255, 215, 0, 0.3);
|
|
}
|
|
|
|
.card-front {
|
|
background: linear-gradient(135deg, #fffcf5 0%, #fff4e6 100%);
|
|
z-index: 2;
|
|
|
|
.loading-circle {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
position: relative;
|
|
margin-bottom: 40rpx;
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: #ff8f00;
|
|
border-radius: 50%;
|
|
animation: orbit 1.5s linear infinite;
|
|
|
|
/* 绝对居中 */
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -10rpx;
|
|
margin-left: -10rpx;
|
|
|
|
&.p1 {
|
|
animation-delay: 0s;
|
|
}
|
|
&.p2 {
|
|
animation-delay: -0.375s;
|
|
}
|
|
&.p3 {
|
|
animation-delay: -0.75s;
|
|
}
|
|
&.p4 {
|
|
animation-delay: -1.125s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
color: #d81e06;
|
|
font-size: 28rpx;
|
|
letter-spacing: 2rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.card-back {
|
|
background: #fff;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.light-effect {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 215, 0, 0.8) 0%,
|
|
transparent 70%
|
|
);
|
|
opacity: 0;
|
|
animation: flash 0.6s ease-out forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 结果展示 */
|
|
.result-container {
|
|
width: 600rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.lucky-card {
|
|
width: 100%;
|
|
height: 920rpx; /* Increased height */
|
|
background: #fff;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 40rpx;
|
|
|
|
.card-header {
|
|
height: 460rpx; /* Increased height */
|
|
background: linear-gradient(180deg, #d84315 0%, #ffca28 100%);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx 40rpx;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
|
|
.header-top-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
|
|
.user-info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.user-avatar {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid rgba(255, 255, 255, 0.8);
|
|
margin-right: 16rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.date-tag {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
}
|
|
|
|
.header-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.header-label {
|
|
font-size: 24rpx;
|
|
margin-bottom: 8rpx;
|
|
opacity: 0.9;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.score-wrap {
|
|
display: flex;
|
|
align-items: baseline;
|
|
line-height: 1;
|
|
margin-bottom: 16rpx;
|
|
|
|
.score {
|
|
font-size: 140rpx; /* Bigger */
|
|
font-weight: bold;
|
|
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.percent {
|
|
font-size: 40rpx;
|
|
margin-left: 8rpx;
|
|
font-weight: 500;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.lucky-word {
|
|
font-size: 52rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 6rpx;
|
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.header-decor {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
font-size: 24rpx;
|
|
opacity: 0.4;
|
|
|
|
&.left-bottom {
|
|
left: 40rpx;
|
|
}
|
|
&.right-bottom {
|
|
right: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-body {
|
|
padding: 40rpx 32rpx;
|
|
|
|
.yi-ji-grid {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
.grid-item {
|
|
flex: 1;
|
|
background: #fbfbfb;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
border: 2rpx solid #f5f5f5;
|
|
|
|
.item-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.item-content {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lucky-elements {
|
|
background: #fbfbfb;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
border: 2rpx solid #f5f5f5;
|
|
margin-bottom: 32rpx;
|
|
|
|
.elements-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.elements-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.el-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.label {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 600;
|
|
|
|
&.color-val {
|
|
color: #d84315;
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
width: 2rpx;
|
|
height: 40rpx;
|
|
background: #eee;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quote-text {
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-actions {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
|
|
:deep(.uni-icons) {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
backdrop-filter: blur(10rpx);
|
|
border: 2rpx solid rgba(255, 255, 255, 0.2);
|
|
margin-bottom: 12rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
&:active :deep(.uni-icons) {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.btn-label {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes orbit {
|
|
0% {
|
|
transform: rotate(0deg) translateX(40rpx) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
.lucky-canvas {
|
|
position: fixed;
|
|
left: -9999px;
|
|
top: 0;
|
|
}
|
|
</style>
|