zuowei/tuhui.cloud
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 {
background: linear-gradient(135deg, #f07869 0%, #df5545 100%) !important;
background: linear-gradient(135deg, #3b8c86 0%, #21635f 100%) !important;
border-color: transparent !important;
}

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

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

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

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

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

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

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

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

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

@@ -16,7 +16,7 @@ const designers = [
];
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, #7d60c9 0%, #bd8eff 100%)',
'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',

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

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

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

@@ -74,7 +74,7 @@
display: grid;
place-items: center;
background: #fff1e9;
color: #ef6a5b;
color: var(--brand);
font-size: 18px;
}
@@ -126,8 +126,8 @@
.footer-link:hover {
border-color: rgba(239, 106, 91, 0.32);
color: #ef6a5b;
background: #fff4ef;
color: var(--brand);
background: var(--brand-soft);
}
.footer-link .anticon {
@@ -154,7 +154,7 @@
height: 52px;
border-radius: 18px;
background: linear-gradient(135deg, #fff1e9 0%, #ffe0d2 100%);
color: #ef6a5b;
color: var(--brand);
display: grid;
place-items: center;
font-size: 24px;
@@ -188,7 +188,7 @@
}
.email-link {
color: #ef6a5b;
color: var(--brand);
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">
<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="#ef6a5b"
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="#ef6a5b"
fill="#2f7d78"
/>
</svg>
<div>

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

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

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

@@ -82,8 +82,8 @@ const Header = () => {
<div className="header-left">
<a href="/" className="logo">
<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="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="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="#2f7d78"/>
</svg>
<span className="logo-text">图汇</span>
<span className="logo-domain">DESIGN006.COM</span>

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

@@ -69,7 +69,7 @@
.hero-title span {
display: block;
color: #ef6a5b;
color: var(--brand);
}
.hero-description {
@@ -129,7 +129,7 @@
padding: 0 22px;
border-radius: 999px;
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);
font-weight: 700;
}
@@ -149,7 +149,7 @@
}
.hero-secondary-btn.ant-btn:hover {
color: #ef6a5b !important;
color: var(--brand) !important;
border-color: rgba(239, 106, 91, 0.45) !important;
}
@@ -178,9 +178,9 @@
}
.hero-tag.ant-tag:hover {
color: #ef6a5b;
color: var(--brand);
border-color: rgba(239, 106, 91, 0.45);
background: #fff4ef;
background: var(--brand-soft);
}
.hero-stats {
@@ -253,7 +253,7 @@
.hero-stage-label {
background: rgba(239, 106, 91, 0.12);
color: #d84e3f;
color: var(--brand-strong);
}
.hero-stage-badge {

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

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

16
frontend/src/index.css
View File

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

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

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

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

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

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

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

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

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

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

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

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

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