feat: 重构产品画布为精益画布并添加智能回收终端多角色UI界面
This commit is contained in:
史悦
521
UI.html
521
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,119 +190,406 @@
|
||||
</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>
|
||||
</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>
|
||||
<!-- 平板框架样式 -->
|
||||
<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-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>
|
||||
</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>
|
||||
<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>
|
||||
<!-- 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 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="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>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-qr-scan-2-line text-2xl mr-2"></i>
|
||||
<span>扫码即用</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<i class="ri-coin-line text-2xl mr-2"></i>
|
||||
<span>立即到账</span>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<!-- 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="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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user