From b82d7c4d1d2d77d793248f13d9055f5d120a6171 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Mon, 13 Jul 2026 23:17:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E7=A4=BA=E9=A1=B5?= =?UTF-8?q?=20UI=EF=BC=9A=E6=9C=AA=E6=88=90=E5=B9=B4=E4=BA=BA=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E4=B8=8E=E5=85=AC=E5=91=8A=E6=BB=9A=E5=8A=A8=E3=80=81?= =?UTF-8?q?=E5=8E=8B=E7=BC=A9=E9=A1=B5=E8=84=9A=EF=BC=8C=E7=BB=9F=E4=B8=80?= =?UTF-8?q?=E5=A4=A7=E9=94=A4=E5=95=86=E8=A1=8C=E5=93=81=E7=89=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/App.tsx | 71 +++++++----- src/styles.css | 291 +++++++++++++++++++++++++++++++++++-------------- 3 files changed, 255 insertions(+), 109 deletions(-) diff --git a/index.html b/index.html index 323aa64..91a469c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - 哈夫币账号展示 + 大锤商行
diff --git a/src/App.tsx b/src/App.tsx index f774191..cf923ca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,6 @@ import CopyOutlined from "@ant-design/icons/es/icons/CopyOutlined"; import DownOutlined from "@ant-design/icons/es/icons/DownOutlined"; import ReloadOutlined from "@ant-design/icons/es/icons/ReloadOutlined"; 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 Button from "antd/es/button"; import ConfigProvider from "antd/es/config-provider"; @@ -119,7 +118,7 @@ export default function App() { banners[0] || { - eyebrow: "三角洲行动账号专区", - title: "高哈夫币账号实时展示", + eyebrow: "大锤商行 · 资源号租赁", + title: "哈夫币资源号实时租赁", badge: "24H", pill: "安全交易 · 诚信服务 · 专业保障", - tone: "green", + tone: "orange", }, [banners] ); @@ -301,7 +300,7 @@ function Showcase() { 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; @@ -310,34 +309,34 @@ function Showcase() {
- - - + 锤
- 星逸电竞 - 哈夫币账号展示 + 大锤商行 + 哈夫租号
- 安全交易 · 极速发货 + 已实名认证 · 安全交易
-
禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。
+
+
+ 禁止未成年人租号、购买游戏账号，严禁任何用户向未成年人出租、出售账号。 + +
+
- {topBanner.eyebrow || "三角洲行动账号专区"} - {topBanner.title || "高哈夫币账号实时展示"} + {topBanner.eyebrow || "大锤商行 · 资源号租赁"} + {topBanner.title || "哈夫币资源号实时租赁"}
- {topBanner.badge || "HOT"} + {topBanner.badge || "HOT"}

{topBanner.pill || "安全交易 · 诚信服务 · 专业保障"}

@@ -351,7 +350,17 @@ function Showcase() { /> - {announcements[0] ?
{announcements[0]}
: null} + {announcements.length ? ( +
+ 公告 +
+
+ {announcements.join("　｜　")} + +
+
+
+ ) : null}
筛选条件
@@ -527,9 +536,19 @@ function Showcase() {
- 星逸电竞 - 安全交易 · 诚信服务 · 专业保障 - 备案信息以实际站点公示为准 +
+ 大锤商行 + + 版权所有 ©2026 大锤网络游戏有限公司 + + + 湘ICP备2025146668号 + +
); @@ -598,8 +617,8 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) {
- 编号 - {code} + {item.title || `纯币${formatCoin(item)}资源号`} + {code} @@ -639,7 +658,7 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) { 合计 ￥{totalPrice.toFixed(2)} - +
diff --git a/src/styles.css b/src/styles.css index beee04e..7d8fb37 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,6 +1,13 @@ :root { + --brand: #ff6b00; + --brand-dark: #e85d00; + --brand-soft: #fff3e8; + --brand-line: #ffd7b5; + --page-bg: #f4f6f8; + --text-main: #172033; + --text-muted: #718096; 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-synthesis: none; text-rendering: optimizeLegibility; @@ -14,7 +21,7 @@ body { margin: 0; min-width: 320px; - background: #eef3f3; + background: var(--page-bg); } a { @@ -29,18 +36,18 @@ input { .show-page { min-height: 100vh; - background: - linear-gradient(90deg, rgba(0, 216, 160, 0.12), transparent 13%, transparent 87%, rgba(0, 216, 160, 0.12)), - #f4f6f7; + background: var(--page-bg); } .site-header { position: sticky; top: 0; z-index: 20; - background: #121e24; - color: #eefcf8; - box-shadow: 0 8px 20px rgba(13, 29, 34, 0.18); + background: rgba(255, 255, 255, 0.96); + color: var(--text-main); + border-bottom: 1px solid #e9edf3; + box-shadow: 0 8px 24px rgba(21, 32, 43, 0.06); + backdrop-filter: blur(10px); } .nav-inner { @@ -73,14 +80,16 @@ input { } .brand-mark { - width: 34px; - height: 34px; + width: 42px; + height: 42px; border-radius: 8px; display: grid; place-items: center; - color: #00d7a0; - background: rgba(0, 215, 160, 0.12); + color: #fff; + background: linear-gradient(135deg, #ff8b2f, var(--brand)); font-size: 22px; + font-weight: 900; + box-shadow: 0 8px 18px rgba(255, 107, 0, 0.24); } .brand > div { @@ -90,7 +99,7 @@ input { } .brand strong { - font-size: 23px; + font-size: 22px; font-weight: 900; letter-spacing: 0; white-space: nowrap; @@ -98,7 +107,7 @@ input { .brand span:not(.brand-mark) { margin-top: 3px; - color: #8ea3a5; + color: var(--text-muted); font-size: 12px; white-space: nowrap; } @@ -106,25 +115,31 @@ input { .nav-links { display: flex; align-items: center; - gap: 34px; + gap: 12px; min-width: 0; } .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-weight: 800; white-space: nowrap; } .nav-links a.active { - color: #00d7a0; + color: var(--brand); + background: var(--brand-soft); } .nav-actions { justify-content: flex-end; gap: 16px; - color: #9fb1b2; + color: #64748b; font-size: 13px; white-space: nowrap; } @@ -132,18 +147,24 @@ input { .nav-actions .ant-btn { min-width: 112px; font-weight: 800; + box-shadow: 0 8px 18px rgba(255, 107, 0, 0.18); } .warning-line { - height: 22px; + height: 28px; display: flex; align-items: center; - color: #f0b845; - background: rgba(0, 215, 160, 0.12); - font-size: 13px; - white-space: nowrap; 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, @@ -163,18 +184,21 @@ input { grid-template-columns: 1fr max-content max-content; align-items: center; gap: 18px; - color: #f7fffc; + color: var(--text-main); background: - linear-gradient(90deg, rgba(18, 30, 36, 0.94), rgba(19, 44, 48, 0.82)), - linear-gradient(135deg, #17282f, #285a4d); + linear-gradient(90deg, rgba(255, 248, 241, 0.98), rgba(255, 241, 225, 0.9)), + linear-gradient(135deg, #fff, #fff1e3); background-size: cover; 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 { display: block; - color: #9bead6; + color: var(--brand); font-size: 12px; font-weight: 700; } @@ -182,13 +206,13 @@ input { .hero-strip strong { display: block; margin-top: 3px; - font-size: 20px; + font-size: 22px; letter-spacing: 0; } .hero-strip p { margin: 0; - color: #b8c7c8; + color: #7a5a43; font-size: 13px; white-space: nowrap; } @@ -209,26 +233,85 @@ input { .search-stage .ant-btn { width: 48px; - background: #070a0c; - border-color: #070a0c; + background: var(--brand); + border-color: var(--brand); } .notice-line { width: min(1480px, calc(100% - 160px)); - height: 30px; - margin: -12px auto 10px; - color: #d49312; - font-size: 13px; + height: 34px; + margin: -8px auto 12px; + padding: 0 12px 0 10px; display: flex; 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, .result-area { background: #fff; - border: 1px solid #e6ecef; - border-radius: 8px; - box-shadow: 0 1px 8px rgba(13, 39, 45, 0.06); + border: 1px solid #e8edf3; + border-radius: 14px; + box-shadow: 0 8px 24px rgba(21, 32, 43, 0.05); } .filter-board { @@ -237,7 +320,7 @@ input { .section-title { margin-bottom: 12px; - color: #243338; + color: var(--text-main); font-size: 14px; font-weight: 900; } @@ -261,7 +344,7 @@ input { min-height: 26px; display: inline-flex; align-items: center; - color: #2e3c42; + color: #344054; font-size: 13px; font-weight: 900; white-space: nowrap; @@ -278,9 +361,9 @@ input { min-width: 42px; height: 26px; padding: 0 10px; - border: 1px solid #e5eaee; + border: 1px solid #e6ebf2; border-radius: 4px; - background: #f6f8fa; + background: #f7f9fc; color: #647179; font-size: 12px; font-weight: 700; @@ -288,9 +371,9 @@ input { } .chip-list button.selected { - border-color: #00d7a0; - color: #007e61; - background: #eafff8; + border-color: var(--brand); + color: var(--brand-dark); + background: var(--brand-soft); } .compact-select .ant-select { @@ -358,9 +441,9 @@ input { } .sort-buttons .ant-btn.active { - color: #00a77d; - background: #f0fffa; - border-color: #00d7a0; + color: var(--brand-dark); + background: var(--brand-soft); + border-color: var(--brand); } .toolbar-actions { @@ -385,9 +468,9 @@ input { gap: 22px; padding: 18px; background: #fff; - border: 1px solid #e3e9ed; - border-radius: 7px; - box-shadow: 0 2px 8px rgba(13, 39, 45, 0.07); + border: 1px solid #e7edf5; + border-radius: 14px; + box-shadow: 0 6px 20px rgba(21, 32, 43, 0.05); } .listing-cover { @@ -400,8 +483,8 @@ input { place-items: center; color: #718086; background: - linear-gradient(135deg, rgba(0, 215, 160, 0.18), transparent), - #dce5e8; + linear-gradient(135deg, rgba(255, 107, 0, 0.14), transparent), + #e8edf3; font-weight: 800; } @@ -435,7 +518,7 @@ input { .listing-head strong { min-width: 0; color: #29383e; - font-size: 15px; + font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -494,15 +577,15 @@ input { } .tag-green { - color: #0b8b5f; - background: #eefbf6; - border-color: #c7efe0; + color: var(--brand-dark); + background: var(--brand-soft); + border-color: var(--brand-line); } .tag-red { - color: #df5061; - background: #fff1f3; - border-color: #ffd3da; + color: #d9480f; + background: #fff4ed; + border-color: #ffd8bd; } .tag-purple { @@ -512,9 +595,9 @@ input { } .tag-gold { - color: #b07600; - background: #fff8df; - border-color: #ffe7a2; + color: var(--brand-dark); + background: #fff8ed; + border-color: var(--brand-line); } .remark { @@ -541,17 +624,21 @@ input { .price-line strong { margin-left: 7px; - color: #ff5b66; + color: var(--brand); font-weight: 900; } .price-line .ant-btn { margin-left: auto; - padding-right: 0; - color: #023f34; 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 { padding: 80px 0; } @@ -562,25 +649,46 @@ input { } .site-footer { - min-height: 170px; - margin-top: 14px; - flex-direction: column; + margin-top: 20px; + padding: 16px 20px; justify-content: center; - gap: 16px; - color: #c7d2d4; - background: #121e24; + color: #8a94a6; + background: #fafbfc; + 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 { - color: #fff; - font-size: 28px; - font-weight: 900; + color: #4a5568; + font-size: 13px; + font-weight: 800; } .site-footer span, -.site-footer small { - color: #7f9194; - font-weight: 700; +.site-footer a { + color: #8a94a6; + font-weight: 600; +} + +.footer-divider { + margin: 0 6px; + color: #c5ccd6; + font-weight: 400; +} + +.site-footer a:hover { + color: var(--brand); } @media (max-width: 1280px) { @@ -655,8 +763,27 @@ input { } @media (max-width: 680px) { - .warning-line { - padding: 0 12px; + .footer-inner { + 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,