/* 首页排版预览：只重排 home-v2 版式，不改 index.html 功能结构 */
body.home-v2 {
--bg: #f4f6fa;
--card: #ffffff;
--border: #e7eaf0;
--border-strong: #d8dde6;
--text: #151a22;
--text-dim: #5b6472;
--text-faint: #8b94a4;
--primary: #f0a118;
--primary-hover: #dd8d0d;
--primary-deep: #a8640a;
--primary-soft: rgba(240, 161, 24, 0.14);
--shadow: 0 16px 40px rgba(17, 24, 39, 0.10);
--radius: 16px;
--hv-accent: #f0a118;
--hv-accent-deep: #a8640a;
--hv-accent-soft: rgba(240, 161, 24, 0.14);
--hv-accent-border: rgba(240, 161, 24, 0.40);
--hv-accent-focus: rgba(240, 161, 24, 0.65);
background:
radial-gradient(1000px 480px at 12% -8%, rgba(240, 161, 24, 0.09), transparent 60%),
radial-gradient(900px 460px at 92% -6%, rgba(37, 99, 235, 0.05), transparent 55%),
var(--bg);
}
.home-v2 .container { max-width: 1240px; }
/* 顶部通知栏 */
.home-v2 .site-notice {
background: #151a22;
border-bottom: none;
}
.home-v2 .notice-inner {
min-height: 38px;
justify-content: center;
color: #eef1f6;
}
.home-v2 .notice-icon { color: #f0a118; }
.home-v2 .notice-text { flex: none; }
.home-v2 .notice-cta {
color: #f0a118;
text-decoration: none;
padding: 3px 10px;
border: 1px solid rgba(240, 161, 24, 0.5);
border-radius: 999px;
font-size: 12px;
}
.home-v2 .notice-cta:hover { background: rgba(240, 161, 24, 0.12); color: #ffc14d; }
.home-v2 .notice-close { color: #8b94a4; }
.home-v2 .notice-close:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
/* 顶部导航 */
.home-v2 .site-header {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.home-v2 .header-inner { min-height: 72px; gap: 16px; }
.home-v2 .brand-logo { width: 42px; height: 42px; }
.home-v2 .brand-text { font-size: 17px; }
.home-v2 .search-wrap { flex: 1 1 380px; min-width: 220px; }
.home-v2 .search-input {
height: 44px;
padding: 10px 16px 10px 40px;
border-radius: 12px;
background: #f7f8fb;
border: 1px solid var(--border-strong);
}
.home-v2 .search-input:focus { border-color: var(--hv-accent-focus); background: #fff; }
.home-v2 .global-select {
height: 44px;
background-color: #fff;
border-color: var(--border-strong);
border-radius: 12px;
}
.home-v2 .header-actions { gap: 8px; }
.home-v2 .header-actions .btn { padding: 10px 14px; border-radius: 11px; }
.home-v2 .btn-ghost { background: #fff; border-color: var(--border-strong); color: #374151; }
.home-v2 .btn-ghost:hover { background: #f7f8fb; }
.home-v2 .btn-wallet {
background: #fff7ed;
border-color: #fbd9ae;
color: var(--hv-accent-deep);
border-radius: 11px;
}
.home-v2 .btn-wallet:hover { background: #fff1df; }
.home-v2 .invite-icon-btn { min-width: 46px; }
/* 精选入口条 */
.home-v2 .showcase {
margin-top: 22px;
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 16px 16px;
background: #fff;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.home-v2 .showcase-head {
color: var(--hv-accent-deep);
font-weight: 800;
letter-spacing: 0.2px;
padding: 0 2px 10px;
font-size: 14px;
}
.home-v2 .showcase-track { gap: 12px; }
.home-v2 .showcase-item {
min-width: 244px;
background: #fafbfd;
border: 1px solid var(--border);
border-radius: 12px;
padding: 11px 13px;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-v2 .showcase-item:hover {
transform: translateY(-2px);
border-color: var(--hv-accent-border);
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}
.home-v2 .showcase-price { color: var(--hv-accent-deep); }
/* 分类 chips 与统计 */
.home-v2 .toolbar { margin: 26px 0 18px; }
.home-v2 .chip {
background: #fff;
border-color: var(--border-strong);
color: #4b5563;
font-weight: 600;
border-radius: 11px;
padding: 9px 16px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.home-v2 .chip:hover { color: var(--text); border-color: var(--hv-accent-border); background: var(--hv-accent-soft); }
.home-v2 .chip.active {
background: #151a22;
border-color: #151a22;
color: #fff;
}
.home-v2 .count { font-size: 13px; color: var(--text-dim); }
/* 商品网格与卡片 */
.home-v2 .grid {
grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
gap: 18px;
}
.home-v2 .card {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.home-v2 .card:hover {
transform: translateY(-4px);
border-color: var(--hv-accent-border);
box-shadow: 0 18px 44px rgba(17, 24, 39, 0.12);
}
.home-v2 .thumb-cat { background: rgba(15, 23, 42, 0.55); color: #f4f6f8; }
.home-v2 .card-body { padding: 15px 16px 16px; gap: 11px; }
.home-v2 .card-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.home-v2 .tag { background: #f3f5f8; border-color: #e8ecf2; color: #64748b; }
.home-v2 .tag.multi-seller { color: var(--hv-accent-deep); background: var(--hv-accent-soft); border-color: var(--hv-accent-border); }
.home-v2 .card-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.home-v2 .price { color: var(--hv-accent-deep); font-size: 20px; }
.home-v2 .usd { color: var(--text-faint); }
/* 骨架卡与正式卡保持一致 */
.home-v2 .card-skeleton {
border-radius: 16px;
background: #fff;
border: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.home-v2 .card-skeleton .thumb.skeleton { aspect-ratio: 16 / 10; }
.home-v2 .card-skeleton .card-body { padding: 15px 16px 16px; gap: 12px; }
/* 主按钮与悬浮发布按钮 */
.home-v2 .btn-primary {
background: linear-gradient(135deg, #f6ab2b, #f08c00);
color: #fff;
box-shadow: 0 8px 20px rgba(240, 140, 0, 0.28);
}
.home-v2 .btn-primary:hover { box-shadow: 0 10px 24px rgba(240, 140, 0, 0.36); }
.home-v2 .fab {
background: linear-gradient(135deg, #f6ab2b, #f08c00);
color: #fff;
box-shadow: 0 12px 26px rgba(240, 140, 0, 0.34);
}
.home-v2 .fab:hover { box-shadow: 0 16px 34px rgba(240, 140, 0, 0.42); }
/* 页脚 */
.home-v2 .site-footer {
margin-top: 52px;
padding: 28px 20px 34px;
background: #fff;
border-top: 1px solid var(--border);
}
.home-v2 .site-footer a { color: var(--text-dim); }
.home-v2 .site-footer a:hover { color: var(--hv-accent-deep); }
/* 推荐栏占位骨架 */
.home-v2 .showcase-skeleton { cursor: default; }
.home-v2 .showcase-skeleton:hover { transform: none; border-color: var(--border); box-shadow: none; }
.home-v2 .sk-circle {
width: 36px; height: 36px; flex: none; border-radius: 50%;
background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 37%, #eef1f5 63%);
background-size: 400% 100%; animation: hvShimmer 1.3s infinite;
}
.home-v2 .sk-line {
display: block; width: 150px; height: 11px; border-radius: 6px;
background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 37%, #eef1f5 63%);
background-size: 400% 100%; animation: hvShimmer 1.3s infinite;
}
.home-v2 .sk-line.short { width: 76px; margin-top: 7px; }
@keyframes hvShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* ===== 新增：正常电商首页骨架 ===== */
.home-v2 .hero-v2 {
display: flex; align-items: center; justify-content: space-between; gap: 28px;
margin-top: 22px; padding: 30px 32px; border: 1px solid var(--border);
border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(17,24,39,.06);
position: relative; overflow: hidden;
}
.home-v2 .hero-v2:before {
content: ""; position: absolute; right: -60px; top: -80px; width: 300px; height: 300px;
border-radius: 50%; background: radial-gradient(circle, rgba(240,161,24,.14), transparent 70%);
}
.home-v2 .hero-v2:after {
content: ""; position: absolute; left: -80px; bottom: -140px; width: 320px; height: 320px;
border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.08), transparent 70%);
}
.home-v2 .hero-copy { position: relative; z-index: 1; max-width: 620px; }
.home-v2 .hero-kicker {
display: inline-flex; padding: 6px 11px; border-radius: 999px; background: #fff7ed;
border: 1px solid #fbd9ae; color: var(--hv-accent-deep); font-size: 12px; font-weight: 700;
}
.home-v2 .hero-title { margin-top: 14px; font-size: 34px; line-height: 1.18; font-weight: 900; letter-spacing: -1px; }
.home-v2 .hero-copy p { margin-top: 12px; max-width: 560px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.home-v2 .hero-actions { display: flex; gap: 10px; margin-top: 22px; }
.home-v2 .hero-badges { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 10px; flex: none; width: 240px; }
.home-v2 .hero-badge {
padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px;
background: rgba(255,255,255,.86); box-shadow: 0 2px 8px rgba(17,24,39,.04);
}
.home-v2 .hero-badge b { display: block; font-size: 20px; font-weight: 900; color: var(--text); }
.home-v2 .hero-badge span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-dim); }
/* 页脚完善 */
.home-v2 .site-footer {
margin-top: 46px; padding: 34px 20px 22px; background: #151a22; border-top: none; color: #9aa3b1;
}
.home-v2 .footer-main {
max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px;
}
.home-v2 .footer-brand p { margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: #8e98a6; max-width: 340px; }
.home-v2 .footer-logo { display: flex; align-items: center; gap: 10px; }
.home-v2 .footer-logo .brand-logo { width: 38px; height: 38px; }
.home-v2 .footer-brand-text { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.15; }
.home-v2 .footer-brand-text small { display: block; font-size: 11px; color: #8e98a6; font-weight: 500; }
.home-v2 .footer-col { display: flex; flex-direction: column; gap: 9px; }
.home-v2 .footer-col h4 { color: #eef1f6; font-size: 13px; margin-bottom: 3px; }
.home-v2 .footer-col a { color: #9aa3b1; font-size: 12.5px; }
.home-v2 .footer-col a:hover { color: #f0a118; }
.home-v2 .footer-bottom {
max-width: 1240px; margin: 26px auto 0; padding-top: 14px; border-top: 1px solid #262e3a;
display: flex; align-items: center; gap: 18px; font-size: 11.5px; color: #6f7885;
}
.home-v2 .footer-bottom a { color: #9aa3b1; }
.home-v2 .footer-bottom a:hover { color: #f0a118; }
/* ===== 商品列表面板：让中间商品区不再零散 ===== */
.home-v2 .market-panel {
margin-top: 18px; border: 1px solid var(--border); border-radius: 18px;
background: #fff; box-shadow: 0 10px 30px rgba(17,24,39,.05); overflow: hidden;
}
.home-v2 .market-panel .toolbar {
margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); border-radius: 0;
}
.home-v2 .market-panel #subCats {
margin: 0; padding: 0 16px 10px; background: #fff; border-bottom: 1px solid var(--border);
}
.home-v2 .market-panel .grid {
margin: 0; padding: 16px; border: none; border-radius: 0; background: #fff;
}
/* 商品骨架卡更像真实商品卡 */
.home-v2 .card-skeleton .card-body { display: flex; flex-direction: column; gap: 10px; }
.home-v2 .sk-line.title { width: 82%; height: 13px; margin: 0; }
.home-v2 .sk-tags { display: flex; gap: 6px; margin-top: 2px; }
.home-v2 .sk-tag {
width: 54px; height: 18px; border-radius: 999px; flex: none;
background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 37%, #eef1f5 63%);
background-size: 400% 100%; animation: hvShimmer 1.3s infinite;
}
.home-v2 .sk-tag.short { width: 34px; }
.home-v2 .sk-meta {
margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.home-v2 .sk-price {
width: 70px; height: 16px; border-radius: 5px;
background: linear-gradient(90deg, #eef1f5 25%, #f8fafc 37%, #eef1f5 63%);
background-size: 400% 100%; animation: hvShimmer 1.3s infinite;
}
.home-v2 .sk-line.seller { width: 76px; height: 10px; margin: 0; }
/* 搜索栏移到商品区上方 */
.home-v2 .market-search {
display: flex; align-items: center; gap: 12px; margin-top: 14px;
padding: 14px 16px; background: #fff; border: 1px solid var(--border);
border-radius: 16px; box-shadow: 0 8px 24px rgba(17,24,39,.05);
}
.home-v2 .market-search-label {
font-size: 13px; font-weight: 800; color: var(--text); white-space: nowrap;
padding-right: 4px;
}
.home-v2 .market-search .search-wrap {
flex: 1; min-width: 0; position: relative;
}
.home-v2 .market-search .search-wrap svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint);
}
.home-v2 .market-search .search-input {
width: 100%; height: 46px; padding: 10px 16px 10px 42px; border-radius: 12px;
background: #f7f8fb; border: 1px solid var(--border-strong);
}
.home-v2 .market-search .search-input:focus {
border-color: var(--hv-accent-focus); background: #fff; box-shadow: 0 0 0 3px var(--hv-accent-soft);
}
.home-v2 .market-search .global-select {
height: 46px; min-width: 132px; border-radius: 12px; background-color: #fff;
border-color: var(--border-strong);
}