|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
||||||
<!-- 使用崇文门商圈背景图片 -->
|
<!-- 使用崇文门商圈背景图片 -->
|
||||||
<img src="/static/bg/bg3.jpg" alt="崇文门商圈" class="background-image" />
|
<img src="/static/bg/bg2.jpg" alt="崇文门商圈" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 增强动效层 -->
|
<!-- 增强动效层 -->
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
||||||
<!-- 使用东直门商圈背景图片 -->
|
<!-- 使用东直门商圈背景图片 -->
|
||||||
<img src="/static/bg/bg6.jpg" alt="东直门商圈" class="background-image" />
|
<img src="/static/bg/bg5.jpg" alt="东直门商圈" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 增强动效层 -->
|
<!-- 增强动效层 -->
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<section class="scene-section end-section" :class="{ 'active': isActive }">
|
<section class="scene-section end-section" :class="{ 'active': isActive }">
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer">
|
<div class="background-layer">
|
||||||
<img src="/static/bg/bg7.jpg" alt="结束页背景" class="background-image" />
|
<img src="/static/bg/bg_finish.jpg" alt="结束页背景" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 内容层 -->
|
<!-- 内容层 -->
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
||||||
<!-- 使用隆福寺商圈背景图片 -->
|
<!-- 使用隆福寺商圈背景图片 -->
|
||||||
<img src="/static/bg/bg5.jpg" alt="隆福寺商圈" class="background-image" />
|
<img src="/static/bg/bg4.jpg" alt="隆福寺商圈" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 增强动效层 -->
|
<!-- 增强动效层 -->
|
||||||
|
|
|
||||||
|
|
@ -123,7 +123,7 @@ const calculateHeight = () => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer" ref="backgroundLayerRef" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
<div class="background-layer" ref="backgroundLayerRef" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
||||||
<!-- 使用复制到public目录的背景图片 -->
|
<!-- 使用复制到public目录的背景图片 -->
|
||||||
<img src="/static/bg/bg2.jpg" alt="前门商圈" class="background-image" />
|
<img src="/static/bg/bg1.jpg" alt="前门商圈" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 增强动效层 -->
|
<!-- 增强动效层 -->
|
||||||
|
|
|
||||||
|
|
@ -560,7 +560,7 @@ onUnmounted(() => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="home-bg">
|
<div class="home-bg">
|
||||||
<img
|
<img
|
||||||
src="/static/bg/bg1.jpg"
|
src="/static/bg/bg_main.jpg"
|
||||||
alt="2026新春东城商圈"
|
alt="2026新春东城商圈"
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
@error="handleImageError"
|
@error="handleImageError"
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
||||||
<!-- 背景图片层 -->
|
<!-- 背景图片层 -->
|
||||||
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
<div class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
|
||||||
<!-- 使用王府井商圈背景图片 -->
|
<!-- 使用王府井商圈背景图片 -->
|
||||||
<img src="/static/bg/bg4.jpg" alt="王府井商圈" class="background-image" />
|
<img src="/static/bg/bg3.jpg" alt="王府井商圈" class="background-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 增强动效层 -->
|
<!-- 增强动效层 -->
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@ const collectionStore = useCollectionStore();
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const backgroundImage = ref('/static/bg/bg7.jpg');
|
const backgroundImage = ref('/static/bg/bg_finish.jpg');
|
||||||
const uncollectedImage = ref('https://placeholder.pics/svg/100x100/CCCCCC/999999/未收集');
|
const uncollectedImage = ref('https://placeholder.pics/svg/100x100/CCCCCC/999999/未收集');
|
||||||
|
|
||||||
// 计算属性
|
// 计算属性
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 448 KiB |
|
Before Width: | Height: | Size: 448 KiB After Width: | Height: | Size: 239 KiB |
|
Before Width: | Height: | Size: 239 KiB After Width: | Height: | Size: 457 KiB |
|
Before Width: | Height: | Size: 457 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 392 KiB After Width: | Height: | Size: 612 KiB |
|
Before Width: | Height: | Size: 612 KiB |
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 238 KiB |