a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
676 lines
48 KiB
JavaScript
676 lines
48 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 小羚羚氢能产业数字化平台 · 规划设计（Axhub Runtime 可交互响应式汇报页）
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
var useEffect = React.useEffect;
|
||
var useMemo = React.useMemo;
|
||
var useCallback = React.useCallback;
|
||
|
||
var antd = window.antd || {};
|
||
var App = antd.App || React.Fragment;
|
||
var Tag = antd.Tag;
|
||
|
||
var C_PRIMARY = '#16D1A1';
|
||
var C_PRIMARY_D = '#00BFA5';
|
||
var C_HERO = '#061018';
|
||
var C_HERO2 = '#0a1f1a';
|
||
var C_PAGE = '#eef1f5';
|
||
var C_CARD = '#ffffff';
|
||
var C_TEXT = '#141b2d';
|
||
var C_MUTED = '#647089';
|
||
var C_LINE = 'rgba(15,23,42,0.07)';
|
||
var C_BLUE = '#1d4ed8';
|
||
var C_ORANGE = '#c2410c';
|
||
var C_PURPLE = '#6d28d9';
|
||
var FONT = '-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Segoe UI",sans-serif';
|
||
|
||
var sectionNav = [
|
||
{ key: 'hero', label: '总览' },
|
||
{ key: 'chain', label: '产业链' },
|
||
{ key: 'roles', label: '用户角色' },
|
||
{ key: 'loops', label: '业务闭环' },
|
||
{ key: 'roadmap', label: '路线图' },
|
||
{ key: 'summary', label: '关键重点' }
|
||
];
|
||
|
||
var kpiStats = [
|
||
{ label: '目标用户角色', value: '7', unit: '类', color: C_BLUE },
|
||
{ label: '业务闭环', value: '3', unit: '条', color: C_PRIMARY },
|
||
{ label: '产业链覆盖', value: '上中下游', unit: '', color: C_ORANGE },
|
||
{ label: '落地步骤', value: '4', unit: '步', color: C_PURPLE }
|
||
];
|
||
|
||
var chainSteps = [
|
||
{ key: 'upstream', title: '上游 · 制氢采购', desc: '制氢企业挂牌售氢、管束车调度、到站交付', biz: '制氢企业在线挂牌售氢；加氢站/运营方发起采购询价；成交后管束车配送到站', revenue: '交易撮合费 · 物流调度 · 数据监测', color: C_BLUE, icon: 'H₂' },
|
||
{ key: 'mid', title: '中游 · 加氢站', desc: '预约接单、电子加氢卡结算、巡检与对账', biz: '司机预约加氢、电子加氢卡预充值；OCR 识别加氢量；氢费对账线上化', revenue: 'SaaS · 支付通道 · 对账增值', color: C_PRIMARY, icon: '站' },
|
||
{ key: 'down', title: '下游 · 氢能车运营', desc: '租赁/自营、交还车、能源与 ETC 账单闭环', biz: '在线签约、交还车+替换车、能源/ETC/维保聚合、客户评级风控', revenue: '租赁服务 · 资产管理 · 金融结算', color: C_ORANGE, icon: '车' }
|
||
];
|
||
|
||
var roleTableRows = [
|
||
['内部用户', '羚牛氢能员工', '合同-交还车-结算；车辆全生命周期；风控审批；BI分析/数据驾驶舱', '业务员/运维/能源/财务等；管理层手机驾驶舱'],
|
||
['车队长', '车队管理者', '在线租车报价签约；运行/账单/开票/对讲；车队车辆调度', '注册验证、电子合同、实时定位、车辆调度'],
|
||
['氢能车司机', '自营+外部', '路线导航、能源账单、安全培训、预约加氢、AI故障上报', '内外部司机差异化；AI主动采集故障证据链'],
|
||
['加氢站用户', '站点运营', '预约接单、电子加氢卡、OCR、氢费对账', '预约加氢、氢气采购计划、氢费对账功能'],
|
||
['维修站用户', '维保服务', '派单接单、费用记录、核实对账', '衔接故障/事故工单一键发起维修，形成全流程完整证据链记录'],
|
||
['制氢企业', '氢气供应', '挂牌售氢、管束车监测、询价成交', '对接加氢站采购'],
|
||
['集团客户', '企业级', '多项目车辆/账单/能源总览；在线租车', '类车队长、主体为企业']
|
||
];
|
||
|
||
var roles = [
|
||
{ id: 'internal', name: '内部用户', sub: '羚牛氢能员工', tag: '运营中枢', color: C_BLUE, capability: '合同-收款-交还车-结算全链路；车辆全生命周期；风控审批；BI分析报告', scenes: '业务员 / 客服 / 运维 / 能源 / 安全 / 财务 / 法务 / CEO；管理层手机数据驾驶舱', detail: [
|
||
{ title: '业务条线 A · 租赁/自营', text: '合同发起 → 客户评级/敏感客户校验 → 标准/非标审批 → 收款 → 交车 → 账单 → 还车 → 结算（含替换车），全程留痕可审计' },
|
||
{ title: '业务条线 B · 车辆全生命周期', text: '采购/外租 → 验车入库 → 维修/年审/保养/故障/事故 → 出库（出售/报废/停租），支撑资产决策与残值管理' },
|
||
{ title: '管理层 · BI 与数据驾驶舱', text: '管理层可查询各类 BI 分析报告、手机数据驾驶舱，实时掌握运营、资产、能源与风控核心指标' }
|
||
]},
|
||
{ id: 'captain', name: '车队长', sub: '车队管理者', tag: '在线租车', color: C_PRIMARY, capability: '一键租车报价签约；车辆运行/账单/开票/对讲；车队车辆调度', scenes: '注册验证、在线合同、实时定位、车队调度', steps: [
|
||
['1', '选择车型、数量、租期发起意向', '推送业务员'],
|
||
['2', '系统按地区自动生成报价单', '业务员在线沟通调整'],
|
||
['3', '确认报价并提交', '自动生成电子合同推送签章'],
|
||
['4', '运维完成交车', '查看运行、账单、开票、对讲']
|
||
], detail: [
|
||
{ title: '交车后管控', text: '实时定位/轨迹、氢/电能源账单、ETC、合同账单、付款、在线开票、语音对讲（类对讲机）' },
|
||
{ title: '车队车辆调度', text: '对车队内车辆进行任务分配与调度，结合实时定位与运行状态，提升运力利用与运输协同效率' }
|
||
]},
|
||
{ id: 'driver', name: '氢能车司机', sub: '自营 + 外部租赁', tag: '运输执行', color: C_ORANGE, capability: '路线导航、能源账单、安全培训、预约加氢、故障救援、AI故障上报', scenes: '内外部司机差异化权限；AI故障上报主动采集证据链', detail: [
|
||
{ title: '内部自营司机', text: '定位/轨迹、路线规划导航、氢/电/ETC 账单、安全培训与定期考试、证照管理、氢/电量提醒、预约加氢（校验特种设备/行驶证）、故障提报、紧急救援' },
|
||
{ title: '外部租赁司机', text: '轨迹导航、能源/ETC 账单、安全培训、司机与车辆证件管理、预约加氢、故障提报、紧急救援；不含集团内部物流专属调度' },
|
||
{ title: 'AI 故障上报', text: '主动采集故障证据链信息，与故障/事故工单及维修站派单衔接，形成完整留痕' }
|
||
]},
|
||
{ id: 'station', name: '加氢站用户', sub: '站点运营', tag: '加注服务', color: C_PRIMARY_D, capability: '预约接单、电子加氢卡、OCR 识别、氢费对账、氢气采购', scenes: '预约加氢、氢气采购计划、氢费对账功能', modules: [
|
||
['预约接单', '验证特种设备登记、行驶证后确认服务'],
|
||
['电子加氢卡', '扫描加氢卡，预充值客户直接扣款'],
|
||
['过程管理', '加氢前/中/后检查、卸气记录、巡检记录'],
|
||
['OCR 识别', '拍摄面板识别加氢量，绑定车辆生成记录'],
|
||
['氢费对账', '接收并操作氢费对账单线上确认'],
|
||
['氢气采购', '向制氢企业发起采购（联动上游）']
|
||
]},
|
||
{ id: 'repair', name: '维修站用户', sub: '维保服务', tag: '派单对账', color: C_PURPLE, capability: '维修/保养派单接单、费用记录、运维核实对账', scenes: '衔接故障/事故工单一键发起维修，形成全流程完整证据链记录', detail: [
|
||
{ title: '流程闭环', text: '接收派单 → 记录过程与人工/配件费用 → 自动生成维修记录 → 运维核实 → 在线对账及账期结算，与车辆全生命周期打通' }
|
||
]},
|
||
{ id: 'producer', name: '制氢企业', sub: '氢气供应', tag: '氢气贸易', color: C_BLUE, capability: '在线挂牌售氢、管束车监测、询价成交与运费结算', scenes: '对接加氢站采购', detail: [
|
||
{ title: '商业模式', text: '企业验证 → 在线挂牌售氢（类商城）→ 管束车实时监测 → 加氢站询价采购 → 成交配送 → 管束车运费结算' }
|
||
], tags: ['挂牌售氢', '询价采购', '物流调度', '运费结算'] },
|
||
{ id: 'group', name: '集团客户', sub: '企业级客户', tag: '集团总览', color: C_ORANGE, capability: '多项目车辆/账单/能源/ETC 总览；在线租车签约', scenes: '类车队长但主体为企业', detail: [
|
||
{ title: '企业级管控', text: '查看集团所有租赁/自营项目车辆使用、全项目账单与结算、电子开票、能源费、ETC、司机信息汇总；支持 APP 在线租车生成合同' },
|
||
{ title: '与车队长差异', text: '车队长侧重单车队运营；集团客户侧重多项目、多合同、多车队统一视图与集团采购决策' }
|
||
]}
|
||
];
|
||
|
||
var loops = [
|
||
{ id: 'ops', title: '闭环一 · 租赁/自营运营', tag: '核心收入', color: C_BLUE, flow: '意向单 → 报价 → 合同（评级/敏感客户审批）→ 交车 → 运营监控 → 账单收款 → 还车 → 结算 → 替换车（如需）' },
|
||
{ id: 'asset', title: '闭环二 · 车辆资产生命周期', tag: '资产管控', color: C_PRIMARY, flow: '采购/外租 → 验车入库 → 维保/年审/故障/事故 → 能源消耗 → 出库处置 → OneOS 数据底座' },
|
||
{ id: 'h2', title: '闭环三 · 氢气贸易与加注', tag: '产业延伸', color: C_ORANGE, flow: '制氢挂牌 → 加氢站询价采购 → 管束车配送 → 司机预约加氢 → 电子加氢卡结算 → 氢费对账 → 运营账单聚合' }
|
||
];
|
||
|
||
var phases = [
|
||
{
|
||
id: 'p1', step: '01', phase: '第一阶段', title: '内部用户打通', subtitle: '运营中枢 · 业务链条协同', color: C_BLUE,
|
||
focus: '业管、业务员、运维、财务、风控等内部岗位协同，贯通合同审批、交还车、替换车、账单收款与车辆全生命周期管理',
|
||
deliver: '内部租赁/自营业务链条在手机端与 OneOS 数据底座初步贯通，为客户端租车闭环提供后台支撑',
|
||
items: [
|
||
'业务员：接收租车意向推送，在线报价沟通，推动电子合同签章成单',
|
||
'业管/法务：客户评级、敏感客户审批、标准/非标合同合规审核',
|
||
'运维：交车验车、还车验收、替换车调度，与车辆台账实时联动',
|
||
'财务/风控：账单生成、收款确认、结算对账，全程留痕可审计'
|
||
],
|
||
highlight: '内部用户是多岗位协同中枢——承接客户租车意向，驱动报价、审批、交还车、结算全链条运转'
|
||
},
|
||
{
|
||
id: 'p2', step: '02', phase: '第二阶段', title: '加氢站/维修站打通', subtitle: '能源加注 · 维保互联', color: C_PRIMARY,
|
||
focus: '加氢站预约接单、电子加氢卡、OCR 加氢量识别、氢气采购计划与氢费对账；维修站派单接单、费用核实与在线对账',
|
||
deliver: '加注与维保两端接入平台，能源消耗与维保记录回写运营侧，支撑车辆运行成本闭环',
|
||
items: [
|
||
'加氢站：司机预约加氢接单、电子加氢卡结算、氢气采购计划管理',
|
||
'加氢站：OCR 识别加氢量、氢费对账线上确认',
|
||
'维修站：接收故障/事故工单派单，记录人工与配件费用',
|
||
'维修站：运维核实后在线对账，与车辆全生命周期数据打通'
|
||
]
|
||
},
|
||
{
|
||
id: 'p3', step: '03', phase: '第三阶段', title: '车队长/氢能司机接入', subtitle: '客户触达 · 租车闭环', color: C_ORANGE,
|
||
focus: '车队长/集团客户快速企业认证，选型定量定租期发起意向；经内部业务员报价后形成电子合同；提车—运营—还车全过程闭环',
|
||
deliver: '外部客户与司机端上线，租车业务从企业认证到还车结算端到端可追溯、可协同',
|
||
items: [
|
||
'车队长/集团客户：企业信息快速认证，选择车型、数量、租期发起租车意向',
|
||
'内部业务员：接收意向、在线报价调整，确认后自动生成电子合同推送签章',
|
||
'提车—还车闭环：运维交车验车 → 运行监控/账单/能源 → 还车验收 → 结算（含替换车）',
|
||
'氢能司机：路线导航、预约加氢、AI 故障上报、安全培训与故障救援'
|
||
],
|
||
highlight: '核心闭环：企业快速认证 → 选型/定量/定租期 → 业务员报价成单 → 电子合同 → 提车—还车全程线上化，与内部用户业务链条实时协同'
|
||
},
|
||
{
|
||
id: 'p4', step: '04', phase: '第四阶段', title: '制氢企业 + 氢气采购商城', subtitle: '氢气贸易 · 产业延伸', color: C_PURPLE,
|
||
focus: '制氢企业在线挂牌售氢、管束车实时监测；加氢站询价采购、成交配送与运费结算；集团客户多项目总览扩展',
|
||
deliver: '氢气采购—加注—运营产业链数字化贯通，BI 分析与数据智能能力持续扩展',
|
||
items: [
|
||
'制氢企业：企业验证、在线挂牌售氢（类商城）、管束车运输监测',
|
||
'加氢站：向制氢企业发起询价采购，成交后管束车配送到站',
|
||
'贸易结算：管束车运费结算、氢气交易撮合与数据监测',
|
||
'集团客户：多项目车辆/账单/能源总览，与租车闭环数据聚合分析'
|
||
]
|
||
}
|
||
];
|
||
|
||
var summaryPoints = [
|
||
'小羚羚不是单一 App，而是氢能产业多端协同的数字化入口，与 OneOS Web 端形成「大屏管控 + 手机执行」互补。',
|
||
'租赁主线：车队长/集团客户快速认证 → 选型定量定租期 → 内部业务员报价成单 → 电子合同 → 提车—还车闭环，与业管/运维/财务链条实时协同。',
|
||
'按「内部打通 → 站点互联 → 客户司机接入 → 氢气贸易延伸」四步递进，先夯实运营闭环，再扩展产业能力。',
|
||
'客户评级与敏感客户审批机制内嵌合同流程，从源头降低收账风险，七类用户共用同一数据底座。'
|
||
];
|
||
|
||
var activeSectionState = useState('hero');
|
||
var activeSection = activeSectionState[0];
|
||
var setActiveSection = activeSectionState[1];
|
||
var activeRoleState = useState('internal');
|
||
var activeRole = activeRoleState[0];
|
||
var setActiveRole = activeRoleState[1];
|
||
var activeChainState = useState('upstream');
|
||
var activeChain = activeChainState[0];
|
||
var setActiveChain = activeChainState[1];
|
||
var activeLoopState = useState('ops');
|
||
var activeLoop = activeLoopState[0];
|
||
var setActiveLoop = activeLoopState[1];
|
||
var activePhaseState = useState('p1');
|
||
var activePhase = activePhaseState[0];
|
||
var setActivePhase = activePhaseState[1];
|
||
var navOpenState = useState(false);
|
||
var navOpen = navOpenState[0];
|
||
var setNavOpen = navOpenState[1];
|
||
var roleViewState = useState('card');
|
||
var roleView = roleViewState[0];
|
||
var setRoleView = roleViewState[1];
|
||
var scrollPctState = useState(0);
|
||
var scrollPct = scrollPctState[0];
|
||
var setScrollPct = scrollPctState[1];
|
||
var showTopState = useState(false);
|
||
var showTop = showTopState[0];
|
||
var setShowTop = showTopState[1];
|
||
|
||
var selectedRole = useMemo(function () { return roles.find(function (r) { return r.id === activeRole; }) || roles[0]; }, [activeRole]);
|
||
var selectedChain = useMemo(function () { return chainSteps.find(function (c) { return c.key === activeChain; }) || chainSteps[0]; }, [activeChain]);
|
||
var selectedPhase = useMemo(function () { return phases.find(function (p) { return p.id === activePhase; }) || phases[0]; }, [activePhase]);
|
||
|
||
var scrollToSection = useCallback(function (key) {
|
||
setActiveSection(key);
|
||
setNavOpen(false);
|
||
var el = document.getElementById('xllg-sec-' + key);
|
||
if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, []);
|
||
|
||
useEffect(function () {
|
||
var ids = sectionNav.map(function (s) { return s.key; });
|
||
function onScroll() {
|
||
var doc = document.documentElement;
|
||
var scrollTop = doc.scrollTop || document.body.scrollTop;
|
||
var max = (doc.scrollHeight - doc.clientHeight) || 1;
|
||
setScrollPct(Math.min(100, Math.round((scrollTop / max) * 100)));
|
||
setShowTop(scrollTop > 480);
|
||
var found = 'hero';
|
||
for (var i = 0; i < ids.length; i++) {
|
||
var node = document.getElementById('xllg-sec-' + ids[i]);
|
||
if (node && node.getBoundingClientRect().top <= 128) found = ids[i];
|
||
}
|
||
setActiveSection(found);
|
||
}
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
onScroll();
|
||
return function () { window.removeEventListener('scroll', onScroll); };
|
||
}, []);
|
||
|
||
var css =
|
||
'*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}' +
|
||
'.xllg-root{font-family:' + FONT + ';color:' + C_TEXT + ';background:linear-gradient(180deg,#f8fafb 0%,' + C_PAGE + ' 120px,#e8ecf2 100%);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}' +
|
||
'.xllg-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent}' +
|
||
'.xllg-progress-bar{height:100%;background:linear-gradient(90deg,' + C_PRIMARY_D + ',' + C_PRIMARY + ');transition:width .12s ease-out;border-radius:0 2px 2px 0}' +
|
||
'.xllg-nav{position:sticky;top:3px;z-index:100;background:rgba(255,255,255,0.94);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid ' + C_LINE + '}' +
|
||
'.xllg-nav-in{max-width:1240px;margin:0 auto;padding:0 24px;height:58px;display:flex;align-items:center;gap:16px}' +
|
||
'.xllg-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;flex-shrink:0}' +
|
||
'.xllg-logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,' + C_PRIMARY + ',' + C_PRIMARY_D + ');color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 4px 14px rgba(22,209,161,0.35)}' +
|
||
'.xllg-links{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}' +
|
||
'.xllg-links::-webkit-scrollbar{display:none}' +
|
||
'.xllg-link{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;color:' + C_MUTED + ';border:none;background:transparent;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}' +
|
||
'.xllg-link:hover{color:' + C_TEXT + ';background:rgba(22,209,161,0.07)}' +
|
||
'.xllg-link.on{color:' + C_PRIMARY_D + ';background:rgba(22,209,161,0.14);font-weight:600}' +
|
||
'.xllg-link:focus-visible{outline:2px solid rgba(22,209,161,0.45);outline-offset:2px}' +
|
||
'.xllg-menu{display:none;border:1px solid ' + C_LINE + ';background:#fff;border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;margin-left:auto}' +
|
||
'.xllg-hero{position:relative;background:' + C_HERO + ';color:#fff;padding:72px 24px 80px;overflow:hidden}' +
|
||
'.xllg-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 75% 15%,rgba(22,209,161,0.2),transparent 50%),radial-gradient(ellipse 45% 35% at 8% 85%,rgba(29,78,216,0.14),transparent 45%);pointer-events:none}' +
|
||
'.xllg-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,#000 15%,transparent 88%);pointer-events:none}' +
|
||
'.xllg-hero-in{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.15fr 0.85fr;gap:40px;align-items:center}' +
|
||
'.xllg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}' +
|
||
'.xllg-pill{padding:5px 12px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.85)}' +
|
||
'.xllg-pill-a{border-color:rgba(22,209,161,0.5);background:rgba(22,209,161,0.12);color:#7ef0d4}' +
|
||
'.xllg-h1{font-size:clamp(30px,4.5vw,44px);font-weight:800;line-height:1.12;letter-spacing:-0.025em;margin-bottom:16px}' +
|
||
'.xllg-lead{font-size:clamp(14px,2.2vw,17px);color:rgba(255,255,255,0.72);line-height:1.65;margin-bottom:24px;max-width:560px}' +
|
||
'.xllg-quote{padding:16px 18px;border-radius:14px;border-left:3px solid ' + C_PRIMARY + ';background:' + C_HERO2 + ';font-size:14px;line-height:1.65;color:rgba(255,255,255,0.9);margin-bottom:24px}' +
|
||
'.xllg-quote b{color:#7ef0d4;font-weight:600}' +
|
||
'.xllg-cta{display:flex;flex-wrap:wrap;gap:10px}' +
|
||
'.xllg-btn{padding:11px 22px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s}' +
|
||
'.xllg-btn:active{transform:scale(0.98)}' +
|
||
'.xllg-btn-p{background:linear-gradient(135deg,' + C_PRIMARY + ',' + C_PRIMARY_D + ');color:#fff;box-shadow:0 6px 20px rgba(22,209,161,0.35)}' +
|
||
'.xllg-btn-g{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.2)}' +
|
||
'.xllg-eco{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:24px;backdrop-filter:blur(8px)}' +
|
||
'.xllg-eco-title{font-size:12px;font-weight:700;letter-spacing:0.06em;color:rgba(255,255,255,0.5);margin-bottom:16px;text-transform:uppercase}' +
|
||
'.xllg-eco-flow{display:flex;flex-direction:column;gap:0}' +
|
||
'.xllg-eco-node{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08)}' +
|
||
'.xllg-eco-node:last-child{border-bottom:none}' +
|
||
'.xllg-eco-dot{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}' +
|
||
'.xllg-eco-label{font-size:14px;font-weight:700;margin-bottom:2px}' +
|
||
'.xllg-eco-sub{font-size:12px;color:rgba(255,255,255,0.55)}' +
|
||
'.xllg-kpis{max-width:1240px;margin:-40px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative;z-index:2}' +
|
||
'.xllg-kpi{background:' + C_CARD + ';border-radius:18px;padding:22px 20px;border:1px solid ' + C_LINE + ';box-shadow:0 8px 32px rgba(15,23,42,0.07);transition:transform .25s,box-shadow .25s,border-color .25s}' +
|
||
'.xllg-kpi:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,0.11);border-color:rgba(22,209,161,0.2)}' +
|
||
'.xllg-kpi-v{font-size:30px;font-weight:800;line-height:1;letter-spacing:-0.02em}' +
|
||
'.xllg-kpi-u{font-size:14px;font-weight:600;opacity:.7;margin-left:2px}' +
|
||
'.xllg-kpi-l{font-size:12px;color:' + C_MUTED + ';margin-top:8px}' +
|
||
'.xllg-main{max-width:1240px;margin:0 auto;padding:56px 24px 72px}' +
|
||
'.xllg-sec{margin-bottom:64px;scroll-margin-top:80px;padding:32px;border-radius:24px;background:rgba(255,255,255,0.72);border:1px solid ' + C_LINE + ';backdrop-filter:blur(6px)}' +
|
||
'.xllg-hero.xllg-sec{background:' + C_HERO + ';border:none;backdrop-filter:none;padding:72px 24px 80px;margin-bottom:0}' +
|
||
'.xllg-sec-tag{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:' + C_PRIMARY_D + ';margin-bottom:8px}' +
|
||
'.xllg-sec-h{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-0.02em;margin-bottom:8px}' +
|
||
'.xllg-sec-d{font-size:14px;color:' + C_MUTED + ';line-height:1.6;max-width:680px;margin-bottom:24px}' +
|
||
'.xllg-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}' +
|
||
'.xllg-tab{padding:10px 20px;border-radius:12px;border:1px solid ' + C_LINE + ';background:#fff;font-size:13px;font-weight:600;color:' + C_MUTED + ';cursor:pointer;transition:all .2s}' +
|
||
'.xllg-tab.on{color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(15,23,42,0.12)}' +
|
||
'.xllg-panel{background:#fff;border-radius:18px;border:1px solid ' + C_LINE + ';padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;box-shadow:0 4px 24px rgba(15,23,42,0.04)}' +
|
||
'.xllg-panel h3{font-size:21px;font-weight:800;margin-bottom:8px}' +
|
||
'.xllg-panel p{font-size:14px;color:' + C_MUTED + ';line-height:1.65;margin-bottom:10px}' +
|
||
'.xllg-rev{font-size:13px;padding:10px 14px;border-radius:10px;background:rgba(22,209,161,0.09);color:' + C_PRIMARY_D + ';font-weight:600;display:inline-block}' +
|
||
'.xllg-vis{aspect-ratio:16/10;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:72px;font-weight:900;color:rgba(255,255,255,0.95)}' +
|
||
'.xllg-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}' +
|
||
'.xllg-card{background:#fff;border-radius:16px;padding:22px;border:1px solid ' + C_LINE + '}' +
|
||
'.xllg-card h4{font-size:15px;font-weight:700;margin-bottom:8px}' +
|
||
'.xllg-card p{font-size:13px;color:' + C_MUTED + ';line-height:1.6}' +
|
||
'.xllg-role-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}' +
|
||
'.xllg-toggle{display:flex;border:1px solid ' + C_LINE + ';border-radius:10px;overflow:hidden;background:#fff}' +
|
||
'.xllg-toggle button{padding:8px 16px;font-size:12px;font-weight:600;border:none;background:transparent;color:' + C_MUTED + ';cursor:pointer}' +
|
||
'.xllg-toggle button.on{background:' + C_PRIMARY + ';color:#fff}' +
|
||
'.xllg-roles-g{display:grid;grid-template-columns:1.05fr 0.95fr;gap:20px;align-items:start}' +
|
||
'.xllg-role-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}' +
|
||
'.xllg-rc{padding:14px 16px;border-radius:14px;border:1px solid ' + C_LINE + ';background:#fff;text-align:left;cursor:pointer;width:100%;transition:all .2s}' +
|
||
'.xllg-rc:hover{box-shadow:0 4px 16px rgba(15,23,42,0.06)}' +
|
||
'.xllg-rc.on{box-shadow:0 10px 28px rgba(15,23,42,0.09);transform:translateY(-2px)}' +
|
||
'.xllg-rc-n{font-size:14px;font-weight:700}' +
|
||
'.xllg-rc-s{font-size:11px;color:' + C_MUTED + '}' +
|
||
'.xllg-rd{background:#fff;border-radius:18px;border:1px solid ' + C_LINE + ';padding:26px;position:sticky;top:88px;box-shadow:0 4px 24px rgba(15,23,42,0.04)}' +
|
||
'.xllg-rd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}' +
|
||
'.xllg-rd-h h3{font-size:21px;font-weight:800}' +
|
||
'.xllg-rd-cap{font-size:13px;color:' + C_MUTED + ';line-height:1.6;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid ' + C_LINE + '}' +
|
||
'.xllg-block{margin-bottom:14px}' +
|
||
'.xllg-block h5{font-size:13px;font-weight:700;margin-bottom:5px}' +
|
||
'.xllg-block p{font-size:13px;color:' + C_MUTED + ';line-height:1.6}' +
|
||
'.xllg-tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid ' + C_LINE + '}' +
|
||
'.xllg-tbl th,.xllg-tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid ' + C_LINE + ';vertical-align:top}' +
|
||
'.xllg-tbl th{background:#f0faf7;font-weight:700;font-size:12px;color:' + C_TEXT + '}' +
|
||
'.xllg-tbl tr:last-child td{border-bottom:none}' +
|
||
'.xllg-tbl tr:nth-child(even) td{background:#fafcfb}' +
|
||
'.xllg-steps{display:flex;flex-direction:column;gap:0;margin:12px 0}' +
|
||
'.xllg-step{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed ' + C_LINE + '}' +
|
||
'.xllg-step:last-child{border-bottom:none}' +
|
||
'.xllg-step-n{width:28px;height:28px;border-radius:8px;background:rgba(22,209,161,0.15);color:' + C_PRIMARY_D + ';font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}' +
|
||
'.xllg-step-t{font-size:13px;font-weight:600;margin-bottom:2px}' +
|
||
'.xllg-step-r{font-size:12px;color:' + C_MUTED + '}' +
|
||
'.xllg-modgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}' +
|
||
'.xllg-mod{padding:10px 12px;border-radius:10px;background:#f6fbf9;border:1px solid rgba(22,209,161,0.12);font-size:12px}' +
|
||
'.xllg-mod b{display:block;font-size:12px;margin-bottom:3px;color:' + C_TEXT + '}' +
|
||
'.xllg-mod span{color:' + C_MUTED + ';line-height:1.45}' +
|
||
'.xllg-loops{display:flex;flex-direction:column;gap:12px}' +
|
||
'.xllg-loop{padding:20px 22px;border-radius:16px;border:1px solid ' + C_LINE + ';background:#fff;cursor:pointer;transition:all .2s}' +
|
||
'.xllg-loop:hover{border-color:rgba(22,209,161,0.28)}' +
|
||
'.xllg-loop.on{box-shadow:0 10px 32px rgba(15,23,42,0.08)}' +
|
||
'.xllg-loop-h{display:flex;justify-content:space-between;align-items:center;gap:12px}' +
|
||
'.xllg-loop-t{font-size:15px;font-weight:700}' +
|
||
'.xllg-loop-f{font-size:13px;color:' + C_MUTED + ';line-height:1.65;margin-top:12px;padding-top:12px;border-top:1px dashed ' + C_LINE + '}' +
|
||
'.xllg-rm-wrap{position:relative;margin-bottom:24px}' +
|
||
'.xllg-rm-track{position:absolute;top:36px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,' + C_PRIMARY_D + '33,' + C_PRIMARY + '66,' + C_PURPLE + '33);border-radius:99px;display:none}' +
|
||
'.xllg-rm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}' +
|
||
'.xllg-ph{padding:20px 18px;border-radius:18px;border:1px solid ' + C_LINE + ';background:#fff;text-align:left;cursor:pointer;width:100%;transition:transform .22s,box-shadow .22s,border-color .22s;position:relative;overflow:hidden}' +
|
||
'.xllg-ph::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .22s}' +
|
||
'.xllg-ph:hover{transform:translateY(-3px);border-color:rgba(22,209,161,0.28);box-shadow:0 12px 32px rgba(15,23,42,0.07)}' +
|
||
'.xllg-ph.on{box-shadow:0 14px 36px rgba(15,23,42,0.1);transform:translateY(-2px)}' +
|
||
'.xllg-ph.on::before{background:linear-gradient(90deg,var(--ph-color,' + C_PRIMARY + '),transparent)}' +
|
||
'.xllg-ph-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;font-size:12px;font-weight:800;color:#fff;margin-bottom:12px}' +
|
||
'.xllg-ph-phase{font-size:11px;font-weight:600;color:' + C_MUTED + ';margin-bottom:4px;letter-spacing:0.02em}' +
|
||
'.xllg-ph-t{font-size:15px;font-weight:800;line-height:1.35;margin-bottom:6px;color:' + C_TEXT + '}' +
|
||
'.xllg-ph-sub{font-size:12px;color:' + C_MUTED + ';line-height:1.45}' +
|
||
'.xllg-pd{background:linear-gradient(135deg,#fff 0%,#f8fcfb 100%);border-radius:20px;border:1px solid ' + C_LINE + ';padding:28px;box-shadow:0 4px 24px rgba(15,23,42,0.04)}' +
|
||
'.xllg-pd-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid ' + C_LINE + '}' +
|
||
'.xllg-pd-badge{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}' +
|
||
'.xllg-pd-head h4{margin:0;font-size:20px;font-weight:800;flex:1;min-width:0}' +
|
||
'.xllg-pd-sub{font-size:13px;color:' + C_MUTED + ';width:100%;margin-top:-8px;padding-left:52px}' +
|
||
'.xllg-pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}' +
|
||
'.xllg-pd dt{font-size:11px;font-weight:700;color:' + C_MUTED + ';text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px}' +
|
||
'.xllg-pd dd{font-size:14px;line-height:1.55}' +
|
||
'.xllg-pd-hl{padding:16px 18px;border-radius:14px;border-left:3px solid ' + C_PRIMARY + ';background:rgba(22,209,161,0.07);font-size:14px;line-height:1.65;color:' + C_TEXT + ';margin-bottom:20px}' +
|
||
'.xllg-pd-hl b{color:' + C_PRIMARY_D + ';font-weight:700;display:block;margin-bottom:6px;font-size:12px;letter-spacing:0.04em;text-transform:uppercase}' +
|
||
'.xllg-pd-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}' +
|
||
'.xllg-pd-items li{display:flex;gap:10px;font-size:13px;line-height:1.55;color:' + C_TEXT + '}' +
|
||
'.xllg-pd-items li::before{content:"";width:6px;height:6px;border-radius:50%;background:' + C_PRIMARY + ';margin-top:7px;flex-shrink:0}' +
|
||
'.xllg-pd-items-t{font-size:11px;font-weight:700;color:' + C_MUTED + ';text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px}' +
|
||
'.xllg-sum{background:linear-gradient(135deg,' + C_HERO + ',' + C_HERO2 + ');border-radius:22px;padding:36px;color:#fff}' +
|
||
'.xllg-sum h3{font-size:21px;font-weight:800;margin-bottom:22px}' +
|
||
'.xllg-sum ul{list-style:none;display:flex;flex-direction:column;gap:16px}' +
|
||
'.xllg-sum li{display:flex;gap:14px;font-size:14px;line-height:1.65;color:rgba(255,255,255,0.9)}' +
|
||
'.xllg-sum-i{flex-shrink:0;width:26px;height:26px;border-radius:9px;background:rgba(22,209,161,0.28);color:#7ef0d4;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}' +
|
||
'.xllg-ft{text-align:center;padding:28px 24px 36px;font-size:12px;color:' + C_MUTED + '}' +
|
||
'.xllg-top{position:fixed;right:24px;bottom:28px;width:44px;height:44px;border-radius:14px;border:none;background:' + C_PRIMARY + ';color:#fff;font-size:18px;cursor:pointer;box-shadow:0 6px 20px rgba(22,209,161,0.4);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}' +
|
||
'.xllg-top.show{opacity:1;pointer-events:auto}' +
|
||
'.xllg-top:hover{transform:translateY(-2px)}' +
|
||
'.xllg-tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(22,209,161,0.12);color:' + C_PRIMARY_D + '}' +
|
||
'@media(min-width:1025px){.xllg-rm-track{display:block}}' +
|
||
'@media(max-width:1024px){.xllg-hero-in{grid-template-columns:1fr}.xllg-eco{margin-top:8px}.xllg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.xllg-panel{grid-template-columns:1fr}.xllg-grid3{grid-template-columns:1fr}.xllg-roles-g{grid-template-columns:1fr}.xllg-rd{position:static}.xllg-rm{grid-template-columns:repeat(2,minmax(0,1fr))}.xllg-pd-grid{grid-template-columns:1fr}.xllg-pd-sub{padding-left:0;margin-top:4px}}' +
|
||
'@media(max-width:640px){.xllg-nav-in{padding:0 16px;position:relative;flex-wrap:wrap;height:auto;min-height:58px;padding-top:10px;padding-bottom:10px}.xllg-links{display:none;position:absolute;top:58px;left:0;right:0;background:#fff;flex-direction:column;padding:12px 16px;border-bottom:1px solid ' + C_LINE + ';box-shadow:0 8px 24px rgba(15,23,42,0.08)}.xllg-nav.open .xllg-links{display:flex}.xllg-menu{display:block}.xllg-kpis{grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-top:-28px}.xllg-main{padding:40px 16px 56px}.xllg-sec{padding:20px 16px;border-radius:18px;margin-bottom:40px}.xllg-role-list{grid-template-columns:1fr}.xllg-rm{grid-template-columns:1fr}.xllg-modgrid{grid-template-columns:1fr}.xllg-hero{padding:52px 16px 64px}}' +
|
||
'@media(prefers-reduced-motion:reduce){.xllg-kpi,.xllg-ph,.xllg-loop,.xllg-rc,.xllg-top,.xllg-progress-bar{transition:none!important}.xllg-kpi:hover,.xllg-ph:hover{transform:none}}';
|
||
|
||
function tag(text, color) {
|
||
if (Tag) return React.createElement(Tag, { color: color || 'cyan', style: { borderRadius: 6, fontWeight: 600 } }, text);
|
||
return React.createElement('span', { className: 'xllg-tag', style: color ? { background: color + '18', color: color } : undefined }, text);
|
||
}
|
||
|
||
function renderRoleDetail(role) {
|
||
var nodes = [
|
||
React.createElement('p', { key: 'cap', className: 'xllg-rd-cap' }, role.capability)
|
||
];
|
||
if (role.steps) {
|
||
nodes.push(React.createElement('div', { key: 'steps', className: 'xllg-steps' },
|
||
role.steps.map(function (s) {
|
||
return React.createElement('div', { key: s[0], className: 'xllg-step' },
|
||
React.createElement('div', { className: 'xllg-step-n' }, s[0]),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { className: 'xllg-step-t' }, s[1]),
|
||
React.createElement('div', { className: 'xllg-step-r' }, s[2])
|
||
)
|
||
);
|
||
})
|
||
));
|
||
}
|
||
if (role.modules) {
|
||
nodes.push(React.createElement('div', { key: 'mods', className: 'xllg-modgrid' },
|
||
role.modules.map(function (m) {
|
||
return React.createElement('div', { key: m[0], className: 'xllg-mod' },
|
||
React.createElement('b', null, m[0]),
|
||
React.createElement('span', null, m[1])
|
||
);
|
||
})
|
||
));
|
||
}
|
||
if (role.detail) {
|
||
role.detail.forEach(function (b, i) {
|
||
nodes.push(React.createElement('div', { key: 'd' + i, className: 'xllg-block' },
|
||
React.createElement('h5', null, b.title),
|
||
React.createElement('p', null, b.text)
|
||
));
|
||
});
|
||
}
|
||
if (role.tags) {
|
||
nodes.push(React.createElement('div', { key: 'tags', style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 } },
|
||
role.tags.map(function (t) { return tag(t); })
|
||
));
|
||
}
|
||
nodes.push(React.createElement('p', { key: 'sc', style: { fontSize: 12, color: C_MUTED, marginTop: 14 } }, '关键场景：' + role.scenes));
|
||
return nodes;
|
||
}
|
||
|
||
return React.createElement(App, null,
|
||
React.createElement('div', { className: 'xllg-root' },
|
||
React.createElement('style', null, css),
|
||
React.createElement('div', { className: 'xllg-progress', 'aria-hidden': true },
|
||
React.createElement('div', { className: 'xllg-progress-bar', style: { width: scrollPct + '%' } })
|
||
),
|
||
|
||
React.createElement('nav', { className: 'xllg-nav' + (navOpen ? ' open' : ''), 'aria-label': '页面导航' },
|
||
React.createElement('div', { className: 'xllg-nav-in' },
|
||
React.createElement('div', { className: 'xllg-brand' },
|
||
React.createElement('div', { className: 'xllg-logo' }, '羚'),
|
||
React.createElement('span', null, '小羚羚 · 规划设计')
|
||
),
|
||
React.createElement('button', { type: 'button', className: 'xllg-menu', onClick: function () { setNavOpen(!navOpen); } }, navOpen ? '收起' : '菜单'),
|
||
React.createElement('div', { className: 'xllg-links' },
|
||
sectionNav.map(function (item) {
|
||
return React.createElement('button', {
|
||
key: item.key, type: 'button', className: 'xllg-link' + (activeSection === item.key ? ' on' : ''),
|
||
onClick: function () { scrollToSection(item.key); }
|
||
}, item.label);
|
||
})
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('header', { id: 'xllg-sec-hero', className: 'xllg-hero xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-hero-bg' }),
|
||
React.createElement('div', { className: 'xllg-hero-grid' }),
|
||
React.createElement('div', { className: 'xllg-hero-in' },
|
||
React.createElement('div', null,
|
||
React.createElement('div', { className: 'xllg-pills' },
|
||
React.createElement('span', { className: 'xllg-pill xllg-pill-a' }, '方案书 v1.0'),
|
||
React.createElement('span', { className: 'xllg-pill' }, '手机端 · 小羚羚'),
|
||
React.createElement('span', { className: 'xllg-pill' }, 'OneOS 生态')
|
||
),
|
||
React.createElement('h1', { className: 'xllg-h1' }, '小羚羚氢能产业数字化平台'),
|
||
React.createElement('p', { className: 'xllg-lead' },
|
||
'以手机端「小羚羚」为统一入口，连接七类用户，实现氢气采购—加氢站—氢能车运营全链路数字化闭环。'
|
||
),
|
||
React.createElement('div', { className: 'xllg-quote' },
|
||
React.createElement('b', null, '一句话定位：'),
|
||
'小羚羚 = 氢能产业的「业务操作系统」—— 一端登录、多角色协同，把合同、车辆、能源、维保、氢气贸易串成可落地、可风控、可结算的完整商业链条。'
|
||
),
|
||
React.createElement('div', { className: 'xllg-cta' },
|
||
React.createElement('button', { type: 'button', className: 'xllg-btn xllg-btn-p', onClick: function () { scrollToSection('roles'); } }, '查看用户角色'),
|
||
React.createElement('button', { type: 'button', className: 'xllg-btn xllg-btn-g', onClick: function () { scrollToSection('roadmap'); } }, '落地路线图')
|
||
)
|
||
),
|
||
React.createElement('div', { className: 'xllg-eco' },
|
||
React.createElement('div', { className: 'xllg-eco-title' }, 'Hydrogen Value Chain'),
|
||
React.createElement('div', { className: 'xllg-eco-flow' },
|
||
chainSteps.map(function (s) {
|
||
return React.createElement('div', { key: s.key, className: 'xllg-eco-node' },
|
||
React.createElement('div', { className: 'xllg-eco-dot', style: { background: s.color } }, s.icon),
|
||
React.createElement('div', null,
|
||
React.createElement('div', { className: 'xllg-eco-label' }, s.title),
|
||
React.createElement('div', { className: 'xllg-eco-sub' }, s.desc)
|
||
)
|
||
);
|
||
})
|
||
)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('div', { className: 'xllg-kpis' },
|
||
kpiStats.map(function (k) {
|
||
return React.createElement('div', { key: k.label, className: 'xllg-kpi' },
|
||
React.createElement('div', { className: 'xllg-kpi-v', style: { color: k.color } },
|
||
k.value, k.unit ? React.createElement('span', { className: 'xllg-kpi-u' }, k.unit) : null
|
||
),
|
||
React.createElement('div', { className: 'xllg-kpi-l' }, k.label)
|
||
);
|
||
})
|
||
),
|
||
|
||
React.createElement('main', { className: 'xllg-main' },
|
||
|
||
React.createElement('section', { id: 'xllg-sec-chain', className: 'xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-sec-tag' }, 'Business Plan'),
|
||
React.createElement('h2', { className: 'xllg-sec-h' }, '氢能产业链商业计划'),
|
||
React.createElement('p', { className: 'xllg-sec-d' }, '覆盖氢气采购、加氢站运营、氢能车租赁/自营，形成「制氢—储运—加注—运营—结算」一体化商业模式。'),
|
||
React.createElement('div', { className: 'xllg-tabs' },
|
||
chainSteps.map(function (s) {
|
||
var on = activeChain === s.key;
|
||
return React.createElement('button', { key: s.key, type: 'button', className: 'xllg-tab' + (on ? ' on' : ''), style: on ? { background: s.color } : undefined, onClick: function () { setActiveChain(s.key); } }, s.title);
|
||
})
|
||
),
|
||
React.createElement('div', { className: 'xllg-panel' },
|
||
React.createElement('div', null,
|
||
React.createElement('h3', null, selectedChain.title),
|
||
React.createElement('p', null, selectedChain.biz),
|
||
React.createElement('span', { className: 'xllg-rev' }, '收入来源：' + selectedChain.revenue)
|
||
),
|
||
React.createElement('div', { className: 'xllg-vis', style: { background: 'linear-gradient(145deg,' + selectedChain.color + ',rgba(0,0,0,0.3))' } }, selectedChain.icon)
|
||
),
|
||
React.createElement('div', { className: 'xllg-grid3' },
|
||
chainSteps.map(function (s) {
|
||
return React.createElement('div', { key: s.key + 'c', className: 'xllg-card' },
|
||
React.createElement('h4', null, s.title),
|
||
React.createElement('p', null, s.desc + '。' + s.revenue)
|
||
);
|
||
})
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xllg-sec-roles', className: 'xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-sec-tag' }, 'Platform'),
|
||
React.createElement('h2', { className: 'xllg-sec-h' }, '七类用户 · 一套数据底座'),
|
||
React.createElement('div', { className: 'xllg-role-head' },
|
||
React.createElement('p', { className: 'xllg-sec-d', style: { marginBottom: 0 } }, '点击角色查看详情，或切换表格总览。'),
|
||
React.createElement('div', { className: 'xllg-toggle' },
|
||
React.createElement('button', { type: 'button', className: roleView === 'card' ? 'on' : '', onClick: function () { setRoleView('card'); } }, '卡片视图'),
|
||
React.createElement('button', { type: 'button', className: roleView === 'table' ? 'on' : '', onClick: function () { setRoleView('table'); } }, '表格总览')
|
||
)
|
||
),
|
||
roleView === 'table'
|
||
? React.createElement('table', { className: 'xllg-tbl' },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
['用户端', '主体', '核心能力', '关键场景'].map(function (h) {
|
||
return React.createElement('th', { key: h }, h);
|
||
})
|
||
)
|
||
),
|
||
React.createElement('tbody', null,
|
||
roleTableRows.map(function (row, ri) {
|
||
return React.createElement('tr', { key: ri },
|
||
row.map(function (cell, ci) { return React.createElement('td', { key: ci }, cell); })
|
||
);
|
||
})
|
||
)
|
||
)
|
||
: React.createElement('div', { className: 'xllg-roles-g' },
|
||
React.createElement('div', { className: 'xllg-role-list' },
|
||
roles.map(function (r) {
|
||
var on = activeRole === r.id;
|
||
return React.createElement('button', {
|
||
key: r.id, type: 'button', className: 'xllg-rc' + (on ? ' on' : ''),
|
||
style: on ? { borderLeft: '3px solid ' + r.color, background: 'linear-gradient(135deg,rgba(22,209,161,0.05),#fff)' } : { borderLeft: '3px solid transparent' },
|
||
onClick: function () { setActiveRole(r.id); }
|
||
},
|
||
React.createElement('div', { className: 'xllg-rc-n' }, r.name),
|
||
React.createElement('div', { className: 'xllg-rc-s' }, r.sub)
|
||
);
|
||
})
|
||
),
|
||
React.createElement('div', { className: 'xllg-rd' },
|
||
React.createElement('div', { className: 'xllg-rd-h' },
|
||
React.createElement('h3', null, selectedRole.name),
|
||
tag(selectedRole.tag, selectedRole.color)
|
||
),
|
||
renderRoleDetail(selectedRole)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xllg-sec-loops', className: 'xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-sec-tag' }, 'Closed Loop'),
|
||
React.createElement('h2', { className: 'xllg-sec-h' }, '三大业务闭环总览'),
|
||
React.createElement('p', { className: 'xllg-sec-d' }, '点击展开查看完整业务流转路径。'),
|
||
React.createElement('div', { className: 'xllg-loops' },
|
||
loops.map(function (lp) {
|
||
var on = activeLoop === lp.id;
|
||
return React.createElement('div', {
|
||
key: lp.id, className: 'xllg-loop' + (on ? ' on' : ''),
|
||
style: on ? { borderLeft: '3px solid ' + lp.color } : undefined,
|
||
role: 'button', tabIndex: 0,
|
||
onClick: function () { setActiveLoop(on ? '' : lp.id); },
|
||
onKeyDown: function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActiveLoop(on ? '' : lp.id); } }
|
||
},
|
||
React.createElement('div', { className: 'xllg-loop-h' },
|
||
React.createElement('span', { className: 'xllg-loop-t' }, lp.title),
|
||
tag(lp.tag, lp.color)
|
||
),
|
||
on ? React.createElement('div', { className: 'xllg-loop-f' }, lp.flow) : null
|
||
);
|
||
})
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xllg-sec-roadmap', className: 'xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-sec-tag' }, 'Roadmap'),
|
||
React.createElement('h2', { className: 'xllg-sec-h' }, '分阶段落地路线图'),
|
||
React.createElement('p', { className: 'xllg-sec-d' }, '四步递进落地：先打通内部业务协同与客户租车闭环，再延伸能源维保与氢气贸易能力。'),
|
||
React.createElement('div', { className: 'xllg-rm-wrap' },
|
||
React.createElement('div', { className: 'xllg-rm-track', 'aria-hidden': true }),
|
||
React.createElement('div', { className: 'xllg-rm' },
|
||
phases.map(function (p) {
|
||
var on = activePhase === p.id;
|
||
return React.createElement('button', {
|
||
key: p.id, type: 'button', className: 'xllg-ph' + (on ? ' on' : ''),
|
||
style: { '--ph-color': p.color, borderColor: on ? p.color + '55' : undefined },
|
||
onClick: function () { setActivePhase(p.id); },
|
||
'aria-pressed': on
|
||
},
|
||
React.createElement('div', { className: 'xllg-ph-step', style: { background: 'linear-gradient(135deg,' + p.color + ',' + p.color + 'cc)' } }, p.step),
|
||
React.createElement('div', { className: 'xllg-ph-phase' }, p.phase),
|
||
React.createElement('div', { className: 'xllg-ph-t' }, p.title),
|
||
React.createElement('div', { className: 'xllg-ph-sub' }, p.subtitle)
|
||
);
|
||
})
|
||
)
|
||
),
|
||
React.createElement('div', { className: 'xllg-pd' },
|
||
React.createElement('div', { className: 'xllg-pd-head' },
|
||
React.createElement('div', { className: 'xllg-pd-badge', style: { background: 'linear-gradient(135deg,' + selectedPhase.color + ',' + selectedPhase.color + 'bb)' } }, selectedPhase.step),
|
||
React.createElement('h4', null, selectedPhase.title),
|
||
React.createElement('p', { className: 'xllg-pd-sub' }, selectedPhase.phase + ' · ' + selectedPhase.subtitle)
|
||
),
|
||
selectedPhase.highlight ? React.createElement('div', { className: 'xllg-pd-hl', style: { borderLeftColor: selectedPhase.color, background: selectedPhase.color + '0d' } },
|
||
React.createElement('b', null, '阶段要点'),
|
||
selectedPhase.highlight
|
||
) : null,
|
||
React.createElement('dl', { className: 'xllg-pd-grid' },
|
||
React.createElement('div', null,
|
||
React.createElement('dt', null, '重点模块'),
|
||
React.createElement('dd', null, selectedPhase.focus)
|
||
),
|
||
React.createElement('div', null,
|
||
React.createElement('dt', null, '交付成果'),
|
||
React.createElement('dd', null, selectedPhase.deliver)
|
||
)
|
||
),
|
||
selectedPhase.items && selectedPhase.items.length ? React.createElement('div', null,
|
||
React.createElement('div', { className: 'xllg-pd-items-t' }, '阶段细化'),
|
||
React.createElement('ul', { className: 'xllg-pd-items' },
|
||
selectedPhase.items.map(function (item, i) {
|
||
return React.createElement('li', { key: i }, item);
|
||
})
|
||
)
|
||
) : null
|
||
)
|
||
),
|
||
|
||
React.createElement('section', { id: 'xllg-sec-summary', className: 'xllg-sec' },
|
||
React.createElement('div', { className: 'xllg-sum' },
|
||
React.createElement('h3', null, '关键重点'),
|
||
React.createElement('ul', null,
|
||
summaryPoints.map(function (t, i) {
|
||
return React.createElement('li', { key: i },
|
||
React.createElement('span', { className: 'xllg-sum-i' }, i + 1),
|
||
React.createElement('span', null, t)
|
||
);
|
||
})
|
||
)
|
||
)
|
||
)
|
||
),
|
||
|
||
React.createElement('footer', { className: 'xllg-ft' }, '文档版本 v1.0 · 羚牛氢能 · 小羚羚规划设计 · OneOS 生态 · 供内部汇报使用'),
|
||
|
||
React.createElement('button', {
|
||
type: 'button', className: 'xllg-top' + (showTop ? ' show' : ''), title: '回到顶部',
|
||
onClick: function () { window.scrollTo({ top: 0, behavior: 'smooth' }); }
|
||
}, '↑')
|
||
)
|
||
);
|
||
};
|
||
|
||
export default Component;
|