v1.3.1
1、更换播放按钮、首页文案，loading背景使用回原有的。同时加入定位属性，用于不同商圈的定位 2、商圈交互区域加入热点动画提示 3、王府井、隆福寺热点加入文字说明 4、舞狮动画在开始时先进行一次播放用于加载图片，然后再跟随鼓声进行播放 5、
This commit is contained in:
parent
3e78907de0
commit
736e7b7aa0
|
|
@ -141,6 +141,13 @@ onMounted(() => {
|
|||
@click="openWebview"
|
||||
/>
|
||||
|
||||
<!-- 热点点击区域 -->
|
||||
<div class="hotspot-area">
|
||||
<div class="pulse-indicator">
|
||||
<div class="pulse-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频播放按钮 -->
|
||||
<VideoPlayButton @play="openVideoPlayer" />
|
||||
|
||||
|
|
@ -214,7 +221,7 @@ onMounted(() => {
|
|||
width: 479rpx;
|
||||
height: 84rpx;
|
||||
cursor: pointer;
|
||||
z-index: 25;
|
||||
z-index: 26;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
|
@ -227,4 +234,49 @@ onMounted(() => {
|
|||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 热点点击区域 */
|
||||
.hotspot-area {
|
||||
position: absolute;
|
||||
left: 321rpx;
|
||||
top: 570rpx;
|
||||
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;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -611,6 +611,13 @@ onUnmounted(() => {
|
|||
@touchstart="startDrag"
|
||||
></view>
|
||||
|
||||
<!-- 热点点击区域 -->
|
||||
<div v-if="showGuideElements" class="hotspot-area">
|
||||
<div class="pulse-indicator">
|
||||
<div class="pulse-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频播放按钮 -->
|
||||
<VideoPlayButton @play="openVideoPlayer" />
|
||||
|
||||
|
|
@ -724,5 +731,49 @@ onUnmounted(() => {
|
|||
z-index: 30;
|
||||
}
|
||||
|
||||
/* 热点点击区域 */
|
||||
.hotspot-area {
|
||||
position: absolute;
|
||||
right: 80rpx;
|
||||
top: 1750rpx;
|
||||
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;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -17,9 +17,6 @@ const emit = defineEmits(['loaded', 'start'])
|
|||
const loadingProgress = ref(0)
|
||||
// 是否加载完成
|
||||
const isLoadingComplete = ref(false)
|
||||
// 是否显示开始按钮
|
||||
const showStartButton = ref(false)
|
||||
|
||||
// 生成带时间戳的图片URL（避免缓存）
|
||||
const generateImageUrl = (name) => {
|
||||
const url = new URL(`/static/bg/${name}.jpg`, import.meta.url)
|
||||
|
|
@ -27,11 +24,6 @@ const generateImageUrl = (name) => {
|
|||
return url.href
|
||||
}
|
||||
|
||||
// 计算开始按钮是否可见
|
||||
const startButtonVisible = computed(() => {
|
||||
return isLoadingComplete.value && showStartButton.value
|
||||
})
|
||||
|
||||
// 加载图片函数
|
||||
const loadImages = async () => {
|
||||
// 图片名称数组
|
||||
|
|
@ -74,12 +66,16 @@ const loadImages = async () => {
|
|||
isLoadingComplete.value = true
|
||||
loadingProgress.value = 100
|
||||
|
||||
// 延迟显示开始按钮，让用户看到100%的进度
|
||||
// 延迟后自动开始，让用户看到100%的进度
|
||||
setTimeout(() => {
|
||||
showStartButton.value = true
|
||||
// 通知父组件加载完成
|
||||
emit('loaded')
|
||||
}, 500)
|
||||
// 自动开始，进入首页
|
||||
// 等待100ms确保进度条完全显示
|
||||
setTimeout(() => {
|
||||
emit('start')
|
||||
}, 500)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 单个图片加载函数
|
||||
|
|
@ -92,10 +88,7 @@ const loadImage = (src) => {
|
|||
})
|
||||
}
|
||||
|
||||
// 点击开始按钮
|
||||
const handleStart = () => {
|
||||
emit('start')
|
||||
}
|
||||
|
||||
|
||||
// 组件挂载后开始加载图片
|
||||
onMounted(() => {
|
||||
|
|
@ -111,17 +104,12 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<!-- 进度条区域 -->
|
||||
<div v-if="!startButtonVisible" class="progress-container">
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: `${loadingProgress}%` }"></div>
|
||||
</div>
|
||||
<div class="progress-text">{{ loadingProgress }}%</div>
|
||||
</div>
|
||||
|
||||
<!-- 开始按钮 -->
|
||||
<div v-if="startButtonVisible" class="start-button" @click="handleStart">
|
||||
<img src="/static/loading/btn_start.png" alt="开始" class="start-btn-image" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -156,10 +156,11 @@ onMounted(() => {
|
|||
</div> -->
|
||||
|
||||
<!-- 热点点击区域2 - 右下方 -->
|
||||
<div class="hotspot-area" style="left: 450rpx; top: 900rpx;" @click="openGallery(1)">
|
||||
<div class="hotspot-area" style="left: 450rpx; top: 900rpx;" @click="openGallery(0)">
|
||||
<div class="pulse-indicator">
|
||||
<div class="pulse-circle"></div>
|
||||
</div>
|
||||
<div class="hotspot-text">点击查看隆福寺新年照片</div>
|
||||
</div>
|
||||
|
||||
<!-- 热点点击区域3 - 上方 -->
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -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,17 +286,22 @@ onUnmounted(() => {
|
|||
</div>
|
||||
|
||||
<!-- 音乐控制按钮 -->
|
||||
<div class="music-control" @click="toggleMusic">
|
||||
<!-- <div class="music-control" @click="toggleMusic">
|
||||
<img
|
||||
:src="isDrumPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png' "
|
||||
alt="音乐控制"
|
||||
class="music-icon"
|
||||
:class="{ 'playing': isDrumPlaying }"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<!-- 热点点击区域 -->
|
||||
<div class="hotspot-area" @click="toggleMusic">
|
||||
<div class="pulse-indicator">
|
||||
<div class="pulse-circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- sq1图片 -->
|
||||
<img
|
||||
v-if="sq1ImageVisible"
|
||||
|
|
@ -296,10 +311,10 @@ onUnmounted(() => {
|
|||
/>
|
||||
|
||||
<!-- 舞狮动画 -->
|
||||
<div class="lion-dance" :class="{ 'playing': isDrumPlaying }"></div>
|
||||
<div class="lion-dance" :class="{ 'playing': isDrumPlaying, 'play-once': isPlayingOnce }"></div>
|
||||
|
||||
<!-- 视频播放按钮 -->
|
||||
<VideoPlayButton @play="openVideoPlayer" />
|
||||
<VideoPlayButton :position="{ bottom: '30rpx', right: '11rpx' }" @play="openVideoPlayer" />
|
||||
|
||||
<!-- 视频播放器弹窗 -->
|
||||
<VideoPlayerModal :video-url="props.videoUrl" :visible="showVideoPlayer" @close="closeVideoPlayer" />
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.lantern {
|
||||
font-size: 2rem;
|
||||
}
|
||||
/* 脉冲动效 */
|
||||
.pulse-indicator {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.drum-interactive-area {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
.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;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1182,7 +1182,7 @@ onUnmounted(() => {
|
|||
|
||||
.new-year-text {
|
||||
display: inline-block;
|
||||
width: 598rpx;
|
||||
width: 515rpx;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,30 @@
|
|||
<script setup>
|
||||
import { defineEmits } from 'vue'
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
// 组件属性
|
||||
const props = defineProps({
|
||||
// 按钮位置
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
bottom: '150rpx',
|
||||
right: '11rpx'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 组件事件
|
||||
const emit = defineEmits(['play'])
|
||||
|
||||
// 处理播放按钮点击
|
||||
const handlePlayClick = () => {
|
||||
// 点击播放按钮
|
||||
const handlePlay = () => {
|
||||
emit('play')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="video-play-button-container" @click="handlePlayClick">
|
||||
<!-- 背景层，单独进行呼吸动画 -->
|
||||
<div class="video-play-button-bg"></div>
|
||||
<!-- 内容层，保持静态 -->
|
||||
<div class="video-play-button-content">
|
||||
<img src="/static/images/icon_music1.png" alt="播放视频" class="video-icon" />
|
||||
<span class="video-text">观看视频</span>
|
||||
</div>
|
||||
<div class="video-play-button-container" :style="position" @click="handlePlay">
|
||||
<img src="/static/images/btn_video.png" alt="播放视频" class="video-button" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -26,69 +32,20 @@ const handlePlayClick = () => {
|
|||
/* 视频播放按钮容器 */
|
||||
.video-play-button-container {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
right: 5rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 146rpx;
|
||||
height: 174rpx;
|
||||
z-index: 50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 背景层，单独进行呼吸动画 */
|
||||
.video-play-button-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
animation: breathe 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 内容层，保持静态 */
|
||||
.video-play-button-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.video-button {
|
||||
width: 146rpx;
|
||||
height: 174rpx;
|
||||
}
|
||||
|
||||
/* 鼠标悬停效果 */
|
||||
.video-play-button-container:hover .video-play-button-bg {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
.video-play-button-container:hover .video-button {
|
||||
transform: scale(1.05);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.video-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.video-text {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 呼吸动画 */
|
||||
@keyframes breathe {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -147,10 +147,11 @@ onMounted(() => {
|
|||
/>
|
||||
|
||||
<!-- 热点点击区域1 -->
|
||||
<div class="hotspot-area" style="right:20rpx; top: 950rpx;" @click="openGallery(0)">
|
||||
<div class="hotspot-area" @click="openGallery(0)">
|
||||
<div class="pulse-indicator">
|
||||
<div class="pulse-circle"></div>
|
||||
</div>
|
||||
<div class="hotspot-text">点击查看王府井新年照片</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片浏览器弹窗 -->
|
||||
|
|
@ -232,22 +233,13 @@ onMounted(() => {
|
|||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 640px) {
|
||||
.hotspot-area {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.pulse-indicator {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 热点点击区域 */
|
||||
.hotspot-area {
|
||||
position: absolute;
|
||||
right:100rpx;
|
||||
top: 950rpx;
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
cursor: pointer;
|
||||
|
|
@ -288,4 +280,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;
|
||||
}
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 41 KiB |
Loading…
Reference in New Issue