优化展示页 UI：未成年人提示与公告滚动、压缩页脚，统一大锤商行品牌

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() {
     <ConfigProvider
       theme={{
         token: {
-          colorPrimary: "#00d7a0",
+          colorPrimary: "#ff6b00",
           borderRadius: 5,
           fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif',
         },
@@ -191,11 +190,11 @@ function Showcase() {
   const topBanner = useMemo(
     () =>
       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() {
       <header className="site-header">
         <div className="nav-inner">
           <div className="brand">
-            <span className="brand-mark">
-              <StarFilled />
-            </span>
+            <span className="brand-mark">锤</span>
             <div>
-              <strong>星逸电竞</strong>
-              <span>哈夫币账号展示</span>
+              <strong>大锤商行</strong>
+              <span>哈夫租号</span>
             </div>
           </div>
           <nav className="nav-links">
             <a className="active">资源号租赁</a>
-            <a>账号交易</a>
-            <a>跑刀代肝</a>
-            <a>租号须知</a>
           </nav>
           <div className="nav-actions">
-            <span>安全交易 · 极速发货</span>
+            <span>已实名认证 · 安全交易</span>
             <Button type="primary">24h在线客服</Button>
           </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>
 
       <section className="hero-strip" style={heroStyle}>
         <div>
-          <span>{topBanner.eyebrow || "三角洲行动账号专区"}</span>
-          <strong>{topBanner.title || "高哈夫币账号实时展示"}</strong>
+          <span>{topBanner.eyebrow || "大锤商行 · 资源号租赁"}</span>
+          <strong>{topBanner.title || "哈夫币资源号实时租赁"}</strong>
         </div>
-        <Tag color="success">{topBanner.badge || "HOT"}</Tag>
+        <Tag color="orange">{topBanner.badge || "HOT"}</Tag>
         <p>{topBanner.pill || "安全交易 · 诚信服务 · 专业保障"}</p>
       </section>
 
@@ -351,7 +350,17 @@ function Showcase() {
         />
       </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">
         <div className="section-title">筛选条件</div>
@@ -527,9 +536,19 @@ function Showcase() {
       </section>
 
       <footer className="site-footer">
-        <strong>星逸电竞</strong>
-        <span>安全交易 · 诚信服务 · 专业保障</span>
-        <small>备案信息以实际站点公示为准</small>
+        <div className="footer-inner">
+          <strong>大锤商行</strong>
+          <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>
     </main>
   );
@@ -598,8 +617,8 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) {
       <div className="listing-main">
         <div className="listing-head">
           <div>
-            <Tag color="green">编号</Tag>
-            <strong>{code}</strong>
+            <strong>{item.title || `纯币${formatCoin(item)}资源号`}</strong>
+            <Tag color="orange">{code}</Tag>
             <Button icon={<CopyOutlined />} size="small" type="text" onClick={() => onCopy(item)}>
               {copied ? "已复制" : ""}
             </Button>
@@ -639,7 +658,7 @@ function ListingRow({ copied, item, onCopy }: ListingRowProps) {
           <span>
             合计 <strong>￥{totalPrice.toFixed(2)}</strong>
           </span>
-          <Button type="link">复制信息</Button>
+          <Button type="primary">立即租用</Button>
         </div>
       </div>
     </article>

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,