home1020
This commit is contained in:
bwstudio
@@ -0,0 +1,457 @@
|
||||
<!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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.task-item {
|
||||
padding: 12px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.task-item:hover {
|
||||
border-color: #1989fa;
|
||||
box-shadow: 0 2px 12px 0 rgba(25, 136, 250, 0.1);
|
||||
}
|
||||
.task-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.task-info {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
.task-deadline {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.image-card {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.image-card img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.image-status {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.status-pending {
|
||||
background-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
.status-approved {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
}
|
||||
.status-rejected {
|
||||
background-color: #f56c6c;
|
||||
color: white;
|
||||
}
|
||||
.upload-btn {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background-color: #1989fa;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 12px rgba(25, 136, 250, 0.4);
|
||||
z-index: 90;
|
||||
}
|
||||
.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>
|
||||
<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 class="content" ref="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
|
||||
<!-- 下拉刷新提示 -->
|
||||
<div class="pull-refresh" v-if="pulling" :style="{ height: pullHeight + 'px', textAlign: 'center', lineHeight: pullHeight + 'px' }">
|
||||
<i class="fa fa-refresh" :class="{ 'fa-spin': refreshing }"></i>
|
||||
<span>{{ refreshText }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 待完成任务卡片 -->
|
||||
<div class="card">
|
||||
<div class="section-title">
|
||||
待完成任务
|
||||
</div>
|
||||
<div v-if="tasks.length > 0">
|
||||
<div
|
||||
v-for="task in tasks"
|
||||
:key="task.id"
|
||||
class="task-item"
|
||||
@click="viewTaskDetail(task.id)"
|
||||
>
|
||||
<div class="task-title">{{ task.name }}</div>
|
||||
<div class="task-info">
|
||||
<span>{{ task.department }}</span>
|
||||
<span class="ml-2 task-deadline">截止: {{ task.deadline }}</span>
|
||||
</div>
|
||||
<div class="task-info mt-1">
|
||||
<span>{{ task.progress }}%</span>
|
||||
<el-progress :percentage="task.progress" :stroke-width="4" :show-text="false" class="ml-2"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center text-gray-400 py-10">
|
||||
暂无待完成任务
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的上传图片列表 -->
|
||||
<div class="card">
|
||||
<div class="section-title">
|
||||
我的上传
|
||||
<span class="view-more" @click="viewAllUploads">查看全部</span>
|
||||
</div>
|
||||
<div class="image-grid">
|
||||
<div
|
||||
v-for="image in recentImages"
|
||||
:key="image.id"
|
||||
class="image-card"
|
||||
@click="viewImageDetail(image.id)"
|
||||
>
|
||||
<img :src="image.url" :alt="image.title">
|
||||
<div class="image-info">{{ image.title }}</div>
|
||||
<div class="image-status" :class="`status-${image.status}`">
|
||||
{{ getStatusText(image.status) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速上传按钮 -->
|
||||
<div class="upload-btn" @click="goToUpload">
|
||||
<i class="fa fa-camera"></i>
|
||||
</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="goToUpload">
|
||||
<i class="nav-icon fa fa-upload"></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 {
|
||||
tasks: [
|
||||
{
|
||||
id: 1,
|
||||
name: '产品包装收集',
|
||||
department: '市场部',
|
||||
deadline: '2023-10-15',
|
||||
progress: 30
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '活动现场拍摄',
|
||||
department: '品牌部',
|
||||
deadline: '2023-10-20',
|
||||
progress: 0
|
||||
}
|
||||
],
|
||||
recentImages: [
|
||||
{
|
||||
id: 1,
|
||||
title: '产品正面照',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '产品侧面照',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
status: 'approved'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '产品背面照',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
status: 'pending'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '使用场景',
|
||||
url: 'https://via.placeholder.com/300x300',
|
||||
status: 'rejected'
|
||||
}
|
||||
],
|
||||
// 下拉刷新相关
|
||||
pulling: false,
|
||||
pullHeight: 0,
|
||||
maxPullHeight: 80,
|
||||
startY: 0,
|
||||
refreshing: false,
|
||||
refreshText: '下拉刷新'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取状态文本
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
pending: '待审核',
|
||||
approved: '已通过',
|
||||
rejected: '已拒绝'
|
||||
};
|
||||
return statusMap[status] || '未知';
|
||||
},
|
||||
|
||||
// 查看任务详情
|
||||
viewTaskDetail(taskId) {
|
||||
this.$message.info('查看任务详情：' + taskId);
|
||||
},
|
||||
|
||||
// 查看图片详情
|
||||
viewImageDetail(imageId) {
|
||||
window.location.href = 'image-detail.html?id=' + imageId;
|
||||
},
|
||||
|
||||
// 查看全部上传
|
||||
viewAllUploads() {
|
||||
this.$message.info('查看全部上传图片');
|
||||
},
|
||||
|
||||
// 跳转到上传页面
|
||||
goToUpload() {
|
||||
window.location.href = 'image-upload.html';
|
||||
},
|
||||
|
||||
// 跳转到个人中心
|
||||
goToProfile() {
|
||||
this.$message.info('跳转到个人中心');
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
this.$confirm('确定要退出登录吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
window.location.href = 'login.html';
|
||||
});
|
||||
},
|
||||
|
||||
// 下拉刷新相关方法
|
||||
touchStart(event) {
|
||||
if (this.$refs.content.scrollTop === 0) {
|
||||
this.startY = event.touches[0].clientY;
|
||||
this.pulling = true;
|
||||
}
|
||||
},
|
||||
|
||||
touchMove(event) {
|
||||
if (this.pulling && !this.refreshing) {
|
||||
const moveY = event.touches[0].clientY;
|
||||
const pullDistance = moveY - this.startY;
|
||||
|
||||
if (pullDistance > 0) {
|
||||
event.preventDefault();
|
||||
this.pullHeight = Math.min(pullDistance, this.maxPullHeight);
|
||||
|
||||
if (this.pullHeight > this.maxPullHeight * 0.7) {
|
||||
this.refreshText = '释放刷新';
|
||||
} else {
|
||||
this.refreshText = '下拉刷新';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd() {
|
||||
if (this.pulling && !this.refreshing) {
|
||||
if (this.pullHeight > this.maxPullHeight * 0.7) {
|
||||
this.refreshData();
|
||||
} else {
|
||||
this.pullHeight = 0;
|
||||
this.pulling = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
refreshData() {
|
||||
this.refreshing = true;
|
||||
this.refreshText = '刷新中...';
|
||||
|
||||
// 模拟刷新数据
|
||||
setTimeout(() => {
|
||||
this.pulling = false;
|
||||
this.pullHeight = 0;
|
||||
this.refreshing = false;
|
||||
this.$message.success('刷新成功');
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user