2079 lines
53 KiB
Vue
2079 lines
53 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
|
||
import {
|
||
ArrowDown,
|
||
Bell,
|
||
Filter,
|
||
Refresh,
|
||
} from "@element-plus/icons-vue";
|
||
|
||
import {
|
||
defaultHomeAnnouncements,
|
||
defaultHomeBanners,
|
||
fetchMobileHomeConfig,
|
||
type HomeBannerSlide,
|
||
} from "@/api/homeConfig";
|
||
import {
|
||
emptyListingPublishOptions,
|
||
type ListingPublishOptions,
|
||
} from "@/api/listingOptions";
|
||
import { fetchListingsPage, type Listing, type PublicListingQuery } from "@/api/listings";
|
||
import {
|
||
formatHafCoinM,
|
||
getCoinWan,
|
||
getListingDisplayPrice,
|
||
getListingTitle,
|
||
getLoginMethod,
|
||
getServerRegion,
|
||
hasAcceleratedSaleRatio,
|
||
hasGiftResources,
|
||
assetRegions,
|
||
readAssetNumber,
|
||
readAssetString,
|
||
getResourceQuantity,
|
||
getOnlineTimeText,
|
||
getSkinNames,
|
||
getSkinGroup,
|
||
getRatioValue,
|
||
getDailyLoss,
|
||
} from "@/utils/listingDisplay";
|
||
|
||
const loading = ref(false);
|
||
const loadingMore = ref(false);
|
||
const listings = ref<Listing[]>([]);
|
||
const totalListings = ref(0);
|
||
const zoneCounts = ref<Record<string, number>>({});
|
||
const currentPage = ref(1);
|
||
const hasMoreListings = ref(true);
|
||
const announcements = ref<string[]>(defaultHomeAnnouncements);
|
||
const banners = ref<HomeBannerSlide[]>(defaultHomeBanners);
|
||
const publishOptions = ref<ListingPublishOptions>(emptyListingPublishOptions);
|
||
const filters = reactive({
|
||
keyword: "",
|
||
server: "",
|
||
region: "",
|
||
loginMethod: "",
|
||
rank: "",
|
||
insurance: "",
|
||
stamina: "",
|
||
load: "",
|
||
skinGroup: "",
|
||
skinName: "",
|
||
minCoin: undefined as number | undefined,
|
||
maxCoin: undefined as number | undefined,
|
||
minPrice: undefined as number | undefined,
|
||
maxPrice: undefined as number | undefined,
|
||
minDeposit: undefined as number | undefined,
|
||
maxDeposit: undefined as number | undefined,
|
||
minTotal: undefined as number | undefined,
|
||
maxTotal: undefined as number | undefined,
|
||
minFireLevel: undefined as number | undefined,
|
||
maxFireLevel: undefined as number | undefined,
|
||
});
|
||
const sortBy = ref("recommended");
|
||
const activeZone = ref("all");
|
||
const homePageSize = 12;
|
||
let listingRequestSeq = 0;
|
||
type FilterPopoverKey =
|
||
| "insurance"
|
||
| "stamina"
|
||
| "load"
|
||
| "region"
|
||
| "coin"
|
||
| "price"
|
||
| "deposit"
|
||
| "total"
|
||
| "skin"
|
||
| "rank"
|
||
| "fireLevel"
|
||
| "loginMethod";
|
||
type StringFilterKey =
|
||
| "insurance"
|
||
| "stamina"
|
||
| "load"
|
||
| "region"
|
||
| "rank"
|
||
| "loginMethod";
|
||
const activeFilterPopover = ref<FilterPopoverKey | "">("");
|
||
const filterPopoverBaseProps = {
|
||
placement: "bottom-start",
|
||
popperClass: "home-filter-popover",
|
||
trigger: "click",
|
||
showAfter: 0,
|
||
hideAfter: 0,
|
||
transition: "none",
|
||
} as const;
|
||
|
||
const coinRangeOptions = [
|
||
{ label: "全部区间", min: undefined, max: undefined },
|
||
{ label: "0-100", min: 0, max: 100 },
|
||
{ label: "100-300", min: 100, max: 300 },
|
||
{ label: "300-500", min: 300, max: 500 },
|
||
{ label: "500+", min: 500, max: undefined },
|
||
];
|
||
const moneyRangeOptions = [
|
||
{ label: "全部区间", min: undefined, max: undefined },
|
||
{ label: "0-50", min: 0, max: 50 },
|
||
{ label: "50-100", min: 50, max: 100 },
|
||
{ label: "100-200", min: 100, max: 200 },
|
||
{ label: "200+", min: 200, max: undefined },
|
||
];
|
||
const totalRangeOptions = [
|
||
{ label: "全部区间", min: undefined, max: undefined },
|
||
{ label: "0-500", min: 0, max: 500 },
|
||
{ label: "500-1000", min: 500, max: 1000 },
|
||
{ label: "1000-2000", min: 1000, max: 2000 },
|
||
{ label: "2000-5000", min: 2000, max: 5000 },
|
||
];
|
||
const fireLevelRangeOptions = [
|
||
{ label: "全部等级", min: undefined, max: undefined },
|
||
{ label: "38-50", min: 38, max: 50 },
|
||
{ label: "50-60", min: 50, max: 60 },
|
||
{ label: "60-70", min: 60, max: 70 },
|
||
{ label: "70+", min: 70, max: undefined },
|
||
];
|
||
|
||
const regionOptions = computed(() =>
|
||
uniqueOptions([
|
||
...publishOptions.value.region_options,
|
||
...listings.value.flatMap((item) => assetRegions(item)),
|
||
])
|
||
);
|
||
const loginMethodOptions = computed(() =>
|
||
uniqueOptions(
|
||
publishOptions.value.login_method_options
|
||
.map((item) => item.trim())
|
||
.filter(Boolean)
|
||
)
|
||
);
|
||
const skinFilterGroups = computed(() => {
|
||
const preferred = ["operatorRed", "operatorGold"];
|
||
return preferred
|
||
.map((key) => publishOptions.value.skin_groups.find((group) => group.key === key))
|
||
.filter((group): group is ListingPublishOptions["skin_groups"][number] => Boolean(group));
|
||
});
|
||
const skinChipLabel = computed(() => {
|
||
if (filters.skinName) return filters.skinName;
|
||
if (filters.skinGroup) {
|
||
return skinFilterGroups.value.find((group) => group.key === filters.skinGroup)?.title || "皮肤";
|
||
}
|
||
return "皮肤";
|
||
});
|
||
|
||
const visibleListings = computed(() => {
|
||
return listings.value;
|
||
});
|
||
|
||
const statCards = computed(() => [
|
||
{ label: "可租账号", value: `${totalListings.value}`, hint: "当前筛选结果" },
|
||
{
|
||
label: "高哈夫币",
|
||
value: `${zoneCount("highCoin")}`,
|
||
hint: "100M 以上",
|
||
},
|
||
{
|
||
label: "账密登录",
|
||
value: `${zoneCount("password")}`,
|
||
hint: "交接更快",
|
||
},
|
||
]);
|
||
|
||
const zoneOptions = computed(() => [
|
||
{
|
||
key: "all",
|
||
label: "全部专区",
|
||
hint: "当前可租账号",
|
||
count: zoneCount("all"),
|
||
},
|
||
{
|
||
key: "sale",
|
||
label: "特惠专区",
|
||
hint: "价格更划算",
|
||
count: zoneCount("sale"),
|
||
},
|
||
{
|
||
key: "gift",
|
||
label: "赠送专区",
|
||
hint: "含赠送物品",
|
||
count: zoneCount("gift"),
|
||
},
|
||
{
|
||
key: "night",
|
||
label: "夜间专区",
|
||
hint: "夜间也好上号",
|
||
count: zoneCount("night"),
|
||
},
|
||
{
|
||
key: "password",
|
||
label: "账密专区",
|
||
hint: "交接更快",
|
||
count: zoneCount("password"),
|
||
},
|
||
{
|
||
key: "highCoin",
|
||
label: "高币专区",
|
||
hint: "100M 以上",
|
||
count: zoneCount("highCoin"),
|
||
},
|
||
]);
|
||
|
||
onMounted(() => {
|
||
loadHome();
|
||
window.addEventListener("scroll", handleWindowScroll, { passive: true });
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("scroll", handleWindowScroll);
|
||
});
|
||
|
||
watch(
|
||
() => listingQuerySignature(),
|
||
() => {
|
||
loadListingsPage(true);
|
||
}
|
||
);
|
||
|
||
async function loadHome() {
|
||
loading.value = true;
|
||
try {
|
||
const [, config] = await Promise.all([
|
||
loadListingsPage(true),
|
||
fetchMobileHomeConfig(),
|
||
]);
|
||
announcements.value = config.announcements;
|
||
banners.value = config.banners;
|
||
publishOptions.value = config.publish_options;
|
||
} catch {
|
||
announcements.value = defaultHomeAnnouncements;
|
||
banners.value = defaultHomeBanners;
|
||
publishOptions.value = emptyListingPublishOptions;
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
async function loadListingsPage(reset = false) {
|
||
if ((loadingMore.value && !reset) || (!hasMoreListings.value && !reset)) return;
|
||
const requestSeq = ++listingRequestSeq;
|
||
if (reset) {
|
||
currentPage.value = 1;
|
||
hasMoreListings.value = true;
|
||
}
|
||
loadingMore.value = true;
|
||
try {
|
||
const page = await fetchListingsPage(buildListingQuery(currentPage.value));
|
||
if (requestSeq !== listingRequestSeq) return;
|
||
listings.value = reset ? page.items : [...listings.value, ...page.items];
|
||
totalListings.value = page.total;
|
||
zoneCounts.value = page.zone_counts;
|
||
hasMoreListings.value = listings.value.length < page.total;
|
||
currentPage.value = page.page + 1;
|
||
requestAnimationFrame(handleWindowScroll);
|
||
} catch {
|
||
if (reset) {
|
||
listings.value = [];
|
||
totalListings.value = 0;
|
||
zoneCounts.value = {};
|
||
hasMoreListings.value = false;
|
||
}
|
||
} finally {
|
||
if (requestSeq === listingRequestSeq) {
|
||
loadingMore.value = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
function buildListingQuery(page: number): PublicListingQuery {
|
||
return {
|
||
page,
|
||
page_size: homePageSize,
|
||
keyword: filters.keyword.trim(),
|
||
sort: sortBy.value,
|
||
zone: activeZone.value,
|
||
server: filters.server,
|
||
region: filters.region,
|
||
login_method: filters.loginMethod,
|
||
rank: filters.rank,
|
||
insurance: filters.insurance,
|
||
stamina: filters.stamina,
|
||
load: filters.load,
|
||
skin_group: filters.skinGroup,
|
||
skin_name: filters.skinName,
|
||
min_coin: filters.minCoin,
|
||
max_coin: filters.maxCoin,
|
||
min_price: filters.minPrice,
|
||
max_price: filters.maxPrice,
|
||
min_deposit: filters.minDeposit,
|
||
max_deposit: filters.maxDeposit,
|
||
min_total: filters.minTotal,
|
||
max_total: filters.maxTotal,
|
||
min_fire_level: filters.minFireLevel,
|
||
max_fire_level: filters.maxFireLevel,
|
||
};
|
||
}
|
||
|
||
function listingQuerySignature() {
|
||
return JSON.stringify(buildListingQuery(1));
|
||
}
|
||
|
||
function handleWindowScroll() {
|
||
if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 480) return;
|
||
loadListingsPage(false);
|
||
}
|
||
|
||
function zoneCount(key: string) {
|
||
if (key === "all") return zoneCounts.value.all ?? totalListings.value;
|
||
return zoneCounts.value[key] ?? 0;
|
||
}
|
||
|
||
function resetFilters() {
|
||
filters.keyword = "";
|
||
filters.server = "";
|
||
filters.region = "";
|
||
filters.loginMethod = "";
|
||
filters.rank = "";
|
||
filters.insurance = "";
|
||
filters.stamina = "";
|
||
filters.load = "";
|
||
filters.skinGroup = "";
|
||
filters.skinName = "";
|
||
filters.minCoin = undefined;
|
||
filters.maxCoin = undefined;
|
||
filters.minPrice = undefined;
|
||
filters.maxPrice = undefined;
|
||
filters.minDeposit = undefined;
|
||
filters.maxDeposit = undefined;
|
||
filters.minTotal = undefined;
|
||
filters.maxTotal = undefined;
|
||
filters.minFireLevel = undefined;
|
||
filters.maxFireLevel = undefined;
|
||
activeZone.value = "all";
|
||
sortBy.value = "recommended";
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setActiveZone(zoneKey: string) {
|
||
activeZone.value = zoneKey;
|
||
}
|
||
|
||
function uniqueOptions(values: string[]) {
|
||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
|
||
}
|
||
|
||
function rangeLabel(min: number | undefined, max: number | undefined, fallback: string) {
|
||
if (min !== undefined && max !== undefined) return `${min}-${max}`;
|
||
if (min !== undefined) return `${min}+`;
|
||
if (max !== undefined) return `≤${max}`;
|
||
return fallback;
|
||
}
|
||
|
||
function isRangeSelected(
|
||
currentMin: number | undefined,
|
||
currentMax: number | undefined,
|
||
min: number | undefined,
|
||
max: number | undefined,
|
||
) {
|
||
return currentMin === min && currentMax === max;
|
||
}
|
||
|
||
function setCoinRange(min: number | undefined, max: number | undefined) {
|
||
filters.minCoin = min;
|
||
filters.maxCoin = max;
|
||
}
|
||
|
||
function setPriceRange(min: number | undefined, max: number | undefined) {
|
||
filters.minPrice = min;
|
||
filters.maxPrice = max;
|
||
}
|
||
|
||
function setDepositRange(min: number | undefined, max: number | undefined) {
|
||
filters.minDeposit = min;
|
||
filters.maxDeposit = max;
|
||
}
|
||
|
||
function setTotalRange(min: number | undefined, max: number | undefined) {
|
||
filters.minTotal = min;
|
||
filters.maxTotal = max;
|
||
}
|
||
|
||
function setFireLevelRange(min: number | undefined, max: number | undefined) {
|
||
filters.minFireLevel = min;
|
||
filters.maxFireLevel = max;
|
||
}
|
||
|
||
function setFilterPopover(key: FilterPopoverKey, visible: boolean) {
|
||
if (visible) {
|
||
activeFilterPopover.value = key;
|
||
return;
|
||
}
|
||
if (activeFilterPopover.value === key) activeFilterPopover.value = "";
|
||
}
|
||
|
||
function filterPopoverProps(key: FilterPopoverKey) {
|
||
return {
|
||
...filterPopoverBaseProps,
|
||
visible: activeFilterPopover.value === key,
|
||
"onUpdate:visible": (visible: boolean) => setFilterPopover(key, visible),
|
||
};
|
||
}
|
||
|
||
function closeFilterPopover() {
|
||
activeFilterPopover.value = "";
|
||
}
|
||
|
||
function setStringFilter(key: StringFilterKey, value: string) {
|
||
filters[key] = value;
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setCoinRangeAndClose(min: number | undefined, max: number | undefined) {
|
||
setCoinRange(min, max);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setPriceRangeAndClose(min: number | undefined, max: number | undefined) {
|
||
setPriceRange(min, max);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setDepositRangeAndClose(min: number | undefined, max: number | undefined) {
|
||
setDepositRange(min, max);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setTotalRangeAndClose(min: number | undefined, max: number | undefined) {
|
||
setTotalRange(min, max);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setFireLevelRangeAndClose(min: number | undefined, max: number | undefined) {
|
||
setFireLevelRange(min, max);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function setSkinFilter(groupKey: string, skinName = "") {
|
||
filters.skinGroup = groupKey;
|
||
filters.skinName = skinName;
|
||
}
|
||
|
||
function setSkinFilterAndClose(groupKey: string, skinName = "") {
|
||
setSkinFilter(groupKey, skinName);
|
||
closeFilterPopover();
|
||
}
|
||
|
||
function resetSkinFilter() {
|
||
filters.skinGroup = "";
|
||
filters.skinName = "";
|
||
}
|
||
|
||
function resetSkinFilterAndClose() {
|
||
resetSkinFilter();
|
||
closeFilterPopover();
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<section class="pc-home-redesign">
|
||
<!-- 滚动公告 (置顶于主内容上方) -->
|
||
<div class="home-announcement">
|
||
<el-icon><Bell /></el-icon>
|
||
<el-carousel
|
||
height="22px"
|
||
direction="vertical"
|
||
indicator-position="none"
|
||
:autoplay="true"
|
||
:interval="3200"
|
||
>
|
||
<el-carousel-item v-for="item in announcements" :key="item">
|
||
<span>{{ item }}</span>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
<main class="home-content">
|
||
<!-- 轮播图 & 统计卡片 -->
|
||
<div class="hero-section">
|
||
<section class="hero-board">
|
||
<el-carousel height="240px" indicator-position="outside" :interval="3600">
|
||
<el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
|
||
<div
|
||
class="hero-slide"
|
||
:class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
|
||
>
|
||
<img
|
||
v-if="slide.image_url"
|
||
:src="slide.image_url"
|
||
:alt="slide.title || slide.eyebrow || '首页轮播'"
|
||
/>
|
||
<div class="hero-copy">
|
||
<span v-if="slide.eyebrow">{{ slide.eyebrow }}</span>
|
||
<h1 v-if="slide.title">{{ slide.title }}</h1>
|
||
<p v-if="slide.pill">{{ slide.pill }}</p>
|
||
</div>
|
||
<em v-if="slide.badge">{{ slide.badge }}</em>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</section>
|
||
|
||
<div class="home-stats-v2">
|
||
<div v-for="item in statCards" :key="item.label" class="stat-item">
|
||
<div class="stat-main">
|
||
<strong>{{ item.value }}</strong>
|
||
<span>{{ item.label }}</span>
|
||
</div>
|
||
<small>{{ item.hint }}</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 增强版横向筛选栏 -->
|
||
<section class="horizontal-filter-card">
|
||
<div class="filter-header">
|
||
<div class="filter-title">
|
||
<el-icon><Filter /></el-icon>
|
||
<strong>筛选大厅</strong>
|
||
<span>{{ totalListings }} 个结果</span>
|
||
</div>
|
||
<el-button :icon="Refresh" link @click="resetFilters">重置全部条件</el-button>
|
||
</div>
|
||
|
||
<div class="filter-chip-row">
|
||
<el-popover v-bind="filterPopoverProps('insurance')" :width="220">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.insurance }" type="button">
|
||
<span>{{ filters.insurance || "保险" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.insurance }" @click="setStringFilter('insurance', '')">全部保险</button>
|
||
<button
|
||
v-for="item in publishOptions.insurance_options"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.insurance === item }"
|
||
@click="setStringFilter('insurance', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('stamina')" :width="220">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.stamina }" type="button">
|
||
<span>{{ filters.stamina || "体力" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.stamina }" @click="setStringFilter('stamina', '')">全部体力</button>
|
||
<button
|
||
v-for="item in publishOptions.level_options"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.stamina === item }"
|
||
@click="setStringFilter('stamina', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('load')" :width="220">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.load }" type="button">
|
||
<span>{{ filters.load || "负重" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.load }" @click="setStringFilter('load', '')">全部负重</button>
|
||
<button
|
||
v-for="item in publishOptions.level_options"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.load === item }"
|
||
@click="setStringFilter('load', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('region')" :width="240">
|
||
<template #reference>
|
||
<button class="filter-chip wide" :class="{ active: filters.region }" type="button">
|
||
<span>{{ filters.region || "地区选择" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.region }" @click="setStringFilter('region', '')">全部省市</button>
|
||
<button
|
||
v-for="item in regionOptions"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.region === item }"
|
||
@click="setStringFilter('region', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('coin')" :width="350">
|
||
<template #reference>
|
||
<button class="filter-chip wide" :class="{ active: filters.minCoin !== undefined || filters.maxCoin !== undefined }" type="button">
|
||
<span>{{ rangeLabel(filters.minCoin, filters.maxCoin, "哈夫币(M)") }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="range-menu">
|
||
<button
|
||
v-for="item in coinRangeOptions"
|
||
:key="item.label"
|
||
type="button"
|
||
:class="{ active: isRangeSelected(filters.minCoin, filters.maxCoin, item.min, item.max) }"
|
||
@click="setCoinRangeAndClose(item.min, item.max)"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
<div class="range-manual">
|
||
<el-input-number v-model="filters.minCoin" :controls="false" :min="0" placeholder="最小值" />
|
||
<span>-</span>
|
||
<el-input-number v-model="filters.maxCoin" :controls="false" :min="0" placeholder="最大值" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('price')" :width="350">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.minPrice !== undefined || filters.maxPrice !== undefined }" type="button">
|
||
<span>{{ rangeLabel(filters.minPrice, filters.maxPrice, "租金") }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="range-menu">
|
||
<button
|
||
v-for="item in moneyRangeOptions"
|
||
:key="item.label"
|
||
type="button"
|
||
:class="{ active: isRangeSelected(filters.minPrice, filters.maxPrice, item.min, item.max) }"
|
||
@click="setPriceRangeAndClose(item.min, item.max)"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
<div class="range-manual">
|
||
<el-input-number v-model="filters.minPrice" :controls="false" :min="0" placeholder="最小值" />
|
||
<span>-</span>
|
||
<el-input-number v-model="filters.maxPrice" :controls="false" :min="0" placeholder="最大值" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('deposit')" :width="350">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.minDeposit !== undefined || filters.maxDeposit !== undefined }" type="button">
|
||
<span>{{ rangeLabel(filters.minDeposit, filters.maxDeposit, "押金") }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="range-menu">
|
||
<button
|
||
v-for="item in moneyRangeOptions"
|
||
:key="item.label"
|
||
type="button"
|
||
:class="{ active: isRangeSelected(filters.minDeposit, filters.maxDeposit, item.min, item.max) }"
|
||
@click="setDepositRangeAndClose(item.min, item.max)"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
<div class="range-manual">
|
||
<el-input-number v-model="filters.minDeposit" :controls="false" :min="0" placeholder="最小值" />
|
||
<span>-</span>
|
||
<el-input-number v-model="filters.maxDeposit" :controls="false" :min="0" placeholder="最大值" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('total')" :width="350">
|
||
<template #reference>
|
||
<button class="filter-chip wide" :class="{ active: filters.minTotal !== undefined || filters.maxTotal !== undefined }" type="button">
|
||
<span>{{ rangeLabel(filters.minTotal, filters.maxTotal, "合计金额") }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="range-menu">
|
||
<button
|
||
v-for="item in totalRangeOptions"
|
||
:key="item.label"
|
||
type="button"
|
||
:class="{ active: isRangeSelected(filters.minTotal, filters.maxTotal, item.min, item.max) }"
|
||
@click="setTotalRangeAndClose(item.min, item.max)"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
<div class="range-manual">
|
||
<el-input-number v-model="filters.minTotal" :controls="false" :min="0" placeholder="最小值" />
|
||
<span>-</span>
|
||
<el-input-number v-model="filters.maxTotal" :controls="false" :min="0" placeholder="最大值" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('skin')" :width="320">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.skinGroup || filters.skinName }" type="button">
|
||
<span>{{ skinChipLabel }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="skin-filter-menu">
|
||
<button class="skin-reset" type="button" :class="{ active: !filters.skinGroup && !filters.skinName }" @click="resetSkinFilterAndClose">
|
||
全部皮肤
|
||
</button>
|
||
<div v-for="group in skinFilterGroups" :key="group.key" class="skin-filter-group">
|
||
<div class="skin-filter-title">
|
||
<strong>{{ group.title }}</strong>
|
||
<button
|
||
type="button"
|
||
:class="{ active: filters.skinGroup === group.key && !filters.skinName }"
|
||
@click="setSkinFilterAndClose(group.key)"
|
||
>
|
||
全部{{ group.title.replace('干员', '') }}
|
||
</button>
|
||
</div>
|
||
<div class="skin-filter-options">
|
||
<button
|
||
v-for="skin in group.options"
|
||
:key="skin"
|
||
type="button"
|
||
:class="{ active: filters.skinGroup === group.key && filters.skinName === skin }"
|
||
@click="setSkinFilterAndClose(group.key, skin)"
|
||
>
|
||
{{ skin }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('rank')" :width="220">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.rank }" type="button">
|
||
<span>{{ filters.rank || "段位" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.rank }" @click="setStringFilter('rank', '')">全部段位</button>
|
||
<button
|
||
v-for="item in publishOptions.rank_options"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.rank === item }"
|
||
@click="setStringFilter('rank', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('fireLevel')" :width="350">
|
||
<template #reference>
|
||
<button class="filter-chip" :class="{ active: filters.minFireLevel !== undefined || filters.maxFireLevel !== undefined }" type="button">
|
||
<span>{{ rangeLabel(filters.minFireLevel, filters.maxFireLevel, "等级") }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="range-menu">
|
||
<button
|
||
v-for="item in fireLevelRangeOptions"
|
||
:key="item.label"
|
||
type="button"
|
||
:class="{ active: isRangeSelected(filters.minFireLevel, filters.maxFireLevel, item.min, item.max) }"
|
||
@click="setFireLevelRangeAndClose(item.min, item.max)"
|
||
>
|
||
{{ item.label }}
|
||
</button>
|
||
<div class="range-manual">
|
||
<el-input-number v-model="filters.minFireLevel" :controls="false" :min="0" placeholder="最小值" />
|
||
<span>-</span>
|
||
<el-input-number v-model="filters.maxFireLevel" :controls="false" :min="0" placeholder="最大值" />
|
||
</div>
|
||
</div>
|
||
</el-popover>
|
||
|
||
<el-popover v-bind="filterPopoverProps('loginMethod')" :width="220">
|
||
<template #reference>
|
||
<button class="filter-chip wide" :class="{ active: filters.loginMethod }" type="button">
|
||
<span>{{ filters.loginMethod || "登陆方式" }}</span>
|
||
<el-icon><ArrowDown /></el-icon>
|
||
</button>
|
||
</template>
|
||
<div class="filter-menu">
|
||
<button type="button" :class="{ active: !filters.loginMethod }" @click="setStringFilter('loginMethod', '')">全部方式</button>
|
||
<button
|
||
v-for="item in loginMethodOptions"
|
||
:key="item"
|
||
type="button"
|
||
:class="{ active: filters.loginMethod === item }"
|
||
@click="setStringFilter('loginMethod', item)"
|
||
>
|
||
{{ item }}
|
||
</button>
|
||
</div>
|
||
</el-popover>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 列表标题 & 排序 -->
|
||
<div class="list-head">
|
||
<div class="zone-head">
|
||
<p class="eyebrow">Account Zone</p>
|
||
<h2>账号专区</h2>
|
||
<div class="zone-tabs">
|
||
<button
|
||
v-for="zone in zoneOptions"
|
||
:key="zone.key"
|
||
type="button"
|
||
:class="{ active: activeZone === zone.key }"
|
||
@click="setActiveZone(zone.key)"
|
||
>
|
||
<strong>{{ zone.label }}</strong>
|
||
<span>{{ zone.hint }}</span>
|
||
<em>{{ zone.count }}</em>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="list-actions">
|
||
<el-radio-group v-model="sortBy" size="small">
|
||
<el-radio-button label="recommended">综合推荐</el-radio-button>
|
||
<el-radio-button label="coinDesc">哈夫币</el-radio-button>
|
||
<el-radio-button label="awmDesc">AWM数量</el-radio-button>
|
||
<el-radio-button label="priceAsc">价格最低</el-radio-button>
|
||
<el-radio-button label="priceDesc">价格最高</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 增强版账号列表 -->
|
||
<el-empty
|
||
v-if="!loading && visibleListings.length === 0"
|
||
description="没有符合条件的账号"
|
||
/>
|
||
<div v-else v-loading="loading" class="enhanced-desktop-list">
|
||
<RouterLink
|
||
v-for="item in visibleListings"
|
||
:key="item.id"
|
||
class="listing-card-v2"
|
||
:to="`/listings/${item.id}`"
|
||
>
|
||
<!-- 左侧：封面图 & 标签 -->
|
||
<div class="card-cover">
|
||
<img
|
||
v-if="item.cover_url"
|
||
:src="item.cover_url"
|
||
:alt="getListingTitle(item)"
|
||
loading="lazy"
|
||
decoding="async"
|
||
/>
|
||
<div v-else class="empty-cover">HFB</div>
|
||
<div class="cover-badges">
|
||
<span v-if="hasAcceleratedSaleRatio(item)" class="badge sale">特惠</span>
|
||
<span v-if="hasGiftResources(item)" class="badge gift">有赠送</span>
|
||
</div>
|
||
<div class="ratio-tag">比例 1:{{ getRatioValue(item).toFixed(1) }}</div>
|
||
</div>
|
||
|
||
<!-- 中间：详细数据网格 -->
|
||
<div class="card-details">
|
||
<div class="card-title-row">
|
||
<h3>{{ getListingTitle(item) }}</h3>
|
||
<span class="daily-loss">日耗 {{ getDailyLoss(item) }}</span>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<!-- 第一列：基础币值 & 保险 -->
|
||
<div class="stats-col">
|
||
<div class="stat-row">
|
||
<label>哈夫币</label>
|
||
<strong>{{ formatHafCoinM(getCoinWan(item)) }}</strong>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>保险格数</label>
|
||
<span>{{ readAssetString(item, "season_insurance") || '--' }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>体力/负重</label>
|
||
<span>{{ readAssetString(item, "stamina_level") }}/{{ readAssetString(item, "load_level") }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二列：核心资产 -->
|
||
<div class="stats-col">
|
||
<div class="stat-row">
|
||
<label>AWM子弹</label>
|
||
<span :class="{highlight: getResourceQuantity(item, 'awmAmmo') > 0}">
|
||
{{ getResourceQuantity(item, 'awmAmmo') }}发
|
||
</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>六级头甲</label>
|
||
<span>
|
||
{{ getResourceQuantity(item, 'helmet6') }}头 / {{ getResourceQuantity(item, 'armor6') }}甲
|
||
</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>其他重器</label>
|
||
<span>巴雷特 {{ getResourceQuantity(item, 'barrett') }} / 喷子 {{ getResourceQuantity(item, 'shotgun') }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三列：战斗 & 区服 -->
|
||
<div class="stats-col">
|
||
<div class="stat-row">
|
||
<label>绝密KD</label>
|
||
<strong>{{ readAssetNumber(item, "secret_kd") || '--' }}</strong>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>游戏段位</label>
|
||
<span>{{ item.rank_level || '未公开' }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>所属区服</label>
|
||
<span>{{ getServerRegion(item) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四列：登录 & 时间 -->
|
||
<div class="stats-col">
|
||
<div class="stat-row">
|
||
<label>上号方式</label>
|
||
<span>{{ getLoginMethod(item) }}</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<label>方便上号</label>
|
||
<span class="time-text">{{ getOnlineTimeText(item) || '全天候' }}</span>
|
||
</div>
|
||
<div class="stat-row skins-row">
|
||
<label>持有皮肤</label>
|
||
<span class="skins-text" :title="getSkinNames(item).join(', ')">
|
||
{{ getSkinNames(item).slice(0, 2).join(', ') || '暂无皮肤' }}
|
||
<em v-if="getSkinNames(item).length > 2">...</em>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：价格 & 操作 -->
|
||
<div class="card-price">
|
||
<div class="price-item total">
|
||
<small>总租金</small>
|
||
<strong>¥{{ getListingDisplayPrice(item) }}</strong>
|
||
</div>
|
||
<div class="price-item deposit">
|
||
<small>押金</small>
|
||
<span>¥{{ item.deposit_amount }}</span>
|
||
</div>
|
||
<div class="price-action">
|
||
<button class="rent-btn">立即租用</button>
|
||
</div>
|
||
</div>
|
||
</RouterLink>
|
||
</div>
|
||
<div v-if="!loading && visibleListings.length" class="infinite-load-state">
|
||
<span v-if="loadingMore">正在加载更多账号...</span>
|
||
<span v-else-if="!hasMoreListings">已经到底了</span>
|
||
</div>
|
||
</main>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.pc-home-redesign {
|
||
display: grid;
|
||
gap: 20px;
|
||
width: 100%;
|
||
max-width: 1720px;
|
||
min-width: 0;
|
||
margin: 0 auto;
|
||
overflow-x: clip;
|
||
}
|
||
|
||
/* 基础通用样式 */
|
||
.home-announcement,
|
||
.horizontal-filter-card,
|
||
.listing-card-v2 {
|
||
border: 1px solid #eef1f5;
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||
}
|
||
|
||
/* 公告 */
|
||
.home-announcement {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 20px;
|
||
color: #854d0e;
|
||
background: #fefce8;
|
||
border-color: #fef08a;
|
||
}
|
||
|
||
.home-announcement :deep(.el-carousel) {
|
||
flex: 1;
|
||
}
|
||
|
||
/* 内容区域布局 */
|
||
.home-content {
|
||
display: grid;
|
||
gap: 20px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.infinite-load-state {
|
||
padding: 6px 0 18px;
|
||
color: #94a3b8;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-section {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 320px;
|
||
gap: 20px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.hero-board {
|
||
min-width: 0;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-slide {
|
||
position: relative;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40px;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.hero-slide.tone-orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
|
||
.hero-slide.tone-green { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
|
||
|
||
.hero-slide img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.hero-slide.has-image::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 60%);
|
||
}
|
||
|
||
.hero-copy {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 480px;
|
||
}
|
||
|
||
.hero-slide.has-image .hero-copy { color: #ffffff; }
|
||
|
||
.hero-copy h1 {
|
||
margin: 12px 0;
|
||
font-size: 32px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.hero-copy p {
|
||
display: inline-block;
|
||
padding: 6px 12px;
|
||
border-radius: 999px;
|
||
background: rgba(255,255,255,0.2);
|
||
backdrop-filter: blur(4px);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 统计卡片 v2 */
|
||
.home-stats-v2 {
|
||
display: grid;
|
||
grid-template-rows: repeat(3, 1fr);
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
border: 1px solid #eef1f5;
|
||
border-radius: 16px;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.stat-main {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
}
|
||
|
||
.stat-item strong {
|
||
font-size: 24px;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
.stat-item span {
|
||
font-weight: 700;
|
||
color: #17233d;
|
||
}
|
||
|
||
.stat-item small {
|
||
margin-top: 4px;
|
||
color: #7b8798;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* 横向筛选栏 v2 - 审美优化版 */
|
||
.horizontal-filter-card {
|
||
padding: 24px 26px 22px;
|
||
background: #ffffff;
|
||
border-radius: 20px;
|
||
min-width: 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.filter-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.filter-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.filter-title .el-icon {
|
||
font-size: 18px;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
.filter-title strong {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.filter-title span {
|
||
font-size: 13px;
|
||
color: #94a3b8;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.filter-chip-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
padding: 4px 0 0;
|
||
overflow: visible;
|
||
}
|
||
|
||
.filter-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
flex: 1 1 96px;
|
||
min-width: 0;
|
||
max-width: 140px;
|
||
height: 40px;
|
||
padding: 0 12px;
|
||
border: 1px solid #edf1f6;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
color: #1f2937;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
|
||
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||
}
|
||
|
||
.filter-chip.wide {
|
||
flex-basis: 112px;
|
||
max-width: 160px;
|
||
}
|
||
|
||
.filter-chip span {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.filter-chip:hover,
|
||
.filter-chip.active {
|
||
border-color: #ffb27a;
|
||
color: #ff6a00;
|
||
box-shadow: 0 8px 18px rgba(255, 106, 0, 0.1);
|
||
}
|
||
|
||
.filter-chip:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.filter-chip .el-icon {
|
||
font-size: 12px;
|
||
}
|
||
|
||
:global(.home-filter-popover.el-popover) {
|
||
padding: 0;
|
||
border: 1px solid #e5eaf2;
|
||
border-radius: 8px;
|
||
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
|
||
}
|
||
|
||
:global(.home-filter-popover .el-popper__arrow::before) {
|
||
border-color: #e5eaf2;
|
||
}
|
||
|
||
.filter-menu,
|
||
.range-menu,
|
||
.skin-filter-menu {
|
||
padding: 12px;
|
||
}
|
||
|
||
.filter-menu {
|
||
display: grid;
|
||
gap: 4px;
|
||
max-height: 300px;
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.filter-menu::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.filter-menu button,
|
||
.range-menu button {
|
||
width: 100%;
|
||
min-height: 34px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: #5f6670;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: background 0.16s ease, color 0.16s ease;
|
||
}
|
||
|
||
.filter-menu button {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.filter-menu button:hover,
|
||
.filter-menu button.active,
|
||
.range-menu button:hover,
|
||
.range-menu button.active {
|
||
background: #fff3e8;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
.range-menu {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.range-menu button {
|
||
padding: 0 36px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.range-manual {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
padding-top: 10px;
|
||
border-top: 1px solid #e7ecf3;
|
||
}
|
||
|
||
.range-manual > span {
|
||
color: #5f6670;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.range-manual :deep(.el-input-number) {
|
||
width: 100%;
|
||
}
|
||
|
||
.range-manual :deep(.el-input__wrapper),
|
||
.skin-filter-menu :deep(.el-input__wrapper) {
|
||
min-height: 38px;
|
||
border: 1px solid #dbe2ec;
|
||
border-radius: 6px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.range-manual :deep(.el-input__wrapper:hover),
|
||
.skin-filter-menu :deep(.el-input__wrapper:hover) {
|
||
border-color: #ffb27a;
|
||
}
|
||
|
||
.range-manual :deep(.el-input__wrapper.is-focus),
|
||
.skin-filter-menu :deep(.el-input__wrapper.is-focus) {
|
||
border-color: #ff6a00;
|
||
box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
|
||
}
|
||
|
||
.range-manual :deep(.el-input__inner),
|
||
.skin-filter-menu :deep(.el-input__inner) {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.skin-filter-menu {
|
||
display: grid;
|
||
gap: 14px;
|
||
width: 100%;
|
||
}
|
||
|
||
.skin-reset {
|
||
width: 100%;
|
||
height: 36px;
|
||
border: 0;
|
||
border-radius: 10px;
|
||
background: #fff7f0;
|
||
color: #ff6a00;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
text-align: left;
|
||
padding: 0 14px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.skin-reset.active {
|
||
background: #ff6a00;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.skin-filter-group {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.skin-filter-group + .skin-filter-group {
|
||
padding-top: 12px;
|
||
border-top: 1px solid #f1f5f9;
|
||
}
|
||
|
||
.skin-filter-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.skin-filter-title strong {
|
||
color: #1f2937;
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.skin-filter-title button {
|
||
height: 28px;
|
||
border: 1px solid #ffd7bd;
|
||
border-radius: 999px;
|
||
background: #fffaf5;
|
||
color: #ff6a00;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
padding: 0 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.skin-filter-title button.active,
|
||
.skin-filter-title button:hover {
|
||
background: #ff6a00;
|
||
border-color: #ff6a00;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.skin-filter-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
max-height: 156px;
|
||
overflow: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.skin-filter-options::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.skin-filter-options button {
|
||
max-width: 100%;
|
||
min-height: 30px;
|
||
border: 1px solid #eef1f5;
|
||
border-radius: 8px;
|
||
background: #ffffff;
|
||
color: #5f6670;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
padding: 0 10px;
|
||
cursor: pointer;
|
||
transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
|
||
}
|
||
|
||
.skin-filter-options button:hover,
|
||
.skin-filter-options button.active {
|
||
border-color: #ffb27a;
|
||
background: #fff3e8;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
.filter-body-v2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
}
|
||
|
||
.filter-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.filter-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.filter-item label {
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
color: #475569;
|
||
padding-left: 2px;
|
||
}
|
||
|
||
/* 筛选控件 */
|
||
.filter-select {
|
||
width: 100%;
|
||
}
|
||
|
||
.horizontal-filter-card :deep(.filter-select .el-select__wrapper) {
|
||
min-height: 36px;
|
||
padding: 0 12px;
|
||
border: 1px solid #e7edf5;
|
||
border-radius: 12px;
|
||
background: #fbfcfe;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.horizontal-filter-card :deep(.filter-select .el-select__wrapper:hover) {
|
||
border-color: #ffd0ad;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.horizontal-filter-card :deep(.filter-select .el-select__wrapper.is-focused) {
|
||
border-color: #ff6a00;
|
||
background: #ffffff;
|
||
box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
|
||
}
|
||
|
||
.horizontal-filter-card :deep(.filter-select .el-select__placeholder) {
|
||
color: #a4adba;
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.horizontal-filter-card :deep(.filter-select .el-select__caret) {
|
||
color: #98a2b3;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.skin-search :deep(.el-input__wrapper) {
|
||
min-height: 36px;
|
||
padding: 0 12px;
|
||
border: 1px solid #e7edf5;
|
||
border-radius: 12px;
|
||
background: #fbfcfe;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.skin-search :deep(.el-input__wrapper:hover) {
|
||
border-color: #ffd0ad;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.skin-search :deep(.el-input__wrapper.is-focus) {
|
||
border-color: #ff6a00;
|
||
background: #ffffff;
|
||
box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
|
||
}
|
||
|
||
.skin-search :deep(.el-input__inner) {
|
||
color: #334155;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.skin-search :deep(.el-input__inner::placeholder) {
|
||
color: #a4adba;
|
||
}
|
||
|
||
.range-inputs {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number) {
|
||
--el-color-primary: #ff6a00;
|
||
--el-input-border-color: transparent;
|
||
--el-input-hover-border-color: transparent;
|
||
--el-input-focus-border-color: transparent;
|
||
flex: 1;
|
||
min-width: 0;
|
||
width: 100%;
|
||
height: 36px;
|
||
overflow: hidden;
|
||
border: 1px solid #e7edf5;
|
||
border-radius: 12px;
|
||
background: #fbfcfe;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number:hover) {
|
||
border-color: #ffd0ad;
|
||
background: #ffffff;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number.is-focus),
|
||
.range-inputs :deep(.el-input-number:focus-within) {
|
||
border-color: #ff6a00;
|
||
background: #ffffff;
|
||
box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number .el-input) {
|
||
height: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number .el-input__wrapper) {
|
||
height: 100%;
|
||
padding: 0 34px 0 10px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number .el-input__wrapper:hover),
|
||
.range-inputs :deep(.el-input-number .el-input__wrapper.is-focus),
|
||
.range-inputs :deep(.el-input-number.is-focus .el-input__wrapper),
|
||
.range-inputs :deep(.el-input-number:focus-within .el-input__wrapper) {
|
||
border-color: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number .el-input__inner) {
|
||
color: #334155;
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number .el-input__inner::placeholder) {
|
||
color: #a4adba;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number__increase),
|
||
.range-inputs :deep(.el-input-number__decrease) {
|
||
right: 0;
|
||
width: 34px;
|
||
height: 50%;
|
||
border: 0;
|
||
border-left: 1px solid #e7edf5;
|
||
background: #f8fafc;
|
||
color: #98a2b3;
|
||
line-height: 17px;
|
||
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number__increase) {
|
||
top: 0;
|
||
border-bottom: 1px solid #eef2f7;
|
||
border-top-right-radius: 11px;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number__decrease) {
|
||
bottom: 0;
|
||
border-bottom-right-radius: 11px;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number__increase:hover),
|
||
.range-inputs :deep(.el-input-number__decrease:hover) {
|
||
border-left-color: #ffd0ad;
|
||
background: #fff7f0;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
.range-inputs :deep(.el-input-number__increase.is-disabled),
|
||
.range-inputs :deep(.el-input-number__decrease.is-disabled) {
|
||
background: #f8fafc;
|
||
color: #cbd5e1;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.range-sep {
|
||
color: #cbd5e1;
|
||
font-weight: 800;
|
||
font-size: 14px;
|
||
}
|
||
|
||
:global(.filter-select-dropdown) {
|
||
overflow: hidden;
|
||
border: 1px solid #e7edf5 !important;
|
||
border-radius: 14px !important;
|
||
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
|
||
}
|
||
|
||
:global(.filter-select-dropdown .el-select-dropdown__list) {
|
||
padding: 6px;
|
||
}
|
||
|
||
:global(.filter-select-dropdown .el-select-dropdown__item) {
|
||
margin: 2px 0;
|
||
border-radius: 10px;
|
||
color: #475569;
|
||
font-weight: 700;
|
||
}
|
||
|
||
:global(.filter-select-dropdown .el-select-dropdown__item.hover),
|
||
:global(.filter-select-dropdown .el-select-dropdown__item:hover) {
|
||
background: #fff3e8;
|
||
color: #ff6a00;
|
||
}
|
||
|
||
:global(.filter-select-dropdown .el-select-dropdown__item.selected) {
|
||
background: #ff6a00;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.filter-footer {
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.quick-tags {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.quick-tags button {
|
||
padding: 6px 14px;
|
||
border: 1px solid #f1f5f9;
|
||
border-radius: 10px;
|
||
background: #f8fafc;
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.quick-tags button:hover {
|
||
background: #ffffff;
|
||
border-color: #ff6a00;
|
||
color: #ff6a00;
|
||
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.1);
|
||
}
|
||
|
||
.quick-tags button.active {
|
||
background: #ff6a00;
|
||
border-color: #ff6a00;
|
||
color: #ffffff;
|
||
box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2);
|
||
}
|
||
|
||
/* 列表头部 */
|
||
.list-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
gap: 16px;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.list-head h2 {
|
||
margin: 4px 0 0;
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: #17233d;
|
||
}
|
||
|
||
.zone-head {
|
||
display: grid;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.zone-tabs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
max-width: 1120px;
|
||
}
|
||
|
||
.zone-tabs button {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 2px 12px;
|
||
min-width: 132px;
|
||
min-height: 58px;
|
||
padding: 10px 14px;
|
||
border: 1px solid #eef1f5;
|
||
border-radius: 12px;
|
||
background: #ffffff;
|
||
color: #17233d;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
transition: all 0.18s ease;
|
||
}
|
||
|
||
.zone-tabs button:hover {
|
||
border-color: rgba(255, 106, 0, 0.36);
|
||
box-shadow: 0 8px 20px rgba(23, 35, 61, 0.06);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.zone-tabs button.active {
|
||
border-color: #ff6a00;
|
||
background: #fff7ed;
|
||
box-shadow: 0 8px 20px rgba(255, 106, 0, 0.12);
|
||
}
|
||
|
||
.zone-tabs strong {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: inherit;
|
||
font-size: 15px;
|
||
font-weight: 900;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.zone-tabs span {
|
||
grid-column: 1 / -1;
|
||
color: #8b9cb5;
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.zone-tabs em {
|
||
align-self: start;
|
||
min-width: 24px;
|
||
border-radius: 999px;
|
||
background: #f1f5f9;
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
font-style: normal;
|
||
font-weight: 900;
|
||
line-height: 22px;
|
||
text-align: center;
|
||
}
|
||
|
||
.zone-tabs button.active em {
|
||
background: #ff6a00;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0;
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
color: #ff6a00;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.list-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.list-actions :deep(.el-radio-button__inner) {
|
||
border-radius: 8px;
|
||
border: 1px solid #eef1f5;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.list-actions :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
|
||
background-color: #ff6a00;
|
||
border-color: #ff6a00;
|
||
box-shadow: -1px 0 0 0 #ff6a00;
|
||
}
|
||
|
||
/* 增强版卡片 v2 */
|
||
.enhanced-desktop-list {
|
||
display: grid;
|
||
gap: 16px;
|
||
}
|
||
|
||
.listing-card-v2 {
|
||
display: grid;
|
||
grid-template-columns: 240px 1fr 200px;
|
||
gap: 30px;
|
||
padding: 20px;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
|
||
.listing-card-v2:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 32px rgba(23, 35, 61, 0.08);
|
||
border-color: #cbd5e1;
|
||
}
|
||
|
||
.card-cover {
|
||
position: relative;
|
||
height: 140px;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.card-cover img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.empty-cover {
|
||
height: 100%;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 24px;
|
||
font-weight: 900;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
.cover-badges {
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.badge {
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.badge.sale { background: #ef4444; }
|
||
.badge.gift { background: #10b981; }
|
||
|
||
.ratio-tag {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 4px;
|
||
background: rgba(0,0,0,0.6);
|
||
color: #fbbf24;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 卡片详情区域 */
|
||
.card-details {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.card-title-row h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #1e293b;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.daily-loss {
|
||
padding: 4px 10px;
|
||
background: #f1f5f9;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #64748b;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.stats-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.stat-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.stat-row label {
|
||
font-size: 11px;
|
||
color: #94a3b8;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stat-row span, .stat-row strong {
|
||
font-size: 13px;
|
||
color: #334155;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stat-row strong {
|
||
color: #1e293b;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.highlight {
|
||
color: #ff6a00 !important;
|
||
}
|
||
|
||
.time-text, .skins-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.skins-text em {
|
||
font-style: normal;
|
||
color: #94a3b8;
|
||
}
|
||
|
||
/* 右侧价格区域 */
|
||
.card-price {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding-left: 24px;
|
||
border-left: 1px solid #f1f5f9;
|
||
}
|
||
|
||
.price-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.price-item small {
|
||
color: #94a3b8;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.price-item.total strong {
|
||
font-size: 28px;
|
||
color: #ef4444;
|
||
line-height: 1;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.price-item.deposit span {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rent-btn {
|
||
width: 100%;
|
||
height: 40px;
|
||
border: none;
|
||
border-radius: 10px;
|
||
background: #ff6a00;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.rent-btn:hover {
|
||
background: #e55d00;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.hero-section { grid-template-columns: 1fr; }
|
||
.home-stats-v2 { grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); }
|
||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.listing-card-v2 { grid-template-columns: 160px 1fr 140px; }
|
||
}
|
||
</style>
|