zoujing/longli-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修复轮播问题

Browse Source
This commit is contained in:
zoujing
2026-09-20 09:27:05 +08:00
parent 895a1ace5f
commit d390cad6c4
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/SectionTile/index.vue
View File

@@ -55,7 +55,9 @@ const shadowText = "[text-shadow:0_1px_3px_rgba(0,0,0,0.55),0_2px_14px_rgba(0,0,
/** 文字块定位：通高卡稍微下移，半高卡收紧 */
const titleBoxCls = computed(() =>
isTall.value ? "absolute left-[15px] right-[13px] top-[15px] z-[2]" : "absolute left-[13px] right-[12px] top-3 z-[2]"
isTall.value
? "pointer-events-none absolute left-[15px] right-[13px] top-[15px] z-[2]"
: "pointer-events-none absolute left-[13px] right-[12px] top-3 z-[2]"
);
const titleCls = computed(() =>
@@ -106,7 +108,7 @@ const onTap = () => goCatalog(props.section.section_key);
<image v-else class="absolute inset-0 w-full h-full" :src="section.image_url" mode="aspectFill" />
<!-- 遮罩：文字锚顶部 → 顶部最重 -->
<view class="absolute inset-0" :class="isTall ? 'scrim-tile-tall' : 'scrim-tile'" />
<view class="pointer-events-none absolute inset-0" :class="isTall ? 'scrim-tile-tall' : 'scrim-tile'" />
<!-- 内描边 -->
<view class="pointer-events-none absolute inset-0 rounded-tile border-[0.5px] border-[rgba(255,255,255,0.24)]" />
@@ -117,14 +119,14 @@ const onTap = () => goCatalog(props.section.section_key);
</view>
<view
class="absolute rounded-full flex items-center justify-center z-[2] bg-[rgba(255,255,255,0.2)] border-[0.5px] shadow-[0_6px_16px_rgba(0,0,0,0.22)]"
class="pointer-events-none absolute rounded-full flex items-center justify-center z-[2] bg-[rgba(255,255,255,0.2)] border-[0.5px] shadow-[0_6px_16px_rgba(0,0,0,0.22)]"
:class="arrowCls"
>
<AppIcon name="arrow" tone="white" :size="isTall ? 22 : 17" />
</view>
<!-- 通高卡左下角轮播指示点：张数 = 图集张数（旅居卡 4 个分组 → 4 个点） -->
<view v-if="isTall && hasSlider" class="absolute left-[15px] bottom-[23px] flex gap-[5px] z-[2]">
<view v-if="isTall && hasSlider" class="pointer-events-none absolute left-[15px] bottom-[23px] flex gap-[5px] z-[2]">
<view
v-for="(url, i) in images"
:key="`${url}-dot`"

8
src/pages-sub/detail/index.vue
View File

@@ -135,15 +135,15 @@ onShareAppMessage(() => ({
</swiper-item>
</swiper>
<view class="absolute left-0 right-0 top-0 h-[140px] scrim-dtop" />
<view class="absolute left-0 right-0 bottom-0 h-[170px] scrim-dbottom" />
<view class="pointer-events-none absolute left-0 right-0 top-0 h-[140px] scrim-dtop" />
<view class="pointer-events-none absolute left-0 right-0 bottom-0 h-[170px] scrim-dbottom" />
<view v-if="images.length > 1"
class="absolute right-[14px] bottom-[52px] h-[22px] px-[10px] rounded-full flex items-center text-[11px] text-white bg-[rgba(6,26,19,0.44)] border-[0.5px] border-[rgba(255,255,255,0.24)]">
class="pointer-events-none absolute right-[14px] bottom-[52px] h-[22px] px-[10px] rounded-full flex items-center text-[11px] text-white bg-[rgba(6,26,19,0.44)] border-[0.5px] border-[rgba(255,255,255,0.24)]">
{{ current + 1 }} / {{ images.length }}
</view>
<view v-if="images.length > 1" class="absolute left-0 right-0 bottom-[52px] flex justify-center gap-[5px]">
<view v-if="images.length > 1" class="pointer-events-none absolute left-0 right-0 bottom-[52px] flex justify-center gap-[5px]">
<view v-for="(url, i) in images" :key="i" class="rounded-full"
:class="i === current ? 'w-4 h-[5px] bg-white' : 'w-[5px] h-[5px] bg-[rgba(255,255,255,0.5)]'" />
</view>