feat: 重构产品画布为精益画布并添加智能回收终端多角色UI界面
This commit is contained in:
史悦
266
01_设计/产品画布.svg
266
01_设计/产品画布.svg
@@ -1,112 +1,184 @@
|
||||
<svg width="1200" height="800" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="900" height="550" viewBox="0 0 900 550" xmlns="http://www.w3.org/2000/svg" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif">
|
||||
<defs>
|
||||
<style>
|
||||
.box { fill: white; stroke: #333; stroke-width: 2; }
|
||||
.main-title { font-size: 20px; font-weight: bold; text-anchor: middle; }
|
||||
.number { font-size: 32px; font-weight: bold; fill: #444; text-anchor: end; }
|
||||
.title { font-size: 14px; font-weight: bold; text-anchor: middle; }
|
||||
.desc { font-size: 10px; fill: #666; text-anchor: middle; }
|
||||
.content { font-size: 9px; fill: #333; text-anchor: start; }
|
||||
.content-bold { font-size: 9px; fill: #333; font-weight: bold; text-anchor: start; }
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<!-- 背景 -->
|
||||
<rect fill="#f8f9fa" width="100%" height="100%"/>
|
||||
|
||||
<!-- 主标题 -->
|
||||
<text x="600" y="45" text-anchor="middle" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="28" font-weight="bold" fill="#28a745">产品画布 - 绿邻回收 (Green Neighbor Recycling)</text>
|
||||
<text x="450" y="35" class="main-title" fill="#28a745">产品精益画布 - 绿邻回收智能终端系统</text>
|
||||
|
||||
<!-- Column 1 -->
|
||||
<g id="col1">
|
||||
<!-- 目标用户 (Customer Segments) -->
|
||||
<rect x="25" y="80" width="370" height="350" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="25" y="80" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="35" y="105" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">1. 目标用户 (Customer Segments)</text>
|
||||
<text x="35" y="140" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">C端用户 (居民):</text>
|
||||
<text x="35" y="165" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 社区中老年人 (对价格敏感, 在意便利性)</text>
|
||||
<text x="35" y="185" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 注重环保的年轻家庭 (追求品质生活)</text>
|
||||
<text x="35" y="205" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 图方便的上班族 (时间宝贵)</text>
|
||||
<text x="35" y="240" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">B端伙伴 (小站):</text>
|
||||
<text x="35" y="265" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 社区小超市、便利店</text>
|
||||
<text x="35" y="285" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 快递驿站、干洗店</text>
|
||||
<text x="35" y="305" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">(诉求: 增加额外收入, 吸引更多客流)</text>
|
||||
|
||||
<!-- 核心问题 (Problem) -->
|
||||
<rect x="25" y="440" width="370" height="330" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="25" y="440" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="35" y="465" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">2. 核心问题 (Problem)</text>
|
||||
<text x="35" y="500" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">对居民:</text>
|
||||
<text x="35" y="525" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 卖废品麻烦: 需囤积、等待、走远路。</text>
|
||||
<text x="35" y="545" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 价格不透明: 流动商贩随意定价。</text>
|
||||
<text x="35" y="565" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 渠道不稳定: 回收车时有时无。</text>
|
||||
<text x="35" y="600" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">对小站伙伴:</text>
|
||||
<text x="35" y="625" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 线下门店客流变现难。</text>
|
||||
<text x="35" y="645" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 缺乏稳定、低成本的增收方式。</text>
|
||||
<text x="35" y="680" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">现有替代方案:</text>
|
||||
<text x="35" y="705" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 流动回收车 (不方便, 不稳定)</text>
|
||||
<text x="35" y="725" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 大型回收站 (距离远)</text>
|
||||
<text x="35" y="745" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 直接丢弃 (不环保, 浪费)</text>
|
||||
<!-- Canvas Grid starting at y=60, centered in 900px width -->
|
||||
<g transform="translate(75, 60)">
|
||||
<!-- ROW 1 & 2 -->
|
||||
<!-- Box 1: 问题 (rowspan=2) -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect width="150" height="300" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#ffebee"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#c62828">问题</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">居民痛点:</text>
|
||||
<text x="10" y="62" class="content">• 卖废品麻烦，需囤积等人</text>
|
||||
<text x="10" y="74" class="content">• 老人操作困难，现有方案不友好</text>
|
||||
<text x="10" y="86" class="content">• 价格不透明，缺乏信任</text>
|
||||
<text x="10" y="108" class="content-bold">商家痛点:</text>
|
||||
<text x="10" y="120" class="content">• 人工成本高，需专人管理</text>
|
||||
<text x="10" y="132" class="content">• 技术门槛高，缺乏智能方案</text>
|
||||
<text x="10" y="154" class="content-bold">现有替代方案局限:</text>
|
||||
<text x="10" y="166" class="content">• 流动回收车时间不固定</text>
|
||||
<text x="10" y="178" class="content">• 人工回收点成本高</text>
|
||||
<text x="130" y="280" class="number">1</text>
|
||||
</g>
|
||||
|
||||
<!-- Column 2 -->
|
||||
<g id="col2">
|
||||
<!-- 独特价值主张 (Unique Value Proposition) -->
|
||||
<rect x="415" y="80" width="370" height="200" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="415" y="80" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="425" y="105" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">3. 独特价值主张 (UVP)</text>
|
||||
<text x="425" y="150" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="bold" fill="#f57c00">下楼就卖废品，</text>
|
||||
<text x="425" y="180" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="bold" fill="#f57c00">方便、透明、还能换东西！</text>
|
||||
<text x="425" y="220" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 对用户: 极致便利, 公平价格</text>
|
||||
<text x="425" y="240" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 对伙伴: 零成本增收, 锁定客流</text>
|
||||
|
||||
<!-- 解决方案 (Solution) -->
|
||||
<rect x="415" y="290" width="370" height="220" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="415" y="290" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="425" y="315" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">4. 解决方案 (Solution)</text>
|
||||
<text x="425" y="345" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">微信小程序 (核心载体):</text>
|
||||
<text x="425" y="370" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 用户端: LBS找站、个人账户、价格公示。</text>
|
||||
<text x="425" y="390" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444"> (适老化设计: 大字体/图标/语音播报)</text>
|
||||
<text x="425" y="415" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 小站端: 扫码识客、称重计价、数据汇总。</text>
|
||||
<text x="425" y="445" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">线下运营体系:</text>
|
||||
<text x="425" y="470" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 小站 → 小仓 → 大仓 → 打包站 的SOP流程。</text>
|
||||
|
||||
<!-- 渠道 (Channels) -->
|
||||
<rect x="415" y="520" width="370" height="250" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="415" y="520" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="425" y="545" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">5. 渠道 (Channels)</text>
|
||||
<text x="425" y="575" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 线下: 社区地推、合作点(小站)引流、</text>
|
||||
<text x="425" y="595" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444"> 与物业/居委会合作。</text>
|
||||
<text x="425" y="620" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 线上: 微信群、本地生活公众号。</text>
|
||||
<text x="425" y="645" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 传播: 用户口碑、小礼品激励分享。</text>
|
||||
<!-- Box 4: 解决方案 -->
|
||||
<g transform="translate(150, 0)">
|
||||
<rect width="150" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#e3f2fd"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#1976d2">解决方案</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">智能终端系统:</text>
|
||||
<text x="10" y="62" class="content">• 平板显示二维码供扫描</text>
|
||||
<text x="10" y="74" class="content">• 蓝牙电子秤自动称重</text>
|
||||
<text x="10" y="86" class="content">• 大字体显示金额重量</text>
|
||||
<text x="10" y="108" class="content-bold">多角色管理:</text>
|
||||
<text x="10" y="120" class="content">• 普通用户/管理员/清运员</text>
|
||||
<text x="10" y="132" class="content">• 统一平台，智能分权</text>
|
||||
<text x="130" y="130" class="number">4</text>
|
||||
</g>
|
||||
|
||||
<!-- Column 3 -->
|
||||
<g id="col3">
|
||||
<!-- 收入来源 (Revenue Streams) -->
|
||||
<rect x="805" y="80" width="370" height="200" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="805" y="80" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="815" y="105" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">6. 收入来源 (Revenue Streams)</text>
|
||||
<text x="815" y="140" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">• 核心收入: 废品差价</text>
|
||||
<text x="815" y="160" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">(打包站售价 - 居民收购价)</text>
|
||||
<text x="815" y="190" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#333" font-weight="bold">• 增值收入:</text>
|
||||
<text x="815" y="210" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">- 小站商品导流佣金</text>
|
||||
<text x="815" y="230" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">- 小程序内广告 (如环保品牌)</text>
|
||||
<text x="815" y="250" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">- To B/G 数据服务</text>
|
||||
<!-- Box 3: 独特卖点 (rowspan=2) -->
|
||||
<g transform="translate(300, 0)">
|
||||
<rect width="150" height="300" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#fff3e0"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#f57c00">独特卖点</text>
|
||||
</g>
|
||||
<g transform="translate(75, 60)">
|
||||
<text class="desc" style="font-size: 14px; font-weight: bold;" fill="#f57c00">
|
||||
<tspan x="0" dy="0">微信扫一扫，</tspan>
|
||||
<tspan x="0" dy="20">老少皆宜智能回收</tspan>
|
||||
</text>
|
||||
</g>
|
||||
<text x="10" y="120" class="content-bold">对用户价值:</text>
|
||||
<text x="10" y="132" class="content">• 扫码即用，操作超简单</text>
|
||||
<text x="10" y="144" class="content">• 价格透明，立即到账</text>
|
||||
<text x="10" y="166" class="content-bold">对商家价值:</text>
|
||||
<text x="10" y="178" class="content">• 零人工成本，智能管理</text>
|
||||
<text x="10" y="190" class="content">• 稳定增收，吸引客流</text>
|
||||
<text x="130" y="280" class="number">3</text>
|
||||
</g>
|
||||
|
||||
<!-- 成本结构 (Cost Structure) -->
|
||||
<rect x="805" y="290" width="370" height="220" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="805" y="290" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="815" y="315" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">7. 成本结构 (Cost Structure)</text>
|
||||
<text x="815" y="345" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 技术研发成本 (小程序开发、服务器)</text>
|
||||
<text x="815" y="370" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 线下运营成本 (仓储、物流、车辆)</text>
|
||||
<text x="815" y="395" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 人力成本 (管理团队、司机、分拣员)</text>
|
||||
<text x="815" y="420" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 市场营销成本 (地推、物料、活动)</text>
|
||||
<text x="815" y="445" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 小站补贴/分成 (给合作方的激励)</text>
|
||||
<!-- Box 9: 门槛优势 -->
|
||||
<g transform="translate(450, 0)">
|
||||
<rect width="150" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#fce4ec"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#ad1457">门槛优势</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">产品壁垒:</text>
|
||||
<text x="10" y="62" class="content">• 老人友好设计(市场空白)</text>
|
||||
<text x="10" y="74" class="content">• 低成本智能化方案</text>
|
||||
<text x="10" y="96" class="content-bold">运营壁垒:</text>
|
||||
<text x="10" y="108" class="content">• 点位网络效应</text>
|
||||
<text x="10" y="120" class="content">• 先发优势抢占资源</text>
|
||||
<text x="130" y="130" class="number">9</text>
|
||||
</g>
|
||||
|
||||
<!-- 关键指标 (Key Metrics) -->
|
||||
<rect x="805" y="520" width="370" height="150" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="805" y="520" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="815" y="545" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">8. 关键指标 (Key Metrics)</text>
|
||||
<text x="815" y="575" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 用户增长: 注册用户数、日/月活用户(DAU/MAU)</text>
|
||||
<text x="815" y="600" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 业务量: 日均回收单量、回收品类重量</text>
|
||||
<text x="815" y="625" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 网络扩张: 成功签约并运营的小站数量</text>
|
||||
<text x="815" y="650" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 用户粘性: 用户复用率、单用户月均交易次数</text>
|
||||
<!-- Box 2: 客户群体分类 (rowspan=2) -->
|
||||
<g transform="translate(600, 0)">
|
||||
<rect width="150" height="300" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#e8f5e8"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#2e7d32">客户群体分类</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">核心用户 (C端):</text>
|
||||
<text x="10" y="62" class="content">• 社区中老年人 (扫码即用)</text>
|
||||
<text x="10" y="74" class="content">• 环保意识强的年轻家庭</text>
|
||||
<text x="10" y="86" class="content">• 图方便的上班族</text>
|
||||
<text x="10" y="108" class="content-bold">合作伙伴 (B端):</text>
|
||||
<text x="10" y="120" class="content">• 社区超市、便利店</text>
|
||||
<text x="10" y="132" class="content">• 快递驿站、物业服务点</text>
|
||||
<text x="10" y="154" class="content-bold">需求特征:</text>
|
||||
<text x="10" y="166" class="content">• 操作简单、零成本增收</text>
|
||||
<text x="10" y="178" class="content">• 智能化管理、吸引客流</text>
|
||||
<text x="130" y="280" class="number">2</text>
|
||||
</g>
|
||||
|
||||
<!-- 竞争壁垒 (Unfair Advantage) -->
|
||||
<rect x="805" y="680" width="370" height="90" fill="#ffffff" stroke="#e1e4e8" stroke-width="1"/>
|
||||
<rect x="805" y="680" width="370" height="40" fill="#e6f7eb"/>
|
||||
<text x="815" y="705" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="18" font-weight="600" fill="#0d442a">9. 竞争壁垒 (Unfair Advantage)</text>
|
||||
<text x="815" y="735" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 强大的线下运营和地推能力 (最核心)</text>
|
||||
<text x="815" y="755" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif" font-size="14" fill="#444">• 率先抢占的社区点位网络效应</text>
|
||||
<!-- ROW 2 (remaining cells) -->
|
||||
<!-- Box 8: 关键指标 -->
|
||||
<g transform="translate(150, 150)">
|
||||
<rect width="150" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#e0f2f1"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#00695c">关键指标</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">运营指标:</text>
|
||||
<text x="10" y="62" class="content">• 单终端日均交易量</text>
|
||||
<text x="10" y="74" class="content">• 终端网络覆盖社区数</text>
|
||||
<text x="10" y="96" class="content-bold">用户指标:</text>
|
||||
<text x="10" y="108" class="content">• 操作成功率、用户满意度</text>
|
||||
<text x="10" y="120" class="content">• 用户复购率、推荐率</text>
|
||||
<text x="130" y="130" class="number">8</text>
|
||||
</g>
|
||||
|
||||
<!-- Box 5: 渠道 -->
|
||||
<g transform="translate(450, 150)">
|
||||
<rect width="150" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="150" height="30" fill="#f3e5f5"/>
|
||||
<g transform="translate(75, 20)">
|
||||
<text class="title" fill="#7b1fa2">渠道</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">线下布点:</text>
|
||||
<text x="10" y="62" class="content">• 社区超市、快递站合作</text>
|
||||
<text x="10" y="74" class="content">• 与物业/居委会合作</text>
|
||||
<text x="10" y="96" class="content-bold">用户触达:</text>
|
||||
<text x="10" y="108" class="content">• 微信生态扫一扫直达</text>
|
||||
<text x="10" y="120" class="content">• 业主群推广分享</text>
|
||||
<text x="130" y="130" class="number">5</text>
|
||||
</g>
|
||||
|
||||
<!-- ROW 3 -->
|
||||
<!-- Box 7: 成本分析 (colspan=3) -->
|
||||
<g transform="translate(0, 300)">
|
||||
<rect width="375" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="375" height="30" fill="#fff8e1"/>
|
||||
<g transform="translate(187.5, 20)">
|
||||
<text class="title" fill="#f57f17">成本分析</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">单点成本:</text>
|
||||
<text x="10" y="62" class="content">• 硬件成本: 1000元/终端 • 部署成本: 2000元/点</text>
|
||||
<text x="10" y="84" class="content-bold">运营成本:</text>
|
||||
<text x="10" y="96" class="content">• 技术维护、云服务 • 清运物流、客服支持</text>
|
||||
<text x="10" y="118" class="content-bold">分成成本:</text>
|
||||
<text x="10" y="130" class="content">• 与场地方交易额分账</text>
|
||||
<text x="355" y="130" class="number">7</text>
|
||||
</g>
|
||||
|
||||
<!-- Box 6: 收入分析 (colspan=3) -->
|
||||
<g transform="translate(375, 300)">
|
||||
<rect width="375" height="150" class="box"/>
|
||||
<rect x="0" y="0" width="375" height="30" fill="#e8f5e8"/>
|
||||
<g transform="translate(187.5, 20)">
|
||||
<text class="title" fill="#2e7d32">收入分析</text>
|
||||
</g>
|
||||
<text x="10" y="50" class="content-bold">主要收入流:</text>
|
||||
<text x="10" y="62" class="content">• 废品回收差价 (终端回收价 vs 批发销售价的差额) - 核心收入</text>
|
||||
<text x="10" y="74" class="content">• 与合作场地按交易量分成 - 激励合作</text>
|
||||
<text x="10" y="96" class="content-bold">增值收入流:</text>
|
||||
<text x="10" y="108" class="content">• 规模化后的数据服务收入 • 绿色积分商城佣金</text>
|
||||
<text x="10" y="130" class="content">• 单点投入3000元，预期4-10个月回本</text>
|
||||
<text x="355" y="130" class="number">6</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 9.8 KiB |
513
UI.html
513
UI.html
@@ -64,17 +64,35 @@
|
||||
<div class="screen p-4">
|
||||
<div class="text-center my-8">
|
||||
<button class="bg-green-500 text-white rounded-lg shadow-lg w-full py-6">
|
||||
<i class="ri-qr-code-line text-6xl"></i>
|
||||
<span class="block text-2xl font-bold mt-2">我的卖品码</span>
|
||||
<i class="ri-qr-scan-line text-6xl"></i>
|
||||
<span class="block text-2xl font-bold mt-2">扫一扫 开始回收</span>
|
||||
</button>
|
||||
<p class="text-center text-sm text-gray-500 mt-2">向小站站长出示此码，即可开始回收</p>
|
||||
<p class="text-center text-sm text-gray-500 mt-2">使用微信扫一扫，扫描终端屏幕上的二维码即可回收</p>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-price-tag-3-line mr-2 text-green-500"></i>今日回收价</h3>
|
||||
<div class="space-y-2 text-lg">
|
||||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold text-green-600">0.85 元/斤</span></div>
|
||||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold text-green-600">0.10 元/个</span></div>
|
||||
<div class="flex justify-between"><span>旧衣物</span><span class="font-bold text-green-600">0.50 元/斤</span></div>
|
||||
<!-- 突出显示今日回收价格 -->
|
||||
<div class="bg-gradient-to-r from-green-400 to-green-600 text-white p-6 rounded-2xl shadow-2xl mb-4">
|
||||
<h3 class="font-bold text-2xl mb-4 text-center flex items-center justify-center">
|
||||
<i class="ri-price-tag-3-line mr-3 text-3xl"></i>今日回收价格
|
||||
</h3>
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div class="bg-white/20 backdrop-blur rounded-xl p-4">
|
||||
<div class="text-xl font-bold mb-1">废纸壳</div>
|
||||
<div class="text-3xl font-black">0.85</div>
|
||||
<div class="text-lg opacity-90">元/斤</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur rounded-xl p-4">
|
||||
<div class="text-xl font-bold mb-1">塑料瓶</div>
|
||||
<div class="text-3xl font-black">0.10</div>
|
||||
<div class="text-lg opacity-90">元/个</div>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur rounded-xl p-4">
|
||||
<div class="text-xl font-bold mb-1">旧衣物</div>
|
||||
<div class="text-3xl font-black">0.50</div>
|
||||
<div class="text-lg opacity-90">元/斤</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4 text-lg opacity-90">
|
||||
<i class="ri-time-line mr-2"></i>实时更新 · 当天有效
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow">
|
||||
@@ -172,120 +190,407 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B端 分组 -->
|
||||
<!-- 智能终端平板 分组 -->
|
||||
<div class="w-full max-w-screen-2xl mb-12 border-t pt-8 mt-8">
|
||||
<h1 class="text-3xl font-bold text-center mb-6 text-gray-700">B端 (小站端)</h1>
|
||||
<h1 class="text-3xl font-bold text-center mb-6 text-gray-700">智能回收终端界面</h1>
|
||||
<div class="flex flex-wrap justify-center gap-5">
|
||||
<!-- B端 - 工作台 -->
|
||||
<div class="mobile-frame">
|
||||
<div class="screen p-4">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div><h2 class="text-2xl font-bold">李老板</h2><p class="text-gray-500">社区便民超市站</p></div>
|
||||
<i class="ri-logout-box-r-line text-2xl text-gray-500"></i>
|
||||
<!-- 平板框架样式 -->
|
||||
<style>
|
||||
.tablet-frame {
|
||||
width: 768px;
|
||||
height: 1024px;
|
||||
border: 12px solid #2c3e50;
|
||||
border-radius: 25px;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tablet-screen {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
</style>
|
||||
<!-- 智能终端 - 待机界面（显示二维码供扫描） -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8 flex flex-col">
|
||||
<!-- 顶部状态栏 -->
|
||||
<div class="flex justify-between items-center mb-6 p-4 bg-white rounded-lg shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
|
||||
<span class="text-lg font-semibold">社区便民超市 - 绿邻回收终端</span>
|
||||
</div>
|
||||
<div class="text-center my-8">
|
||||
<button class="bg-blue-600 text-white rounded-lg shadow-lg w-full py-6"><i class="ri-scan-2-line text-6xl"></i><span class="block text-2xl font-bold mt-2">开始回收</span></button>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-price-tag-3-line mr-2 text-blue-600"></i>今日回收价</h3>
|
||||
<div class="space-y-2 text-lg">
|
||||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold text-green-600">0.85 元/斤</span></div>
|
||||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold text-green-600">0.10 元/个</span></div>
|
||||
<div class="flex justify-between"><span>旧衣物</span><span class="font-bold text-green-600">0.50 元/斤</span></div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold">15:30</div>
|
||||
<div class="text-sm text-gray-500">2025年8月15日</div>
|
||||
<button class="ml-4 bg-blue-100 text-blue-600 px-4 py-2 rounded-lg text-sm">
|
||||
<i class="ri-settings-line mr-1"></i>管理
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow mb-4">
|
||||
<h3 class="font-bold text-lg mb-3">今日汇总</h3>
|
||||
<div class="grid grid-cols-3 text-center">
|
||||
<div><p class="text-2xl font-bold">32</p><p class="text-sm text-gray-500">总单数</p></div>
|
||||
<div><p class="text-2xl font-bold">158.7</p><p class="text-sm text-gray-500">总重量 (kg)</p></div>
|
||||
<div><p class="text-2xl font-bold text-blue-600">¥245.50</p><p class="text-sm text-gray-500">总金额</p></div>
|
||||
|
||||
<!-- 主二维码区域 -->
|
||||
<div class="flex-grow flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="bg-white rounded-3xl p-12 shadow-2xl mb-8">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-4xl font-bold text-gray-800 mb-4">微信扫一扫开始回收</h2>
|
||||
<p class="text-xl text-gray-600">操作简单，老少皆宜</p>
|
||||
</div>
|
||||
<!-- 大尺寸二维码 -->
|
||||
<div class="bg-gray-100 rounded-2xl p-8">
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=https://weixin.qq.com/recycling/start?terminal=SHOP001"
|
||||
alt="回收二维码" class="mx-auto">
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow">
|
||||
<div class="flex justify-between items-center mb-3"><h3 class="font-bold text-lg">库存盘点</h3><span class="text-red-500 font-semibold flex items-center"><i class="ri-error-warning-fill mr-1"></i>库存预警</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center"><span>废纸壳</span><div class="w-1/2 bg-gray-200 rounded-full h-2.5"><div class="bg-red-500 h-2.5 rounded-full" style="width: 90%"></div></div><span class="font-bold">90 kg</span></div>
|
||||
<div class="flex justify-between items-center"><span>塑料瓶</span><div class="w-1/2 bg-gray-200 rounded-full h-2.5"><div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div></div><span class="font-bold">45 kg</span></div>
|
||||
<div class="mt-6 flex justify-center gap-6 text-gray-500">
|
||||
<div class="flex items-center">
|
||||
<i class="ri-smartphone-line text-2xl mr-2"></i>
|
||||
<span>支持微信</span>
|
||||
</div>
|
||||
<button class="mt-4 w-full bg-blue-100 text-blue-700 font-bold py-3 rounded-lg"><i class="ri-truck-line mr-2"></i>一键通知物流交接</button>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-qr-scan-2-line text-2xl mr-2"></i>
|
||||
<span>扫码即用</span>
|
||||
</div>
|
||||
<!-- B端图表 -->
|
||||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-pie-chart-box-line mr-2 text-blue-600"></i>今日品类分布 (按重量)</h3>
|
||||
<canvas id="bCategoryChart" height="180"></canvas>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow mt-4">
|
||||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-bar-chart-box-line mr-2 text-blue-600"></i>近7日回收量 (kg)</h3>
|
||||
<canvas id="bHistoryChart" height="180"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-nav">
|
||||
<div class="nav-item active"><i class="ri-dashboard-fill text-2xl"></i><span>工作台</span></div>
|
||||
<div class="nav-item"><i class="ri-bill-fill text-2xl"></i><span>账单</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- B端 - 回收流程 -->
|
||||
<div class="mobile-frame">
|
||||
<div class="screen p-4 flex flex-col">
|
||||
<div class="flex items-center mb-4"><i class="ri-arrow-left-s-line text-2xl mr-2"></i><h1 class="font-bold text-xl flex-grow">回收流程</h1></div>
|
||||
<div class="text-center bg-gray-100 p-4 rounded-lg mb-4"><p>已识别用户</p><p class="font-bold text-2xl">王大妈</p></div>
|
||||
<div class="mb-4">
|
||||
<label class="font-bold text-lg">1. 选择品类</label>
|
||||
<div class="grid grid-cols-3 gap-3 mt-2">
|
||||
<button class="bg-blue-600 text-white p-4 rounded-lg font-bold">纸壳</button>
|
||||
<button class="bg-gray-200 p-4 rounded-lg font-bold">塑料瓶</button>
|
||||
<button class="bg-gray-200 p-4 rounded-lg font-bold">旧衣物</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="font-bold text-lg">2. 输入重量 (斤)</label>
|
||||
<input type="number" value="5.8" class="text-center text-4xl font-bold w-full mt-2 p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
<div class="flex-grow"></div>
|
||||
<div class="text-center p-4 bg-white border-t-2">
|
||||
<p class="text-gray-600">合计金额</p><p class="text-4xl font-bold text-blue-600 mb-4">¥4.93</p>
|
||||
<button class="w-full bg-blue-600 text-white font-bold py-4 rounded-lg text-xl flex items-center justify-center"><i class="ri-volume-up-fill mr-2 text-2xl"></i><span>确认并语音播报</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- B端 - 账单 -->
|
||||
<div class="mobile-frame">
|
||||
<div class="screen">
|
||||
<div class="p-4 bg-white border-b sticky top-0">
|
||||
<div class="flex items-center"><i class="ri-arrow-left-s-line text-2xl mr-2"></i><h1 class="font-bold text-xl flex-grow text-center">账单</h1></div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-center mb-4"><p class="text-gray-500">2025年8月 总收入</p><p class="text-4xl font-bold text-blue-600">¥ 3,450.70</p></div>
|
||||
<div class="space-y-3">
|
||||
<div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
|
||||
<div><p class="font-bold">8月15日 (今日)</p><p class="text-sm text-gray-500">共 32 笔</p></div>
|
||||
<span class="text-xl font-bold">¥245.50</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
|
||||
<div><p class="font-bold">8月14日</p><p class="text-sm text-gray-500">共 45 笔</p></div>
|
||||
<span class="text-xl font-bold">¥312.80</span>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-coin-line text-2xl mr-2"></i>
|
||||
<span>立即到账</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- B端 - 物流交接单 -->
|
||||
<div class="mobile-frame">
|
||||
<div class="screen p-4 flex flex-col items-center">
|
||||
<h1 class="font-bold text-2xl mt-4 mb-2">出库交接单</h1>
|
||||
<p class="text-gray-500 mb-6">请向物流司机出示此码</p>
|
||||
<div class="bg-white p-4 rounded-lg shadow-lg"><img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=STATION_001_OUT_20250815" alt="QR Code"></div>
|
||||
<div class="w-full mt-6 p-4 bg-white rounded-lg shadow-sm">
|
||||
<h3 class="font-bold text-lg mb-2">待交接物品</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between"><span>废纸壳</span><span class="font-bold">90 kg</span></div>
|
||||
<div class="flex justify-between"><span>塑料瓶</span><span class="font-bold">45 kg</span></div>
|
||||
|
||||
<!-- 底部价格展示 -->
|
||||
<div class="bg-white rounded-2xl p-6 shadow-lg">
|
||||
<div class="grid grid-cols-3 gap-6 text-center">
|
||||
<div class="p-4 bg-green-50 rounded-xl">
|
||||
<div class="text-lg font-semibold mb-1">废纸壳</div>
|
||||
<div class="text-2xl font-bold text-green-600">0.85元/斤</div>
|
||||
</div>
|
||||
<div class="p-4 bg-blue-50 rounded-xl">
|
||||
<div class="text-lg font-semibold mb-1">塑料瓶</div>
|
||||
<div class="text-2xl font-bold text-blue-600">0.10元/个</div>
|
||||
</div>
|
||||
<div class="p-4 bg-purple-50 rounded-xl">
|
||||
<div class="text-lg font-semibold mb-1">旧衣物</div>
|
||||
<div class="text-2xl font-bold text-purple-600">0.50元/斤</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能终端 - 普通用户回收流程界面 -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8">
|
||||
<!-- 用户信息栏 -->
|
||||
<div class="bg-white rounded-2xl p-6 shadow-lg mb-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?q=80&w=80&auto=format&fit=crop"
|
||||
class="w-16 h-16 rounded-full object-cover mr-4" alt="用户头像">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold">王大妈</h3>
|
||||
<p class="text-gray-500">欢迎使用绿邻回收</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="bg-red-100 text-red-600 px-6 py-3 rounded-lg font-semibold">
|
||||
<i class="ri-close-line mr-2"></i>取消回收
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 品类选择 -->
|
||||
<div class="bg-white rounded-2xl p-8 shadow-lg mb-8">
|
||||
<h3 class="text-3xl font-bold mb-8">请选择回收品类</h3>
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<button class="p-8 bg-green-500 text-white rounded-2xl shadow-lg transform scale-105">
|
||||
<i class="ri-file-paper-2-line text-6xl mb-4"></i>
|
||||
<div class="text-2xl font-bold mb-2">废纸壳</div>
|
||||
<div class="text-lg opacity-90">0.85元/斤</div>
|
||||
</button>
|
||||
<button class="p-8 bg-gray-100 text-gray-700 rounded-2xl hover:bg-gray-200 transition-colors">
|
||||
<i class="ri-drop-line text-6xl mb-4"></i>
|
||||
<div class="text-2xl font-bold mb-2">塑料瓶</div>
|
||||
<div class="text-lg">0.10元/个</div>
|
||||
</button>
|
||||
<button class="p-8 bg-gray-100 text-gray-700 rounded-2xl hover:bg-gray-200 transition-colors">
|
||||
<i class="ri-shirt-line text-6xl mb-4"></i>
|
||||
<div class="text-2xl font-bold mb-2">旧衣物</div>
|
||||
<div class="text-lg">0.50元/斤</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 称重和确认区域 -->
|
||||
<div class="grid grid-cols-2 gap-8">
|
||||
<!-- 称重区域 -->
|
||||
<div class="bg-white rounded-2xl p-8 shadow-lg">
|
||||
<h3 class="text-2xl font-bold mb-6">请放入回收袋中</h3>
|
||||
<div class="text-center">
|
||||
<div class="bg-gray-50 rounded-xl p-8 mb-6">
|
||||
<i class="ri-scales-3-line text-5xl text-gray-400 mb-4"></i>
|
||||
<div class="text-5xl font-bold text-green-600 mb-2">5.8</div>
|
||||
<div class="text-xl text-gray-500">斤</div>
|
||||
</div>
|
||||
<div class="text-gray-600 text-lg">
|
||||
<p>自动称重中...</p>
|
||||
<p class="text-sm mt-2">请稍候片刻</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认信息 -->
|
||||
<div class="bg-gradient-to-br from-green-500 to-green-600 text-white rounded-2xl p-8 shadow-lg">
|
||||
<h3 class="text-2xl font-bold mb-6">回收信息确认</h3>
|
||||
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex justify-between items-center text-lg">
|
||||
<span>回收品类：</span>
|
||||
<span class="font-bold">废纸壳</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-lg">
|
||||
<span>重量：</span>
|
||||
<span class="font-bold">5.8 斤</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-lg">
|
||||
<span>单价：</span>
|
||||
<span class="font-bold">0.85 元/斤</span>
|
||||
</div>
|
||||
<div class="border-t border-white/30 pt-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xl">合计金额：</span>
|
||||
<span class="text-4xl font-bold">¥ 4.93</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full bg-white text-green-600 py-6 rounded-xl font-bold text-2xl shadow-lg hover:shadow-xl transition-shadow">
|
||||
<i class="ri-check-line mr-3"></i>确认回收
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能终端 - 登录界面 -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8 flex items-center justify-center">
|
||||
<div class="bg-white rounded-3xl p-12 shadow-2xl max-w-md w-full">
|
||||
<div class="text-center mb-8">
|
||||
<i class="ri-shield-user-line text-6xl text-blue-600 mb-4"></i>
|
||||
<h2 class="text-3xl font-bold text-gray-800 mb-2">终端管理登录</h2>
|
||||
<p class="text-gray-600">请选择您的身份</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<button class="w-full bg-blue-600 text-white p-6 rounded-2xl font-bold text-xl hover:bg-blue-700 transition-colors">
|
||||
<i class="ri-user-settings-line text-3xl mb-2"></i>
|
||||
<div>小站管理员</div>
|
||||
<div class="text-sm opacity-90">李老板</div>
|
||||
</button>
|
||||
<button class="w-full bg-green-600 text-white p-6 rounded-2xl font-bold text-xl hover:bg-green-700 transition-colors">
|
||||
<i class="ri-truck-line text-3xl mb-2"></i>
|
||||
<div>清运人员</div>
|
||||
<div class="text-sm opacity-90">物流收取</div>
|
||||
</button>
|
||||
<button class="w-full bg-gray-200 text-gray-700 p-4 rounded-2xl font-semibold hover:bg-gray-300 transition-colors">
|
||||
<i class="ri-arrow-left-line mr-2"></i>返回用户界面
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能终端 - 管理员工作台 -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8">
|
||||
<!-- 管理员顶部栏 -->
|
||||
<div class="flex justify-between items-center mb-8 p-4 bg-blue-600 text-white rounded-lg shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<i class="ri-user-settings-line text-2xl mr-3"></i>
|
||||
<div>
|
||||
<span class="text-lg font-semibold">管理员：李老板</span>
|
||||
<div class="text-sm opacity-90">社区便民超市</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="text-right">
|
||||
<div class="text-xl font-bold">15:30</div>
|
||||
<div class="text-sm opacity-90">8月15日</div>
|
||||
</div>
|
||||
<button class="bg-white text-blue-600 px-4 py-2 rounded-lg text-sm font-semibold">
|
||||
<i class="ri-logout-box-line mr-1"></i>退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日数据汇总 -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||||
<div class="bg-white rounded-2xl p-6 shadow-lg text-center">
|
||||
<i class="ri-shopping-bag-3-line text-4xl text-blue-600 mb-3"></i>
|
||||
<div class="text-3xl font-bold text-blue-600">32</div>
|
||||
<div class="text-gray-500">今日订单</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-6 shadow-lg text-center">
|
||||
<i class="ri-scales-3-line text-4xl text-green-600 mb-3"></i>
|
||||
<div class="text-3xl font-bold text-green-600">158.7</div>
|
||||
<div class="text-gray-500">总重量(kg)</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl p-6 shadow-lg text-center">
|
||||
<i class="ri-money-dollar-circle-line text-4xl text-yellow-600 mb-3"></i>
|
||||
<div class="text-3xl font-bold text-yellow-600">¥245</div>
|
||||
<div class="text-gray-500">今日收入</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能操作区 -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-8">
|
||||
<button class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<i class="ri-price-tag-3-line text-4xl text-green-600 mb-4"></i>
|
||||
<div class="text-xl font-bold mb-2">修改回收价格</div>
|
||||
<div class="text-gray-500">调整各品类回收价格</div>
|
||||
</button>
|
||||
<button class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<i class="ri-file-list-3-line text-4xl text-blue-600 mb-4"></i>
|
||||
<div class="text-xl font-bold mb-2">交易记录</div>
|
||||
<div class="text-gray-500">查看所有回收记录</div>
|
||||
</button>
|
||||
<button class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<i class="ri-stack-line text-4xl text-purple-600 mb-4"></i>
|
||||
<div class="text-xl font-bold mb-2">库存管理</div>
|
||||
<div class="text-gray-500">查看和管理库存</div>
|
||||
</button>
|
||||
<button class="bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
||||
<i class="ri-truck-line text-4xl text-orange-600 mb-4"></i>
|
||||
<div class="text-xl font-bold mb-2">通知清运</div>
|
||||
<div class="text-gray-500">申请物流收取</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 返回用户界面 -->
|
||||
<button class="w-full bg-gray-200 text-gray-700 p-4 rounded-2xl font-bold text-xl">
|
||||
<i class="ri-arrow-left-line mr-2"></i>返回用户界面
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能终端 - 清运人员界面 -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8">
|
||||
<!-- 清运人员顶部栏 -->
|
||||
<div class="flex justify-between items-center mb-8 p-4 bg-green-600 text-white rounded-lg shadow-sm">
|
||||
<div class="flex items-center">
|
||||
<i class="ri-truck-line text-2xl mr-3"></i>
|
||||
<div>
|
||||
<span class="text-lg font-semibold">清运人员：张师傅</span>
|
||||
<div class="text-sm opacity-90">绿邻物流</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<div class="text-right">
|
||||
<div class="text-xl font-bold">15:30</div>
|
||||
<div class="text-sm opacity-90">8月15日</div>
|
||||
</div>
|
||||
<button class="bg-white text-green-600 px-4 py-2 rounded-lg text-sm font-semibold">
|
||||
<i class="ri-logout-box-line mr-1"></i>退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待收取库存 -->
|
||||
<div class="bg-white rounded-2xl p-8 shadow-lg mb-8">
|
||||
<h3 class="text-2xl font-bold mb-6 flex items-center">
|
||||
<i class="ri-stack-line mr-3 text-green-600"></i>待收取物品
|
||||
</h3>
|
||||
<div class="grid grid-cols-3 gap-6">
|
||||
<div class="bg-green-50 rounded-xl p-6 text-center">
|
||||
<i class="ri-file-paper-2-line text-3xl text-green-600 mb-3"></i>
|
||||
<div class="text-lg font-semibold mb-2">废纸壳</div>
|
||||
<div class="text-3xl font-bold text-green-600">90</div>
|
||||
<div class="text-sm text-gray-500">公斤</div>
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-xl p-6 text-center">
|
||||
<i class="ri-drop-line text-3xl text-blue-600 mb-3"></i>
|
||||
<div class="text-lg font-semibold mb-2">塑料瓶</div>
|
||||
<div class="text-3xl font-bold text-blue-600">45</div>
|
||||
<div class="text-sm text-gray-500">公斤</div>
|
||||
</div>
|
||||
<div class="bg-purple-50 rounded-xl p-6 text-center">
|
||||
<i class="ri-shirt-line text-3xl text-purple-600 mb-3"></i>
|
||||
<div class="text-lg font-semibold mb-2">旧衣物</div>
|
||||
<div class="text-3xl font-bold text-purple-600">25</div>
|
||||
<div class="text-sm text-gray-500">公斤</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收取确认 -->
|
||||
<div class="bg-white rounded-2xl p-8 shadow-lg mb-8">
|
||||
<h3 class="text-2xl font-bold mb-6">收取确认</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
|
||||
<span class="text-lg">总重量</span>
|
||||
<span class="text-2xl font-bold">160 公斤</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-gray-50 rounded-lg">
|
||||
<span class="text-lg">预估价值</span>
|
||||
<span class="text-2xl font-bold text-green-600">¥ 89.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="grid grid-cols-2 gap-6 mb-8">
|
||||
<button class="bg-green-600 text-white p-6 rounded-2xl font-bold text-xl hover:bg-green-700 transition-colors">
|
||||
<i class="ri-checkbox-circle-line text-3xl mb-2"></i>
|
||||
<div>确认收取</div>
|
||||
</button>
|
||||
<button class="bg-gray-200 text-gray-700 p-6 rounded-2xl font-bold text-xl hover:bg-gray-300 transition-colors">
|
||||
<i class="ri-close-circle-line text-3xl mb-2"></i>
|
||||
<div>暂不收取</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 返回用户界面 -->
|
||||
<button class="w-full bg-gray-200 text-gray-700 p-4 rounded-2xl font-bold text-xl">
|
||||
<i class="ri-arrow-left-line mr-2"></i>返回用户界面
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能终端 - 回收完成界面 -->
|
||||
<div class="tablet-frame">
|
||||
<div class="tablet-screen p-8 flex flex-col justify-center items-center text-center">
|
||||
<div class="bg-white rounded-3xl p-16 shadow-2xl max-w-2xl">
|
||||
<div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-8">
|
||||
<i class="ri-check-line text-5xl text-white"></i>
|
||||
</div>
|
||||
<h2 class="text-4xl font-bold text-gray-800 mb-4">回收成功！</h2>
|
||||
<p class="text-xl text-gray-600 mb-8">感谢您为环保事业做出的贡献</p>
|
||||
|
||||
<div class="bg-gray-50 rounded-2xl p-8 mb-8">
|
||||
<div class="text-lg text-gray-600 mb-2">本次回收金额</div>
|
||||
<div class="text-5xl font-bold text-green-600 mb-4">¥ 4.93</div>
|
||||
<div class="text-gray-500">废纸壳 5.8斤 × 0.85元/斤</div>
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500 mb-8">
|
||||
<p class="text-lg">回收金额已通过微信支付到账</p>
|
||||
<p class="text-sm mt-2">如有疑问请联系客服：400-123-4567</p>
|
||||
</div>
|
||||
|
||||
<div class="text-6xl font-bold text-green-500 mb-4">5</div>
|
||||
<div class="text-lg text-gray-500">秒后自动返回首页</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 物流端 (V1.1功能，MVP版本中移除) -->
|
||||
|
||||
Reference in New Issue
Block a user