472 lines
13 KiB
HTML
472 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>管理员首页 - 图片收集小程序</title>
|
|
<!-- 引入Vue.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
|
|
<!-- 引入Element UI CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/theme-chalk/index.css">
|
|
<!-- 引入Element UI JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.8/lib/index.js"></script>
|
|
<!-- 引入Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
|
|
overflow-x: hidden;
|
|
}
|
|
.container {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
background-color: #1989fa;
|
|
color: white;
|
|
padding: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
.header-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.notification-icon {
|
|
position: relative;
|
|
margin-right: 15px;
|
|
font-size: 20px;
|
|
}
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
background-color: #f56c6c;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1989fa;
|
|
font-size: 16px;
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
padding: 15px;
|
|
overflow-y: auto;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
.pending-tasks {
|
|
background-color: #ecf5ff;
|
|
border-left: 4px solid #1989fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.pending-tasks:hover {
|
|
background-color: #ebeef5;
|
|
}
|
|
.pending-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-bottom: 5px;
|
|
}
|
|
.pending-count {
|
|
display: inline-block;
|
|
background-color: #1989fa;
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 2px 8px;
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
}
|
|
.pending-desc {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
.chart-container {
|
|
height: 200px;
|
|
margin: 15px 0;
|
|
}
|
|
.chart-bar {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 180px;
|
|
padding: 0 10px;
|
|
}
|
|
.bar-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 5px;
|
|
}
|
|
.bar {
|
|
width: 30px;
|
|
background-color: #1989fa;
|
|
border-radius: 4px 4px 0 0;
|
|
transition: height 0.3s;
|
|
}
|
|
.bar-label {
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.bar-value {
|
|
margin-bottom: 5px;
|
|
font-size: 12px;
|
|
color: #606266;
|
|
}
|
|
.progress-card {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px;
|
|
background-color: #f0f9eb;
|
|
border: 1px solid #e1f3d8;
|
|
border-radius: 8px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
}
|
|
.progress-text {
|
|
flex: 1;
|
|
}
|
|
.progress-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
}
|
|
.progress-subtitle {
|
|
font-size: 12px;
|
|
color: #67c23a;
|
|
margin-top: 5px;
|
|
}
|
|
.progress-icon {
|
|
font-size: 24px;
|
|
color: #67c23a;
|
|
}
|
|
.image-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
.image-item {
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
padding-bottom: 100%;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.image-item img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.image-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: white;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
}
|
|
.image-uploader {
|
|
font-size: 10px;
|
|
opacity: 0.8;
|
|
}
|
|
.footer-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
z-index: 99;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #909399;
|
|
}
|
|
.nav-item.active {
|
|
color: #1989fa;
|
|
}
|
|
.nav-icon {
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.view-more {
|
|
font-size: 14px;
|
|
color: #1989fa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="container">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="header">
|
|
<div class="header-title">图片收集小程序</div>
|
|
<div class="header-actions">
|
|
<el-dropdown>
|
|
<span class="notification-icon cursor-pointer">
|
|
<i class="fa fa-bell-o"></i>
|
|
<span class="notification-badge">{{ notificationCount }}</span>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown" style="width: 280px;">
|
|
<el-dropdown-item disabled style="text-align: center;">通知消息</el-dropdown-item>
|
|
<el-dropdown-item v-for="(notification, index) in notifications" :key="index">
|
|
<div style="font-size: 12px;">
|
|
<div style="color: #303133;">{{ notification.title }}</div>
|
|
<div style="color: #909399; margin-top: 4px;">{{ notification.time }}</div>
|
|
</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
<el-dropdown>
|
|
<span class="user-avatar cursor-pointer">
|
|
<i class="fa fa-user"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click="goToProfile">个人中心</el-dropdown-item>
|
|
<el-dropdown-item @click="logout" divided>退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="content">
|
|
<!-- 待处理任务卡片 -->
|
|
<div class="pending-tasks" @click="viewPendingTasks">
|
|
<div class="pending-title">
|
|
待处理任务
|
|
<span class="pending-count">{{ pendingCount }}</span>
|
|
</div>
|
|
<div class="pending-desc">点击查看所有待审核的图片</div>
|
|
</div>
|
|
|
|
<!-- 统计图表区域 -->
|
|
<div class="card">
|
|
<div class="section-title">部门上传统计</div>
|
|
<div class="chart-container">
|
|
<div class="chart-bar">
|
|
<div v-for="dept in departmentStats" :key="dept.name" class="bar-item">
|
|
<div class="bar-value">{{ dept.count }}</div>
|
|
<div class="bar" :style="{ height: dept.height + '%' }"></div>
|
|
<div class="bar-label">{{ dept.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 任务进度查询入口 -->
|
|
<div class="progress-card" @click="queryTaskProgress">
|
|
<div class="progress-text">
|
|
<div class="progress-title">任务进度查询</div>
|
|
<div class="progress-subtitle">查看所有任务的完成情况</div>
|
|
</div>
|
|
<i class="progress-icon fa fa-bar-chart"></i>
|
|
</div>
|
|
|
|
<!-- 最新上传图片列表 -->
|
|
<div class="card">
|
|
<div class="section-title">
|
|
最新上传
|
|
<span class="view-more" @click="viewAllImages">查看全部</span>
|
|
</div>
|
|
<div class="image-list">
|
|
<div
|
|
v-for="image in recentImages"
|
|
:key="image.id"
|
|
class="image-item"
|
|
@click="viewImageDetail(image.id)"
|
|
>
|
|
<img :src="image.url" :alt="image.title">
|
|
<div class="image-overlay">
|
|
<div>{{ image.title }}</div>
|
|
<div class="image-uploader">{{ image.uploader }} · {{ image.department }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部导航栏 -->
|
|
<div class="footer-nav">
|
|
<div class="nav-item active" @click="goToHome">
|
|
<i class="nav-icon fa fa-home"></i>
|
|
<span>首页</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToTasks">
|
|
<i class="nav-icon fa fa-tasks"></i>
|
|
<span>任务</span>
|
|
</div>
|
|
<div class="nav-item" @click="goToProfile">
|
|
<i class="nav-icon fa fa-user"></i>
|
|
<span>我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
pendingCount: 12,
|
|
notificationCount: 3,
|
|
notifications: [
|
|
{ title: '有5张新的图片需要审核', time: '10分钟前' },
|
|
{ title: '市场部完成了本月任务', time: '1小时前' },
|
|
{ title: '系统将于今晚22:00进行维护', time: '昨天' }
|
|
],
|
|
departmentStats: [
|
|
{ name: '市场部', count: 45, height: 100 },
|
|
{ name: '技术部', count: 28, height: 62 },
|
|
{ name: '产品部', count: 32, height: 71 },
|
|
{ name: '行政部', count: 15, height: 33 },
|
|
{ name: '财务部', count: 8, height: 18 }
|
|
],
|
|
recentImages: [
|
|
{
|
|
id: 1,
|
|
title: '产品包装设计',
|
|
url: 'https://via.placeholder.com/300x300',
|
|
uploader: '张三',
|
|
department: '市场部'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '新品发布会',
|
|
url: 'https://via.placeholder.com/300x300',
|
|
uploader: '李四',
|
|
department: '品牌部'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '办公室环境',
|
|
url: 'https://via.placeholder.com/300x300',
|
|
uploader: '王五',
|
|
department: '行政部'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '团建活动',
|
|
url: 'https://via.placeholder.com/300x300',
|
|
uploader: '赵六',
|
|
department: '人力资源部'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 查看待处理任务
|
|
viewPendingTasks() {
|
|
this.$message.info('查看所有待处理任务');
|
|
},
|
|
|
|
// 查询任务进度
|
|
queryTaskProgress() {
|
|
this.$message.info('查询任务进度');
|
|
},
|
|
|
|
// 查看图片详情
|
|
viewImageDetail(imageId) {
|
|
window.location.href = 'image-detail.html?id=' + imageId;
|
|
},
|
|
|
|
// 查看所有图片
|
|
viewAllImages() {
|
|
this.$message.info('查看所有图片');
|
|
},
|
|
|
|
// 跳转到任务页面
|
|
goToTasks() {
|
|
this.$message.info('跳转到任务页面');
|
|
},
|
|
|
|
// 跳转到个人中心
|
|
goToProfile() {
|
|
this.$message.info('跳转到个人中心');
|
|
},
|
|
|
|
// 返回首页
|
|
goToHome() {
|
|
// 已经在首页
|
|
},
|
|
|
|
// 退出登录
|
|
logout() {
|
|
this.$confirm('确定要退出登录吗？', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
window.location.href = 'login.html';
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |