优化首页展示列表
This commit is contained in:
yml
@@ -12,6 +12,26 @@ import { fetchListings, type Listing } from "@/api/listings";
|
||||
import MobileHomeFilterSheet, {
|
||||
type FilterSection,
|
||||
} from "./MobileHomeFilterSheet.vue";
|
||||
import { buildFallbackListings } from "./mobileHomeFallback";
|
||||
import {
|
||||
assetRegions,
|
||||
formatHafCoinM,
|
||||
getCoinM,
|
||||
getCoinWan,
|
||||
getListingChips,
|
||||
getListingDisplayPrice,
|
||||
getListingSubtitle,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getResourceQuantity,
|
||||
getServerRegion,
|
||||
getSkinGroup,
|
||||
hasGiftResources,
|
||||
normalizeLoginMethod,
|
||||
normalizeServerRegion,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
} from "./listingDisplay";
|
||||
|
||||
const route = useRoute();
|
||||
const loading = ref(false);
|
||||
@@ -35,12 +55,11 @@ const sortOptions = [
|
||||
|
||||
const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
|
||||
coin: [
|
||||
{ label: "10-50", min: "10", max: "50" },
|
||||
{ label: "50-100", min: "50", max: "100" },
|
||||
{ label: "100-150", min: "100", max: "150" },
|
||||
{ label: "150-200", min: "150", max: "200" },
|
||||
{ label: "100-200", min: "100", max: "200" },
|
||||
{ label: "200-300", min: "200", max: "300" },
|
||||
{ label: "300以上", min: "300", max: "" },
|
||||
{ label: "300-500", min: "300", max: "500" },
|
||||
{ label: "500以上", min: "500", max: "" },
|
||||
],
|
||||
resource_awmAmmo: [
|
||||
{ label: "0-20", min: "0", max: "20" },
|
||||
@@ -75,141 +94,10 @@ const bannerSlides = [
|
||||
},
|
||||
];
|
||||
|
||||
const fallbackListings: Listing[] = [
|
||||
{
|
||||
id: 9001,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "QQ区 黑鹰 30000万哈夫币账号",
|
||||
description: "支持扫码上号，号主在线交接，保险 2*3，适合高强度体验。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "QQ",
|
||||
login_platform: "扫码",
|
||||
rank_level: "黑鹰",
|
||||
haf_coin_amount: 300000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 30000,
|
||||
season_insurance: "2*3",
|
||||
stamina_level: "6级",
|
||||
load_level: "6级",
|
||||
daily_loss: "30M",
|
||||
ratio: 6,
|
||||
login_method: "扫码",
|
||||
common_regions: ["广东", "上海"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 80, mode: "收费" },
|
||||
{ key: "helmet6", label: "6头数量", quantity: 6, mode: "收费" },
|
||||
{ key: "armor6", label: "6甲数量", quantity: 4, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["龙牙", "信条"],
|
||||
operator: ["威龙-凌霄戍卫"],
|
||||
weapon: ["M4A1棱镜攻势", "K416命运"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 8.8,
|
||||
price_daily: 88,
|
||||
price_weekly: 520,
|
||||
deposit_amount: 120,
|
||||
min_rent_hours: 24,
|
||||
max_rent_hours: 168,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
{
|
||||
id: 9002,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "微信 钻石 12000万哈夫币低押号",
|
||||
description: "账密登录，低押金，皮肤截图齐全，常用登录地江苏。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "微信",
|
||||
login_platform: "账号密码",
|
||||
rank_level: "钻石",
|
||||
haf_coin_amount: 120000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 12000,
|
||||
season_insurance: "2*2",
|
||||
stamina_level: "5级",
|
||||
load_level: "5级",
|
||||
daily_loss: "20M",
|
||||
ratio: 5,
|
||||
login_method: "账号密码",
|
||||
common_regions: ["江苏"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 30, mode: "收费" },
|
||||
{ key: "helmet6", label: "6头数量", quantity: 2, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["怜悯"],
|
||||
operator: ["露娜-黑天际线"],
|
||||
weapon: ["SCAR-H电玩高手"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 5.5,
|
||||
price_daily: 55,
|
||||
price_weekly: 330,
|
||||
deposit_amount: 60,
|
||||
min_rent_hours: 24,
|
||||
max_rent_hours: 72,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
{
|
||||
id: 9003,
|
||||
account_id: 0,
|
||||
owner_id: 0,
|
||||
title: "Steam 铂金 6000万哈夫币包夜号",
|
||||
description: "可包夜，保险 2*1，适合短租搬砖体验。",
|
||||
game_name: "三角洲行动",
|
||||
server_region: "Steam",
|
||||
login_platform: "扫码",
|
||||
rank_level: "铂金",
|
||||
haf_coin_amount: 60000000,
|
||||
asset_summary: {
|
||||
haf_coin_wan: 6000,
|
||||
season_insurance: "2*1",
|
||||
stamina_level: "4级",
|
||||
load_level: "4级",
|
||||
daily_loss: "10M",
|
||||
ratio: 4,
|
||||
login_method: "扫码",
|
||||
common_regions: ["四川", "重庆"],
|
||||
resources: [
|
||||
{ key: "awmAmmo", label: "AWM子弹", quantity: 12, mode: "收费" },
|
||||
{ key: "gridCard9", label: "9格体验卡", quantity: 1, mode: "收费" },
|
||||
],
|
||||
skin_groups: {
|
||||
melee: ["暗星"],
|
||||
operator: ["赛伊德"],
|
||||
weapon: ["Vector美杜莎"],
|
||||
},
|
||||
},
|
||||
screenshot_urls: [],
|
||||
price_hourly: 3.9,
|
||||
price_daily: 39,
|
||||
price_weekly: 220,
|
||||
deposit_amount: 80,
|
||||
min_rent_hours: 8,
|
||||
max_rent_hours: 24,
|
||||
status: "published",
|
||||
review_status: "approved",
|
||||
review_reason: "",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
},
|
||||
];
|
||||
const fallbackListings = computed(() => buildFallbackListings(publishOptions.value));
|
||||
|
||||
const sourceListings = computed(() =>
|
||||
loadFailed.value ? fallbackListings : listings.value
|
||||
loadFailed.value ? fallbackListings.value : listings.value
|
||||
);
|
||||
|
||||
const activeSortLabel = computed(
|
||||
@@ -235,8 +123,8 @@ const loginMethodFilterOptions = computed(() =>
|
||||
);
|
||||
|
||||
const filterSections = computed<FilterSection[]>(() => [
|
||||
{ key: "price", title: "价格区间", type: "range", unit: "元/小时", minPlaceholder: "最低价", maxPlaceholder: "最高价" },
|
||||
{ key: "coin", title: "哈夫币数量", type: "range", unit: "万", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
{ key: "price", title: "价格区间", type: "range", unit: "元", minPlaceholder: "最低价", maxPlaceholder: "最高价" },
|
||||
{ key: "coin", title: "哈夫币数量", type: "range", unit: "M", minPlaceholder: "最低", maxPlaceholder: "最高" },
|
||||
{ key: "server", title: "区服", type: "chips", options: serverFilterOptions.value },
|
||||
{ key: "login", title: "上号方式", type: "chips", options: loginMethodFilterOptions.value },
|
||||
{ key: "insurance", title: "保险", type: "chips", options: publishOptions.value.insurance_options },
|
||||
@@ -357,12 +245,12 @@ function sortListings(items: Listing[]) {
|
||||
}
|
||||
if (activeSort.value === "priceAsc") {
|
||||
return sorted.sort(
|
||||
(a, b) => Number(a.price_hourly || 0) - Number(b.price_hourly || 0)
|
||||
(a, b) => getListingDisplayPrice(a) - getListingDisplayPrice(b)
|
||||
);
|
||||
}
|
||||
if (activeSort.value === "priceDesc") {
|
||||
return sorted.sort(
|
||||
(a, b) => Number(b.price_hourly || 0) - Number(a.price_hourly || 0)
|
||||
(a, b) => getListingDisplayPrice(b) - getListingDisplayPrice(a)
|
||||
);
|
||||
}
|
||||
return sorted.sort((a, b) => {
|
||||
@@ -391,8 +279,8 @@ function matchesFilters(item: Listing) {
|
||||
return Object.entries(rangeFilters.value).every(([key, range]) => {
|
||||
if (!range.min && !range.max) return true;
|
||||
let value = 0;
|
||||
if (key === "price") value = Number(item.price_hourly || 0);
|
||||
if (key === "coin") value = getCoinWan(item);
|
||||
if (key === "price") value = getListingDisplayPrice(item);
|
||||
if (key === "coin") value = getCoinM(item);
|
||||
if (key === "secretKd") value = readAssetNumber(item, "secret_kd");
|
||||
if (key === "deposit") value = Number(item.deposit_amount || 0);
|
||||
if (key.startsWith("resource_")) {
|
||||
@@ -420,7 +308,7 @@ function searchText(item: Listing) {
|
||||
readAssetString(item, "season_insurance"),
|
||||
readAssetString(item, "stamina_level"),
|
||||
readAssetString(item, "load_level"),
|
||||
formatCoinWan(getCoinWan(item)),
|
||||
formatHafCoinM(getCoinWan(item)),
|
||||
assetRegions(item).join(" "),
|
||||
...publishOptions.value.skin_groups.map((group) =>
|
||||
getSkinGroup(item, group.key).join(" ")
|
||||
@@ -430,39 +318,6 @@ function searchText(item: Listing) {
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
function getCoinWan(item: Listing) {
|
||||
const assetCoin = readAssetNumber(item, "haf_coin_wan");
|
||||
if (assetCoin > 0) return assetCoin;
|
||||
return Math.round(Number(item.haf_coin_amount || 0) / 10000);
|
||||
}
|
||||
|
||||
function getLoginMethod(item: Listing) {
|
||||
return normalizeLoginMethod(
|
||||
readAssetString(item, "login_method") || item.login_platform
|
||||
);
|
||||
}
|
||||
|
||||
function getServerRegion(item: Listing) {
|
||||
return normalizeServerRegion(item.server_region);
|
||||
}
|
||||
|
||||
function normalizeServerRegion(value: string) {
|
||||
const text = value.trim();
|
||||
const upper = text.toUpperCase();
|
||||
if (upper.includes("STEAM")) return "Steam";
|
||||
if (upper.includes("QQ")) return "QQ";
|
||||
if (text.includes("微信")) return "微信";
|
||||
return "";
|
||||
}
|
||||
|
||||
function normalizeLoginMethod(value: string) {
|
||||
const text = value.trim();
|
||||
if (!text) return "";
|
||||
if (text.includes("扫码")) return "扫码";
|
||||
if (text.includes("账密") || text.includes("账号密码")) return "账号密码";
|
||||
return "";
|
||||
}
|
||||
|
||||
function isSkinGroupKey(key: string) {
|
||||
return publishOptions.value.skin_groups.some((group) => group.key === key);
|
||||
}
|
||||
@@ -476,80 +331,6 @@ function uniqueOptions(values: string[]) {
|
||||
return [...new Set(values.map((item) => item.trim()).filter(Boolean))];
|
||||
}
|
||||
|
||||
function getRatio(item: Listing) {
|
||||
const ratio = readAssetNumber(item, "ratio");
|
||||
if (ratio > 0) return ratio;
|
||||
const price = Number(item.price_hourly || 0);
|
||||
if (price <= 0) return 0;
|
||||
return getCoinWan(item) / price;
|
||||
}
|
||||
|
||||
function assetRegions(item: Listing) {
|
||||
const regions = item.asset_summary?.common_regions;
|
||||
return Array.isArray(regions)
|
||||
? regions.filter((region): region is string => typeof region === "string")
|
||||
: [];
|
||||
}
|
||||
|
||||
function getResourceQuantity(item: Listing, resourceKey: string) {
|
||||
const resources = item.asset_summary?.resources;
|
||||
if (!Array.isArray(resources)) return 0;
|
||||
const found = resources.find((resource) => {
|
||||
return (
|
||||
typeof resource === "object" &&
|
||||
resource !== null &&
|
||||
"key" in resource &&
|
||||
(resource as { key?: unknown }).key === resourceKey
|
||||
);
|
||||
}) as { quantity?: unknown } | undefined;
|
||||
const quantity = found?.quantity;
|
||||
if (typeof quantity === "number") return quantity;
|
||||
if (typeof quantity === "string" && quantity.trim()) return Number(quantity) || 0;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getSkinGroup(item: Listing, groupKey: string) {
|
||||
const skinGroups = item.asset_summary?.skin_groups;
|
||||
if (
|
||||
typeof skinGroups !== "object" ||
|
||||
skinGroups === null ||
|
||||
!Array.isArray((skinGroups as Record<string, unknown>)[groupKey])
|
||||
) {
|
||||
return [];
|
||||
}
|
||||
return ((skinGroups as Record<string, unknown>)[groupKey] as unknown[]).filter(
|
||||
(skin): skin is string => typeof skin === "string"
|
||||
);
|
||||
}
|
||||
|
||||
function readAssetString(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
return typeof value === "string" ? value : "";
|
||||
}
|
||||
|
||||
function readAssetNumber(item: Listing, key: string) {
|
||||
const value = item.asset_summary?.[key];
|
||||
if (typeof value === "number") return value;
|
||||
if (typeof value === "string" && value.trim()) {
|
||||
const parsed = Number(value);
|
||||
return Number.isFinite(parsed) ? parsed : 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function formatCoinWan(amountWan: number) {
|
||||
if (amountWan >= 10000) {
|
||||
const yi = amountWan / 10000;
|
||||
return `${Number.isInteger(yi) ? yi : yi.toFixed(1)}亿`;
|
||||
}
|
||||
return `${amountWan}万`;
|
||||
}
|
||||
|
||||
function formatRatio(item: Listing) {
|
||||
const ratio = getRatio(item);
|
||||
return ratio > 0 ? `1:${Math.round(ratio)}` : "--";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -663,57 +444,42 @@ function formatRatio(item: Listing) {
|
||||
class="mobile-card"
|
||||
:to="`/m/listings/${item.id}`"
|
||||
>
|
||||
<div class="card-title-row">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<em>可租</em>
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="item.screenshot_urls?.[0]"
|
||||
:src="item.screenshot_urls[0]"
|
||||
:alt="getListingTitle(item)"
|
||||
/>
|
||||
<span v-else>图</span>
|
||||
<em v-if="hasGiftResources(item)">有赠送</em>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<van-tag type="primary" size="medium" plain>{{
|
||||
getServerRegion(item)
|
||||
}}</van-tag>
|
||||
<van-tag
|
||||
v-if="getLoginMethod(item)"
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
>{{ getLoginMethod(item) }}</van-tag
|
||||
>
|
||||
<van-tag
|
||||
v-if="item.rank_level"
|
||||
type="primary"
|
||||
size="medium"
|
||||
plain
|
||||
>{{ item.rank_level }}</van-tag
|
||||
>
|
||||
<van-tag
|
||||
v-if="readAssetString(item, 'season_insurance')"
|
||||
color="#eff6ff"
|
||||
text-color="#1477ff"
|
||||
size="medium"
|
||||
>
|
||||
保险 {{ readAssetString(item, "season_insurance") }}
|
||||
</van-tag>
|
||||
<van-tag
|
||||
v-if="readAssetString(item, 'daily_loss')"
|
||||
color="#fff7ed"
|
||||
text-color="#ea580c"
|
||||
size="medium"
|
||||
>
|
||||
损耗 {{ readAssetString(item, "daily_loss") }}
|
||||
</van-tag>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="price-col">
|
||||
<strong>¥{{ item.price_hourly }}<small>/小时</small></strong>
|
||||
<span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
|
||||
<div class="card-main">
|
||||
<div class="card-title-row">
|
||||
<h2>{{ getListingTitle(item) }}</h2>
|
||||
</div>
|
||||
<div class="card-badges">
|
||||
<div class="ratio-badge">{{ formatRatio(item) }}</div>
|
||||
<div class="coin-badge">
|
||||
{{ formatCoinWan(getCoinWan(item)) }}哈夫币
|
||||
<p class="card-subtitle">{{ getListingSubtitle(item) }}</p>
|
||||
<div class="card-badges-row">
|
||||
<span class="trust-badge">押金秒退</span>
|
||||
<span class="server-badge">{{ getServerRegion(item) }}</span>
|
||||
<span v-if="getLoginMethod(item)" class="server-badge">
|
||||
{{ getLoginMethod(item) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="price-col">
|
||||
<strong>¥{{ getListingDisplayPrice(item) }}</strong>
|
||||
<span class="rent-sub">押金¥{{ item.deposit_amount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-chip-row">
|
||||
<span
|
||||
v-for="chip in getListingChips(item)"
|
||||
:key="`${item.id}-${chip.label}`"
|
||||
>
|
||||
{{ chip.label }}:{{ chip.value }}
|
||||
</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</section>
|
||||
@@ -770,468 +536,4 @@ function formatRatio(item: Listing) {
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-shell {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
color: #17233d;
|
||||
padding-bottom: 58px;
|
||||
}
|
||||
|
||||
/* ========== Hero 区域：纯色蓝色头部 ========== */
|
||||
.mobile-hero {
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 24px 24px;
|
||||
background: #1479ff;
|
||||
padding: 14px 14px 18px;
|
||||
}
|
||||
|
||||
.mobile-topbar,
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #1479ff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-brand small {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mobile-service {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: #ffffff;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
/* ========== van-search 覆盖样式 ========== */
|
||||
.home-search {
|
||||
margin-top: 12px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content) {
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.home-search :deep(.van-search__content .van-field__control) {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示卡片 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
padding: 10px 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: #5c3b00;
|
||||
}
|
||||
|
||||
.fraud-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #f0a500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ========== Content 区 ========== */
|
||||
.mobile-content {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* ========== Banner 轮播 ========== */
|
||||
.banner-swipe {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicators) {
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator) {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(23, 35, 61, 0.24);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-swipe :deep(.van-swipe__indicator--active) {
|
||||
width: 16px;
|
||||
border-radius: 999px;
|
||||
background: #1479ff;
|
||||
}
|
||||
|
||||
.mobile-banner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
min-height: 132px;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 18px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-green {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
|
||||
}
|
||||
|
||||
.mobile-banner.tone-orange {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
|
||||
}
|
||||
|
||||
.mobile-banner p,
|
||||
.mobile-banner h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mobile-banner p {
|
||||
color: #1479ff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-banner h1 {
|
||||
margin-top: 6px;
|
||||
font-size: 22px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.mobile-banner span {
|
||||
display: inline-flex;
|
||||
margin-top: 12px;
|
||||
border-radius: 999px;
|
||||
background: #ffefb5;
|
||||
color: #7a4b00;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
align-self: flex-start;
|
||||
border-radius: 12px;
|
||||
background: #ff6a00;
|
||||
color: #ffffff;
|
||||
padding: 8px 9px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
transform: rotate(8deg);
|
||||
}
|
||||
|
||||
.tone-green .banner-badge {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.tone-orange .banner-badge {
|
||||
background: #f59e0b;
|
||||
}
|
||||
|
||||
/* ========== 列表工具栏 ========== */
|
||||
.list-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sort-entry,
|
||||
.filter-entry {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-entry {
|
||||
gap: 4px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.filter-entry {
|
||||
position: relative;
|
||||
border-radius: 999px;
|
||||
color: #17233d;
|
||||
padding: 0;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.filter-entry em {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #1477ff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.sort-panel {
|
||||
margin-top: 6px;
|
||||
border-radius: 0 0 14px 14px;
|
||||
background: #fff;
|
||||
padding: 4px 16px 14px;
|
||||
}
|
||||
|
||||
.sort-panel button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2d3748;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sort-panel button.active {
|
||||
color: #ff7a00;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
margin-top: 8px;
|
||||
color: #536173;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-count strong {
|
||||
margin-right: 3px;
|
||||
color: #1477ff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* ========== 加载状态 ========== */
|
||||
.state-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
color: #6b7a90;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ========== 卡片列表 ========== */
|
||||
.mobile-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mobile-card {
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-title-row h2 {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row em {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
background: #e9f8ef;
|
||||
color: #0f9f57;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.price-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.card-footer strong {
|
||||
color: #ff5f00;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-footer small,
|
||||
.card-footer .rent-sub {
|
||||
color: #8a96a8;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coin-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
background: #e8f0ff;
|
||||
color: #1477ff;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-badges {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ratio-badge {
|
||||
border-radius: 999px;
|
||||
background: #eefdf3;
|
||||
color: #0f9f57;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== 底部导航：原生App风格 ========== */
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.publish-pill {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 13px;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.nav-publish span {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (min-width: 520px) {
|
||||
.mobile-shell {
|
||||
max-width: 430px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 0 1px rgba(23, 35, 61, 0.08);
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
left: calc((100vw - 430px) / 2);
|
||||
right: calc((100vw - 430px) / 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./MobileHomeView.css"></style>
|
||||
|
||||
Reference in New Issue
Block a user