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()) { -