Add custom servo contact path
This commit is contained in:
@@ -218,6 +218,22 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
|
|||||||
.success-card h3 { margin: 0; }
|
.success-card h3 { margin: 0; }
|
||||||
.success-card > p:not(.step-kicker) { color: #66776f; font-size: 10px; }
|
.success-card > p:not(.step-kicker) { color: #66776f; font-size: 10px; }
|
||||||
.success-card .outline-button { min-height: 38px; }
|
.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 { 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); }
|
.capability-strip div { display: grid; gap: 4px; text-align: center; border-right: 1px solid rgba(255,255,255,.13); }
|
||||||
|
|||||||
82
app/page.tsx
82
app/page.tsx
@@ -65,7 +65,8 @@ function getFeaturedSpecs(product: CatalogProduct) {
|
|||||||
|
|
||||||
const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
|
const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
|
||||||
const SILENT_SERVO_CATEGORY = "静音舵机";
|
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_MIN = 0.09;
|
||||||
const TORQUE_MAX = 920;
|
const TORQUE_MAX = 920;
|
||||||
const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
|
const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
|
||||||
@@ -447,7 +448,9 @@ export default function Home() {
|
|||||||
<option value="全部舵机">全部舵机(243款)</option>
|
<option value="全部舵机">全部舵机(243款)</option>
|
||||||
{SELECTOR_CATEGORIES.map((category) => (
|
{SELECTOR_CATEGORIES.map((category) => (
|
||||||
<option key={category} value={category}>
|
<option key={category} value={category}>
|
||||||
{category}({getCategoryCount(category)}款)
|
{category === CUSTOM_SERVO_CATEGORY
|
||||||
|
? `${category}(联系我们)`
|
||||||
|
: `${category}(${getCategoryCount(category)}款)`}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -644,7 +647,80 @@ export default function Home() {
|
|||||||
</div>
|
</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-panel">
|
||||||
<div className="result-heading">
|
<div className="result-heading">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Reference in New Issue
Block a user