快速筛选优化 增加公告
This commit is contained in:
yml
@@ -97,6 +97,7 @@
|
||||
background: #fffdf0;
|
||||
color: #8a6d1b;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
@@ -120,6 +121,11 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fraud-more {
|
||||
flex: 0 0 auto;
|
||||
color: #c08a12;
|
||||
}
|
||||
|
||||
.mobile-content {
|
||||
padding: 12px;
|
||||
}
|
||||
@@ -257,8 +263,8 @@
|
||||
|
||||
.zone-strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 0 -12px 12px;
|
||||
gap: 6px;
|
||||
margin: 0 -12px 10px;
|
||||
padding: 0 12px 2px;
|
||||
overflow-x: auto;
|
||||
overscroll-behavior-x: contain;
|
||||
@@ -270,55 +276,57 @@
|
||||
}
|
||||
|
||||
.zone-pill {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-areas:
|
||||
'label count'
|
||||
'hint hint';
|
||||
column-gap: 6px;
|
||||
row-gap: 3px;
|
||||
flex: 0 0 74px;
|
||||
min-height: 54px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
gap: 5px;
|
||||
height: 34px;
|
||||
min-width: 62px;
|
||||
align-items: center;
|
||||
padding: 8px 9px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
justify-content: center;
|
||||
padding: 0 11px;
|
||||
border: 1px solid #dbe3ee;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.zone-pill strong {
|
||||
grid-area: label;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zone-pill span {
|
||||
grid-area: count;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
display: grid;
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
place-items: center;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.zone-pill small {
|
||||
grid-area: hint;
|
||||
overflow: hidden;
|
||||
color: #7b8798;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone-pill.active {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.zone-pill.active span {
|
||||
color: #ff6a00;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zone-pill:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.list-toolbar {
|
||||
@@ -689,6 +697,27 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.back-top-button {
|
||||
position: fixed;
|
||||
right: max(14px, calc((100vw - 430px) / 2 + 14px));
|
||||
bottom: calc(64px + env(safe-area-inset-bottom));
|
||||
z-index: 110;
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
place-items: center;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.back-top-button:active {
|
||||
background: #fff7ed;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.mobile-brand small {
|
||||
display: none;
|
||||
@@ -719,4 +748,10 @@
|
||||
.card-title-row h2 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.back-top-button {
|
||||
right: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,6 +58,7 @@ const searchValue = ref('')
|
||||
const announcements = ref<string[]>(defaultHomeAnnouncements)
|
||||
const bannerSlides = ref<HomeBannerSlide[]>(defaultHomeBanners)
|
||||
const supportLoading = ref(false)
|
||||
const showBackTop = ref(false)
|
||||
const mobilePageSize = 10
|
||||
let listingRequestSeq = 0
|
||||
let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
|
||||
@@ -442,10 +443,15 @@ function parseOptionalNumber(value: string) {
|
||||
}
|
||||
|
||||
function handleWindowScroll() {
|
||||
showBackTop.value = window.scrollY > 520
|
||||
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 360) return
|
||||
loadListings(false)
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
function isSkinGroupKey(key: string) {
|
||||
return publishOptions.value.skin_groups.some(group => group.key === key)
|
||||
}
|
||||
@@ -523,7 +529,7 @@ function chipTone(label: string) {
|
||||
/>
|
||||
|
||||
<!-- 防骗提示卡片（不用 van-notice-bar） -->
|
||||
<div class="fraud-tip">
|
||||
<RouterLink class="fraud-tip" to="/m/announcements">
|
||||
<van-icon name="warning-o" :size="16" color="#b8860b" />
|
||||
<span class="fraud-dot"></span>
|
||||
<van-swipe
|
||||
@@ -537,7 +543,8 @@ function chipTone(label: string) {
|
||||
<span>{{ item }}</span>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<van-icon class="fraud-more" name="arrow" :size="14" />
|
||||
</RouterLink>
|
||||
</section>
|
||||
|
||||
<!-- ========== Content 区域 ========== -->
|
||||
@@ -719,6 +726,16 @@ function chipTone(label: string) {
|
||||
:range-presets="rangePresets"
|
||||
/>
|
||||
|
||||
<button
|
||||
v-if="showBackTop"
|
||||
class="back-top-button"
|
||||
type="button"
|
||||
aria-label="回到顶部"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<van-icon name="arrow-up" :size="20" />
|
||||
</button>
|
||||
|
||||
<MobileBottomNav />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user