toom1996/frontend_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update
Some checks failed
deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
toom1996
2026-08-25 00:28:43 +08:00
parent fbbac26903
commit 93b6f0bef0
2 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/RunwayLooks.astro
View File

@ -37,9 +37,9 @@ try {
if (!hotBrands.length) hotBrands = FAKE_HOT_BRANDS
// 年份筛选：写死，按需增删（数据最早约 2005 年，如需更老年份往数组里加即可）
// 年份：从当今年份往前推 15 年（含），末项加"X年前"兜底
// 年份：近 10 年（含当年），末项加"X年前"兜底
const currentYear = new Date().getFullYear()
const yearFloor = currentYear - 15
const yearFloor = currentYear - 9
const yearOptions: { value: number | string; label: string }[] = []
for (let y = currentYear; y >= yearFloor; y--) {
yearOptions.push({ value: y, label: String(y) })
@ -110,27 +110,18 @@ const seasonOptions: { value: string; label: string }[] = [
</span>
</header>
<div class="showsg-b" x-show="!collapsedGroups.designers">
<ul class="showschecks">
<!-- <li>
<template x-if="item.type === 'letter'">
<div class="letter-head" x-text="item.letter"></div>
</template>
<template x-if="item.type === 'brand'">
<label class="flex items-center gap-2 w-full cursor-pointer">
<input
type="checkbox"
:value="item.id"
:checked="selectedBrands.includes(item.id)"
@change="toggleBrand(item.id)"
>
<span x-text="item.name"></span>
<span class="ct" x-text="item.count ? item.count : ''"></span>
</label>
</template>
</li> -->
</ul>
<a class="showsmore" @click="openBrandModal()" x-text="'浏览全部品牌 +'"></a>
<ul class="showschecks">
<template x-for="b in hotBrands.slice(0, 10)" :key="b.id">
<li>
<label class="flex items-center gap-2 w-full cursor-pointer">
<input type="checkbox" :value="b.id" :checked="selectedBrands.includes(b.id)" @change="toggleBrand(b.id)" />
<span x-text="b.name"></span>
<span class="ct" x-text="b.article_count ? b.article_count : ''"></span>
</label>
</li>
</template>
</ul>
<a class="showsmore" @click="openBrandModal()" x-text="'ALL BRANDS +'" role="button" tabindex="0"></a>
</div>
</section>
@ -185,7 +176,7 @@ const seasonOptions: { value: string; label: string }[] = [
</div>
</section>
<button class="showsclear" type="button" @click="clearAll()">Clear all ×</button>
<button class="showsclear" type="button" @click="clearAll()" x-show="pills.length > 0" x-cloak>Clear all ×</button>
</div>
</aside>
@ -320,6 +311,7 @@ const seasonOptions: { value: string; label: string }[] = [
[x-cloak] { display: none !important; }
/* 使用 @apply 精简并重构样式 */
.showsroot {
@apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
@ -410,10 +402,10 @@ const seasonOptions: { value: string; label: string }[] = [
}
.showsmore {
@apply inline-block mt-[10px] text-[10.5px] uppercase tracking-[0.16em] text-[#555] cursor-pointer hover:text-black;
@apply block w-full mt-[12px] text-center text-[11px] uppercase tracking-[0.22em] text-black font-bold cursor-pointer;
}
.showsclear {
@apply mt-[18px] w-full border-[1.5px] border-black bg-white text-black p-[11px_12px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-150 hover:bg-black hover:text-white;
@apply mt-[22px] block w-full text-left pt-[16px] border-t border-black/10 text-[11px] uppercase tracking-[0.18em] text-[#666] cursor-pointer hover:text-black transition-colors duration-150;
}
.showsmain {
@ -527,7 +519,7 @@ const seasonOptions: { value: string; label: string }[] = [
}
.showsmodal-mask {
@apply absolute inset-0 pointer-events-auto cursor-default;
background: transparent;
background: rgba(0, 0, 0, 0.4);
}
.showsmodal-panel {
@apply relative w-full max-w-[680px] max-h-[72vh] bg-white flex flex-col border border-black/10 pointer-events-auto;
@ -763,12 +755,16 @@ const seasonOptions: { value: string; label: string }[] = [
this.modalKeyword = ""
this.modalLetter = "HOT"
this.modalOpen = true
document.body.style.overflow = "hidden"
// 锁根滚动并补偿滚动条宽度，避免背景页面横向偏移
const sbw = window.innerWidth - document.documentElement.clientWidth
document.documentElement.style.overflow = "hidden"
if (sbw > 0) document.documentElement.style.paddingRight = sbw + "px"
await this.modalLoadHot()
},
closeBrandModal() {
this.modalOpen = false
document.body.style.overflow = ""
document.documentElement.style.overflow = ""
document.documentElement.style.paddingRight = ""
},
async modalLoadHot() {
this.modalLetter = "HOT"
@ -830,7 +826,8 @@ const seasonOptions: { value: string; label: string }[] = [
confirmBrandModal() {
this.selectedBrands = [...this.modalSelected]
this.modalOpen = false
document.body.style.overflow = ""
document.documentElement.style.overflow = ""
document.documentElement.style.paddingRight = ""
this.refreshFilter()
},