console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合接单抢单平台 - UI设计</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#6366F1',
accent: '#818CF8',
success: '#10B981',
warning: '#F59E0B',
danger: '#EF4444',
light: '#F3F4F6',
dark: '#1F2937'
}
}
}
}
</script>
<style>
body {
background-color: #f5f5f5;
}
.phone-mockup {
width: 320px;
height: 640px;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
position: relative;
background-color: white;
}
.mockup-container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 20px;
padding: 20px;
scrollbar-width: none;
}
.mockup-container::-webkit-scrollbar {
display: none;
}
.status-bar {
height: 24px;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 12px;
font-size: 12px;
color: #666;
}
</style>
</head>
<body class="p-8">
<h1 class="text-3xl font-bold text-center mb-8 text-primary">综合接单抢单平台 UI/UX 设计</h1>
<div class="mockup-container">
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col p-6 bg-gradient-to-br from-primary to-secondary">
<div class="mt-12 mb-8">
<h2 class="text-3xl font-bold text-white mb-2">欢迎回来</h2>
<p class="text-white/80">登录您的接单账户</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg mt-auto mb-8">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
<input type="tel" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入手机号码">
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
<input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入密码">
</div>
<button class="w-full bg-primary text-white py-3 rounded-lg font-medium shadow-md hover:bg-primary/90 transition">登录</button>
<div class="flex justify-between mt-4 text-sm">
<a href="#" class="text-gray-600">忘记密码?</a>
<a href="#" class="text-primary font-medium">注册账户</a>
</div>
</div>
<div class="flex items-center justify-center gap-4 mb-4">
<div class="h-px bg-white/30 flex-1"></div>
<span class="text-white/70 text-sm">其他登录方式</span>
<div class="h-px bg-white/30 flex-1"></div>
</div>
<div class="flex justify-center gap-6">
<button class="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md">
<span class="text-xl">��</span>
</button>
<button class="w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-md">
<span class="text-xl">��</span>
</button>
</div>
</div>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<header class="p-4 bg-white shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-primary font-bold">任务大厅</span>
<span class="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-full">北京</span>
</div>
<div class="flex gap-3">
<button class="text-gray-600">��</button>
<button class="text-gray-600">��</button>
</div>
</div>
<div class="flex mt-4 gap-2">
<button class="flex-1 py-2 bg-primary text-white rounded-lg text-sm font-medium">全部任务</button>
<button class="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">推荐任务</button>
<button class="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">附近任务</button>
</div>
</header>
<div class="flex-1 p-4 overflow-hidden">
<div class="flex justify-between items-center mb-4">
<div class="flex gap-2">
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs flex items-center gap-1">
<span>筛选</span>
<span>▼</span>
</button>
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs flex items-center gap-1">
<span>分类</span>
<span>▼</span>
</button>
</div>
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs flex items-center gap-1">
<span>最新发布</span>
<span>▼</span>
</button>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm mb-3 border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">UI设计师需求</h3>
<p class="text-xs text-gray-500 mt-1">需要设计一套电商APP界面</p>
</div>
<span class="text-primary font-bold">¥2000</span>
</div>
<div class="flex gap-2 mt-3">
<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">设计</span>
<span class="px-2 py-0.5 bg-green-50 text-green-600 rounded text-xs">远程</span>
<span class="px-2 py-0.5 bg-yellow-50 text-yellow-600 rounded text-xs">3天</span>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">张先生</span>
</div>
<button class="px-4 py-1 bg-primary text-white text-sm rounded-full">抢单</button>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm mb-3 border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">前端开发工程师</h3>
<p class="text-xs text-gray-500 mt-1">React项目开发，有经验优先</p>
</div>
<span class="text-primary font-bold">¥5000</span>
</div>
<div class="flex gap-2 mt-3">
<span class="px-2 py-0.5 bg-purple-50 text-purple-600 rounded text-xs">开发</span>
<span class="px-2 py-0.5 bg-green-50 text-green-600 rounded text-xs">远程</span>
<span class="px-2 py-0.5 bg-yellow-50 text-yellow-600 rounded text-xs">7天</span>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">李女士</span>
</div>
<button class="px-4 py-1 bg-primary text-white text-sm rounded-full">抢单</button>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">内容编辑</h3>
<p class="text-xs text-gray-500 mt-1">撰写产品文案和营销内容</p>
</div>
<span class="text-primary font-bold">¥1500</span>
</div>
<div class="flex gap-2 mt-3">
<span class="px-2 py-0.5 bg-red-50 text-red-600 rounded text-xs">文案</span>
<span class="px-2 py-0.5 bg-green-50 text-green-600 rounded text-xs">远程</span>
<span class="px-2 py-0.5 bg-yellow-50 text-yellow-600 rounded text-xs">5天</span>
</div>
<div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">王先生</span>
</div>
<button class="px-4 py-1 bg-primary text-white text-sm rounded-full">抢单</button>
</div>
</div>
</div>
<nav class="flex justify-around py-3 bg-white border-t border-gray-200">
<a href="#" class="flex flex-col items-center text-primary">
<span class="text-xl">��</span>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">钱包</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</div>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<header class="p-4 bg-white shadow-sm flex items-center">
<button class="mr-4">←</button>
<h2 class="font-medium">任务详情</h2>
</header>
<div class="flex-1 p-4 overflow-hidden">
<div class="bg-white rounded-xl p-4 shadow-sm mb-4">
<h3 class="font-bold text-lg text-gray-900">UI设计师需求</h3>
<div class="flex justify-between items-center mt-2">
<span class="text-primary font-bold text-xl">¥2000</span>
<div class="flex gap-2">
<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">设计</span>
<span class="px-2 py-0.5 bg-green-50 text-green-600 rounded text-xs">远程</span>
</div>
</div>
<div class="flex items-center gap-3 mt-4 pb-4 border-b border-gray-100">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-10 h-10 rounded-full" alt="发布者头像">
<div>
<div class="flex items-center gap-2">
<span class="font-medium">张先生</span>
<span class="text-xs px-1.5 py-0.5 bg-yellow-50 text-yellow-600 rounded">企业认证</span>
</div>
<div class="text-xs text-gray-500 mt-0.5">已发布10个任务 | 好评率98%</div>
</div>
</div>
<div class="py-4 border-b border-gray-100">
<h4 class="font-medium mb-2">任务描述</h4>
<p class="text-sm text-gray-600 leading-relaxed">
需要设计一套电商APP界面，包括首页、商品详情页、购物车、个人中心等核心页面。要求设计风格简约现代，符合电商行业特点，有相关经验优先。
</p>
</div>
<div class="py-4 border-b border-gray-100">
<h4 class="font-medium mb-2">任务要求</h4>
<ul class="text-sm text-gray-600 space-y-2">
<li class="flex items-start gap-2">
<span class="text-primary">•</span>
<span>有2年以上UI设计经验</span>
</li>
<li class="flex items-start gap-2">
<span class="text-primary">•</span>
<span>熟悉Figma或Sketch等设计工具</span>
</li>
<li class="flex items-start gap-2">
<span class="text-primary">•</span>
<span>有电商类APP设计经验</span>
</li>
<li class="flex items-start gap-2">
<span class="text-primary">•</span>
<span>能够提供设计源文件</span>
</li>
</ul>
</div>
<div class="py-4">
<h4 class="font-medium mb-2">截止时间</h4>
<div class="flex items-center gap-2 text-sm text-gray-600">
<span>��️</span>
<span>2025年3月20日 18:00</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm">
<h4 class="font-medium mb-3">相似任务推荐</h4>
<div class="space-y-3">
<div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg">
<div>
<h5 class="font-medium text-sm">APP界面设计</h5>
<div class="text-xs text-gray-500 mt-0.5">3天 | 远程</div>
</div>
<span class="text-primary font-medium">¥1800</span>
</div>
<div class="flex justify-between items-center p-2 bg-gray-50 rounded-lg">
<div>
<h5 class="font-medium text-sm">电商Banner设计</h5>
<div class="text-xs text-gray-500 mt-0.5">2天 | 远程</div>
</div>
<span class="text-primary font-medium">¥800</span>
</div>
</div>
</div>
</div>
<div class="p-4 bg-white border-t border-gray-200 flex gap-3">
<button class="flex items-center justify-center gap-1 px-4 py-2.5 border border-gray-300 rounded-lg flex-1">
<span>��</span>
<span>联系发布者</span>
</button>
<button class="px-4 py-2.5 bg-primary text-white rounded-lg font-medium flex-1">立即抢单</button>
</div>
</div>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<header class="p-4 bg-white shadow-sm">
<h2 class="font-medium text-center">我的订单</h2>
<div class="flex mt-4 gap-2">
<button class="flex-1 py-2 bg-primary text-white rounded-lg text-sm font-medium">进行中</button>
<button class="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">已完成</button>
<button class="flex-1 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium">已取消</button>
</div>
</header>
<div class="flex-1 p-4 overflow-hidden">
<div class="bg-white rounded-xl p-4 shadow-sm mb-3 border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">UI设计师需求</h3>
<p class="text-xs text-gray-500 mt-1">需要设计一套电商APP界面</p>
</div>
<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">进行中</span>
</div>
<div class="flex justify-between items-center mt-3">
<span class="text-primary font-bold">¥2000</span>
<span class="text-xs text-gray-500">剩余2天</span>
</div>
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">张先生</span>
</div>
<div class="flex gap-2">
<button class="px-3 py-1 border border-gray-300 text-gray-600 text-xs rounded-full">联系</button>
<button class="px-3 py-1 bg-primary text-white text-xs rounded-full">提交</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm mb-3 border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">Logo设计</h3>
<p class="text-xs text-gray-500 mt-1">科技公司logo设计，简约风格</p>
</div>
<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">进行中</span>
</div>
<div class="flex justify-between items-center mt-3">
<span class="text-primary font-bold">¥1200</span>
<span class="text-xs text-gray-500">剩余1天</span>
</div>
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">李女士</span>
</div>
<div class="flex gap-2">
<button class="px-3 py-1 border border-gray-300 text-gray-600 text-xs rounded-full">联系</button>
<button class="px-3 py-1 bg-primary text-white text-xs rounded-full">提交</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-gray-900">网站开发</h3>
<p class="text-xs text-gray-500 mt-1">企业官网开发，响应式设计</p>
</div>
<span class="px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-xs">进行中</span>
</div>
<div class="flex justify-between items-center mt-3">
<span class="text-primary font-bold">¥8000</span>
<span class="text-xs text-gray-500">剩余5天</span>
</div>
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
<div class="flex items-center gap-2">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=50&h=50&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-5 h-5 rounded-full" alt="发布者头像">
<span class="text-xs text-gray-600">王先生</span>
</div>
<div class="flex gap-2">
<button class="px-3 py-1 border border-gray-300 text-gray-600 text-xs rounded-full">联系</button>
<button class="px-3 py-1 bg-primary text-white text-xs rounded-full">提交</button>
</div>
</div>
</div>
</div>
<nav class="flex justify-around py-3 bg-white border-t border-gray-200">
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-primary">
<span class="text-xl">��</span>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">钱包</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</div>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<header class="p-4 bg-white shadow-sm">
<h2 class="font-medium text-center">我的钱包</h2>
</header>
<div class="p-4 bg-gradient-to-r from-primary to-secondary rounded-xl mx-4 mt-2 text-white">
<div class="flex justify-between items-center">
<span class="text-sm opacity-80">账户余额</span>
<button class="text-xs bg-white/20 px-2 py-1 rounded-full">明细</button>
</div>
<div class="text-2xl font-bold mt-2">¥8,560.00</div>
<div class="flex justify-between mt-6">
<div class="text-center">
<div class="text-sm opacity-80">今日收入</div>
<div class="font-medium mt-1">¥1,200</div>
</div>
<div class="text-center">
<div class="text-sm opacity-80">本月收入</div>
<div class="font-medium mt-1">¥5,600</div>
</div>
<div class="text-center">
<div class="text-sm opacity-80">总收入</div>
<div class="font-medium mt-1">¥32,800</div>
</div>
</div>
<div class="flex gap-3 mt-6">
<button class="flex-1 bg-white text-primary py-2 rounded-lg font-medium text-sm">提现</button>
<button class="flex-1 bg-white/20 text-white py-2 rounded-lg font-medium text-sm">充值</button>
</div>
</div>
<div class="mx-4 mt-6">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium">收支明细</h3>
<button class="text-xs text-gray-500">全部 ></button>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center p-3 bg-white rounded-xl shadow-sm">
<div class="flex gap-3 items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<span>��</span>
</div>
<div>
<div class="font-medium">UI设计师需求</div>
<div class="text-xs text-gray-500">2025-03-13 10:30</div>
</div>
</div>
<span class="text-green-600 font-medium">+¥2000</span>
</div>
<div class="flex justify-between items-center p-3 bg-white rounded-xl shadow-sm">
<div class="flex gap-3 items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
<span>��</span>
</div>
<div>
<div class="font-medium">Logo设计</div>
<div class="text-xs text-gray-500">2025-03-12 15:45</div>
</div>
</div>
<span class="text-green-600 font-medium">+¥1200</span>
</div>
<div class="flex justify-between items-center p-3 bg-white rounded-xl shadow-sm">
<div class="flex gap-3 items-center">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
<span>��</span>
</div>
<div>
<div class="font-medium">提现</div>
<div class="text-xs text-gray-500">2025-03-10 09:15</div>
</div>
</div>
<span class="text-red-600 font-medium">-¥5000</span>
</div>
</div>
</div>
</div>
<nav class="flex justify-around py-3 bg-white border-t border-gray-200 mt-auto">
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-primary">
<span class="text-xl">��</span>
<span class="text-xs mt-1">钱包</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<div class="bg-gradient-to-r from-primary to-secondary p-6 pb-12">
<div class="flex justify-end">
<button class="text-white">⚙️</button>
</div>
<div class="flex items-center gap-4 mt-4">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-20 h-20 rounded-full border-2 border-white" alt="用户头像">
<div class="text-white">
<h2 class="font-bold text-xl">陈小明</h2>
<div class="flex items-center gap-2 mt-1">
<span class="text-sm opacity-80">UI设计师</span>
<span class="px-1.5 py-0.5 bg-white/20 rounded-full text-xs">Lv.5</span>
</div>
<div class="flex items-center gap-1 mt-1 text-xs opacity-80">
<span>ID: 10086</span>
<span>|</span>
<span>北京</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl mx-4 p-4 shadow-sm -mt-8">
<div class="flex justify-between">
<div class="text-center">
<div class="font-bold text-lg">98%</div>
<div class="text-xs text-gray-500 mt-1">好评率</div>
</div>
<div class="text-center">
<div class="font-bold text-lg">56</div>
<div class="text-xs text-gray-500 mt-1">完成订单</div>
</div>
<div class="text-center">
<div class="font-bold text-lg">4.9</div>
<div class="text-xs text-gray-500 mt-1">综合评分</div>
</div>
</div>
</div>
<div class="mx-4 mt-6">
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
<a href="#" class="flex justify-between items-center p-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<span class="text-xl">��</span>
<span>我的接单</span>
</div>
<span class="text-gray-400">></span>
</a>
<a href="#" class="flex justify-between items-center p-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<span class="text-xl">��</span>
<span>数据统计</span>
</div>
<span class="text-gray-400">></span>
</a>
<a href="#" class="flex justify-between items-center p-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<span class="text-xl">��</span>
<span>我的技能</span>
</div>
<span class="text-gray-400">></span>
</a>
<a href="#" class="flex justify-between items-center p-4">
<div class="flex items-center gap-3">
<span class="text-xl">⭐</span>
<span>我的评价</span>
</div>
<span class="text-gray-400">></span>
</a>
</div>
<div class="bg-white rounded-xl shadow-sm overflow-hidden mt-4">
<a href="#" class="flex justify-between items-center p-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<span class="text-xl">��</span>
<span>消息通知</span>
</div>
<div class="flex items-center">
<span class="px-1.5 py-0.5 bg-red-500 text-white rounded-full text-xs mr-2">5</span>
<span class="text-gray-400">></span>
</div>
</a>
<a href="#" class="flex justify-between items-center p-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<span class="text-xl">❓</span>
<span>帮助中心</span>
</div>
<span class="text-gray-400">></span>
</a>
<a href="#" class="flex justify-between items-center p-4">
<div class="flex items-center gap-3">
<span class="text-xl">⚙️</span>
<span>设置</span>
</div>
<span class="text-gray-400">></span>
</a>
</div>
</div>
</div>
<nav class="flex justify-around py-3 bg-white border-t border-gray-200 mt-auto">
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-400">
<span class="text-xl">��</span>
<span class="text-xs mt-1">钱包</span>
</a>
<a href="#" class="flex flex-col items-center text-primary">
<span class="text-xl">��</span>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</div>
<div class="phone-mockup flex flex-col">
<div class="status-bar">
<span>10:30</span>
<div class="flex gap-1">
<span>��</span>
<span>��</span>
</div>
</div>
<div class="flex-1 flex flex-col">
<header class="p-4 bg-white shadow-sm flex items-center">
<button class="mr-4">←</button>
<h2 class="font-medium">发布任务</h2>
</header>
<div class="flex-1 p-4 overflow-hidden">
<div class="bg-white rounded-xl p-4 shadow-sm">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">任务标题</label>
<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务标题">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">任务类型</label>
<div class="grid grid-cols-4 gap-2">
<button class="p-2 bg-primary/10 text-primary border border-primary/30 rounded-lg text-sm">设计</button>
<button class="p-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-lg text-sm">开发</button>
<button class="p-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-lg text-sm">文案</button>
<button class="p-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-lg text-sm">营销</button>
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">任务预算</label>
<div class="flex items-center">
<span class="text-gray-500 mr-2">¥</span>
<input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入任务预算">
</div>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary h-24" placeholder="请详细描述您的任务需求"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">任务要求</label>
<textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary h-24" placeholder="请输入对接单者的要求"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">截止时间</label>
<input type="date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">上传附件</label>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
<span class="text-2xl">��</span>
<p class="text-sm text-gray-500 mt-2">点击或拖拽文件到此处上传</p>
</div>
</div>
</div>
</div>
<div class="p-4 bg-white border-t border-gray-200">
<button class="w-full px-4 py-3 bg-primary text-white rounded-lg font-medium">发布任务</button>
</div>
</div>
</div>
</div>
</body>
</html>