优化展示页 UI：未成年人提示与公告滚动、压缩页脚，统一大锤商行品牌
This commit is contained in:
yml2213
+209
-82
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user