|
|
@ -139,8 +139,8 @@ const generateCouplet = () => {
|
||||||
.modal-content {
|
.modal-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 697rpx;
|
width: 701rpx;
|
||||||
height: 417rpx;
|
height: 444rpx;
|
||||||
background-image: url('/static/info/couplet_info_box.png');
|
background-image: url('/static/info/couplet_info_box.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
|
||||||
|
|
@ -488,7 +488,7 @@ const scrollToTop = () => {
|
||||||
|
|
||||||
// 处理图片加载错误
|
// 处理图片加载错误
|
||||||
const handleImageError = (event) => {
|
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"
|
src="/static/bg/bg_main.jpg"
|
||||||
alt="2026新春东城商圈"
|
alt="2026新春东城商圈"
|
||||||
class="bg-image"
|
class="bg-image"
|
||||||
@error="handleImageError"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 标题图片 -->
|
<!-- 标题图片 -->
|
||||||
|
|
|
||||||
|
|
@ -41,9 +41,10 @@ const handleFuClick = () => {
|
||||||
|
|
||||||
// 图片浏览数据
|
// 图片浏览数据
|
||||||
const images = [
|
const images = [
|
||||||
{ src: '/static/wfj/img1.png', title: '传艺承福阁' },
|
{ src: '/static/wfj/img1.png', title: '' },
|
||||||
{ src: '/static/wfj/img2.png', title: '京味福食巷' },
|
{ src: '/static/wfj/img2.png', title: '' },
|
||||||
{ src: '/static/wfj/img3.png', title: '雅趣福玩斋' }
|
{ src: '/static/wfj/img3.png', title: '' },
|
||||||
|
{ src: '/static/wfj/img4.png', title: '' }
|
||||||
]
|
]
|
||||||
const currentImageIndex = ref(0)
|
const currentImageIndex = ref(0)
|
||||||
|
|
||||||
|
|
@ -96,13 +97,10 @@ onMounted(() => {
|
||||||
<!-- 图片浏览组件 -->
|
<!-- 图片浏览组件 -->
|
||||||
<div class="image-gallery">
|
<div class="image-gallery">
|
||||||
<div class="gallery-image-wrapper">
|
<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">
|
<div class="nav-btn prev-btn" @click="prevImage">
|
||||||
<img src="/static/images/btn_prev.png" alt="上一张" class="nav-icon" />
|
<img src="/static/images/btn_prev.png" alt="上一张" class="nav-icon" />
|
||||||
</div>
|
</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">
|
<div class="nav-btn next-btn" @click="nextImage">
|
||||||
<img src="/static/images/btn_next.png" alt="下一张" class="nav-icon" />
|
<img src="/static/images/btn_next.png" alt="下一张" class="nav-icon" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -355,10 +353,15 @@ onMounted(() => {
|
||||||
/* 图片浏览组件 */
|
/* 图片浏览组件 */
|
||||||
.image-gallery {
|
.image-gallery {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 40rpx;
|
left: 50%;
|
||||||
top: 1380rpx;
|
top: 1400rpx;
|
||||||
width: 670rpx;
|
transform: translateX(-50%);
|
||||||
background-color: #d72717;
|
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;
|
border-radius: 20rpx;
|
||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -368,37 +371,42 @@ onMounted(() => {
|
||||||
|
|
||||||
/* 上方图片区域 */
|
/* 上方图片区域 */
|
||||||
.gallery-image-wrapper {
|
.gallery-image-wrapper {
|
||||||
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-bottom: 16rpx;
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-image {
|
.gallery-image {
|
||||||
width: 100%;
|
width: 613rpx;
|
||||||
height: auto;
|
object-fit: cover;
|
||||||
object-fit: contain;
|
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下方控制区域 */
|
|
||||||
.gallery-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 80rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
.nav-btn {
|
||||||
width: 70rpx;
|
position: absolute;
|
||||||
height: 70rpx;
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-btn {
|
||||||
|
left: -18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-btn {
|
||||||
|
right: -18rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-icon {
|
.nav-icon {
|
||||||
|
|
@ -407,16 +415,6 @@ onMounted(() => {
|
||||||
object-fit: contain;
|
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) {
|
@media (max-width: 640px) {
|
||||||
.fu-word {
|
.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 |