+
@@ -222,142 +223,7 @@ onMounted(() => {
object-fit: contain;
}
-/* 增强动效层 */
-.enhancement-layer {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 10;
-}
-/* 灯笼增强动效 */
-.lanterns {
- position: absolute;
- top: 15%;
- width: 100%;
- display: flex;
- justify-content: space-between;
- padding: 0 30px;
- box-sizing: border-box;
-}
-
-.lantern {
- font-size: 2.5rem;
- animation: swing 3s infinite ease-in-out;
- opacity: 1;
- filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
- color: #ffd700;
-}
-
-.left-lantern {
- animation-delay: 0s;
-}
-
-.right-lantern {
- animation-delay: 1.5s;
-}
-
-@keyframes swing {
- 0%, 100% { transform: rotate(-10deg); }
- 50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
- position: absolute;
- top: 30%;
- left: 65%;
- transform: translateX(-50%) rotate(15deg);
- font-size: 2rem;
- color: #ffd700;
- text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
- animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
- 0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
- 50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
- position: absolute;
- top: 55%;
- left: 75%;
- transform: translate(-50%, -50%);
- width: 60px;
- height: 60px;
- pointer-events: none;
-}
-
-.pulse-circle {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: rgba(255, 215, 0, 0.3);
- border: 2px solid rgba(255, 215, 0, 0.6);
- animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
- 0% {
- transform: scale(0.8);
- opacity: 0.8;
- }
- 100% {
- transform: scale(2);
- opacity: 0;
- }
-}
-
-.click-indicator.animate-pulse {
- display: block;
-}
-
-/* 交互区域 */
-.interaction-area {
- position: absolute;
- top: 55%;
- right: 15%;
- width: 120px;
- height: 100px;
- cursor: pointer;
- z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
- .interaction-area {
- top: 52%;
- right: 10%;
- width: 100px;
- height: 80px;
- }
-}
-
-/* 福印收集标记 */
-.seal-collected-mark {
- position: absolute;
- top: 20px;
- right: 20px;
- background-color: rgba(255, 107, 53, 0.9);
- color: #fff;
- padding: 10px 15px;
- border-radius: 20px;
- font-size: 14px;
- display: flex;
- align-items: center;
- gap: 5px;
- animation: fadeIn 0.5s ease;
- z-index: 30;
-}
-
-.seal-icon {
- font-size: 20px;
-}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
@@ -429,4 +295,20 @@ onMounted(() => {
}
}
+/* 热点文字提示 */
+.hotspot-text {
+ position: absolute;
+ bottom: -40rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 24rpx;
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.6);
+ padding: 8rpx 16rpx;
+ border-radius: 20rpx;
+ white-space: nowrap;
+ z-index: 30;
+ text-align: center;
+}
+
\ No newline at end of file
diff --git a/components/QianmenScene.vue b/components/QianmenScene.vue
index 6af658e..f6c40e5 100644
--- a/components/QianmenScene.vue
+++ b/components/QianmenScene.vue
@@ -51,6 +51,9 @@ const isDrumPlaying = ref(false)
const drumPlayer = ref(null)
const wasBgPlayingBeforeDrum = ref(false)
+// 舞狮动画一次性播放状态
+const isPlayingOnce = ref(false)
+
// 福字点击区域状态
const sq1ImageVisible = ref(false)
// 视频播放状态
@@ -192,6 +195,13 @@ onMounted(() => {
container.classList.add('animate-in')
}
+ // 进入页面后自动播放一次舞狮动画
+ isPlayingOnce.value = true
+ // 动画播放一次后停止（动画时长约0.9秒）
+ setTimeout(() => {
+ isPlayingOnce.value = false
+ }, 900)
+
// 等待图片加载完成后测量高度
const img = backgroundLayerRef.value ? backgroundLayerRef.value.querySelector('.background-image') : null
if (img) {
@@ -276,16 +286,21 @@ onUnmounted(() => {
+
-
+
+
![]()
{
/>
-
+
-
+
@@ -336,190 +351,6 @@ onUnmounted(() => {
object-fit: contain;
}
-/* 增强动效层 */
-.enhancement-layer {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 10;
-}
-
-/* 灯笼增强动效 */
-.lanterns {
- position: absolute;
- top: 15%;
- width: 100%;
- display: flex;
- justify-content: space-between;
- padding: 0 30px;
- box-sizing: border-box;
-}
-
-.lantern {
- font-size: 2.5rem;
- animation: swing 3s infinite ease-in-out;
- opacity: 0.9;
- filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
- color: #ffd700;
-}
-
-.left-lantern {
- animation-delay: 0s;
-}
-
-.right-lantern {
- animation-delay: 1.5s;
-}
-
-@keyframes swing {
- 0%, 100% { transform: rotate(-10deg); }
- 50% { transform: rotate(10deg); }
-}
-
-/* 福字增强动效 */
-.fu-word {
- position: absolute;
- top: 30%;
- left: 65%;
- transform: translateX(-50%) rotate(15deg);
- font-size: 2rem;
- color: #ffd700;
- text-shadow: 2px 2px 10px rgba(255, 215, 0, 0.9);
- animation: float 4s infinite ease-in-out;
-}
-
-@keyframes float {
- 0%, 100% { transform: translateX(-50%) rotate(15deg) translateY(0); }
- 50% { transform: translateX(-50%) rotate(15deg) translateY(-15px); }
-}
-
-/* 点击指示器 */
-.click-indicator {
- position: absolute;
- top: 55%;
- left: 75%;
- transform: translate(-50%, -50%);
- width: 60px;
- height: 60px;
- pointer-events: none;
-}
-
-.pulse-circle {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: rgba(255, 215, 0, 0.3);
- border: 2px solid rgba(255, 215, 0, 0.6);
- animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
- 0% {
- transform: scale(0.8);
- opacity: 0.8;
- }
- 100% {
- transform: scale(2);
- opacity: 0;
- }
-}
-
-.click-indicator.animate-pulse {
- display: block;
-}
-
-/* 大鼓交互区域 */
-.drum-interactive-area {
- position: absolute;
- top: 55%;
- right: 15%;
- width: 120px;
- height: 100px;
- cursor: pointer;
- z-index: 20;
-}
-
-/* 响应式调整交互区域位置 */
-@media (max-width: 640px) {
- .drum-interactive-area {
- top: 52%;
- right: 10%;
- width: 100px;
- height: 80px;
- }
-}
-
-/* 人物元素 */
-.character {
- position: absolute;
- font-size: 3rem;
- pointer-events: none;
- z-index: 20;
- transition: top 0.1s linear;
- filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
- animation: walk 1s infinite alternate;
-}
-
-@keyframes walk {
- 0% {
- transform: translate(-50%, -50%) scale(1);
- }
- 100% {
- transform: translate(-50%, -50%) scale(1.1);
- }
-}
-
-/* 烟花效果 */
-.fireworks {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 20;
- animation: fadeIn 0.5s ease;
-}
-
-.firework {
- position: absolute;
- font-size: 2rem;
- opacity: 0;
- animation: firework 3s infinite;
-}
-
-.firework-1 {
- top: 10%;
- left: 20%;
- animation-delay: 0s;
-}
-
-.firework-2 {
- top: 15%;
- right: 25%;
- animation-delay: 1s;
-}
-
-.firework-3 {
- top: 8%;
- right: 15%;
- animation-delay: 2s;
-}
-
-.firework-4 {
- top: 12%;
- left: 25%;
- animation-delay: 3s;
-}
-
-@keyframes firework {
- 0%, 100% { opacity: 0; transform: scale(0); }
- 50% { opacity: 1; transform: scale(1.5); }
-}
-
/* 音乐控制按钮 */
.music-control {
position: absolute;
@@ -565,27 +396,6 @@ onUnmounted(() => {
animation: fadeIn 0.5s ease;
}
-/* 福印收集标记 */
-.seal-collected-mark {
- position: absolute;
- top: 20px;
- right: 20px;
- background-color: rgba(255, 107, 53, 0.9);
- color: #fff;
- padding: 10px 15px;
- border-radius: 20px;
- font-size: 14px;
- display: flex;
- align-items: center;
- gap: 5px;
- animation: fadeIn 0.5s ease;
- z-index: 30;
-}
-
-.seal-icon {
- font-size: 20px;
-}
-
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
@@ -619,6 +429,10 @@ onUnmounted(() => {
animation: lionDance 0.9s infinite;
}
+.lion-dance.play-once {
+ animation: lionDance 0.9s;
+}
+
@keyframes lionDance {
0%, 16.66% { background-image: url('/static/animate/lion/lion1.png'); }
16.67%, 33.33% { background-image: url('/static/animate/lion/lion2.png'); }
@@ -628,19 +442,49 @@ onUnmounted(() => {
83.34%, 100% { background-image: url('/static/animate/lion/lion6.png'); }
}
-/* 响应式设计 */
-@media (max-width: 640px) {
- .fu-word {
- font-size: 1.5rem;
+/* 热点点击区域 */
+.hotspot-area {
+ position: absolute;
+ left: 465rpx;
+ top: 780rpx;
+ width: 150rpx;
+ height: 150rpx;
+ cursor: pointer;
+ z-index: 25;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* 脉冲动效 */
+.pulse-indicator {
+ position: relative;
+ width: 100rpx;
+ height: 100rpx;
+}
+
+.pulse-circle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: rgba(255, 215, 0, 0.4);
+ border: 3rpx solid rgba(255, 215, 0, 0.8);
+ animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: translate(-50%, -50%) scale(0.8);
+ opacity: 0.8;
}
-
- .lantern {
- font-size: 2rem;
- }
-
- .drum-interactive-area {
- width: 100px;
- height: 80px;
+ 100% {
+ transform: translate(-50%, -50%) scale(2);
+ opacity: 0;
}
}
+
diff --git a/components/SinglePageContainer.vue b/components/SinglePageContainer.vue
index 20abbf1..787c503 100644
--- a/components/SinglePageContainer.vue
+++ b/components/SinglePageContainer.vue
@@ -1182,7 +1182,7 @@ onUnmounted(() => {
.new-year-text {
display: inline-block;
- width: 598rpx;
+ width: 515rpx;
height: auto;
object-fit: contain;
}
diff --git a/components/VideoPlayButton.vue b/components/VideoPlayButton.vue
index 6b1f8aa..63fc8cb 100644
--- a/components/VideoPlayButton.vue
+++ b/components/VideoPlayButton.vue
@@ -1,24 +1,30 @@
- 
- 
- 观看视频
- 