diff --git a/components/AICoupletForm.vue b/components/AICoupletForm.vue
index a5a7c7e..e586fc9 100644
--- a/components/AICoupletForm.vue
+++ b/components/AICoupletForm.vue
@@ -139,8 +139,8 @@ const generateCouplet = () => {
.modal-content {
position: relative;
z-index: 99;
- width: 697rpx;
- height: 417rpx;
+ width: 701rpx;
+ height: 444rpx;
background-image: url('/static/info/couplet_info_box.png');
background-size: 100% 100%;
background-repeat: no-repeat;
diff --git a/components/SinglePageContainer.vue b/components/SinglePageContainer.vue
index f5ff776..5ff5b74 100644
--- a/components/SinglePageContainer.vue
+++ b/components/SinglePageContainer.vue
@@ -488,7 +488,7 @@ const scrollToTop = () => {
// 处理图片加载错误
const handleImageError = (event) => {
- event.target.src = 'https://placeholder.pics/svg/640x1136/FDE9DF/FF6B35/2026新春东城商圈'
+ // event.target.src = 'https://placeholder.pics/svg/640x1136/FDE9DF/FF6B35/2026新春东城商圈'
}
// 处理前门板块高度变化
@@ -603,7 +603,6 @@ onUnmounted(() => {
src="/static/bg/bg_main.jpg"
alt="2026新春东城商圈"
class="bg-image"
- @error="handleImageError"
/>
diff --git a/components/WangfujingScene.vue b/components/WangfujingScene.vue
index b266841..a08f73f 100644
--- a/components/WangfujingScene.vue
+++ b/components/WangfujingScene.vue
@@ -41,9 +41,10 @@ const handleFuClick = () => {
// 图片浏览数据
const images = [
- { src: '/static/wfj/img1.png', title: '传艺承福阁' },
- { src: '/static/wfj/img2.png', title: '京味福食巷' },
- { src: '/static/wfj/img3.png', title: '雅趣福玩斋' }
+ { src: '/static/wfj/img1.png', title: '' },
+ { src: '/static/wfj/img2.png', title: '' },
+ { src: '/static/wfj/img3.png', title: '' },
+ { src: '/static/wfj/img4.png', title: '' }
]
const currentImageIndex = ref(0)
@@ -96,13 +97,10 @@ onMounted(() => {
-
![]()
-
-
-
{{ images[currentImageIndex].title }}
+
@@ -355,10 +353,15 @@ onMounted(() => {
/* 图片浏览组件 */
.image-gallery {
position: absolute;
- left: 40rpx;
- top: 1380rpx;
- width: 670rpx;
- background-color: #d72717;
+ left: 50%;
+ top: 1400rpx;
+ transform: translateX(-50%);
+ width: 653rpx;
+ height: 453rpx;
+ background-image: url('/static/wfj/gallery-bg.png');
+ background-size: 653rpx 453rpx;
+ background-repeat: no-repeat;
+ background-position: center;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
@@ -368,37 +371,42 @@ onMounted(() => {
/* 上方图片区域 */
.gallery-image-wrapper {
+ position: relative;
width: 100%;
+ height: 100%;
display: flex;
align-items: center;
justify-content: center;
- margin-bottom: 16rpx;
+ padding: 20rpx;
+ box-sizing: border-box;
}
.gallery-image {
- width: 100%;
- height: auto;
- object-fit: contain;
+ width: 613rpx;
+ object-fit: cover;
border-radius: 12rpx;
display: block;
}
-/* 下方控制区域 */
-.gallery-controls {
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 80rpx;
-}
-
.nav-btn {
- width: 70rpx;
- height: 70rpx;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 60rpx;
+ height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- flex-shrink: 0;
+ z-index: 10;
+}
+
+.prev-btn {
+ left: -18rpx;
+}
+
+.next-btn {
+ right: -18rpx;
}
.nav-icon {
@@ -407,16 +415,6 @@ onMounted(() => {
object-fit: contain;
}
-.gallery-title {
- flex: 1;
- text-align: center;
- color: #fff;
- font-size: 40rpx;
- font-weight: 500;
- letter-spacing: 6rpx;
- padding: 0 20rpx;
-}
-
/* 响应式设计 */
@media (max-width: 640px) {
.fu-word {
diff --git a/static/info/couplet_info_box.png b/static/info/couplet_info_box.png
index ac0f518..68ec50f 100644
Binary files a/static/info/couplet_info_box.png and b/static/info/couplet_info_box.png differ
diff --git a/static/wfj/gallery-bg.png b/static/wfj/gallery-bg.png
new file mode 100644
index 0000000..803503e
Binary files /dev/null and b/static/wfj/gallery-bg.png differ
diff --git a/static/wfj/img1.png b/static/wfj/img1.png
index c0f734c..e6e86bd 100644
Binary files a/static/wfj/img1.png and b/static/wfj/img1.png differ
diff --git a/static/wfj/img2.png b/static/wfj/img2.png
index a2f3d09..227805f 100644
Binary files a/static/wfj/img2.png and b/static/wfj/img2.png differ
diff --git a/static/wfj/img3.png b/static/wfj/img3.png
index ee5823c..1940290 100644
Binary files a/static/wfj/img3.png and b/static/wfj/img3.png differ
diff --git a/static/wfj/img4.png b/static/wfj/img4.png
new file mode 100644
index 0000000..d961418
Binary files /dev/null and b/static/wfj/img4.png differ