diff --git a/public/tanchaung.png b/public/tanchaung.png deleted file mode 100644 index 4161821..0000000 Binary files a/public/tanchaung.png and /dev/null differ diff --git a/public/tanchuang.png b/public/tanchuang.png new file mode 100644 index 0000000..042d545 Binary files /dev/null and b/public/tanchuang.png differ diff --git a/src/views/DZP.vue b/src/views/DZP.vue index cc4e0a8..8e70ade 100644 --- a/src/views/DZP.vue +++ b/src/views/DZP.vue @@ -70,7 +70,10 @@ function endCallback(prize) { // 触发动画 animateScoreChange() // 设置弹窗内容 - popupMessage.value = `${result}金币`; // <--- 正确的用法 + setTimeout(() => { + popupMessage.value= `${result}金币`; + }, 1000); // <--- 正确的用法 + showPopup.value = true; // 3秒后隐藏弹窗 setTimeout(() => { @@ -111,6 +114,7 @@ const animateScoreChange = () => {
+ {{ popupMessage }}
@@ -139,6 +143,8 @@ const animateScoreChange = () => { } } + + .score-popup { /* 基础样式同上 */ @@ -152,8 +158,8 @@ const animateScoreChange = () => { /* 背景图配置 */ background: - url('tanchaung.png') center/contain no-repeat; - padding: 240px 160px; + url('tanchuang.png') center/contain no-repeat; + padding: 120px 80px; /* 根据图片留出边距 */ /* 尺寸控制 */ @@ -171,15 +177,17 @@ const animateScoreChange = () => { .ziti { /* 文字样式 */ font-family: '华康金文体', 'Arial Black', sans-serif; + font-size: 100px; + /* 根据图片调整字号 */ - color: #0e0d0d; + color: #ffd904; /* 金色文字 */ line-height: 250px; /* 垂直居中文字 */ text-shadow: 2px 2px 0 #B8860B; /* 略微加粗文字 */ - margin-bottom: 260px; + margin-bottom: 100px; } /* 添加艺术字样式 */ @@ -203,6 +211,8 @@ const animateScoreChange = () => { z-index: 1000; } + + /* 添加分数变化动画 */ .score-change { transform: translateX(-50%) scale(1.2);