From c559287ee46acda7fa79e1ea3d2269b339192461 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Mon, 5 Oct 2026 15:38:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(listings):=20=E6=89=8B=E6=9C=BA=E8=BD=AE?= =?UTF-8?q?=E6=92=AD=E6=94=B9=E4=B8=BA=E5=B1=85=E4=B8=AD=E8=A3=81=E5=88=87?= =?UTF-8?q?=EF=BC=8C=E5=B7=A6=E5=8F=B3=E6=BB=91=E5=8F=AA=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E5=9B=BE=E7=89=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 超宽海报在图内横滑不好看。轮播和预览都只保留中间一段，左右滑动回到切换下一张。 Co-authored-by: Cursor --- .../listings/views/MobileHomeView.css | 72 +++-------------- .../listings/views/MobileHomeView.vue | 79 +------------------ 2 files changed, 17 insertions(+), 134 deletions(-) diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css index 81be472..9397133 100644 --- a/frontend/src/features/listings/views/MobileHomeView.css +++ b/frontend/src/features/listings/views/MobileHomeView.css @@ -330,59 +330,23 @@ .banner-swipe.is-poster { height: 168px; - background: #eef3f8; } .mobile-banner.is-poster { height: 168px; min-height: 0; padding: 0; - background: #eef3f8; -} - -.poster-scroller { - height: 100%; - overflow-x: auto; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; -} - -.poster-scroller::-webkit-scrollbar { - display: none; } .mobile-banner.is-poster .banner-image { - position: static; - display: block; - width: auto; - max-width: none; - height: 168px; - object-fit: unset; - background: transparent; + object-fit: cover; + object-position: center; } .mobile-banner.is-poster .banner-badge { display: none; } -.banner-step-row { - display: flex; - justify-content: flex-end; - gap: 8px; - margin: -4px 0 12px; -} - -.banner-step-row button { - border: 0; - padding: 4px 10px; - border-radius: 999px; - background: #e8eef5; - color: #334155; - font-size: 12px; - font-weight: 700; -} - .banner-lightbox { position: fixed; inset: 0; @@ -412,39 +376,29 @@ border-radius: 999px; } -.banner-lightbox-count, -.banner-lightbox-hint { - margin: 0; - text-align: center; -} - .banner-lightbox-count { position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 0; right: 0; + margin: 0; + text-align: center; font-size: 14px; font-weight: 700; } -.banner-lightbox-scroller { - overflow-x: auto; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; +.banner-lightbox-frame { + width: 100%; + aspect-ratio: 2.15 / 1; + overflow: hidden; } -.banner-lightbox-scroller img { +.banner-lightbox-frame img { display: block; - width: auto; - max-width: none; - height: 58vh; - margin: 0 auto; -} - -.banner-lightbox-hint { - margin-top: 14px; - color: rgba(255, 255, 255, 0.72); - font-size: 12px; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; } .banner-lightbox-nav { diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue index 0716a75..e2ebcf7 100644 --- a/frontend/src/features/listings/views/MobileHomeView.vue +++ b/frontend/src/features/listings/views/MobileHomeView.vue @@ -103,10 +103,8 @@ const displayBanners = computed(() => { } return bannerSlides.value }) -const bannerSwipeRef = ref<{ prev: () => void; next: () => void } | null>(null) const bannerPreviewVisible = ref(false) const bannerPreviewIndex = ref(0) -const bannerPreviewScroller = ref(null) const bannerPreviewImages = computed(() => displayBanners.value .map(slide => slide.image_url?.trim() || '') @@ -520,42 +518,6 @@ function openCooperationFeedback() { cooperationFeedbackPreviewVisible.value = true } -let posterDragged = false - -function centerWideImage(event: Event) { - const img = event.target as HTMLImageElement - const scroller = img.parentElement - if (!scroller) return - scroller.scrollLeft = Math.max(0, (scroller.scrollWidth - scroller.clientWidth) / 2) -} - -function onPosterTouchStart() { - posterDragged = false -} - -function onPosterTouchMove() { - posterDragged = true -} - -function onPosterClick(slide: HomeBannerSlide) { - if (posterDragged) { - posterDragged = false - return - } - openBannerPreview(slide) -} - -function stepBanner(step: number) { - if (step < 0) bannerSwipeRef.value?.prev() - else bannerSwipeRef.value?.next() -} - -function centerBannerPreview() { - const scroller = bannerPreviewScroller.value - if (!scroller) return - scroller.scrollLeft = Math.max(0, (scroller.scrollWidth - scroller.clientWidth) / 2) -} - function openBannerPreview(slide: HomeBannerSlide) { const url = slide.image_url?.trim() if (!url) return @@ -575,11 +537,8 @@ function shiftBannerPreview(step: number) { bannerPreviewIndex.value = (bannerPreviewIndex.value + step + total) % total } -watch([bannerPreviewVisible, bannerPreviewIndex], async ([open]) => { +watch(bannerPreviewVisible, open => { document.body.style.overflow = open ? 'hidden' : '' - if (!open) return - await nextTick() - centerBannerPreview() }) function hasBannerCopy(slide: HomeBannerSlide) { @@ -973,7 +932,6 @@ if (!restoreHomeConfigFromCache()) { -
@@ -1388,14 +1322,9 @@ if (!restoreHomeConfigFromCache()) { -