691 lines
40 KiB
HTML
691 lines
40 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>
|
||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
body {
|
||
background-color: #f0f2f5;
|
||
}
|
||
.mobile-frame {
|
||
width: 375px;
|
||
height: 812px;
|
||
border: 8px solid black;
|
||
border-radius: 40px;
|
||
background-color: #f7f8fa;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.screen {
|
||
width: 100%;
|
||
flex-grow: 1;
|
||
overflow-y: auto;
|
||
}
|
||
.screen::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.bottom-nav {
|
||
width: 100%;
|
||
height: 60px;
|
||
background-color: white;
|
||
border-top: 1px solid #e5e7eb;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
.nav-item.active {
|
||
color: #28a745;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="w-full flex flex-col items-center p-5">
|
||
|
||
<!-- C端 分组 -->
|
||
<div class="w-full max-w-screen-2xl mb-12">
|
||
<h1 class="text-3xl font-bold text-center mb-6 text-gray-700">C端 (居民端)</h1>
|
||
<div class="flex flex-wrap justify-center gap-5">
|
||
<!-- C端 - 首页 -->
|
||
<div class="mobile-frame">
|
||
<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-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>
|
||
</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">
|
||
<h3 class="font-bold text-lg mb-2 flex items-center"><i class="ri-store-2-line mr-2 text-green-500"></i>附近小站</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center">
|
||
<div class="flex-grow">
|
||
<p class="font-bold">社区便民超市</p>
|
||
<p class="text-sm text-gray-500">距离您 200米</p>
|
||
</div>
|
||
<span class="text-sm font-semibold text-green-600 bg-green-100 px-2 py-1 rounded-full">营业中</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="flex-grow">
|
||
<p class="font-bold">好邻居快递驿站</p>
|
||
<p class="text-sm text-gray-500">距离您 500米</p>
|
||
</div>
|
||
<span class="text-sm font-semibold text-gray-500 bg-gray-200 px-2 py-1 rounded-full">休息中</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-item active"><i class="ri-home-4-fill text-2xl"></i><span>首页</span></div>
|
||
<div class="nav-item"><i class="ri-user-fill text-2xl"></i><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- C端 - 我的页面 -->
|
||
<div class="mobile-frame">
|
||
<div class="screen p-4">
|
||
<div class="flex items-center mb-6">
|
||
<img src="https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?q=80&w=200&auto=format&fit=crop" class="w-16 h-16 rounded-full object-cover mr-4" alt="avatar">
|
||
<div>
|
||
<h2 class="text-2xl font-bold">王大妈</h2>
|
||
<p class="text-gray-500">欢迎使用绿邻回收</p>
|
||
</div>
|
||
</div>
|
||
<div class="bg-green-500 text-white p-6 rounded-lg shadow-lg text-center mb-6">
|
||
<p class="text-lg">我的余额 (元)</p>
|
||
<p class="text-5xl font-bold my-2">128.50</p>
|
||
<!-- V1.1功能，MVP版本中移除 -->
|
||
</div>
|
||
<div class="space-y-3 text-lg">
|
||
<div class="flex justify-between items-center p-4 bg-white rounded-lg shadow-sm">
|
||
<div class="flex items-center"><i class="ri-bill-line mr-3 text-green-500"></i><span>交易记录</span></div>
|
||
<i class="ri-arrow-right-s-line"></i>
|
||
</div>
|
||
<div class="flex justify-between items-center p-4 bg-white rounded-lg shadow-sm">
|
||
<div class="flex items-center"><i class="ri-customer-service-2-line mr-3 text-green-500"></i><span>联系客服</span></div>
|
||
<i class="ri-arrow-right-s-line"></i>
|
||
</div>
|
||
</div>
|
||
<!-- C端图表 -->
|
||
<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-2-line mr-2 text-green-500"></i>我的回收分布</h3>
|
||
<canvas id="cUserChart" 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-line mr-2 text-green-500"></i>历史收入</h3>
|
||
<canvas id="cHistoryChart" height="180"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-nav">
|
||
<div class="nav-item"><i class="ri-home-4-line text-2xl"></i><span>首页</span></div>
|
||
<div class="nav-item active"><i class="ri-user-fill text-2xl"></i><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- C端 - 交易记录 -->
|
||
<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 space-y-3">
|
||
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||
<div class="flex justify-between items-center mb-2"><span class="font-bold">社区便民超市</span><span class="text-xl font-bold text-green-600">+4.93</span></div>
|
||
<p class="text-sm text-gray-500">2025-08-15 10:30:45</p>
|
||
<div class="text-sm text-gray-600 mt-2 pt-2 border-t"><p>废纸壳: 5.8斤 x 0.85元/斤</p></div>
|
||
</div>
|
||
<div class="bg-white p-3 rounded-lg shadow-sm">
|
||
<div class="flex justify-between items-center mb-2"><span class="font-bold">好邻居快递驿站</span><span class="text-xl font-bold text-green-600">+12.50</span></div>
|
||
<p class="text-sm text-gray-500">2025-08-14 16:21:10</p>
|
||
<div class="text-sm text-gray-600 mt-2 pt-2 border-t"><p>旧衣物: 25.0斤 x 0.50元/斤</p></div>
|
||
</div>
|
||
</div>
|
||
<!-- 空状态 -->
|
||
<div class="p-4 text-center mt-16">
|
||
<i class="ri-file-text-line text-6xl text-gray-300"></i>
|
||
<p class="mt-4 text-gray-500">您还没有交易记录哦</p>
|
||
<p class="text-sm text-gray-400">快去楼下小站卖一次吧！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智能终端平板 分组 -->
|
||
<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">智能回收终端界面</h1>
|
||
<div class="flex flex-wrap justify-center gap-5">
|
||
<!-- 平板框架样式 -->
|
||
<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="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>
|
||
</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版本中移除) -->
|
||
</div>
|
||
|
||
<script>
|
||
// C端图表
|
||
const cUserCtx = document.getElementById('cUserChart').getContext('2d');
|
||
new Chart(cUserCtx, {
|
||
type: 'pie',
|
||
data: {
|
||
labels: ['废纸壳', '旧衣物', '塑料瓶'],
|
||
datasets: [{
|
||
label: '回收分布',
|
||
data: [60, 25, 15],
|
||
backgroundColor: ['#28a745', '#20c997', '#6f42c1'],
|
||
hoverOffset: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
const cHistoryCtx = document.getElementById('cHistoryChart').getContext('2d');
|
||
new Chart(cHistoryCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['8/09', '8/10', '8/11', '8/12', '8/13', '8/14', '8/15'],
|
||
datasets: [{
|
||
label: '收入 (元)',
|
||
data: [5.2, 0, 12.5, 8.0, 0, 12.5, 4.93],
|
||
backgroundColor: '#28a745',
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// B端图表
|
||
const bCategoryCtx = document.getElementById('bCategoryChart').getContext('2d');
|
||
new Chart(bCategoryCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['废纸壳', '塑料瓶', '旧衣物', '其他'],
|
||
datasets: [{
|
||
label: '品类分布',
|
||
data: [90, 45, 20.5, 3.2],
|
||
backgroundColor: ['#0d6efd', '#dc3545', '#ffc107', '#6c757d'],
|
||
hoverOffset: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
const bHistoryCtx = document.getElementById('bHistoryChart').getContext('2d');
|
||
new Chart(bHistoryCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['8/09', '8/10', '8/11', '8/12', '8/13', '8/14', '8/15'],
|
||
datasets: [{
|
||
label: '回收总量 (kg)',
|
||
data: [120, 150, 135, 180, 165, 210, 158.7],
|
||
fill: false,
|
||
borderColor: '#0d6efd',
|
||
tension: 0.1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |