bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1020

Browse Source
This commit is contained in:
bwstudio
2025-10-20 07:11:14 +08:00
parent 78f6022827
commit 467b04e5b0
18 changed files with 10466 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
原型/小程序页面/admin-home.html
+472
View File
@@ -0,0 +1,472 @@
<!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>