- 编号
- {code}
+ {item.title || `纯币${formatCoin(item)}资源号`}
+ {code}
} size="small" type="text" onClick={() => onCopy(item)}>
{copied ? "已复制" : ""}
@@ -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,