Add custom servo contact path

This commit is contained in:
Jacky Ser
2026-08-11 00:00:14 +08:00
parent 9ab7d7c195
commit 0351c47684
2 changed files with 95 additions and 3 deletions

View File

@@ -218,6 +218,22 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.success-card h3 { margin: 0; }
.success-card > p:not(.step-kicker) { color: #66776f; font-size: 10px; }
.success-card .outline-button { min-height: 38px; }
.custom-result-card {
padding: 22px;
display: grid;
grid-template-columns: 58px 1fr;
gap: 10px 16px;
border: 1px solid #bdd0f2;
border-radius: 15px;
background: linear-gradient(145deg, #f7faff, #edf4ff);
}
.custom-result-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: white; background: linear-gradient(145deg, #397fff, #1454d0); font-size: 13px; font-weight: 850; box-shadow: 0 10px 22px rgba(24,94,232,.2); }
.custom-result-card > div:nth-child(2) > span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.custom-result-card h3 { margin: 4px 0 7px; font-size: 18px; line-height: 1.35; }
.custom-result-card > div:nth-child(2) > p { margin: 0; color: #6d7b91; font-size: 10px; line-height: 1.65; }
.custom-requirement-grid { grid-column: 1 / -1; margin-top: 8px; }
.custom-notes { grid-column: 1 / -1; margin: 2px 0 0; padding: 10px 12px; border-radius: 8px; color: #5d6c82; background: rgba(255,255,255,.8); font-size: 9px; line-height: 1.6; }
.custom-contact-form { border-color: #afc8f2; }
.capability-strip { padding: 28px max(32px, calc((100vw - 1120px) / 2)); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); color: white; }
.capability-strip div { display: grid; gap: 4px; text-align: center; border-right: 1px solid rgba(255,255,255,.13); }

View File

@@ -65,7 +65,8 @@ function getFeaturedSpecs(product: CatalogProduct) {
const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
const SILENT_SERVO_CATEGORY = "静音舵机";
const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY];
const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY, CUSTOM_SERVO_CATEGORY];
const TORQUE_MIN = 0.09;
const TORQUE_MAX = 920;
const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
@@ -447,7 +448,9 @@ export default function Home() {
<option value="全部舵机">243</option>
{SELECTOR_CATEGORIES.map((category) => (
<option key={category} value={category}>
{category}{getCategoryCount(category)}
{category === CUSTOM_SERVO_CATEGORY
? `${category}(联系我们)`
: `${category}${getCategoryCount(category)}款)`}
</option>
))}
</select>
@@ -644,7 +647,80 @@ export default function Home() {
</div>
)}
{stage === 4 && top && (
{stage === 4 && requirements.category === CUSTOM_SERVO_CATEGORY && (
<div className="result-panel custom-result-panel">
<div className="result-heading">
<div>
<p className="step-kicker"></p>
<h2></h2>
</div>
<button type="button" className="restart-button" onClick={reset}></button>
</div>
<div className="custom-result-card">
<div className="custom-result-mark">ODM</div>
<div>
<span></span>
<h3></h3>
<p>线</p>
</div>
<div className="metric-grid custom-requirement-grid">
<Metric label="最低堵转扭矩" value={`${formatTorque(requirements.torque)} kgf·cm`} />
<Metric label="额定电压" value={`${requirements.voltage.toFixed(1)}V`} />
<Metric label="操作角度" value={requirements.angle} />
<Metric label="控制 / 通讯" value={requirements.control} />
<Metric label="首次采购数量" value={requirements.firstOrderQuantity ? `${requirements.firstOrderQuantity}` : "待确认"} />
<Metric label="年度用量" value={requirements.annualVolume} />
</div>
{requirements.otherRequirements && (
<p className="custom-notes"><strong></strong>{requirements.otherRequirements}</p>
)}
</div>
{!showSampleForm && (
<div className="result-actions">
<button className="panel-primary" type="button" onClick={() => setShowSampleForm(true)}>
· <span></span>
</button>
<button className="outline-button" type="button" onClick={() => window.print()}> / </button>
</div>
)}
{showSampleForm && !submitted && (
<form className="sample-form custom-contact-form" onSubmit={submitLead}>
<div>
<p className="step-kicker"></p>
<h3></h3>
<p>CRM并通知工程师跟进</p>
</div>
<div className="form-grid">
<label><span></span><input required name="company" placeholder="请输入公司名称" /></label>
<label><span></span><input required name="name" placeholder="姓名" /></label>
<label><span></span><input required name="phone" inputMode="tel" placeholder="用于方案确认" /></label>
<label><span></span><input name="email" type="email" placeholder="接收定制方案" /></label>
</div>
<label className="full-field">
<span></span>
<textarea name="notes" defaultValue={requirements.otherRequirements} placeholder="请补充结构图、安装空间、认证或交期要求" />
</label>
<button className="panel-primary" type="submit"> <span></span></button>
<small className="demo-disclaimer"></small>
</form>
)}
{submitted && (
<div className="success-card">
<div className="success-icon"></div>
<p className="step-kicker"></p>
<h3> {leadId}</h3>
<p>线</p>
<button type="button" className="outline-button" onClick={reset}></button>
</div>
)}
</div>
)}
{stage === 4 && requirements.category !== CUSTOM_SERVO_CATEGORY && top && (
<div className="result-panel">
<div className="result-heading">
<div>