0d7d5b0a43
- 新增了一个关于汇率预测的markdown文件（125行新增） - 修改了一个工作计划汇报的HTML文件（大量修改） - 新增了一个统计计算器的HTML文件（451行新增） 基于这些变化，生成的常规提交信息如下： feat: 新增汇率预测文档和统计计算器功能 - 新增汇率预测相关的markdown文档 - 新增统计计算器HTML页面，提供数据分析功能 - 重构工作计划汇报页面，优化内容结构和布局
1028 lines
58 KiB
HTML
1028 lines
58 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>商业规划 - 服到家智能回收平台</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#10b981',
|
||
secondary: '#059669',
|
||
accent: '#f59e0b'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.gradient-bg {
|
||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||
}
|
||
.section-shadow {
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
@media print {
|
||
.no-print { display: none !important; }
|
||
}
|
||
|
||
/* 精益画布样式 */
|
||
.lean-canvas-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(240px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
@media (max-width: 1280px) {
|
||
.lean-canvas-grid {
|
||
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.lean-canvas-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.canvas-box {
|
||
border: 2px solid;
|
||
border-radius: 0.75rem;
|
||
background: white;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.canvas-header {
|
||
padding: 0.75rem 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
justify-content: flex-start;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.canvas-title {
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
margin: 0;
|
||
}
|
||
|
||
.canvas-content {
|
||
padding: 1.25rem;
|
||
flex-grow: 1;
|
||
}\r\n </style>
|
||
</head>
|
||
<body class="bg-gray-50 font-sans">
|
||
<!-- 导航栏 -->
|
||
<nav class="gradient-bg text-white py-4 px-6 sticky top-0 z-50 no-print">
|
||
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
||
<h1 class="text-2xl font-bold">服到家 商业规划</h1>
|
||
<div class="text-sm opacity-90">
|
||
2024年-9月
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主要内容 -->
|
||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||
<!-- 执行摘要 -->
|
||
<section class="mb-12">
|
||
<div class="bg-white rounded-xl p-8 section-shadow">
|
||
<div class="text-center mb-8">
|
||
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
|
||
服到家智能回收平台
|
||
</h1>
|
||
<p class="text-xl text-gray-600 mb-6">
|
||
智能废品回收解决方案
|
||
</p>
|
||
<div class="flex flex-wrap justify-center gap-4 text-sm">
|
||
<span class="bg-primary text-white px-4 py-2 rounded-full">智能终端</span>
|
||
<span class="bg-accent text-white px-4 py-2 rounded-full">AI识别</span>
|
||
<span class="bg-gray-600 text-white px-4 py-2 rounded-full">价格透明</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-8 mt-8">
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-primary mb-2">1500元</div>
|
||
<div class="text-gray-600">单设备投入成本</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div class="text-3xl font-bold text-primary mb-2">4-10月</div>
|
||
<div class="text-gray-600">预期回本周期</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心问题与解决方案 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">市场需求分析</h2>
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-primary mb-4">机会洞察</h3>
|
||
<p class="text-gray-600 mb-4 text-sm leading-relaxed">
|
||
城市居民生活垃圾分类要求逐步常态化，《“十四五”循环经济发展规划》和多地再生资源补贴政策正在加速推进可回收物闭环管理。
|
||
结合《废品回收小程序PRD V2.0》和《商业计划书-绿邻回收》中的用户调研数据，我们将市场需求聚焦在“人工引导+自助投递”的混合服务路径，既保留人情温度，又发挥数字化效率。
|
||
</p>
|
||
<ul class="space-y-3 text-gray-600 text-sm leading-relaxed">
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2">•</span>
|
||
<span>政策驱动：双碳目标、城市生活垃圾分类条例以及社区积分激励，持续拉动规范化回收服务需求。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2">•</span>
|
||
<span>需求缺口：一线及新一线城市社区回收设施覆盖率长期偏低，夜间和节假日服务能力严重不足。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2">•</span>
|
||
<span>服务模式升级：站点合作商提供现场轻引导，配合自助终端完成称重、计价与结算，显著降低老年人使用门槛。</span>
|
||
</li>
|
||
</ul>
|
||
<div class="mt-6">
|
||
<h4 class="font-semibold text-gray-800 mb-2">核心痛点</h4>
|
||
<ul class="grid grid-cols-1 gap-3 text-gray-600 text-sm leading-relaxed">
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2 mt-0.5">①</span>
|
||
<span>居民端：缺乏可信的陪伴式引导，担心操作出错或被骗价，尤其是老年群体需要面对面协助才能建立信任。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2 mt-0.5">②</span>
|
||
<span>场地方：希望利用现有店员或管理员扩展环保服务，但缺少标准化流程与收益核算工具。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-primary mr-2 mt-0.5">③</span>
|
||
<span>运营端：人工引导、库存监控与清运调度尚未数据化，缺乏对一线人员培训与绩效的统一管理手段。</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-secondary mb-4">目标客群与价值主张</h3>
|
||
<div class="space-y-4 text-sm text-gray-600 leading-relaxed">
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">C端家庭用户</h4>
|
||
<p>以“王大妈”“小张”等画像为代表，用户希望有人在旁提醒关键步骤，同时保持流程像ATM一样简洁透明。</p>
|
||
<ul class="list-disc pl-5 space-y-1">
|
||
<li>现场引导人员完成身份确认和品类选择，自助终端负责称重、计价与到账。</li>
|
||
<li>AI识别+自动称重即时计价，配合引导人员提示异常，确保价格透明可追溯。</li>
|
||
<li>小程序记录交易历史，线下讲解绿色积分和环保成就，强化复购动机。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">B端场地方</h4>
|
||
<p>社区商超、快递站、物业等场景已有店员或管理员，可在闲时提供引导服务并分享收益。</p>
|
||
<ul class="list-disc pl-5 space-y-1">
|
||
<li>模块化终端占地小、噪音低，支持与收银台或服务台联动，强化品牌环保形象。</li>
|
||
<li>系统提供收益分成报表、人员培训指引和异常提示，帮助场地方清楚掌握投入产出。</li>
|
||
<li>结合线下宣传活动和会员体系，引导用户形成定期到店的回收习惯。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">运营与清运团队</h4>
|
||
<p>需要标准化的后台系统支撑人工引导与自助投递协同，降低人力密度并提升数据决策能力。</p>
|
||
<ul class="list-disc pl-5 space-y-1">
|
||
<li>统一后台实时监控库存、人员值守与异常情况，自动派发清运和补货任务。</li>
|
||
<li>运维APP记录巡检、培训签到与备件管理，帮助一线引导员快速响应问题。</li>
|
||
<li>可视化数据看板支持设备与人员绩效排名、品类趋势等精细化运营指标。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6 mt-8">
|
||
<div class="bg-white rounded-xl p-5 section-shadow text-center">
|
||
<div class="text-2xl font-bold text-primary mb-1">10-15台</div>
|
||
<p class="text-sm text-gray-600">MVP阶段计划投放终端数量，与站点店员配合验证“人工引导+自助投递”协同模式。</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-5 section-shadow text-center">
|
||
<div class="text-2xl font-bold text-secondary mb-1">15笔/台/日</div>
|
||
<p class="text-sm text-gray-600">目标单台日均交易量，匹配引导人员轮班安排和PRD设定的复购率40%。</p>
|
||
</div>
|
||
<div class="bg-white rounded-xl p-5 section-shadow text-center">
|
||
<div class="text-2xl font-bold text-accent mb-1">3000元</div>
|
||
<p class="text-sm text-gray-600">单台设备投入与培训成本回收目标，支撑场地方引导人力与数字化系统的可持续运营。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品画布 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">产品精益画布</h2>
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<div class="text-center mb-6">
|
||
<h3 class="text-2xl font-bold text-primary mb-2">微信扫一扫，人工引导+自助协作回收</h3>
|
||
<p class="text-gray-600">基于AI识别与轻量人力协同的社区回收解决方案</p>
|
||
</div>
|
||
|
||
<div class="lean-canvas-grid">
|
||
<div class="canvas-box bg-red-50 border-red-200">
|
||
<div class="canvas-header bg-red-100">
|
||
<h4 class="canvas-title text-red-800">问题与洞察</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">居民痛点</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 卖废品需囤积等待，流程不透明</li>
|
||
<li>• 老年人担心操作失误、价格被压</li>
|
||
<li>• 缺乏可信的线下陪伴式服务</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">场地方痛点</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 人工记账效率低，员工培训缺标准</li>
|
||
<li>• 环保服务无法量化收益与回报</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">现有替代方案局限</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 流动回收车时间地点不固定</li>
|
||
<li>• 纯人工回收点成本高、体验不佳</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-green-50 border-green-200">
|
||
<div class="canvas-header bg-green-100">
|
||
<h4 class="canvas-title text-green-800">目标客群</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">C端核心用户</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 社区中老年居民：需要面对面引导保障安全感</li>
|
||
<li>• 环保意识强的年轻家庭：追求高效与积分激励</li>
|
||
<li>• 上班族：利用碎片化时间快速处理废品</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">B端合作伙伴</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 社区超市、便利店、快递驿站</li>
|
||
<li>• 物业服务点、社区管理者</li>
|
||
<li>• 具备闲时人力的社区服务商</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-orange-50 border-orange-200">
|
||
<div class="canvas-header bg-orange-100">
|
||
<h4 class="canvas-title text-orange-800">价值主张</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="text-center mb-4">
|
||
<p class="font-bold text-orange-600 text-sm leading-relaxed">
|
||
人工引导降低门槛，智能终端保障效率与透明
|
||
</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">服务体验</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 线下引导讲解关键步骤，适老化语音+大字体提示</li>
|
||
<li>• 微信小程序记录收益、碳减排成就</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">产品差异化</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 终端融合AI识别与电子称重，自动计价</li>
|
||
<li>• 模块化硬件，点位快速部署与维护</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">运营壁垒</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 数据驱动的价格与调度体系</li>
|
||
<li>• 标准化培训沉淀引导员操作手册</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-blue-50 border-blue-200">
|
||
<div class="canvas-header bg-blue-100">
|
||
<h4 class="canvas-title text-blue-800">解决方案</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">终端+人员协同</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 引导员完成身份核验、品类确认与异常处理</li>
|
||
<li>• 自助终端负责识别、称重、结算与票据推送</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">多角色系统</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 居民端、引导端、清运端三端协作</li>
|
||
<li>• 后台实时监控库存与设备状态</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">适配场景</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 社区综合服务点、物业大厅、商超入口</li>
|
||
<li>• 可扩展至校园、园区等细分场景</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-purple-50 border-purple-200">
|
||
<div class="canvas-header bg-purple-100">
|
||
<h4 class="canvas-title text-purple-800">渠道策略</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">线下获客</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 与社区超市、物业、快递站共建服务点</li>
|
||
<li>• 引导员在高峰时段驻点讲解</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">线上触达</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 微信生态扫码直达，公众号/小程序运营</li>
|
||
<li>• 社群运营、社区公告、积分活动触达</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">合作拓展</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 政府/环保机构联合宣导</li>
|
||
<li>• 与再生资源公司共建回收网络</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-teal-50 border-teal-200">
|
||
<div class="canvas-header bg-teal-100">
|
||
<h4 class="canvas-title text-teal-800">关键指标</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">运营指标</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 单终端日均交易量、有效引导时长</li>
|
||
<li>• 引导员覆盖社区数、设备在线率</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">用户指标</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 操作成功率、用户满意度/复购率</li>
|
||
<li>• 积分使用率、推荐率</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-yellow-50 border-yellow-200">
|
||
<div class="canvas-header bg-yellow-100">
|
||
<h4 class="canvas-title text-yellow-800">成本结构</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">单点成本</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 终端硬件约1500元/台</li>
|
||
<li>• 场地布点与安装约2000元/点</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">运营成本</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 云服务、算法维护、数据存储</li>
|
||
<li>• 引导员培训补贴、清运物流、人力排班</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">合作成本</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 与场地方收益分成/奖励</li>
|
||
<li>• 宣传物料与社区活动投入</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="canvas-box bg-green-50 border-green-200">
|
||
<div class="canvas-header bg-green-100">
|
||
<h4 class="canvas-title text-green-800">收入结构</h4>
|
||
</div>
|
||
<div class="canvas-content">
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">主要收入流</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 废品回收价差（居民回收价 vs 批发销售价）</li>
|
||
<li>• 与合作场地方按成交量分成</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-4">
|
||
<p class="font-semibold text-gray-800 text-sm mb-2">增值收入</p>
|
||
<ul class="text-xs text-gray-700 space-y-1">
|
||
<li>• 数据服务、碳积分兑换合作</li>
|
||
<li>• 品牌联合营销、广告植入</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-green-100 rounded p-3 text-center">
|
||
<p class="text-sm font-bold text-green-700">单点投入约3000元，预计4-10个月回本</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>\r\n <!-- 用户故事与场景 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">用户故事与应用场景</h2>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- 王大妈故事 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-pink-100 rounded-full flex items-center justify-center mr-4">
|
||
<span class="text-2xl">👵</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-800">王大妈</h3>
|
||
<p class="text-sm text-gray-600">65岁退休居民</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">
|
||
"以前卖废品要等收废品的人来，时间不固定。现在用这个智能终端，就像用ATM一样简单，扫一下就能卖，价格还很透明。"
|
||
</p>
|
||
<div class="text-xs text-primary font-semibold">
|
||
24小时随时回收 • 操作简单直观 • 价格透明
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 小张故事 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
|
||
<span class="text-2xl">👨💼</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-800">小张</h3>
|
||
<p class="text-sm text-gray-600">30岁上班族</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">
|
||
"下班路过超市时就能处理家里的快递纸箱，不用排队等人工服务，非常方便。钱直接到微信零钱里。"
|
||
</p>
|
||
<div class="text-xs text-primary font-semibold">
|
||
随时处理废品 • 无需等待 • 即时到账
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 李老板故事 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
|
||
<span class="text-2xl">👨💼</span>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-gray-800">李老板</h3>
|
||
<p class="text-sm text-gray-600">超市店主</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-gray-600 text-sm mb-3">
|
||
"设备放在店门口，不影响营业，还能带来额外收入。每天都有居民来用，也增加了店里的客流量。"
|
||
</p>
|
||
<div class="text-xs text-primary font-semibold">
|
||
零人工成本 • 增加客流 • 稳定收入
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 商业模式与盈利分析 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">商业模式与盈利分析</h2>
|
||
<div class="grid lg:grid-cols-2 gap-8">
|
||
<!-- 商业流程 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">业务流程闭环</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">1</div>
|
||
<span class="text-gray-700">居民携带废品到智能终端</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">2</div>
|
||
<span class="text-gray-700">微信扫码登录，选择回收品类</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">3</div>
|
||
<span class="text-gray-700">AI识别验证，自动称重计价</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">4</div>
|
||
<span class="text-gray-700">确认交易，资金即时到账</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">5</div>
|
||
<span class="text-gray-700">系统监控库存，自动清运调度</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">6</div>
|
||
<span class="text-gray-700">运输至处理中心，批量销售</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 盈利模式 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-gray-800 mb-4">收入结构分析</h3>
|
||
<div class="space-y-4">
|
||
<div class="border-l-4 border-green-500 pl-4">
|
||
<h4 class="font-semibold text-gray-800 mb-2">核心收入（80%）</h4>
|
||
<p class="text-gray-600 text-sm">废品回收差价：终端回收价与批发销售价差额</p>
|
||
</div>
|
||
<div class="border-l-4 border-blue-500 pl-4">
|
||
<h4 class="font-semibold text-gray-800 mb-2">合作分成（15%）</h4>
|
||
<p class="text-gray-600 text-sm">与场地方按交易量分成，激励合作</p>
|
||
</div>
|
||
<div class="border-l-4 border-yellow-500 pl-4">
|
||
<h4 class="font-semibold text-gray-800 mb-2">增值服务（5%）</h4>
|
||
<p class="text-gray-600 text-sm">数据服务、绿色积分商城佣金</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4 mt-4">
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-green-600">4-10个月</div>
|
||
<div class="text-sm text-gray-600">预期回本周期</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术架构与产品功能 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">技术架构与产品功能</h2>
|
||
<div class="grid lg:grid-cols-3 gap-6">
|
||
<!-- 智能终端 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-lg font-bold text-primary mb-4">智能终端系统</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-primary rounded-full mr-2"></span>
|
||
1-3个分类回收袋，支持多品类
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-primary rounded-full mr-2"></span>
|
||
AI摄像头识别，准确率>95%
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-primary rounded-full mr-2"></span>
|
||
精准称重传感器，自动计价
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-primary rounded-full mr-2"></span>
|
||
适老化交互界面，大字体显示
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-primary rounded-full mr-2"></span>
|
||
铝合金框架，防水防盗设计
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 用户小程序 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-lg font-bold text-blue-600 mb-4">用户端小程序</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||
微信扫码一键登录
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||
实时查看附近终端状态
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||
透明价格展示系统
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||
交易记录与余额管理
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-blue-600 rounded-full mr-2"></span>
|
||
一键提现至微信零钱
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 管理后台 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-lg font-bold text-purple-600 mb-4">管理后台系统</h3>
|
||
<ul class="space-y-2 text-sm text-gray-600">
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
|
||
实时监控设备运行状态
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
|
||
动态调整品类价格
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
|
||
智能清运调度系统
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
|
||
数据分析与报表生成
|
||
</li>
|
||
<li class="flex items-center">
|
||
<span class="w-2 h-2 bg-purple-600 rounded-full mr-2"></span>
|
||
财务结算与分账管理
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 运营计划 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">运营计划与发展路线</h2>
|
||
<div class="bg-white rounded-xl p-8 section-shadow">
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<!-- 第一阶段 -->
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||
V1.0
|
||
</div>
|
||
<h3 class="text-lg font-bold text-gray-800 mb-3">MVP阶段</h3>
|
||
<div class="text-left space-y-2 text-sm text-gray-600">
|
||
<p>• 选择1-2个成熟社区试点</p>
|
||
<p>• 部署10-15台智能终端</p>
|
||
<p>• 签约5-10个种子站点</p>
|
||
<p>• 验证1500元/台投入回本模式</p>
|
||
</div>
|
||
<div class="mt-4 text-primary font-semibold">目标：验证可行性</div>
|
||
</div>
|
||
|
||
<!-- 第二阶段 -->
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||
V1.5
|
||
</div>
|
||
<h3 class="text-lg font-bold text-gray-800 mb-3">扩张阶段</h3>
|
||
<div class="text-left space-y-2 text-sm text-gray-600">
|
||
<p>• 试点城市规模化复制</p>
|
||
<p>• 建立标准城市"大仓"</p>
|
||
<p>• 优化物流清运路线</p>
|
||
<p>• 完善运维管理体系</p>
|
||
</div>
|
||
<div class="mt-4 text-blue-600 font-semibold">目标：规模化运营</div>
|
||
</div>
|
||
|
||
<!-- 第三阶段 -->
|
||
<div class="text-center">
|
||
<div class="w-20 h-20 bg-purple-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
||
V2.0
|
||
</div>
|
||
<h3 class="text-lg font-bold text-gray-800 mb-3">全国布局</h3>
|
||
<div class="text-left space-y-2 text-sm text-gray-600">
|
||
<p>• 成熟模型复制到其他城市</p>
|
||
<p>• 探索更多品类（电子垃圾等）</p>
|
||
<p>• 建立品牌影响力</p>
|
||
<p>• 碳积分与数据服务变现</p>
|
||
</div>
|
||
<div class="mt-4 text-purple-600 font-semibold">目标：全国网络</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 财务规划 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">财务规划与投资回报</h2>
|
||
<div class="grid lg:grid-cols-2 gap-8">
|
||
<!-- 成本结构 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-red-600 mb-4">成本结构分析</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">设备成本</span>
|
||
<span class="font-bold text-gray-800">2,500元/台</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">部署成本</span>
|
||
<span class="font-bold text-gray-800">300元/台</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">月运维成本</span>
|
||
<span class="font-bold text-gray-800">200元/台</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">用户回收金</span>
|
||
<span class="font-bold text-gray-800">变动成本</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pt-2 text-lg">
|
||
<span class="text-gray-800 font-semibold">总投入成本</span>
|
||
<span class="font-bold text-red-600">3,000元/台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收入预测 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-green-600 mb-4">收入预测模型</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">日均交易量</span>
|
||
<span class="font-bold text-gray-800">15笔/台</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">平均客单价</span>
|
||
<span class="font-bold text-gray-800">6元/笔</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">毛利率</span>
|
||
<span class="font-bold text-gray-800">30%</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pb-2 border-b">
|
||
<span class="text-gray-700">月收入</span>
|
||
<span class="font-bold text-gray-800">810元/台</span>
|
||
</div>
|
||
<div class="flex justify-between items-center pt-2 text-lg">
|
||
<span class="text-gray-800 font-semibold">月净利润</span>
|
||
<span class="font-bold text-green-600">610元/台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 投资回报计算 -->
|
||
<div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-8 mt-8">
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">投资回报分析</h3>
|
||
<div class="grid md:grid-cols-4 gap-6 text-center">
|
||
<div>
|
||
<div class="text-3xl font-bold text-green-600 mb-2">2.5个月</div>
|
||
<div class="text-gray-600">预期回本时间</div>
|
||
<div class="text-sm text-gray-500 mt-1">（理想情况下）</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-blue-600 mb-2">488%</div>
|
||
<div class="text-gray-600">年化投资回报率</div>
|
||
<div class="text-sm text-gray-500 mt-1">（稳定运营后）</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-purple-600 mb-2">7,320元</div>
|
||
<div class="text-gray-600">单台年净利润</div>
|
||
<div class="text-sm text-gray-500 mt-1">（扣除所有成本）</div>
|
||
</div>
|
||
<div>
|
||
<div class="text-3xl font-bold text-orange-600 mb-2">100台</div>
|
||
<div class="text-gray-600">第一年目标部署</div>
|
||
<div class="text-sm text-gray-500 mt-1">（预期净利润73万）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 竞争优势与市场前景 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">竞争优势与市场前景</h2>
|
||
<div class="grid lg:grid-cols-2 gap-8">
|
||
<!-- 竞争优势 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-orange-600 mb-4">核心竞争优势</h3>
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<div class="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
|
||
<span class="text-orange-600 text-sm">1</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800">适老化设计市场空白</h4>
|
||
<p class="text-gray-600 text-sm">针对中老年用户的友好设计，填补市场空白</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
|
||
<span class="text-orange-600 text-sm">2</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800">低成本智能化方案</h4>
|
||
<p class="text-gray-600 text-sm">成本控制在1500元，实现快速回本</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
|
||
<span class="text-orange-600 text-sm">3</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800">网络效应壁垒</h4>
|
||
<p class="text-gray-600 text-sm">点位网络越密集，用户粘性越强</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<div class="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
|
||
<span class="text-orange-600 text-sm">4</span>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800">先发优势</h4>
|
||
<p class="text-gray-600 text-sm">抢占优质点位资源，建立行业标准</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 市场前景 -->
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<h3 class="text-xl font-bold text-green-600 mb-4">市场前景分析</h3>
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">政策驱动</h4>
|
||
<p class="text-gray-600 text-sm">垃圾分类政策全面推行，再生资源回收需求激增</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">市场规模</h4>
|
||
<p class="text-gray-600 text-sm">中国再生资源回收市场规模超万亿，智能化渗透率<5%</p>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-gray-800 mb-2">用户需求</h4>
|
||
<p class="text-gray-600 text-sm">城市居民对便捷、透明回收服务需求不断增长</p>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-4">
|
||
<div class="text-center">
|
||
<div class="text-2xl font-bold text-green-600">千亿级</div>
|
||
<div class="text-sm text-gray-600">目标市场规模</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 风险分析与应对 -->
|
||
<section class="mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">风险分析与应对策略</h2>
|
||
<div class="bg-white rounded-xl p-6 section-shadow">
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<h3 class="text-lg font-bold text-red-600 mb-4">主要风险</h3>
|
||
<ul class="space-y-3 text-gray-600">
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2">•</span>
|
||
<span>设备故障率高影响用户体验</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2">•</span>
|
||
<span>废品价格波动影响盈利稳定性</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2">•</span>
|
||
<span>竞争对手快速跟进模仿</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-red-500 mr-2">•</span>
|
||
<span>政策变化影响行业环境</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-lg font-bold text-green-600 mb-4">应对策略</h3>
|
||
<ul class="space-y-3 text-gray-600">
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span>建立完善的运维体系和备件库存</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span>动态价格调整机制，分散风险</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span>快速占领优质点位，建立壁垒</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">•</span>
|
||
<span>积极配合政策，申请相关补贴</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 总结与展望 -->
|
||
<section class="mb-12">
|
||
<div class="bg-gradient-to-br from-green-600 to-blue-700 text-white rounded-xl p-8 section-shadow">
|
||
<h2 class="text-3xl font-bold mb-6 text-center">总结与展望</h2>
|
||
<div class="grid md:grid-cols-3 gap-6 mb-8">
|
||
<div class="text-center">
|
||
<h3 class="text-xl font-bold mb-3">市场价值</h3>
|
||
<p class="text-blue-100">解决城市废品回收"最后一公里"难题，服务千万用户</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<h3 class="text-xl font-bold mb-3">商业价值</h3>
|
||
<p class="text-blue-100">单台设备488%年化收益，规模化后千万级年利润</p>
|
||
</div>
|
||
<div class="text-center">
|
||
<h3 class="text-xl font-bold mb-3">社会价值</h3>
|
||
<p class="text-blue-100">推动环保事业发展，助力碳中和目标实现</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<h3 class="text-2xl font-bold mb-4">服到家，让回收更简单</h3>
|
||
<p class="text-lg text-blue-100 mb-6">
|
||
我们致力于通过技术创新和模式创新，打造中国领先的智能回收平台，
|
||
为用户创造价值，为股东带来回报，为社会贡献力量。
|
||
</p>
|
||
<div class="flex justify-center space-x-4 text-sm">
|
||
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">智能科技</span>
|
||
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">用户至上</span>
|
||
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">环保未来</span>
|
||
<span class="bg-white bg-opacity-20 px-4 py-2 rounded-full">共同发展</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-800 text-white py-8 no-print">
|
||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||
<p class="text-gray-400">© 2024 服到家智能回收平台 - 商业计划书</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 移动端优化脚本 -->
|
||
<script>
|
||
// 平滑滚动
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
});
|
||
|
||
// 移动端菜单切换
|
||
function toggleMobileMenu() {
|
||
// 这里可以添加移动端菜单切换逻辑
|
||
}
|
||
|
||
// 打印优化
|
||
window.addEventListener('beforeprint', function() {
|
||
document.body.classList.add('printing');
|
||
});
|
||
|
||
window.addEventListener('afterprint', function() {
|
||
document.body.classList.remove('printing');
|
||
});
|
||
|
||
// 响应式图片处理
|
||
function handleResponsiveImages() {
|
||
const images = document.querySelectorAll('img');
|
||
images.forEach(img => {
|
||
img.style.maxWidth = '100%';
|
||
img.style.height = 'auto';
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
handleResponsiveImages();
|
||
|
||
// 添加加载动画
|
||
document.body.style.opacity = '0';
|
||
setTimeout(() => {
|
||
document.body.style.transition = 'opacity 0.5s ease-in-out';
|
||
document.body.style.opacity = '1';
|
||
}, 100);
|
||
});
|
||
|
||
// 移动端触摸优化
|
||
if ('ontouchstart' in window) {
|
||
document.body.style.webkitTouchCallout = 'none';
|
||
document.body.style.webkitUserSelect = 'none';
|
||
document.body.style.userSelect = 'none';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|