647bc39d27
教练端在学生报告页录入体质数据并生成报告，新增报告查看页；学员端从报告页查看最新评估结果、体测指标与运动建议。请求统一走现有 QA 后端并携带登录令牌。 教学资源改用后台音频管理器，支持进度拖动、曲目切换、时长探测及网络异常时下载恢复；修正跳绳和开合跳动作提示文案。 验证：相关 JS 语法、页面 JSON 解析和 git diff --cached --check 均通过。
145 lines
4.6 KiB
Plaintext
145 lines
4.6 KiB
Plaintext
.player-page {
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
padding: 0 30rpx 60rpx;
|
|
overflow: hidden;
|
|
background: linear-gradient(160deg, #42a4fc 0%, #7fc8ff 28%, #f4f8fc 64%, #f7f7f7 100%);
|
|
}
|
|
|
|
.player-card {
|
|
margin-top: 38rpx;
|
|
padding: 66rpx 34rpx 54rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, .75);
|
|
border-radius: 36rpx;
|
|
background: rgba(255, 255, 255, .94);
|
|
box-shadow: 0 24rpx 60rpx rgba(35, 116, 180, .18);
|
|
text-align: center;
|
|
}
|
|
|
|
.record-wrap {
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
margin: 0 auto 52rpx;
|
|
padding: 18rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
background: rgba(251, 183, 22, .16);
|
|
box-shadow: 0 18rpx 38rpx rgba(48, 66, 84, .2);
|
|
}
|
|
|
|
.record {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: repeating-radial-gradient(circle, #2d3741 0, #2d3741 10rpx, #202832 11rpx, #202832 17rpx);
|
|
}
|
|
|
|
.record-playing .record { animation: recordRotate 7s linear infinite; }
|
|
.record-line { position: absolute; border: 2rpx solid rgba(255, 255, 255, .2); border-radius: 50%; }
|
|
.line-one { width: 210rpx; height: 210rpx; }
|
|
.line-two { width: 150rpx; height: 150rpx; }
|
|
.record-core {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border: 12rpx solid #f7c143;
|
|
border-radius: 50%;
|
|
background: #fbb716;
|
|
}
|
|
.record-note { color: #fff; font-size: 52rpx; line-height: 1; }
|
|
|
|
@keyframes recordRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
|
|
|
|
.song-name {
|
|
min-height: 58rpx;
|
|
overflow: hidden;
|
|
color: #1d2a36;
|
|
font-size: 42rpx;
|
|
font-weight: 600;
|
|
line-height: 58rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.song-count { margin-top: 10rpx; color: #96a0aa; font-size: 24rpx; }
|
|
.progress-area { margin-top: 70rpx; }
|
|
.progress-slider { margin: 0 -16rpx; }
|
|
.time { display: flex; justify-content: space-between; margin-top: 18rpx; color: #87929d; font-size: 25rpx; }
|
|
|
|
.btnlist { display: flex; align-items: center; justify-content: space-between; margin-top: 58rpx; }
|
|
.play-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 142rpx;
|
|
height: 142rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #ffd052, #f5a900);
|
|
box-shadow: 0 16rpx 30rpx rgba(251, 183, 22, .35);
|
|
}
|
|
.switch-icon { width: 62rpx; height: 62rpx; padding: 12rpx; }
|
|
.tool-button { display: flex; flex-direction: column; align-items: center; min-width: 72rpx; color: #7e8994; font-size: 21rpx; }
|
|
.tool-icon { width: 50rpx; height: 50rpx; margin-bottom: 5rpx; }
|
|
|
|
.playlist-mask {
|
|
position: fixed;
|
|
z-index: 99;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: rgba(13, 26, 39, .48);
|
|
}
|
|
.playlist-mask-enter { animation: maskFadeIn 240ms ease-out both; }
|
|
.playlist-mask-leave { animation: maskFadeOut 240ms ease-in both; }
|
|
.playlist-panel {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 38rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
|
|
border-radius: 34rpx 34rpx 0 0;
|
|
background: #fff;
|
|
box-shadow: 0 -16rpx 50rpx rgba(18, 43, 65, .15);
|
|
}
|
|
.playlist-panel-enter { animation: playlistSlideUp 300ms cubic-bezier(.22, .8, .3, 1) both; }
|
|
.playlist-panel-leave { animation: playlistSlideDown 240ms ease-in both; }
|
|
|
|
@keyframes maskFadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes maskFadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes playlistSlideUp {
|
|
from { transform: translate3d(0, 100%, 0); }
|
|
to { transform: translate3d(0, 0, 0); }
|
|
}
|
|
|
|
@keyframes playlistSlideDown {
|
|
from { transform: translate3d(0, 0, 0); }
|
|
to { transform: translate3d(0, 100%, 0); }
|
|
}
|
|
.playlist-header { display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx 28rpx; }
|
|
.playlist-title { color: #172532; font-size: 36rpx; font-weight: 600; }
|
|
.playlist-subtitle { margin-top: 6rpx; color: #9aa4ad; font-size: 24rpx; }
|
|
.close-button { width: 64rpx; color: #8c969f; font-size: 48rpx; font-weight: 300; line-height: 64rpx; text-align: center; }
|
|
.playlist-scroll { max-height: 650rpx; }
|
|
.playlist-item { display: flex; align-items: center; min-height: 96rpx; padding: 0 22rpx; border-radius: 18rpx; color: #34424e; }
|
|
.playlist-active { color: #eaa400; background: #fff8e8; }
|
|
.song-index { width: 52rpx; flex-shrink: 0; color: #a0a9b2; font-size: 26rpx; text-align: left; }
|
|
.playlist-active .song-index { color: #f1ac00; }
|
|
.playlist-name { overflow: hidden; flex: 1; font-size: 29rpx; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
|
|
.playing-label { margin-left: 20rpx; color: #f1ac00; font-size: 22rpx; }
|
|
.empty-list { padding: 100rpx 0; color: #a0a9b2; font-size: 28rpx; text-align: center; }
|