zuowei/tuhui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: switch storefront theme palette

Browse Source
This commit is contained in:
jimi
2026-03-08 21:02:42 +08:00
parent 045ae62373
commit 15dac7f876
20 changed files with 109 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.css
View File

@@ -30,7 +30,7 @@ body {
} }
.ant-btn-primary:hover { .ant-btn-primary:hover {
background: linear-gradient(135deg, #f07869 0%, #df5545 100%) !important; background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
border-color: transparent !important; border-color: transparent !important;
} }

24
frontend/src/components/AuthModal.css
View File

@@ -21,7 +21,7 @@
} }
.close-icon:hover { .close-icon:hover {
color: #ff5a5a; color: var(--brand);
} }
.auth-modal-content { .auth-modal-content {
@@ -62,7 +62,7 @@
.auth-input:hover, .auth-input:hover,
.auth-input:focus, .auth-input:focus,
.auth-input.ant-input-affix-wrapper-focused { .auth-input.ant-input-affix-wrapper-focused {
border-color: #ff5a5a; border-color: var(--brand);
box-shadow: 0 0 0 2px rgba(255, 90, 90, 0.1); box-shadow: 0 0 0 2px rgba(255, 90, 90, 0.1);
} }
@@ -82,12 +82,12 @@
} }
.form-options .ant-checkbox-checked .ant-checkbox-inner { .form-options .ant-checkbox-checked .ant-checkbox-inner {
background-color: #ff5a5a; background-color: var(--brand);
border-color: #ff5a5a; border-color: var(--brand);
} }
.forgot-link { .forgot-link {
color: #ff5a5a; color: var(--brand);
font-size: 14px; font-size: 14px;
} }
@@ -100,7 +100,7 @@
border-radius: 24px; border-radius: 24px;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
background: linear-gradient(135deg, #ff5a5a 0%, #ff8080 100%); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
border: none; border: none;
box-shadow: 0 4px 12px rgba(255, 90, 90, 0.3); box-shadow: 0 4px 12px rgba(255, 90, 90, 0.3);
transition: all 0.3s; transition: all 0.3s;
@@ -179,7 +179,7 @@
} }
.switch-link { .switch-link {
color: #ff5a5a; color: var(--brand);
font-weight: 500; font-weight: 500;
margin-left: 4px; margin-left: 4px;
cursor: pointer; cursor: pointer;
@@ -205,8 +205,8 @@
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
padding: 0 16px; padding: 0 16px;
border-color: #ff5a5a; border-color: var(--brand);
color: #ff5a5a; color: var(--brand);
} }
.verify-btn:hover:not(:disabled) { .verify-btn:hover:not(:disabled) {
@@ -226,7 +226,7 @@
} }
.agreement-checkbox a { .agreement-checkbox a {
color: #ff5a5a; color: var(--brand);
} }
.agreement-checkbox a:hover { .agreement-checkbox a:hover {
@@ -234,8 +234,8 @@
} }
.agreement-checkbox .ant-checkbox-checked .ant-checkbox-inner { .agreement-checkbox .ant-checkbox-checked .ant-checkbox-inner {
background-color: #ff5a5a; background-color: var(--brand);
border-color: #ff5a5a; border-color: var(--brand);
} }
/* Animation */ /* Animation */

8
frontend/src/components/Categories.css
View File

@@ -30,7 +30,7 @@
padding: 7px 12px; padding: 7px 12px;
border-radius: 999px; border-radius: 999px;
background: rgba(239, 106, 91, 0.1); background: rgba(239, 106, 91, 0.1);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -82,9 +82,9 @@
} }
.scroll-btn.ant-btn:hover { .scroll-btn.ant-btn:hover {
color: #ef6a5b !important; color: var(--brand) !important;
border-color: rgba(239, 106, 91, 0.4) !important; border-color: rgba(239, 106, 91, 0.4) !important;
background: #fff4ef !important; background: var(--brand-soft) !important;
} }
.categories-scroll { .categories-scroll {
@@ -192,7 +192,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
color: #ef6a5b; color: var(--brand);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
} }

