From 9367287c0729b6cf32ef632d4859c1b885be43b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= Date: Fri, 30 Oct 2026 10:20:56 +0800 Subject: [PATCH] =?UTF-8?q?style:=20contact=20page=20full=20visual=20polis?= =?UTF-8?q?h=20=E2=80=94=20gradient=20icons,=20card=20shadows,=20map=20ove?= =?UTF-8?q?rlay,=20FAQ=20pills?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/trade-pro/blocks.css | 151 +++++++++++++++++++++++++++++++++--- 1 file changed, 140 insertions(+), 11 deletions(-) diff --git a/themes/trade-pro/blocks.css b/themes/trade-pro/blocks.css index c6d46d6..f828b9d 100644 --- a/themes/trade-pro/blocks.css +++ b/themes/trade-pro/blocks.css @@ -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} +}