优化展示页 UI：未成年人提示与公告滚动、压缩页脚，统一大锤商行品牌
This commit is contained in:
yml2213
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>哈夫币账号展示</title>
|
<title>大锤商行</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+45
-26
@@ -2,7 +2,6 @@ import CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined";
|
|||||||
import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
|
import DownOutlined from "@ant-design/icons/es/icons/DownOutlined";
|
||||||
import ReloadOutlined from "@ant-design/icons/es/icons/ReloadOutlined";
|
import ReloadOutlined from "@ant-design/icons/es/icons/ReloadOutlined";
|
||||||
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
|
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
|
||||||
import StarFilled from "@ant-design/icons/es/icons/StarFilled";
|
|
||||||
import Alert from "antd/es/alert";
|
import Alert from "antd/es/alert";
|
||||||
import Button from "antd/es/button";
|
import Button from "antd/es/button";
|
||||||
import ConfigProvider from "antd/es/config-provider";
|
import ConfigProvider from "antd/es/config-provider";
|
||||||
@@ -119,7 +118,7 @@ export default function App() {
|
|||||||
<ConfigProvider
|
<ConfigProvider
|
||||||
theme={{
|
theme={{
|
||||||
token: {
|
token: {
|
||||||
colorPrimary: "#00d7a0",
|
colorPrimary: "#ff6b00",
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif',
|
fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif',
|
||||||
},
|
},
|
||||||
@@ -191,11 +190,11 @@ function Showcase() {
|
|||||||
const topBanner = useMemo(
|
const topBanner = useMemo(
|
||||||
() =>
|
() =>
|
||||||
banners[0] || {
|
banners[0] || {
|
||||||
eyebrow: "三角洲行动账号专区",
|
eyebrow: "大锤商行 · 资源号租赁",
|
||||||
title: "高哈夫币账号实时展示",
|
title: "哈夫币资源号实时租赁",
|
||||||
badge: "24H",
|
badge: "24H",
|
||||||
pill: "安全交易 · 诚信服务 · 专业保障",
|
pill: "安全交易 · 诚信服务 · 专业保障",
|
||||||
tone: "green",
|
tone: "orange",
|
||||||
},
|
},
|
||||||
[banners]
|
[banners]
|
||||||
);
|
);
|
||||||
@@ -301,7 +300,7 @@ function Showcase() {
|
|||||||
|
|
||||||
const heroStyle: CSSProperties | undefined = topBanner.image_url
|
const heroStyle: CSSProperties | undefined = topBanner.image_url
|
||||||
? {
|
? {
|
||||||
backgroundImage: `linear-gradient(90deg, rgba(17, 28, 31, .9), rgba(17, 28, 31, .42)), url(${topBanner.image_url})`,
|
backgroundImage: `linear-gradient(90deg, rgba(255, 246, 237, .94), rgba(255, 246, 237, .72)), url(${topBanner.image_url})`,
|
||||||
}
|
}
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
@@ -310,34 +309,34 @@ function Showcase() {
|
|||||||
<header className="site-header">
|
<header className="site-header">
|
||||||
<div className="nav-inner">
|
<div className="nav-inner">
|
||||||
<div className="brand">
|
<div className="brand">
|
||||||
<span className="brand-mark">
|
<span className="brand-mark">锤</span>
|
||||||
<StarFilled />
|
|
||||||
</span>
|
|
||||||
<div>
|
<div>
|
||||||
<strong>星逸电竞</strong>
|
<strong>大锤商行</strong>
|
||||||
<span>哈夫币账号展示</span>
|
<span>哈夫租号</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav className="nav-links">
|
<nav className="nav-links">
|
||||||
<a className="active">资源号租赁</a>
|
<a className="active">资源号租赁</a>
|
||||||
<a>账号交易</a>
|
|
||||||
<a>跑刀代肝</a>
|
|
||||||
<a>租号须知</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div className="nav-actions">
|
<div className="nav-actions">
|
||||||
<span>安全交易 · 极速发货</span>
|
<span>已实名认证 · 安全交易</span>
|
||||||
<Button type="primary">24h在线客服</Button>
|
<Button type="primary">24h在线客服</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="warning-line">禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。</div>
|
<div className="warning-line" role="note" aria-label="未成年人保护提示">
|
||||||
|
<div className="marquee-track">
|
||||||
|
<span>禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。</span>
|
||||||
|
<span aria-hidden="true">禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="hero-strip" style={heroStyle}>
|
<section className="hero-strip" style={heroStyle}>
|
||||||
<div>
|
<div>
|
||||||
<span>{topBanner.eyebrow || "三角洲行动账号专区"}</span>
|
<span>{topBanner.eyebrow || "大锤商行 · 资源号租赁"}</span>
|
||||||
<strong>{topBanner.title || "高哈夫币账号实时展示"}</strong>
|
<strong>{topBanner.title || "哈夫币资源号实时租赁"}</strong>
|
||||||
</div>
|
</div>
|
||||||
<Tag color="success">{topBanner.badge || "HOT"}</Tag>
|
<Tag color="orange">{topBanner.badge || "HOT"}</Tag>
|
||||||
<p>{topBanner.pill || "安全交易 · 诚信服务 · 专业保障"}</p>
|
<p>{topBanner.pill || "安全交易 · 诚信服务 · 专业保障"}</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -351,7 +350,17 @@ function Showcase() {
|
|||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{announcements[0] ? <div className="notice-line">{announcements[0]}</div> : null}
|
{announcements.length ? (
|
||||||
|
<div className="notice-line" role="status" aria-live="polite">
|
||||||
|
<span className="notice-label">公告</span>
|
||||||
|
<div className="notice-marquee">
|
||||||
|
<div className="marquee-track">
|
||||||
|
<span>{announcements.join(" ｜ ")}</span>
|
||||||
|
<span aria-hidden="true">{announcements.join(" ｜ ")}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<section className="filter-board">
|
<section className="filter-board">
|
||||||
<div className="section-title">筛选条件</div>
|
<div className="section-title">筛选条件</div>
|
||||||
@@ -527,9 +536,19 @@ function Showcase() {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer className="site-footer">
|
<footer className="site-footer">
|
||||||
<strong>星逸电竞</strong>
|
<div className="footer-inner">
|
||||||
<span>安全交易 · 诚信服务 · 专业保障</span>
|
<strong>大锤商行</strong>
|
||||||
<small>备案信息以实际站点公示为准</small>
|
<span className="footer-divider" aria-hidden="true">
|
||||||
|
·
|
||||||
|
</span>
|
||||||
|
<span>版权所有 ©2026 大锤网络游戏有限公司</span>
|
||||||
|
<span className="footer-divider" aria-hidden="true">
|
||||||
|
·
|
||||||
|
</span>
|
||||||
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">
|
||||||
|
湘ICP备2025146668号
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
);
|
);
|
||||||
@@ -598,8 +617,8 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) {
|
|||||||
<div className="listing-main">
|
<div className="listing-main">
|
||||||
<div className="listing-head">
|
<div className="listing-head">
|
||||||
<div>
|
<div>
|
||||||
<Tag color="green">编号</Tag>
|
<strong>{item.title || `纯币${formatCoin(item)}资源号`}</strong>
|
||||||
<strong>{code}</strong>
|
<Tag color="orange">{code}</Tag>
|
||||||
<Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopy(item)}>
|
<Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopy(item)}>
|
||||||
{copied ? "已复制" : ""}
|
{copied ? "已复制" : ""}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -639,7 +658,7 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) {
|
|||||||
<span>
|
<span>
|
||||||
合计 <strong>￥{totalPrice.toFixed(2)}</strong>
|
合计 <strong>￥{totalPrice.toFixed(2)}</strong>
|
||||||
</span>
|
</span>
|
||||||
<Button type="link">复制信息</Button>
|
<Button type="primary">立即租用</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|||||||
+209
-82
@@ -1,6 +1,13 @@
|
|||||||
:root {
|
:root {
|
||||||
|
--brand: #ff6b00;
|
||||||
|
--brand-dark: #e85d00;
|
||||||
|
--brand-soft: #fff3e8;
|
||||||
|
--brand-line: #ffd7b5;
|
||||||
|
--page-bg: #f4f6f8;
|
||||||
|
--text-main: #172033;
|
||||||
|
--text-muted: #718096;
|
||||||
color: #253137;
|
color: #253137;
|
||||||
background: #eef3f3;
|
background: var(--page-bg);
|
||||||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
@@ -14,7 +21,7 @@
|
|||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
background: #eef3f3;
|
background: var(--page-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -29,18 +36,18 @@ input {
|
|||||||
|
|
||||||
.show-page {
|
.show-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background:
|
background: var(--page-bg);
|
||||||
linear-gradient(90deg, rgba(0, 216, 160, 0.12), transparent 13%, transparent 87%, rgba(0, 216, 160, 0.12)),
|
|
||||||
#f4f6f7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
background: #121e24;
|
background: rgba(255, 255, 255, 0.96);
|
||||||
color: #eefcf8;
|
color: var(--text-main);
|
||||||
box-shadow: 0 8px 20px rgba(13, 29, 34, 0.18);
|
border-bottom: 1px solid #e9edf3;
|
||||||
|
box-shadow: 0 8px 24px rgba(21, 32, 43, 0.06);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-inner {
|
.nav-inner {
|
||||||
@@ -73,14 +80,16 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.brand-mark {
|
||||||
width: 34px;
|
width: 42px;
|
||||||
height: 34px;
|
height: 42px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
color: #00d7a0;
|
color: #fff;
|
||||||
background: rgba(0, 215, 160, 0.12);
|
background: linear-gradient(135deg, #ff8b2f, var(--brand));
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
font-weight: 900;
|
||||||
|
box-shadow: 0 8px 18px rgba(255, 107, 0, 0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand > div {
|
.brand > div {
|
||||||
@@ -90,7 +99,7 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand strong {
|
.brand strong {
|
||||||
font-size: 23px;
|
font-size: 22px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -98,7 +107,7 @@ input {
|
|||||||
|
|
||||||
.brand span:not(.brand-mark) {
|
.brand span:not(.brand-mark) {
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
color: #8ea3a5;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -106,25 +115,31 @@ input {
|
|||||||
.nav-links {
|
.nav-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 34px;
|
gap: 12px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a {
|
.nav-links a {
|
||||||
color: #f6fffb;
|
min-height: 40px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 18px;
|
||||||
|
border-radius: 9px;
|
||||||
|
color: #435066;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links a.active {
|
.nav-links a.active {
|
||||||
color: #00d7a0;
|
color: var(--brand);
|
||||||
|
background: var(--brand-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-actions {
|
.nav-actions {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
color: #9fb1b2;
|
color: #64748b;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -132,18 +147,24 @@ input {
|
|||||||
.nav-actions .ant-btn {
|
.nav-actions .ant-btn {
|
||||||
min-width: 112px;
|
min-width: 112px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
|
box-shadow: 0 8px 18px rgba(255, 107, 0, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning-line {
|
.warning-line {
|
||||||
height: 22px;
|
height: 28px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #f0b845;
|
|
||||||
background: rgba(0, 215, 160, 0.12);
|
|
||||||
font-size: 13px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
color: #b95600;
|
||||||
|
background: linear-gradient(90deg, #fff4e8, #fff8f0 40%, #fff4e8);
|
||||||
|
border-bottom: 1px solid #ffe0c2;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-line .marquee-track {
|
||||||
|
animation-duration: 28s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-strip,
|
.hero-strip,
|
||||||
@@ -163,18 +184,21 @@ input {
|
|||||||
grid-template-columns: 1fr max-content max-content;
|
grid-template-columns: 1fr max-content max-content;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
color: #f7fffc;
|
color: var(--text-main);
|
||||||
background:
|
background:
|
||||||
linear-gradient(90deg, rgba(18, 30, 36, 0.94), rgba(19, 44, 48, 0.82)),
|
linear-gradient(90deg, rgba(255, 248, 241, 0.98), rgba(255, 241, 225, 0.9)),
|
||||||
linear-gradient(135deg, #17282f, #285a4d);
|
linear-gradient(135deg, #fff, #fff1e3);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
border-bottom: 3px solid rgba(0, 215, 160, 0.28);
|
border: 1px solid var(--brand-line);
|
||||||
|
border-left: 4px solid var(--brand);
|
||||||
|
border-radius: 0 0 14px 14px;
|
||||||
|
box-shadow: 0 10px 26px rgba(255, 107, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-strip span {
|
.hero-strip span {
|
||||||
display: block;
|
display: block;
|
||||||
color: #9bead6;
|
color: var(--brand);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
@@ -182,13 +206,13 @@ input {
|
|||||||
.hero-strip strong {
|
.hero-strip strong {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
font-size: 20px;
|
font-size: 22px;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-strip p {
|
.hero-strip p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #b8c7c8;
|
color: #7a5a43;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -209,26 +233,85 @@ input {
|
|||||||
|
|
||||||
.search-stage .ant-btn {
|
.search-stage .ant-btn {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
background: #070a0c;
|
background: var(--brand);
|
||||||
border-color: #070a0c;
|
border-color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-line {
|
.notice-line {
|
||||||
width: min(1480px, calc(100% - 160px));
|
width: min(1480px, calc(100% - 160px));
|
||||||
height: 30px;
|
height: 34px;
|
||||||
margin: -12px auto 10px;
|
margin: -8px auto 12px;
|
||||||
color: #d49312;
|
padding: 0 12px 0 10px;
|
||||||
font-size: 13px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: #b07a00;
|
||||||
|
background: #fffbf0;
|
||||||
|
border: 1px solid #f3e2b0;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-label {
|
||||||
|
flex: none;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0 8px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(135deg, #f0a202, #e08a00);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-marquee {
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-track {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 48px;
|
||||||
|
width: max-content;
|
||||||
|
white-space: nowrap;
|
||||||
|
will-change: transform;
|
||||||
|
animation: marquee-scroll 22s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marquee-track span {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-marquee:hover .marquee-track {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes marquee-scroll {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(calc(-50% - 24px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.marquee-track {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-board,
|
.filter-board,
|
||||||
.result-area {
|
.result-area {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #e6ecef;
|
border: 1px solid #e8edf3;
|
||||||
border-radius: 8px;
|
border-radius: 14px;
|
||||||
box-shadow: 0 1px 8px rgba(13, 39, 45, 0.06);
|
box-shadow: 0 8px 24px rgba(21, 32, 43, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-board {
|
.filter-board {
|
||||||
@@ -237,7 +320,7 @@ input {
|
|||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
color: #243338;
|
color: var(--text-main);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -261,7 +344,7 @@ input {
|
|||||||
min-height: 26px;
|
min-height: 26px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: #2e3c42;
|
color: #344054;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -278,9 +361,9 @@ input {
|
|||||||
min-width: 42px;
|
min-width: 42px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border: 1px solid #e5eaee;
|
border: 1px solid #e6ebf2;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f6f8fa;
|
background: #f7f9fc;
|
||||||
color: #647179;
|
color: #647179;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
@@ -288,9 +371,9 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chip-list button.selected {
|
.chip-list button.selected {
|
||||||
border-color: #00d7a0;
|
border-color: var(--brand);
|
||||||
color: #007e61;
|
color: var(--brand-dark);
|
||||||
background: #eafff8;
|
background: var(--brand-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact-select .ant-select {
|
.compact-select .ant-select {
|
||||||
@@ -358,9 +441,9 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sort-buttons .ant-btn.active {
|
.sort-buttons .ant-btn.active {
|
||||||
color: #00a77d;
|
color: var(--brand-dark);
|
||||||
background: #f0fffa;
|
background: var(--brand-soft);
|
||||||
border-color: #00d7a0;
|
border-color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-actions {
|
.toolbar-actions {
|
||||||
@@ -385,9 +468,9 @@ input {
|
|||||||
gap: 22px;
|
gap: 22px;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #e3e9ed;
|
border: 1px solid #e7edf5;
|
||||||
border-radius: 7px;
|
border-radius: 14px;
|
||||||
box-shadow: 0 2px 8px rgba(13, 39, 45, 0.07);
|
box-shadow: 0 6px 20px rgba(21, 32, 43, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.listing-cover {
|
.listing-cover {
|
||||||
@@ -400,8 +483,8 @@ input {
|
|||||||
place-items: center;
|
place-items: center;
|
||||||
color: #718086;
|
color: #718086;
|
||||||
background:
|
background:
|
||||||
linear-gradient(135deg, rgba(0, 215, 160, 0.18), transparent),
|
linear-gradient(135deg, rgba(255, 107, 0, 0.14), transparent),
|
||||||
#dce5e8;
|
#e8edf3;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -435,7 +518,7 @@ input {
|
|||||||
.listing-head strong {
|
.listing-head strong {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
color: #29383e;
|
color: #29383e;
|
||||||
font-size: 15px;
|
font-size: 18px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -494,15 +577,15 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tag-green {
|
.tag-green {
|
||||||
color: #0b8b5f;
|
color: var(--brand-dark);
|
||||||
background: #eefbf6;
|
background: var(--brand-soft);
|
||||||
border-color: #c7efe0;
|
border-color: var(--brand-line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-red {
|
.tag-red {
|
||||||
color: #df5061;
|
color: #d9480f;
|
||||||
background: #fff1f3;
|
background: #fff4ed;
|
||||||
border-color: #ffd3da;
|
border-color: #ffd8bd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-purple {
|
.tag-purple {
|
||||||
@@ -512,9 +595,9 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tag-gold {
|
.tag-gold {
|
||||||
color: #b07600;
|
color: var(--brand-dark);
|
||||||
background: #fff8df;
|
background: #fff8ed;
|
||||||
border-color: #ffe7a2;
|
border-color: var(--brand-line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.remark {
|
.remark {
|
||||||
@@ -541,17 +624,21 @@ input {
|
|||||||
|
|
||||||
.price-line strong {
|
.price-line strong {
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
color: #ff5b66;
|
color: var(--brand);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-line .ant-btn {
|
.price-line .ant-btn {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-right: 0;
|
|
||||||
color: #023f34;
|
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.price-line .ant-btn-primary {
|
||||||
|
min-width: 112px;
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 8px 18px rgba(255, 107, 0, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
padding: 80px 0;
|
padding: 80px 0;
|
||||||
}
|
}
|
||||||
@@ -562,25 +649,46 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
min-height: 170px;
|
margin-top: 20px;
|
||||||
margin-top: 14px;
|
padding: 16px 20px;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 16px;
|
color: #8a94a6;
|
||||||
color: #c7d2d4;
|
background: #fafbfc;
|
||||||
background: #121e24;
|
border-top: 1px solid #e9edf3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
|
width: min(1480px, 100%);
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer strong {
|
.site-footer strong {
|
||||||
color: #fff;
|
color: #4a5568;
|
||||||
font-size: 28px;
|
font-size: 13px;
|
||||||
font-weight: 900;
|
font-weight: 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer span,
|
.site-footer span,
|
||||||
.site-footer small {
|
.site-footer a {
|
||||||
color: #7f9194;
|
color: #8a94a6;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-divider {
|
||||||
|
margin: 0 6px;
|
||||||
|
color: #c5ccd6;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer a:hover {
|
||||||
|
color: var(--brand);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1280px) {
|
@media (max-width: 1280px) {
|
||||||
@@ -655,8 +763,27 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 680px) {
|
@media (max-width: 680px) {
|
||||||
.warning-line {
|
.footer-inner {
|
||||||
padding: 0 12px;
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-divider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-line {
|
||||||
|
margin-left: 12px;
|
||||||
|
margin-right: 12px;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-line .marquee-track {
|
||||||
|
animation-duration: 20s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-marquee .marquee-track {
|
||||||
|
animation-duration: 16s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-board,
|
.filter-board,
|
||||||
|
|||||||
Reference in New Issue
Block a user