feat(app): 添加课程页面并优化打卡和计划功能
- 新增 pages/course/course 页面，集成 web-view 显示线上课程列表 - 在 app.json 中注册课程页面并添加底部 tabbar 导航 - 优化打卡页面，添加学号显示和改进成员列表布局 - 重构计划页面，添加内容详情弹层和优化加载逻辑 - 添加阿里云 OSS 上传工具模块用于文件上传功能 - 统一姓名和学号在同一行显示，改善 UI 体验 - 修复多个页面中的绑定事件和样式问题
This commit is contained in:
王宏豪
@@ -62,13 +62,17 @@
|
||||
|
||||
.member-list { background: #fff; border-radius: 20rpx; padding: 8rpx 24rpx; box-shadow: 0 6rpx 20rpx rgba(44,24,16,0.05); }
|
||||
.member-left { display: flex; align-items: center; min-width: 0; }
|
||||
.member { display: flex; align-items: center; justify-content: space-between; padding: 22rpx 0; border-bottom: 1rpx solid #F2EDE7; }
|
||||
.member { display: flex; flex-direction: column; align-items: stretch; padding: 22rpx 0; border-bottom: 1rpx solid #F2EDE7; }
|
||||
.member:last-child { border-bottom: none; }
|
||||
.member-row { display: flex; align-items: center; justify-content: space-between; }
|
||||
.member-avatar { width: 64rpx; height: 64rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26rpx; font-weight: 800; flex-shrink: 0; }
|
||||
.member-avatar.done { background: linear-gradient(135deg, #E8F4EB, #CFEAD5); color: #2E7D32; }
|
||||
.member-avatar.unchecked { background: linear-gradient(135deg, #FDECEA, #F9D9D5); color: #C0392B; }
|
||||
.member-info { margin-left: 18rpx; min-width: 0; }
|
||||
.member-name { font-size: 28rpx; font-weight: 700; color: #2C1810; }
|
||||
/* 姓名与学号同一行；姓名过长时省略，学号始终完整 */
|
||||
.member-line { display: flex; align-items: baseline; gap: 12rpx; }
|
||||
.member-name { font-size: 28rpx; font-weight: 700; color: #2C1810; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.member-sid { font-size: 22rpx; color: #A99A89; flex-shrink: 0; }
|
||||
.member-meta { margin-top: 6rpx; font-size: 22rpx; color: #A99A89; }
|
||||
.badge { flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; font-weight: 700; }
|
||||
.badge.done { background: #E8F4EB; color: #2E7D32; }
|
||||
@@ -158,6 +162,7 @@
|
||||
font-size: 22rpx;
|
||||
color: #A99A89;
|
||||
}
|
||||
/* 历史卡片内的正文预览：最多 3 行，超出截断 */
|
||||
.history-content {
|
||||
margin-top: 14rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
@@ -173,6 +178,7 @@
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 历史卡片内的缩略图：最多 2 张，其余进详情弹层 */
|
||||
.history-thumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -180,8 +186,8 @@
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.history-thumb {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #F2EDE7;
|
||||
}
|
||||
@@ -205,6 +211,7 @@
|
||||
max-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transform: translateY(100%);
|
||||
transition: transform .28s ease;
|
||||
}
|
||||
@@ -220,9 +227,11 @@
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #F2EDE7;
|
||||
}
|
||||
/* flex:1 撑满剩余高度，max-height 兜底（同 .cd-body，防 flex 高度解析失败后滚不动） */
|
||||
.picker-list {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: 64vh;
|
||||
padding: 8rpx 0 32rpx;
|
||||
}
|
||||
.picker-item {
|
||||
@@ -246,4 +255,85 @@
|
||||
}
|
||||
|
||||
/* 底部留白 */
|
||||
.bottom-space { height: 40rpx; }
|
||||
.bottom-space { height: 40rpx; }
|
||||
|
||||
/* 信息行的点击反馈；正文与图片统一在详情弹层里看 */
|
||||
.member-row-hover { opacity: .7; }
|
||||
.tap-hint { margin-top: 10rpx; text-align: right; font-size: 22rpx; color: #C67B30; }
|
||||
.tap-hint-hover { opacity: .7; }
|
||||
|
||||
/* 内容详情弹层 */
|
||||
.cd-mask {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.45);
|
||||
z-index: 200;
|
||||
}
|
||||
.cd-panel {
|
||||
position: fixed;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
z-index: 201;
|
||||
max-height: 86vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
animation: cdIn .22s ease;
|
||||
}
|
||||
@keyframes cdIn {
|
||||
from { transform: translateY(40rpx); opacity: .5; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
.cd-head { flex-shrink: 0; display: flex; align-items: flex-start; gap: 16rpx; padding: 28rpx 32rpx 16rpx; }
|
||||
.cd-head-text { flex: 1; min-width: 0; }
|
||||
.cd-title { font-size: 34rpx; font-weight: 800; color: #2C1810; }
|
||||
.cd-sub { margin-top: 8rpx; font-size: 24rpx; color: #A99A89; }
|
||||
.cd-close {
|
||||
flex-shrink: 0;
|
||||
width: 56rpx; height: 56rpx; line-height: 56rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #F6F2EC;
|
||||
color: #8B7A6A;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.cd-close-hover { opacity: .7; }
|
||||
.cd-meta {
|
||||
flex-shrink: 0;
|
||||
padding: 0 32rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: #A99A89;
|
||||
border-bottom: 1rpx solid #F2EDE7;
|
||||
}
|
||||
/*
|
||||
* 滚动区：flex:1 吃掉剩余高度；max-height 兜底 —— 部分基础库下
|
||||
* max-height 父容器里的 flex 子项算不出高度，会导致内容被截断且滚不动。
|
||||
* 双保险下无论哪种情况都有明确高度上限，内容超出即可上下滑动。
|
||||
*/
|
||||
.cd-body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
max-height: 64vh;
|
||||
padding: 20rpx 32rpx calc(60rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cd-content {
|
||||
padding: 20rpx 24rpx;
|
||||
background: #FBF7F1;
|
||||
border-radius: 14rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.8;
|
||||
color: #2C1810;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.cd-no-content { padding: 12rpx 4rpx; font-size: 26rpx; color: #A99A89; }
|
||||
.cd-thumbs { margin-top: 20rpx; }
|
||||
.cd-thumb {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #F2EDE7;
|
||||
}
|
||||
Reference in New Issue
Block a user