|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
</div>
|
||||
<!-- 标题图片 -->
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
|||
<!-- 图片浏览组件 -->
|
||||
<div class="image-gallery">
|
||||
<div class="gallery-image-wrapper">
|
||||
<img :src="images[currentImageIndex].src" :alt="images[currentImageIndex].title" class="gallery-image" />
|
||||
</div>
|
||||
<div class="gallery-controls">
|
||||
<div class="nav-btn prev-btn" @click="prevImage">
|
||||
<img src="/static/images/btn_prev.png" alt="上一张" class="nav-icon" />
|
||||
</div>
|
||||
<div class="gallery-title">{{ images[currentImageIndex].title }}</div>
|
||||
<img :src="images[currentImageIndex].src" :alt="images[currentImageIndex].title" mode="widthFit" class="gallery-image" />
|
||||
<div class="nav-btn next-btn" @click="nextImage">
|
||||
<img src="/static/images/btn_next.png" alt="下一张" class="nav-icon" />
|
||||
</div>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 354 KiB After Width: | Height: | Size: 564 KiB |
|
Before Width: | Height: | Size: 357 KiB After Width: | Height: | Size: 568 KiB |
|
Before Width: | Height: | Size: 430 KiB After Width: | Height: | Size: 604 KiB |
|
After Width: | Height: | Size: 494 KiB |