2
frontend/src/components/Categories.jsx
View File

@@ -21,7 +21,7 @@ const categories = [
count: '408131', count: '408131',
description: '促销、开业、发布会等高频营销场景素材。', description: '促销、开业、发布会等高频营销场景素材。',
tag: '热点', tag: '热点',
gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)', gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
icon: <NotificationOutlined />, icon: <NotificationOutlined />,
}, },
{ {

6
frontend/src/components/Designers.css
View File

@@ -25,7 +25,7 @@
padding: 7px 12px; padding: 7px 12px;
border-radius: 999px; border-radius: 999px;
background: rgba(239, 106, 91, 0.1); background: rgba(239, 106, 91, 0.1);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -175,9 +175,9 @@
} }
.follow-btn.ant-btn:hover { .follow-btn.ant-btn:hover {
color: #ef6a5b !important; color: var(--brand) !important;
border-color: rgba(239, 106, 91, 0.4) !important; border-color: rgba(239, 106, 91, 0.4) !important;
background: #fff4ef !important; background: var(--brand-soft) !important;
} }
@media (max-width: 900px) { @media (max-width: 900px) {

2
frontend/src/components/Designers.jsx
View File

@@ -16,7 +16,7 @@ const designers = [
]; ];
const gradients = [ const gradients = [
'linear-gradient(135deg, #ef6a5b 0%, #f4b254 100%)', 'linear-gradient(135deg, #2f7d78 0%, #76bcb3 100%)',
'linear-gradient(135deg, #4a8ee8 0%, #67d0df 100%)', 'linear-gradient(135deg, #4a8ee8 0%, #67d0df 100%)',
'linear-gradient(135deg, #7d60c9 0%, #bd8eff 100%)', 'linear-gradient(135deg, #7d60c9 0%, #bd8eff 100%)',
'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)', 'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',

8
frontend/src/components/Festival.css
View File

@@ -30,7 +30,7 @@
padding: 7px 12px; padding: 7px 12px;
border-radius: 999px; border-radius: 999px;
background: rgba(239, 106, 91, 0.1); background: rgba(239, 106, 91, 0.1);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -82,9 +82,9 @@
} }
.festival-scroll-btn.ant-btn:hover { .festival-scroll-btn.ant-btn:hover {
color: #ef6a5b !important; color: var(--brand) !important;
border-color: rgba(239, 106, 91, 0.4) !important; border-color: rgba(239, 106, 91, 0.4) !important;
background: #fff4ef !important; background: var(--brand-soft) !important;
} }
.festival-scroll { .festival-scroll {
@@ -179,7 +179,7 @@
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
background: #fff3ea; background: #fff3ea;
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;

10
frontend/src/components/Footer.css
View File

@@ -74,7 +74,7 @@
display: grid; display: grid;
place-items: center; place-items: center;
background: #fff1e9; background: #fff1e9;
color: #ef6a5b; color: var(--brand);
font-size: 18px; font-size: 18px;
} }
@@ -126,8 +126,8 @@
.footer-link:hover { .footer-link:hover {
border-color: rgba(239, 106, 91, 0.32); border-color: rgba(239, 106, 91, 0.32);
color: #ef6a5b; color: var(--brand);
background: #fff4ef; background: var(--brand-soft);
} }
.footer-link .anticon { .footer-link .anticon {
@@ -154,7 +154,7 @@
height: 52px; height: 52px;
border-radius: 18px; border-radius: 18px;
background: linear-gradient(135deg, #fff1e9 0%, #ffe0d2 100%); background: linear-gradient(135deg, #fff1e9 0%, #ffe0d2 100%);
color: #ef6a5b; color: var(--brand);
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 24px; font-size: 24px;
@@ -188,7 +188,7 @@
} }
.email-link { .email-link {
color: #ef6a5b; color: var(--brand);
margin-left: 4px; margin-left: 4px;
} }

4
frontend/src/components/Footer.jsx
View File

@@ -37,11 +37,11 @@ const Footer = () => {
<svg viewBox="0 0 40 24" className="footer-logo-icon" aria-hidden="true"> <svg viewBox="0 0 40 24" className="footer-logo-icon" aria-hidden="true">
<path <path
d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z" d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z"
fill="#ef6a5b" fill="#2f7d78"
/> />
<path <path
d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"
fill="#ef6a5b" fill="#2f7d78"
/> />
</svg> </svg>
<div> <div>

61
frontend/src/components/Header.css
View File

@@ -39,7 +39,7 @@
.logo-text { .logo-text {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #ef6a5b; color: var(--brand);
} }
.logo-domain { .logo-domain {
@@ -66,22 +66,22 @@
} }
.nav-item:hover { .nav-item:hover {
color: #ef6a5b; color: var(--brand);
} }
.nav-new { .nav-new {
position: relative; position: relative;
} }
.new-dot { .new-dot {
position: absolute; position: absolute;
top: -2px; top: -2px;
right: -8px; right: -8px;
width: 6px; width: 6px;
height: 6px; height: 6px;
background: #ff5a5a; background: var(--brand);
border-radius: 50%; border-radius: 50%;
} }
.header-search { .header-search {
flex: 1; flex: 1;
@@ -94,12 +94,12 @@
padding: 6px 16px; padding: 6px 16px;
} }
.header-search .ant-input-affix-wrapper:hover, .header-search .ant-input-affix-wrapper:hover,
.header-search .ant-input-affix-wrapper:focus, .header-search .ant-input-affix-wrapper:focus,
.header-search .ant-input-affix-wrapper-focused { .header-search .ant-input-affix-wrapper-focused {
border-color: #ff5a5a; border-color: var(--brand);
box-shadow: none; box-shadow: none;
} }
.header-right { .header-right {
display: flex; display: flex;
@@ -108,19 +108,18 @@
flex-shrink: 0; flex-shrink: 0;
} }
.btn-invite { .btn-invite {
background: #ff5a5a; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%); border-color: var(--brand);
border-color: #ff5a5a;
border-radius: 20px; border-radius: 20px;
padding: 4px 20px; padding: 4px 20px;
height: 36px; height: 36px;
} }
.btn-invite:hover { .btn-invite:hover {
background: #ff7070 !important; background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
border-color: #ff7070 !important; border-color: var(--brand) !important;
} }
.btn-register { .btn-register {
border-radius: 20px; border-radius: 20px;
@@ -132,8 +131,8 @@
} }
.btn-register:hover { .btn-register:hover {
border-color: #ef6a5b !important; border-color: var(--brand) !important;
color: #ef6a5b !important; color: var(--brand) !important;
} }
.btn-login { .btn-login {
@@ -146,8 +145,8 @@
} }
.btn-login:hover { .btn-login:hover {
border-color: #ef6a5b !important; border-color: var(--brand) !important;
color: #ef6a5b !important; color: var(--brand) !important;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {

4
frontend/src/components/Header.jsx
View File

@@ -82,8 +82,8 @@ const Header = () => {
<div className="header-left"> <div className="header-left">
<a href="/" className="logo"> <a href="/" className="logo">
<svg viewBox="0 0 40 24" className="logo-icon"> <svg viewBox="0 0 40 24" className="logo-icon">
<path d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z" fill="#ff5a5a"/> <path d="M20 0c-5.5 0-10 4.5-10 10s4.5 10 10 10c2.8 0 5.3-1.1 7.1-2.9L20 10l7.1-7.1C25.3 1.1 22.8 0 20 0z" fill="#2f7d78"/>
<path d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" fill="#ff5a5a"/> <path d="M30 4c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.5 0 10-4.5 10-10S35.5 4 30 4zm0 16c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" fill="#2f7d78"/>
</svg> </svg>
<span className="logo-text">图汇</span> <span className="logo-text">图汇</span>
<span className="logo-domain">DESIGN006.COM</span> <span className="logo-domain">DESIGN006.COM</span>

12
frontend/src/components/Hero.css
View File

@@ -69,7 +69,7 @@
.hero-title span { .hero-title span {
display: block; display: block;
color: #ef6a5b; color: var(--brand);
} }
.hero-description { .hero-description {
@@ -129,7 +129,7 @@
padding: 0 22px; padding: 0 22px;
border-radius: 999px; border-radius: 999px;
border: none; border: none;
background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
box-shadow: 0 14px 30px rgba(216, 78, 63, 0.26); box-shadow: 0 14px 30px rgba(216, 78, 63, 0.26);
font-weight: 700; font-weight: 700;
} }
@@ -149,7 +149,7 @@
} }
.hero-secondary-btn.ant-btn:hover { .hero-secondary-btn.ant-btn:hover {
color: #ef6a5b !important; color: var(--brand) !important;
border-color: rgba(239, 106, 91, 0.45) !important; border-color: rgba(239, 106, 91, 0.45) !important;
} }
@@ -178,9 +178,9 @@
} }
.hero-tag.ant-tag:hover { .hero-tag.ant-tag:hover {
color: #ef6a5b; color: var(--brand);
border-color: rgba(239, 106, 91, 0.45); border-color: rgba(239, 106, 91, 0.45);
background: #fff4ef; background: var(--brand-soft);
} }
.hero-stats { .hero-stats {
@@ -253,7 +253,7 @@
.hero-stage-label { .hero-stage-label {
background: rgba(239, 106, 91, 0.12); background: rgba(239, 106, 91, 0.12);
color: #d84e3f; color: var(--brand-strong);
} }
.hero-stage-badge { .hero-stage-badge {

14
frontend/src/components/Works.css
View File

@@ -32,7 +32,7 @@
padding: 7px 12px; padding: 7px 12px;
border-radius: 999px; border-radius: 999px;
background: rgba(239, 106, 91, 0.1); background: rgba(239, 106, 91, 0.1);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -70,8 +70,8 @@
} }
.section-pill-accent { .section-pill-accent {
background: linear-gradient(135deg, #fff0e7 0%, #ffe1d7 100%); background: linear-gradient(135deg, #e7f5f2 0%, #d8eeea 100%);
color: #d84e3f; color: var(--brand-strong);
} }
.works-grid { .works-grid {
@@ -160,7 +160,7 @@
border-radius: 999px; border-radius: 999px;
background: rgba(255, 250, 244, 0.92); background: rgba(255, 250, 244, 0.92);
border: 1px solid rgba(233, 218, 207, 0.92); border: 1px solid rgba(233, 218, 207, 0.92);
color: #d84e3f; color: var(--brand-strong);
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@@ -246,7 +246,7 @@
} }
.work-price { .work-price {
color: #db5748; color: var(--brand);
font-size: 24px; font-size: 24px;
font-weight: 800; font-weight: 800;
line-height: 1; line-height: 1;
@@ -262,11 +262,11 @@
} }
.work-card:hover .work-cta { .work-card:hover .work-cta {
color: #ef6a5b; color: var(--brand);
} }
.works-section .ant-spin { .works-section .ant-spin {
color: #ef6a5b; color: var(--brand);
} }
.works-section .ant-spin-text { .works-section .ant-spin-text {

16
frontend/src/index.css
View File

@@ -1,7 +1,7 @@
:root { :root {
--brand: #ef6a5b; --brand: #2f7d78;
--brand-strong: #d84e3f; --brand-strong: #1d5a57;
--brand-soft: #fff0e7; --brand-soft: #e5f4f1;
--ink: #241d17; --ink: #241d17;
--text: #5f5449; --text: #5f5449;
--muted: #8c8073; --muted: #8c8073;
@@ -27,9 +27,9 @@ body {
line-height: 1.6; line-height: 1.6;
color: var(--ink); color: var(--ink);
background: background:
radial-gradient(circle at top left, rgba(239, 106, 91, 0.08), transparent 22%), radial-gradient(circle at top left, rgba(47, 125, 120, 0.12), transparent 22%),
radial-gradient(circle at top right, rgba(244, 178, 84, 0.1), transparent 20%), radial-gradient(circle at top right, rgba(115, 170, 193, 0.14), transparent 20%),
linear-gradient(180deg, #fffdf9 0%, #f8f2eb 100%); linear-gradient(180deg, #f7fcfb 0%, #edf5f4 100%);
min-height: 100vh; min-height: 100vh;
} }
@@ -48,12 +48,12 @@ a {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #ef6a5b 0%, #d84e3f 100%); background: linear-gradient(180deg, #2f7d78 0%, #1d5a57 100%);
border-radius: 999px; border-radius: 999px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #e06152 0%, #cb4638 100%); background: linear-gradient(180deg, #2a726d 0%, #174d4a 100%);
} }
@keyframes fadeIn { @keyframes fadeIn {

2
frontend/src/pages/CategoryDetail.jsx
View File

@@ -38,7 +38,7 @@ const CategoryDetail = () => {
}, },
活动: { 活动: {
count: '408131', count: '408131',
gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)', gradient: 'linear-gradient(135deg, #78beb7 0%, #2f7d78 100%)',
description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。', description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
}, },
医美: { 医美: {

6
frontend/src/pages/Help.css
View File

@@ -57,7 +57,7 @@
display: inline-block; display: inline-block;
width: 4px; width: 4px;
height: 14px; height: 14px;
background: #ff5a5a; background: var(--brand);
margin-right: 8px; margin-right: 8px;
vertical-align: middle; vertical-align: middle;
} }
@@ -106,7 +106,7 @@
.highlight-box { .highlight-box {
background: #fff5f5; background: #fff5f5;
border-left: 4px solid #ff5a5a; border-left: 4px solid var(--brand);
padding: 20px; padding: 20px;
margin: 24px 0; margin: 24px 0;
border-radius: 8px; border-radius: 8px;
@@ -115,7 +115,7 @@
.highlight-box h3 { .highlight-box h3 {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #ff5a5a; color: var(--brand);
margin-bottom: 12px; margin-bottom: 12px;
} }

2
frontend/src/pages/Help.jsx
View File

@@ -107,7 +107,7 @@ const Help = () => {
<div className="protocol-content help-content"> <div className="protocol-content help-content">
<h1> <h1>
<QuestionCircleOutlined style={{ marginRight: '12px', color: '#ff5a5a' }} /> <QuestionCircleOutlined style={{ marginRight: '12px', color: 'var(--brand)' }} />
帮助中心 帮助中心
</h1> </h1>

8
frontend/src/pages/Protocol.css
View File

@@ -50,12 +50,12 @@
} }
.protocol-sidebar a:hover { .protocol-sidebar a:hover {
color: #ff5a5a; color: var(--brand);
background: #fff5f5; background: #fff5f5;
} }
.protocol-sidebar a.active { .protocol-sidebar a.active {
color: #ff5a5a; color: var(--brand);
background: #fff5f5; background: #fff5f5;
font-weight: 500; font-weight: 500;
} }
@@ -74,7 +74,7 @@
color: #333; color: #333;
margin-bottom: 24px; margin-bottom: 24px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 2px solid #ff5a5a; border-bottom: 2px solid var(--brand);
} }
.protocol-content h2 { .protocol-content h2 {
@@ -119,7 +119,7 @@
border-radius: 4px; border-radius: 4px;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 13px; font-size: 13px;
color: #ff5a5a; color: var(--brand);
} }
.level-table { .level-table {

24
frontend/src/pages/WorkDetail.css
View File

@@ -33,7 +33,7 @@
} }
.breadcrumb a:hover { .breadcrumb a:hover {
color: #ef6a5b; color: var(--brand);
} }
.breadcrumb .current { .breadcrumb .current {
@@ -64,7 +64,7 @@
padding: 8px 12px; padding: 8px 12px;
border-radius: 999px; border-radius: 999px;
background: rgba(239, 106, 91, 0.1); background: rgba(239, 106, 91, 0.1);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@@ -149,8 +149,8 @@
.preview-badge { .preview-badge {
padding: 8px 12px; padding: 8px 12px;
border-radius: 999px; border-radius: 999px;
background: #fff0e7; background: var(--brand-soft);
color: #d84e3f; color: var(--brand-strong);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
} }
@@ -203,7 +203,7 @@
} }
.preview-benefit .anticon { .preview-benefit .anticon {
color: #ef6a5b; color: var(--brand);
font-size: 16px; font-size: 16px;
margin-top: 2px; margin-top: 2px;
} }
@@ -322,7 +322,7 @@
} }
.designer-level { .designer-level {
color: #ef6a5b; color: var(--brand);
margin-right: 4px; margin-right: 4px;
} }
@@ -376,7 +376,7 @@
} }
.price-value { .price-value {
color: #da5748; color: var(--brand);
font-size: 40px; font-size: 40px;
line-height: 1; line-height: 1;
font-weight: 800; font-weight: 800;
@@ -410,7 +410,7 @@
} }
.info-value.highlight { .info-value.highlight {
color: #db5748; color: var(--brand);
} }
.work-actions { .work-actions {
@@ -424,7 +424,7 @@
height: 50px; height: 50px;
border: none; border: none;
border-radius: 18px; border-radius: 18px;
background: linear-gradient(135deg, #ef6a5b 0%, #d84e3f 100%); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-strong) 100%);
box-shadow: 0 16px 30px rgba(216, 78, 63, 0.24); box-shadow: 0 16px 30px rgba(216, 78, 63, 0.24);
font-weight: 700; font-weight: 700;
} }
@@ -440,7 +440,7 @@
.icon-btn.ant-btn:hover, .icon-btn.ant-btn:hover,
.icon-btn.ant-btn.collected { .icon-btn.ant-btn.collected {
color: #ef6a5b; color: var(--brand);
border-color: rgba(239, 106, 91, 0.4); border-color: rgba(239, 106, 91, 0.4);
} }
@@ -484,7 +484,7 @@
.designer-level-badge { .designer-level-badge {
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: #ef6a5b; background: var(--brand);
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
@@ -572,7 +572,7 @@
} }
.stat-row .anticon { .stat-row .anticon {
color: #ef6a5b; color: var(--brand);
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {

4
frontend/src/pages/WorkDetail.jsx
View File

@@ -522,7 +522,7 @@ const WorkDetail = () => {
<p>作品：{workData.title}</p> <p>作品：{workData.title}</p>
<p> <p>
价格： 价格：
<span style={{ color: '#ff5a5a', fontSize: '18px', fontWeight: 'bold' }}> <span style={{ color: 'var(--brand)', fontSize: '18px', fontWeight: 'bold' }}>
¥{workData.price} ¥{workData.price}
</span> </span>
</p> </p>
@@ -542,7 +542,7 @@ const WorkDetail = () => {
<QRCodeSVG value={paymentUrl} size={200} level="H" includeMargin /> <QRCodeSVG value={paymentUrl} size={200} level="H" includeMargin />
</div> </div>
<p style={{ marginTop: '20px', fontSize: '16px', fontWeight: 'bold' }}> <p style={{ marginTop: '20px', fontSize: '16px', fontWeight: 'bold' }}>
订单金额：<span style={{ color: '#ff5a5a' }}>¥{workData.price}</span> 订单金额：<span style={{ color: 'var(--brand)' }}>¥{workData.price}</span>
</p> </p>
<p style={{ color: '#666', fontSize: '14px' }}>请使用微信或支付宝扫码支付</p> <p style={{ color: '#666', fontSize: '14px' }}>请使用微信或支付宝扫码支付</p>
{checkingPayment && ( {checkingPayment && (