|
|
@@ -578,29 +578,129 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 薪资信息 -->
|
|
|
+ <!-- 薪资信息 - 简化为单条工资金额 -->
|
|
|
<div class="card bg-white p-4 mb-4">
|
|
|
<h3 class="font-semibold text-gray-700 mb-3">薪资信息</h3>
|
|
|
- <div class="space-y-3 text-sm">
|
|
|
- <div class="flex justify-between">
|
|
|
- <p class="text-gray-500">基本工资</p>
|
|
|
- <p class="text-gray-800">¥3,500</p>
|
|
|
+ <div class="flex justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <p class="text-gray-500">当前月薪</p>
|
|
|
+ <p class="text-2xl font-bold text-blue-600">¥4,800</p>
|
|
|
</div>
|
|
|
- <div class="flex justify-between">
|
|
|
- <p class="text-gray-500">岗位津贴</p>
|
|
|
- <p class="text-gray-800">¥800</p>
|
|
|
+ <button class="text-blue-500 text-sm">
|
|
|
+ <i class="fas fa-history mr-1"></i>薪资历史
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新增:历史工作内容 -->
|
|
|
+ <div class="card bg-white p-4 mb-4">
|
|
|
+ <h3 class="font-semibold text-gray-700 mb-3">历史工作内容</h3>
|
|
|
+ <div class="space-y-4">
|
|
|
+ <!-- 当前工作 -->
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex flex-col items-center mr-3">
|
|
|
+ <div class="w-3 h-3 rounded-full bg-blue-500"></div>
|
|
|
+ <div class="w-0.5 h-full bg-blue-200 mt-1"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between items-start">
|
|
|
+ <div>
|
|
|
+ <p class="font-medium text-gray-800">阿里巴巴</p>
|
|
|
+ <p class="text-sm text-gray-600">数据标注员</p>
|
|
|
+ </div>
|
|
|
+ <div class="text-right">
|
|
|
+ <p class="text-sm font-medium text-blue-600">¥4,800</p>
|
|
|
+ <p class="text-xs text-gray-500">2023-08-01 至今</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="text-sm text-gray-600 mt-2">负责图像数据标注,包括分类、框选、语义分割等;参与AI训练数据的质量审核;协助团队完成数据清洗和整理工作。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="flex justify-between">
|
|
|
- <p class="text-gray-500">绩效奖金</p>
|
|
|
- <p class="text-gray-800">¥500</p>
|
|
|
+
|
|
|
+ <!-- 历史工作1 -->
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex flex-col items-center mr-3">
|
|
|
+ <div class="w-3 h-3 rounded-full bg-gray-400"></div>
|
|
|
+ <div class="w-0.5 h-full bg-gray-200 mt-1"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between items-start">
|
|
|
+ <div>
|
|
|
+ <p class="font-medium text-gray-800">腾讯科技</p>
|
|
|
+ <p class="text-sm text-gray-600">内容审核员</p>
|
|
|
+ </div>
|
|
|
+ <div class="text-right">
|
|
|
+ <p class="text-sm font-medium text-gray-600">¥4,200</p>
|
|
|
+ <p class="text-xs text-gray-500">2023-05-01 至 2023-07-31</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="text-sm text-gray-600 mt-2">负责平台用户生成内容的审核工作,识别违规信息;参与内容安全策略讨论;定期整理审核数据并提交报告。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="flex justify-between border-t border-gray-200 pt-2">
|
|
|
- <p class="text-gray-700 font-medium">总计</p>
|
|
|
- <p class="text-gray-800 font-bold">¥4,800</p>
|
|
|
+
|
|
|
+ <!-- 历史工作2 -->
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex flex-col items-center mr-3">
|
|
|
+ <div class="w-3 h-3 rounded-full bg-gray-400"></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="flex justify-between items-start">
|
|
|
+ <div>
|
|
|
+ <p class="font-medium text-gray-800">字节跳动</p>
|
|
|
+ <p class="text-sm text-gray-600">数据录入员</p>
|
|
|
+ </div>
|
|
|
+ <div class="text-right">
|
|
|
+ <p class="text-sm font-medium text-gray-600">¥3,800</p>
|
|
|
+ <p class="text-xs text-gray-500">2023-02-01 至 2023-04-30</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="text-sm text-gray-600 mt-2">负责数据录入和校对工作,确保数据准确性;参与数据质量检查流程;协助团队完成数据整理任务。</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 视频功能 -->
|
|
|
+ <div class="card bg-white p-4 mb-4">
|
|
|
+ <h3 class="font-semibold text-gray-700 mb-3">工作视频</h3>
|
|
|
+ <div class="space-y-3">
|
|
|
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <i class="fas fa-video text-blue-500 mr-3"></i>
|
|
|
+ <div>
|
|
|
+ <p class="text-sm font-medium text-gray-800">工作环境视频</p>
|
|
|
+ <p class="text-xs text-gray-500">时长: 2分30秒</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-2">
|
|
|
+ <button class="text-blue-500 text-sm">
|
|
|
+ <i class="fas fa-play mr-1"></i>查看
|
|
|
+ </button>
|
|
|
+ <button class="text-green-500 text-sm">
|
|
|
+ <i class="fas fa-download mr-1"></i>下载
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <i class="fas fa-video text-green-500 mr-3"></i>
|
|
|
+ <div>
|
|
|
+ <p class="text-sm font-medium text-gray-800">工作流程演示</p>
|
|
|
+ <p class="text-xs text-gray-500">时长: 1分45秒</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex space-x-2">
|
|
|
+ <button class="text-blue-500 text-sm">
|
|
|
+ <i class="fas fa-play mr-1"></i>查看
|
|
|
+ </button>
|
|
|
+ <button class="text-green-500 text-sm">
|
|
|
+ <i class="fas fa-download mr-1"></i>下载
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 操作按钮 -->
|
|
|
<div class="flex space-x-3">
|
|
|
<button class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-medium">
|
|
|
@@ -843,12 +943,30 @@
|
|
|
<p class="text-gray-800">2024-10-31</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 新增打卡数据统计 -->
|
|
|
+ <div class="grid grid-cols-3 gap-2 mb-3">
|
|
|
+ <div class="bg-blue-50 rounded-lg p-2 text-center">
|
|
|
+ <p class="text-xs text-gray-600">本月打卡</p>
|
|
|
+ <p class="text-sm font-bold text-gray-800">24/30</p>
|
|
|
+ <p class="text-xs text-gray-500">80%</p>
|
|
|
+ </div>
|
|
|
+ <div class="bg-green-50 rounded-lg p-2 text-center">
|
|
|
+ <p class="text-xs text-gray-600">工资视频</p>
|
|
|
+ <p class="text-sm font-bold text-gray-800">22</p>
|
|
|
+ <p class="text-xs text-gray-500">已上传</p>
|
|
|
+ </div>
|
|
|
+ <div class="bg-purple-50 rounded-lg p-2 text-center">
|
|
|
+ <p class="text-xs text-gray-600">个税视频</p>
|
|
|
+ <p class="text-sm font-bold text-gray-800">20</p>
|
|
|
+ <p class="text-xs text-gray-500">已上传</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="flex justify-between text-sm">
|
|
|
<button class="text-blue-500">
|
|
|
<i class="fas fa-eye mr-1"></i>查看详情
|
|
|
</button>
|
|
|
<button class="text-gray-500">
|
|
|
- <i class="fas fa-edit mr-1"></i>编辑
|
|
|
+ <i class="fas fa-download mr-1"></i>下载视频
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -1089,11 +1207,182 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 新增页面7: 视频查看下载页 -->
|
|
|
+ <div class="flex flex-col items-center">
|
|
|
+ <h2 class="text-xl font-semibold text-gray-700 mb-4">视频查看下载页</h2>
|
|
|
+ <div class="mobile-frame">
|
|
|
+ <div class="status-bar">
|
|
|
+ <span>9:41</span>
|
|
|
+ <div class="flex space-x-1">
|
|
|
+ <i class="fas fa-signal"></i>
|
|
|
+ <i class="fas fa-wifi"></i>
|
|
|
+ <i class="fas fa-battery-three-quarters"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="h-[calc(100%-104px)] overflow-y-auto">
|
|
|
+ <!-- 顶部信息 -->
|
|
|
+ <div class="p-4 border-b border-gray-200">
|
|
|
+ <div class="flex items-center justify-between">
|
|
|
+ <div>
|
|
|
+ <h3 class="font-semibold text-gray-800">阿里巴巴2023-11</h3>
|
|
|
+ <p class="text-sm text-gray-500">打卡视频管理</p>
|
|
|
+ </div>
|
|
|
+ <button class="text-blue-500 text-sm">
|
|
|
+ <i class="fas fa-download mr-1"></i>批量下载
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频分类 -->
|
|
|
+ <div class="p-4 border-b border-gray-200">
|
|
|
+ <div class="flex space-x-2 overflow-x-auto pb-2">
|
|
|
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full whitespace-nowrap">全部视频</span>
|
|
|
+ <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full whitespace-nowrap">工资视频</span>
|
|
|
+ <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full whitespace-nowrap">个税视频</span>
|
|
|
+ <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full whitespace-nowrap">打卡视频</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频列表 -->
|
|
|
+ <div class="p-4">
|
|
|
+ <div class="flex justify-between items-center mb-4">
|
|
|
+ <h3 class="font-semibold text-gray-700">视频列表 (12)</h3>
|
|
|
+ <div class="flex space-x-2">
|
|
|
+ <button class="text-gray-500">
|
|
|
+ <i class="fas fa-sort"></i>
|
|
|
+ </button>
|
|
|
+ <button class="text-gray-500">
|
|
|
+ <i class="fas fa-filter"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-4">
|
|
|
+ <!-- 视频项1 -->
|
|
|
+ <div class="card bg-white p-4">
|
|
|
+ <div class="flex justify-between items-start mb-3">
|
|
|
+ <div>
|
|
|
+ <h4 class="font-semibold text-gray-800">张明 - 工资视频</h4>
|
|
|
+ <p class="text-xs text-gray-500">2023-11-25 上传</p>
|
|
|
+ </div>
|
|
|
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已验证</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center mb-3">
|
|
|
+ <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-play text-gray-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <p class="text-sm text-gray-700">工资发放确认视频</p>
|
|
|
+ <p class="text-xs text-gray-500">时长: 00:45 · 大小: 12.3MB</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between text-sm">
|
|
|
+ <button class="text-blue-500">
|
|
|
+ <i class="fas fa-play mr-1"></i>播放
|
|
|
+ </button>
|
|
|
+ <button class="text-green-500">
|
|
|
+ <i class="fas fa-download mr-1"></i>下载
|
|
|
+ </button>
|
|
|
+ <button class="text-gray-500">
|
|
|
+ <i class="fas fa-share mr-1"></i>分享
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频项2 -->
|
|
|
+ <div class="card bg-white p-4">
|
|
|
+ <div class="flex justify-between items-start mb-3">
|
|
|
+ <div>
|
|
|
+ <h4 class="font-semibold text-gray-800">李小红 - 个税视频</h4>
|
|
|
+ <p class="text-xs text-gray-500">2023-11-24 上传</p>
|
|
|
+ </div>
|
|
|
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">已验证</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center mb-3">
|
|
|
+ <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-play text-gray-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <p class="text-sm text-gray-700">个税申报确认视频</p>
|
|
|
+ <p class="text-xs text-gray-500">时长: 00:38 · 大小: 10.8MB</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between text-sm">
|
|
|
+ <button class="text-blue-500">
|
|
|
+ <i class="fas fa-play mr-1"></i>播放
|
|
|
+ </button>
|
|
|
+ <button class="text-green-500">
|
|
|
+ <i class="fas fa-download mr-1"></i>下载
|
|
|
+ </button>
|
|
|
+ <button class="text-gray-500">
|
|
|
+ <i class="fas fa-share mr-1"></i>分享
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频项3 -->
|
|
|
+ <div class="card bg-white p-4">
|
|
|
+ <div class="flex justify-between items-start mb-3">
|
|
|
+ <div>
|
|
|
+ <h4 class="font-semibold text-gray-800">王强 - 打卡视频</h4>
|
|
|
+ <p class="text-xs text-gray-500">2023-11-23 上传</p>
|
|
|
+ </div>
|
|
|
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">待审核</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center mb-3">
|
|
|
+ <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center mr-3">
|
|
|
+ <i class="fas fa-play text-gray-500"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <p class="text-sm text-gray-700">上班打卡记录视频</p>
|
|
|
+ <p class="text-xs text-gray-500">时长: 00:28 · 大小: 8.5MB</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between text-sm">
|
|
|
+ <button class="text-blue-500">
|
|
|
+ <i class="fas fa-play mr-1"></i>播放
|
|
|
+ </button>
|
|
|
+ <button class="text-green-500">
|
|
|
+ <i class="fas fa-download mr-1"></i>下载
|
|
|
+ </button>
|
|
|
+ <button class="text-gray-500">
|
|
|
+ <i class="fas fa-share mr-1"></i>分享
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部导航 -->
|
|
|
+ <div class="tab-bar">
|
|
|
+ <div class="tab-item">
|
|
|
+ <i class="fas fa-home text-lg mb-1"></i>
|
|
|
+ <span>首页</span>
|
|
|
+ </div>
|
|
|
+ <div class="tab-item">
|
|
|
+ <i class="fas fa-user-friends text-lg mb-1"></i>
|
|
|
+ <span>人才</span>
|
|
|
+ </div>
|
|
|
+ <div class="tab-item active">
|
|
|
+ <i class="fas fa-file-alt text-lg mb-1"></i>
|
|
|
+ <span>订单</span>
|
|
|
+ </div>
|
|
|
+ <div class="tab-item">
|
|
|
+ <i class="fas fa-user text-lg mb-1"></i>
|
|
|
+ <span>我的</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="mt-12 text-center text-gray-600">
|
|
|
<p>用人方小程序完整原型设计 - 基于数据库表结构设计的所有主要页面</p>
|
|
|
<p class="mt-2">数据来源: allin_2025-11-25.sql</p>
|
|
|
+ <p class="mt-2">功能优化:打卡数据统计、薪资信息简化、历史工作内容展示、视频查看下载</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|