xinyouhe/cms-SiteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: contact page full visual polish — gradient icons, card shadows, map overlay, FAQ pills

Browse Source
This commit is contained in:
浅念
2026-10-30 10:20:56 +08:00
parent 77b50c7d53
commit 9367287c07
1 changed files with 140 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/trade-pro/blocks.css
+140 -11
View File
@@ -454,14 +454,143 @@
.sf-section .sf-link,.sf-section .sf-section-head>a,.sf-section .sf-item-copy small{color:var(--sf-accent-c,#3569d3)!important}
.sf-section .sf-button{background:var(--sf-btn-c,var(--accent,#315ee2))!important}
/* ── 联系双栏：左信息右表单 ── */
.sf-theme-trade-pro .sf-contact-grid{display:grid !important;grid-template-columns:0.85fr 1.15fr !important;gap:calc(var(--sf-tp-space-12,48px) + var(--sf-tp-space-4,16px));align-items:start}
.sf-theme-trade-pro .sf-contact-info .sf-kicker{display:block;font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:740;color:var(--sf-accent-c,#0874df);margin-bottom:12px}
.sf-theme-trade-pro .sf-contact-info h2{font-size:calc(var(--sf-title-size,32px) * .75);margin:0 0 12px}
.sf-theme-trade-pro .sf-contact-desc{color:#5a6a7e;line-height:1.6;margin:0 0 24px}
.sf-theme-trade-pro .sf-contact-list{display:grid;gap:20px}
.sf-theme-trade-pro .sf-contact-item{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center}
.sf-theme-trade-pro .sf-contact-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--sf-btn-c,#0874df);color:#fff;font-size:18px}
.sf-theme-trade-pro .sf-contact-item strong{display:block;margin-bottom:2px}
.sf-theme-trade-pro .sf-contact-item p{margin:0;color:#5a6a7e;font-size:14px}
@media(max-width:900px){.sf-theme-trade-pro .sf-contact-grid{grid-template-columns:1fr !important;gap:24px}}
/* ════════════════════════════════════════════════════
联系页面美化 — 双栏 + 表单 + 地图 + FAQ
════════════════════════════════════════════════════ */
/* ── 联系双栏容器 ── */
.sf-theme-trade-pro .sf-contact-grid{
display:grid !important;
grid-template-columns:0.85fr 1.15fr !important;
gap:56px;align-items:start;
}
/* ── 左侧联系信息 ── */
.sf-theme-trade-pro .sf-contact-info .sf-kicker{
display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
font-weight:750;color:#0874df;background:#edf7ff;
padding:6px 14px;border-radius:99px;margin-bottom:16px;
}
.sf-theme-trade-pro .sf-contact-info h2{
font-size:clamp(24px,2.5vw,32px);font-weight:750;color:#0f2544;
margin:0 0 10px;letter-spacing:-.5px;
}
.sf-theme-trade-pro .sf-contact-desc{
color:#5a6a7e;line-height:1.7;margin:0 0 32px;font-size:15px;
}
.sf-theme-trade-pro .sf-contact-list{display:grid;gap:0}
.sf-theme-trade-pro .sf-contact-item{
display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;
padding:18px 0;border-bottom:1px solid #edf1f6;
}
.sf-theme-trade-pro .sf-contact-item:first-child{padding-top:0}
.sf-theme-trade-pro .sf-contact-item:last-child{border-bottom:none;padding-bottom:0}
.sf-theme-trade-pro .sf-contact-item:last-child{border-bottom:1px solid transparent}
.sf-theme-trade-pro .sf-contact-icon{
width:52px;height:52px;display:grid;place-items:center;
border-radius:14px;background:linear-gradient(135deg,#0874df,#0a5bb5);color:#fff;
font-size:20px;box-shadow:0 4px 14px rgba(8,116,223,.25);
}
.sf-theme-trade-pro .sf-contact-item strong{
display:block;font-size:14px;font-weight:700;color:#0f2544;margin-bottom:3px;
}
.sf-theme-trade-pro .sf-contact-item p{
margin:0;color:#64748b;font-size:13px;line-height:1.5;
}
/* ── 右侧表单卡 ── */
.sf-theme-trade-pro .sf-form-card{
background:linear-gradient(180deg,#f8faff,#f0f4fa);
padding:36px 32px 32px;border-radius:16px;
border:1px solid #e2e8f2;
box-shadow:0 8px 32px rgba(15,37,68,.06);
}
.sf-theme-trade-pro .sf-form-title{
font-size:clamp(20px,2vw,26px);font-weight:750;color:#0f2544;margin:0 0 6px;letter-spacing:-.4px;
}
.sf-theme-trade-pro .sf-form-text{color:#64748b;margin:0 0 24px;font-size:14px;line-height:1.6}
.sf-theme-trade-pro .sf-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sf-theme-trade-pro .sf-form-field{display:flex;flex-direction:column;gap:6px}
.sf-theme-trade-pro .sf-form-field label{
font-size:12px;font-weight:650;color:#3d5067;letter-spacing:.02em;
}
.sf-theme-trade-pro .sf-form-field input,
.sf-theme-trade-pro .sf-form-field textarea{
padding:12px 16px;border:1.5px solid #d9e1ec;border-radius:10px;
font:inherit;font-size:14px;background:#fff;
transition:border-color .2s,box-shadow .2s;
}
.sf-theme-trade-pro .sf-form-field input::placeholder,
.sf-theme-trade-pro .sf-form-field textarea::placeholder{color:#a0b0c4}
.sf-theme-trade-pro .sf-form-field input:focus,
.sf-theme-trade-pro .sf-form-field textarea:focus{
border-color:#0874df;box-shadow:0 0 0 4px rgba(8,116,223,.1);outline:none;
}
.sf-theme-trade-pro .sf-form-full{grid-column:1 / -1}
.sf-theme-trade-pro .sf-form-submit{
grid-column:1 / -1;justify-self:stretch;margin-top:4px;
padding:14px 24px;border-radius:10px;font-size:15px;font-weight:700;
background:linear-gradient(135deg,#0874df,#0a5bb5);color:#fff;
border:none;cursor:pointer;
box-shadow:0 6px 20px rgba(8,116,223,.3);
transition:transform .15s,box-shadow .15s;
}
.sf-theme-trade-pro .sf-form-submit:hover{
transform:translateY(-1px);box-shadow:0 8px 28px rgba(8,116,223,.4);
}
/* ── 地图区块 ── */
.sf-theme-trade-pro section.sf-section.sf-map{
padding:0 !important;background:#0f2544 !important;
}
.sf-theme-trade-pro section.sf-section.sf-map .sf-container{max-width:100% !important;padding:0 !important}
.sf-theme-trade-pro section.sf-section.sf-map .sf-section-head{
padding:48px 32px 24px;max-width:1200px;margin:0 auto;
}
.sf-theme-trade-pro section.sf-section.sf-map h2{
color:#fff;font-size:clamp(24px,2.5vw,32px);font-weight:750;margin:0 0 4px;
}
.sf-theme-trade-pro .sf-map-address{
display:block;color:#a8c8e8;font-size:14px;padding:0 32px 20px;max-width:1200px;margin:0 auto;font-style:normal;
}
.sf-theme-trade-pro .sf-map-embed{width:100%;line-height:0}
.sf-theme-trade-pro .sf-map-embed iframe{
width:100%;height:420px;border:none;filter:saturate(.9);
}
/* ── FAQ 区块美化 ── */
.sf-theme-trade-pro .sf-section.sf-faq{
background:linear-gradient(180deg,#f8faff,#fff);
}
.sf-theme-trade-pro .sf-faq summary{
font-size:16px;font-weight:650;color:#0f2544;padding:20px 0;cursor:pointer;
display:flex;align-items:center;gap:12px;list-style:none;
}
.sf-theme-trade-pro .sf-faq summary::-webkit-details-marker{display:none}
.sf-theme-trade-pro .sf-faq summary::before{
content:'?';flex-shrink:0;width:28px;height:28px;border-radius:8px;
background:#edf7ff;color:#0874df;font-size:14px;font-weight:800;
display:grid;place-items:center;
}
.sf-theme-trade-pro .sf-faq summary:hover{color:#0874df}
.sf-theme-trade-pro .sf-faq details{
border:none;border-bottom:1px solid #edf1f6;
background:none;padding:0;
}
.sf-theme-trade-pro .sf-faq p{padding:0 0 20px 40px;color:#5a6a7e;line-height:1.7;font-size:14px}
/* ── 移动端 ── */
@media(max-width:900px){
.sf-theme-trade-pro .sf-contact-grid{grid-template-columns:1fr !important;gap:28px}
.sf-theme-trade-pro .sf-contact-item{padding:14px 0}
.sf-theme-trade-pro .sf-contact-icon{width:44px;height:44px;font-size:17px;border-radius:12px}
.sf-theme-trade-pro .sf-form-card{padding:24px 20px}
.sf-theme-trade-pro .sf-form-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
.sf-theme-trade-pro .sf-contact-grid{gap:20px}
.sf-theme-trade-pro .sf-form-card{padding:20px 16px;border-radius:12px}
.sf-theme-trade-pro .sf-map-embed iframe{height:280px}
}