合并 main 分支并融合订单列表最小化与 SQL 治理
- Auth/权限中间件取 main 演进版（错误细分、token 来源），保留 dev 的用户 cookie 与登出撤销语义 - 后台订单列表：融合 main 的首页免 COUNT 优化与关键词索引路由，保留 dev 的最小化 AdminOrderListItemDTO（结账明细仍由详情接口返回，同步调整对应集成测试） - 保留 dev 的 token_version 冻结/解冻递增与 main 的状态变化判断及通知 - 前端：保留 dev 登出接口与 main 的 fetchMe silent 参数、SSE 登录跳转；后台订单表按 dev 最小化 DTO 移除号主到手列
This commit is contained in:
yml2213
@@ -99,6 +99,7 @@ export interface ListingPublishAgreements {
|
||||
}
|
||||
|
||||
export interface ListingPublishOptions {
|
||||
next_season_pass_enabled: boolean
|
||||
server_options: string[]
|
||||
face_options: string[]
|
||||
rank_options: string[]
|
||||
@@ -118,6 +119,7 @@ export interface ListingPublishOptions {
|
||||
}
|
||||
|
||||
export const emptyListingPublishOptions: ListingPublishOptions = {
|
||||
next_season_pass_enabled: false,
|
||||
server_options: [],
|
||||
face_options: [],
|
||||
rank_options: [],
|
||||
@@ -206,6 +208,7 @@ export function mergeListingPublishOptions(
|
||||
options?: Partial<ListingPublishOptions>
|
||||
): ListingPublishOptions {
|
||||
return {
|
||||
next_season_pass_enabled: options?.next_season_pass_enabled === true,
|
||||
server_options: normalizeStringList(options?.server_options),
|
||||
face_options: normalizeStringList(options?.face_options),
|
||||
rank_options: normalizeStringList(options?.rank_options),
|
||||
|
||||
@@ -46,7 +46,10 @@ function updateFilter<K extends keyof HomeFilters>(key: K, value: HomeFilters[K]
|
||||
emit('update:filters', { [key]: value } as Partial<HomeFilters>)
|
||||
}
|
||||
|
||||
function toggleChip(key: 'insurance' | 'stamina' | 'load' | 'loginMethod' | 'region' | 'rank', value: string) {
|
||||
function toggleChip(
|
||||
key: 'insurance' | 'stamina' | 'load' | 'loginMethod' | 'region' | 'rank',
|
||||
value: string
|
||||
) {
|
||||
const current = props.filters[key]
|
||||
const next = current.includes(value)
|
||||
? current.filter(item => item !== value)
|
||||
@@ -56,9 +59,7 @@ function toggleChip(key: 'insurance' | 'stamina' | 'load' | 'loginMethod' | 'reg
|
||||
|
||||
function toggleSkin(name: string) {
|
||||
const current = props.filters.skinNames
|
||||
const next = current.includes(name)
|
||||
? current.filter(item => item !== name)
|
||||
: [...current, name]
|
||||
const next = current.includes(name) ? current.filter(item => item !== name) : [...current, name]
|
||||
updateFilter('skinNames', next)
|
||||
}
|
||||
|
||||
@@ -121,9 +122,7 @@ function toggleAdvanced() {
|
||||
}
|
||||
|
||||
/** 刀皮/红皮作为独立左列字段展示（与全宽皮肤区区分） */
|
||||
const meleeSkinGroup = computed(() =>
|
||||
props.skinFilterGroups.find(group => group.key === 'melee')
|
||||
)
|
||||
const meleeSkinGroup = computed(() => props.skinFilterGroups.find(group => group.key === 'melee'))
|
||||
const redSkinGroup = computed(() =>
|
||||
props.skinFilterGroups.find(group => group.key === 'operatorRed')
|
||||
)
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { rangeLabel, isRangeSelected } from '@/features/listings/composables/useFilterOptions'
|
||||
import {
|
||||
awmRangeOptions,
|
||||
isRangeSelected,
|
||||
moneyRangeOptions,
|
||||
rangeLabel,
|
||||
ratioRangeOptions,
|
||||
} from '@/features/listings/composables/useFilterOptions'
|
||||
|
||||
describe('useFilterOptions', () => {
|
||||
describe('rangeLabel', () => {
|
||||
@@ -27,4 +33,10 @@ describe('useFilterOptions', () => {
|
||||
expect(isRangeSelected(undefined, undefined, undefined, undefined)).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
it('应该隐藏数量过小的首页筛选档位', () => {
|
||||
expect(awmRangeOptions.some(option => option.label === '0-20')).toBe(false)
|
||||
expect(moneyRangeOptions.some(option => option.label === '0-50')).toBe(false)
|
||||
expect(ratioRangeOptions.some(option => option.label === '≤30')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -9,10 +9,9 @@ export const coinRangeOptions = [
|
||||
{ label: '300以上', min: 300, max: undefined },
|
||||
]
|
||||
|
||||
/** AWM 子弹数量区间（与移动端档位保持一致） */
|
||||
/** AWM 子弹数量区间：移除数量过小的 0-20 档位 */
|
||||
export const awmRangeOptions = [
|
||||
{ label: '全部', min: undefined, max: undefined },
|
||||
{ label: '0-20', min: 0, max: 20 },
|
||||
{ label: '20-50', min: 20, max: 50 },
|
||||
{ label: '50-100', min: 50, max: 100 },
|
||||
{ label: '100-200', min: 100, max: 200 },
|
||||
@@ -21,7 +20,6 @@ export const awmRangeOptions = [
|
||||
|
||||
export const ratioRangeOptions = [
|
||||
{ label: '全部', min: undefined, max: undefined },
|
||||
{ label: '≤30', min: undefined, max: 30 },
|
||||
{ label: '30-35', min: 30, max: 35 },
|
||||
{ label: '35-40', min: 35, max: 40 },
|
||||
{ label: '40-45', min: 40, max: 45 },
|
||||
@@ -30,7 +28,6 @@ export const ratioRangeOptions = [
|
||||
|
||||
export const moneyRangeOptions = [
|
||||
{ label: '全部', min: undefined, max: undefined },
|
||||
{ label: '0-50', min: 0, max: 50 },
|
||||
{ label: '50-100', min: 50, max: 100 },
|
||||
{ label: '100-150', min: 100, max: 150 },
|
||||
{ label: '150-200', min: 150, max: 200 },
|
||||
|
||||
@@ -136,7 +136,7 @@ const zoneOptions = computed(() => [
|
||||
{
|
||||
key: 'night',
|
||||
label: '夜间专区',
|
||||
hint: '0-8点可上号',
|
||||
hint: '0-2点可响应上号',
|
||||
count: zoneCount('night'),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,680 @@
|
||||
.detail-back-bar {
|
||||
/* 吸顶固定：始终显示在顶部导航栏（64px）下方，滚动时不跟随页面移走 */
|
||||
position: sticky;
|
||||
top: 78px;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detail-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(23, 35, 61, 0.08);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.detail-back-btn:hover {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.12);
|
||||
}
|
||||
|
||||
.pc-detail-layout {
|
||||
grid-template-columns: minmax(0, 1fr) 420px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pc-detail-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-hero-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
background: #111827;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.detail-hero-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-hero-card > span {
|
||||
display: grid;
|
||||
height: 340px;
|
||||
place-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-hero-card::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.58)),
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.08) 62%);
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
z-index: 1;
|
||||
max-width: 860px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detail-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.34);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-code-chip {
|
||||
width: fit-content;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(147, 197, 253, 0.6);
|
||||
border-radius: 999px;
|
||||
background: rgba(239, 246, 255, 0.92);
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-favorite-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: fit-content;
|
||||
margin-top: 8px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.42);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 106, 0, 0.18);
|
||||
color: #fff7ed;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.detail-hero-overlay p {
|
||||
margin: 8px 0 0;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-metric,
|
||||
.detail-section {
|
||||
border: 1px solid #edf0f4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.detail-metric {
|
||||
padding: 18px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.detail-metric span {
|
||||
display: block;
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-metric strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #17233d;
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.detail-metric.is-coin strong {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.detail-metric.is-price strong {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.detail-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-section-head h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.detail-section-head span {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.28);
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.detail-info-grid div {
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-info-grid dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid dd {
|
||||
margin: 8px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #17233d;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-resource-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-resource-card span {
|
||||
min-width: 0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card strong {
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.detail-resource-card em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card em b {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.detail-resource-card em small {
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.skin-groups {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skin-group h3 {
|
||||
margin: 0 0 10px;
|
||||
color: #475569;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
margin: 0;
|
||||
color: #52616f;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-screenshot {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-screenshot-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #edf0f4;
|
||||
background: #f8fafc;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.detail-screenshot-image :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-screenshot figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pc-order-card {
|
||||
max-width: none;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.order-card-head h2 {
|
||||
margin: 4px 0 0;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.order-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
padding: 0 10px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 58px;
|
||||
min-height: 28px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #16a34a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-state.is-busy {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.order-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.order-safe-text {
|
||||
margin-bottom: 18px;
|
||||
color: #7a89a5;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-total-box {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 0;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)), #fffbeb;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.order-total-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid rgba(217, 119, 6, 0.14);
|
||||
}
|
||||
|
||||
.order-total-head span {
|
||||
color: #9a5a16;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-total-head strong {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-price-breakdown {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.order-price-breakdown div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.order-price-breakdown span,
|
||||
.order-deposit-row span {
|
||||
color: #8a5a12;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-price-breakdown strong,
|
||||
.order-deposit-row strong {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.order-deposit-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(217, 119, 6, 0.14);
|
||||
}
|
||||
|
||||
.order-deposit-row strong {
|
||||
color: #92400e;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.order-check-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.order-check-list div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-height: 44px;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.order-check-list dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-check-list dd {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order-action-group {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.order-primary-btn {
|
||||
min-height: 48px;
|
||||
border: 0;
|
||||
background: #ff8a00;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 12px 24px rgba(255, 106, 0, 0.24);
|
||||
}
|
||||
|
||||
.order-primary-btn:hover,
|
||||
.order-primary-btn:focus {
|
||||
background: #ff7a00;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.order-primary-btn.is-disabled,
|
||||
.order-primary-btn.is-disabled:hover {
|
||||
background: #f3a94a;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.favorite-order-btn {
|
||||
min-height: 46px;
|
||||
margin-left: 0;
|
||||
border-color: #ff6a00;
|
||||
background: #ffffff;
|
||||
color: #ff6a00;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.favorite-order-btn:hover,
|
||||
.favorite-order-btn:focus {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.agreement-dialog-body {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-tip {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agreement-panel h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 260px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d8dee9;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
color: #1f2937;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.75;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agreement-read-hint {
|
||||
color: #f97316;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.pc-detail-layout,
|
||||
.detail-screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-hero-card,
|
||||
.detail-hero-card img,
|
||||
.detail-hero-card > span {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -427,6 +427,13 @@ function goBack() {
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>号主备注</h2>
|
||||
</div>
|
||||
<p class="detail-description">{{ listing.description || '号主暂未填写详细说明。' }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="getListingResources(listing).length" class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>额外消耗品</h2>
|
||||
@@ -465,13 +472,6 @@ function goBack() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>号主备注</h2>
|
||||
</div>
|
||||
<p class="detail-description">{{ listing.description || '号主暂未填写详细说明。' }}</p>
|
||||
</section>
|
||||
|
||||
<section v-if="detailScreenshots.length" class="detail-section">
|
||||
<div class="detail-section-head">
|
||||
<h2>账号截图</h2>
|
||||
@@ -627,685 +627,4 @@ function goBack() {
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-back-bar {
|
||||
/* 吸顶固定：始终显示在顶部导航栏（64px）下方，滚动时不跟随页面移走 */
|
||||
position: sticky;
|
||||
top: 78px;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detail-back-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(23, 35, 61, 0.08);
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease,
|
||||
background 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.detail-back-btn:hover {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.12);
|
||||
}
|
||||
|
||||
.pc-detail-layout {
|
||||
grid-template-columns: minmax(0, 1fr) 420px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.pc-detail-main {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-hero-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
background: #111827;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.detail-hero-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-hero-card > span {
|
||||
display: grid;
|
||||
height: 340px;
|
||||
place-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-hero-card::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: '';
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.58)),
|
||||
linear-gradient(90deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.08) 62%);
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
z-index: 1;
|
||||
max-width: 860px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.detail-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detail-tags span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.34);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-code-chip {
|
||||
width: fit-content;
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(147, 197, 253, 0.6);
|
||||
border-radius: 999px;
|
||||
background: rgba(239, 246, 255, 0.92);
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-favorite-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: fit-content;
|
||||
margin-top: 8px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.42);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 106, 0, 0.18);
|
||||
color: #fff7ed;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.detail-hero-overlay p {
|
||||
margin: 8px 0 0;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-metric,
|
||||
.detail-section {
|
||||
border: 1px solid #edf0f4;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.detail-metric {
|
||||
padding: 18px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.detail-metric span {
|
||||
display: block;
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-metric strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: #17233d;
|
||||
font-size: 28px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.detail-metric.is-coin strong {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.detail-metric.is-price strong {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.detail-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail-section-head h2 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.detail-section-head span {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(255, 106, 0, 0.28);
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
.detail-info-grid div {
|
||||
min-width: 0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-info-grid dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-info-grid dd {
|
||||
margin: 8px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: #17233d;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-resource-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px 12px;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.detail-resource-card span {
|
||||
min-width: 0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card strong {
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.detail-resource-card em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.detail-resource-card em b {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.detail-resource-card em small {
|
||||
color: #17233d;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.skin-groups {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.skin-group h3 {
|
||||
margin: 0 0 10px;
|
||||
color: #475569;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
margin: 0;
|
||||
color: #52616f;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.detail-screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-screenshot {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-screenshot-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #edf0f4;
|
||||
background: #f8fafc;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.detail-screenshot-image :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.detail-screenshot figcaption {
|
||||
margin-top: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pc-order-card {
|
||||
max-width: none;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.order-card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.order-card-head h2 {
|
||||
margin: 4px 0 0;
|
||||
color: #17233d;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.order-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
padding: 0 10px;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 58px;
|
||||
min-height: 28px;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #16a34a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-state.is-busy {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.order-form {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.order-safe-text {
|
||||
margin-bottom: 18px;
|
||||
color: #7a89a5;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.order-total-box {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 0;
|
||||
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92)), #fffbeb;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.order-total-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid rgba(217, 119, 6, 0.14);
|
||||
}
|
||||
|
||||
.order-total-head span {
|
||||
color: #9a5a16;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-total-head strong {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-price-breakdown {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.order-price-breakdown div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.order-price-breakdown span,
|
||||
.order-deposit-row span {
|
||||
color: #8a5a12;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-price-breakdown strong,
|
||||
.order-deposit-row strong {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.order-deposit-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(217, 119, 6, 0.14);
|
||||
}
|
||||
|
||||
.order-deposit-row strong {
|
||||
color: #92400e;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.order-check-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.order-check-list div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-height: 44px;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.order-check-list dt {
|
||||
color: #8b9cb5;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.order-check-list dd {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
text-align: right;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.full-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.order-action-group {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.order-primary-btn {
|
||||
min-height: 48px;
|
||||
border: 0;
|
||||
background: #ff8a00;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 12px 24px rgba(255, 106, 0, 0.24);
|
||||
}
|
||||
|
||||
.order-primary-btn:hover,
|
||||
.order-primary-btn:focus {
|
||||
background: #ff7a00;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.order-primary-btn.is-disabled,
|
||||
.order-primary-btn.is-disabled:hover {
|
||||
background: #f3a94a;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.favorite-order-btn {
|
||||
min-height: 46px;
|
||||
margin-left: 0;
|
||||
border-color: #ff6a00;
|
||||
background: #ffffff;
|
||||
color: #ff6a00;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.favorite-order-btn:hover,
|
||||
.favorite-order-btn:focus {
|
||||
border-color: #ff6a00;
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.agreement-dialog-body {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-tip {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agreement-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agreement-panel h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 260px;
|
||||
overflow: auto;
|
||||
border: 1px solid #d8dee9;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 14px;
|
||||
color: #1f2937;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.75;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agreement-read-hint {
|
||||
color: #f97316;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.pc-detail-layout,
|
||||
.detail-screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.detail-hero-card,
|
||||
.detail-hero-card img,
|
||||
.detail-hero-card > span {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.detail-hero-overlay h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.detail-summary-row,
|
||||
.detail-info-grid,
|
||||
.detail-resource-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agreement-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./ListingDetailView.css"></style>
|
||||
|
||||
@@ -104,14 +104,13 @@ const zoneOptions = [
|
||||
{ key: 'all', label: '全部', hint: '当前可租' },
|
||||
{ key: 'sale', label: '特惠', hint: '价格更划算' },
|
||||
{ key: 'gift', label: '赠送', hint: '含赠送物品' },
|
||||
{ key: 'night', label: '夜间', hint: '0-8点可上号' },
|
||||
{ key: 'night', label: '夜间', hint: '0-2点可响应上号' },
|
||||
{ key: 'password', label: '账密', hint: '交接更快' },
|
||||
{ key: 'highCoin', label: '高币', hint: '100M以上' },
|
||||
]
|
||||
|
||||
const rangePresets: Record<string, Array<{ label: string; min: string; max: string }>> = {
|
||||
price: [
|
||||
{ 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: '' },
|
||||
@@ -123,8 +122,6 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
|
||||
{ label: '500以上', min: '500', max: '' },
|
||||
],
|
||||
ratio: [
|
||||
{ label: '0-20', min: '0', max: '20' },
|
||||
{ label: '20-30', min: '20', max: '30' },
|
||||
{ label: '30-40', min: '30', max: '40' },
|
||||
{ label: '40以上', min: '40', max: '' },
|
||||
],
|
||||
@@ -147,7 +144,6 @@ const rangePresets: Record<string, Array<{ label: string; min: string; max: stri
|
||||
{ label: '70以上', min: '70', max: '' },
|
||||
],
|
||||
resource_awmAmmo: [
|
||||
{ label: '0-20', min: '0', max: '20' },
|
||||
{ label: '20-50', min: '20', max: '50' },
|
||||
{ label: '50-100', min: '50', max: '100' },
|
||||
{ label: '100-200', min: '100', max: '200' },
|
||||
|
||||
@@ -0,0 +1,485 @@
|
||||
.mobile-detail {
|
||||
min-height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ========== 顶部导航 ========== */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.favorite-header-btn {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.favorite-header-btn {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.center-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #fff8e1;
|
||||
font-size: 11px;
|
||||
color: #e65100;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ========== 封面图 ========== */
|
||||
.cover-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #e8e8e8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.cover-img :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cover-count {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ========== 信息卡片 ========== */
|
||||
.info-card {
|
||||
margin: 10px 12px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.info-tag-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mobile-code-chip {
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-favorite-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 6px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ========== 资产指标 ========== */
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px 4px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value.coin {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.metric-value.price {
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
/* ========== 账号资料 ========== */
|
||||
.info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========== 截图列表 ========== */
|
||||
.card-subtitle {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
border: 1px solid #ff8a1f;
|
||||
border-radius: 5px;
|
||||
color: #ff7900;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.resource-pill {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #f7f9fc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.resource-pill span {
|
||||
min-width: 0;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.resource-pill strong {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.resource-pill em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-pill em b {
|
||||
color: #ff7900;
|
||||
}
|
||||
|
||||
.resource-pill em small {
|
||||
min-width: 0;
|
||||
color: #17233d;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skin-detail-group + .skin-detail-group {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.skin-detail-group p {
|
||||
margin: 0 0 8px;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.screenshot-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.screenshot-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.screenshot-thumb :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.screenshot-item figcaption {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 底部留白 ========== */
|
||||
.bottom-spacer {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ========== 底部下单栏 ========== */
|
||||
.order-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.order-bar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
.order-price-detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
color: #8a5a12;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #ff6a00 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.agreement-popup {
|
||||
max-height: 92vh;
|
||||
}
|
||||
|
||||
.agreement-popup-body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
max-height: 92vh;
|
||||
overflow: auto;
|
||||
padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.agreement-popup-body h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.agreement-popup-body > p {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agreement-panel {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agreement-panel > strong {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 190px;
|
||||
overflow: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 12px;
|
||||
color: #1f2937;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agreement-read-hint {
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.agreement-confirm-btn {
|
||||
margin-top: 4px;
|
||||
background: #ff6a00 !important;
|
||||
border: none !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 80px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -415,6 +415,11 @@ function handleToggleFavorite() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listing.description" class="info-card">
|
||||
<h3 class="card-subtitle">号主备注</h3>
|
||||
<p class="detail-desc">{{ listing.description }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="getListingResources(listing).length" class="info-card">
|
||||
<h3 class="card-subtitle">额外消耗品</h3>
|
||||
<div class="resource-grid">
|
||||
@@ -445,11 +450,6 @@ function handleToggleFavorite() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="listing.description" class="info-card">
|
||||
<h3 class="card-subtitle">备注</h3>
|
||||
<p class="detail-desc">{{ listing.description }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 截图列表 -->
|
||||
<div v-if="detailScreenshots.length" class="info-card">
|
||||
<h3 class="card-subtitle">账号截图</h3>
|
||||
@@ -570,490 +570,4 @@ function handleToggleFavorite() {
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-detail {
|
||||
min-height: 100dvh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ========== 顶部导航 ========== */
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.favorite-header-btn {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
place-items: center;
|
||||
border: none;
|
||||
background: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.favorite-header-btn {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
.center-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
/* ========== 防骗提示 ========== */
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: #fff8e1;
|
||||
font-size: 11px;
|
||||
color: #e65100;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ========== 封面图 ========== */
|
||||
.cover-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #e8e8e8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.cover-img :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cover-count {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ========== 信息卡片 ========== */
|
||||
.info-card {
|
||||
margin: 10px 12px;
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.info-tag-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mobile-code-chip {
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid #dbeafe;
|
||||
border-radius: 999px;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.mobile-favorite-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 6px;
|
||||
margin-bottom: 8px;
|
||||
padding: 4px 9px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 999px;
|
||||
background: #fff7ed;
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ========== 资产指标 ========== */
|
||||
.metric-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px 4px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
color: #1a1a1a;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-value.coin {
|
||||
color: #1477ff;
|
||||
}
|
||||
|
||||
.metric-value.price {
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
/* ========== 账号资料 ========== */
|
||||
.info-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========== 截图列表 ========== */
|
||||
.card-subtitle {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.detail-chip-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
border: 1px solid #ff8a1f;
|
||||
border-radius: 5px;
|
||||
color: #ff7900;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.resource-pill {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
border-radius: 8px;
|
||||
background: #f7f9fc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.resource-pill span {
|
||||
min-width: 0;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.resource-pill strong {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.resource-pill em {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
grid-column: 1 / -1;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.resource-pill em b {
|
||||
color: #ff7900;
|
||||
}
|
||||
|
||||
.resource-pill em small {
|
||||
min-width: 0;
|
||||
color: #17233d;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.skin-detail-group + .skin-detail-group {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.skin-detail-group p {
|
||||
margin: 0 0 8px;
|
||||
color: #5f6b7a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.screenshot-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.screenshot-thumb {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.screenshot-thumb :deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.screenshot-item figcaption {
|
||||
margin-top: 4px;
|
||||
color: #6b7280;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 底部留白 ========== */
|
||||
.bottom-spacer {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ========== 底部下单栏 ========== */
|
||||
.order-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.order-bar-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.order-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
color: #ff5f00;
|
||||
}
|
||||
|
||||
.order-price-detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
color: #8a5a12;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #ff6a00 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.agreement-popup {
|
||||
max-height: 92vh;
|
||||
}
|
||||
|
||||
.agreement-popup-body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
max-height: 92vh;
|
||||
overflow: auto;
|
||||
padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.agreement-popup-body h3 {
|
||||
margin: 0;
|
||||
color: #17233d;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.agreement-popup-body > p {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.agreement-panel {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agreement-panel > strong {
|
||||
color: #17233d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
height: 190px;
|
||||
overflow: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
padding: 12px;
|
||||
color: #1f2937;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.agreement-read-hint {
|
||||
color: #ff6a00;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.agreement-confirm-btn {
|
||||
margin-top: 4px;
|
||||
background: #ff6a00 !important;
|
||||
border: none !important;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 80px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<style scoped src="./MobileListingDetailView.css"></style>
|
||||
|
||||
Reference in New Issue
Block a user