/* pages/parent/report/report.wxss */ .posture-report-link { display: flex; align-items: center; justify-content: space-between; margin: 24rpx 0; padding: 26rpx 30rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 18rpx rgba(38, 165, 246, .1); } .posture-report-title { font-size: 30rpx; font-weight: bold; color: #193e60; } .posture-report-desc { margin-top: 8rpx; font-size: 23rpx; color: #8b9ead; } .posture-report-arrow { font-size: 42rpx; color: #268dec; } .top{ margin-top: 40rpx; } /* page{ overflow: hidden; } */ /* ===== 成绩弹窗 ===== */ .popup-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 100; } .score-popup { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 36rpx 36rpx 0 0; padding: 36rpx 40rpx 60rpx; z-index: 9999; transform: translateY(100%); transition: transform 0.3s ease; box-shadow: 0 -8rpx 40rpx rgba(73,165,252,0.18); padding-bottom: 250rpx; } .popup-show { transform: translateY(0); } .popup-header { display: flex; align-items: center; margin-bottom: 36rpx; } .popup-icon { width: 88rpx; height: 88rpx; margin-right: 20rpx; border-radius: 50%; /* background: linear-gradient(135deg, #8dcfff, #49a5fc); */ /* padding: 14rpx; */ box-sizing: border-box; } .popup-title { flex: 1; font-size: 34rpx; font-weight: bold; color: #18394D; } .popup-close { width: 56rpx; height: 56rpx; border-radius: 50%; background: #f0f4f8; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #999; } .score-rows { background: #f7fbff; border-radius: 20rpx; padding: 8rpx 30rpx; margin-bottom: 36rpx; } .score-row { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 0; border-bottom: 1rpx solid #eef2f8; } .score-row:last-child { border-bottom: none; } .score-divider { height: 2rpx; background: linear-gradient(90deg, transparent, #d0e8ff, transparent); margin: 4rpx 0; } .score-label { font-size: 28rpx; color: #666; } .score-value { font-size: 34rpx; font-weight: bold; color: #333; } .score-highlight { color: #1d78e8; font-size: 40rpx; } .score-unit { font-size: 22rpx; color: #999; font-weight: normal; } .popup-btn { background: linear-gradient(135deg, #49a5fc, #1d78e8); color: #fff; text-align: center; padding: 28rpx 0; border-radius: 50rpx; font-size: 30rpx; font-weight: bold; box-shadow: 0 6rpx 20rpx rgba(73,165,252,0.4); letter-spacing: 2rpx; } .tit{ display: flex; font-weight: bold; font-size: 32rpx; align-items: center; margin-bottom: 70rpx; } .heart{ width: 50rpx; height: 50rpx; margin-right: 20rpx; } .score{ position: relative; height: 560rpx; overflow: hidden; } .score-img{ width: 900rpx; height: 680rpx; position: absolute; left: -70rpx; } .type{ position: absolute; left: 100rpx; top: 100rpx; font-size: 24rpx; } .score-detail{ font-size: 36rpx; font-weight: bold; } .btto{ margin-top: 10rpx; background-color: #F2CD4B; height:4rpx; width: 160rpx; } .jineng{ position: absolute; right: 90rpx; top: 100rpx; font-size: 24rpx; text-align: right; } .suzhi{ position: absolute; right: 90rpx; top: 280rpx; font-size: 24rpx; text-align: right; } .card{ padding: 30rpx; border-radius: 20rpx; box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(53, 53, 53, 0.15); background: #fff; margin-top: 30rpx; } .title{ display: flex; justify-content: space-between; color: #18394D; font-weight: bold; font-size: 28rpx; } .unit{ font-size: 22rpx; } .progress-box{ border: 2rpx solid #E4E4E4; border-radius: 14rpx; box-sizing: border-box; position: relative; height: 60rpx; } .progress{ border: 2rpx solid #E4E4E4; border-radius: 14rpx; box-sizing: border-box; height: 100%; width: 10%; min-width: 13%; max-width: 100%; background-color: #FF3D71; display: flex; align-items: center; justify-content: space-between; color: #fff; padding-right: 8rpx; font-size: 22rpx; } .normal{ background-color: #00C2FF; } .good{ background-color: #2A7BFF; } .grate{ background-color: #00F7FF; } .score-box{ display: flex; justify-content: space-evenly; color: #999; font-size: 26rpx; } .cut-box{ width: 2rpx; height: 16rpx; background-color: #999; } .grade-box{ display: flex; justify-content: space-around; color: #999; font-size: 26rpx; } .grade-box view{ width: 25%; display: flex; align-items: center; justify-content: center; } .with{ display: flex; align-items: center; justify-content: space-between; } .image-icon{ margin-right: 36rpx; width: 110rpx; height: 110rpx; } .right{ flex: 1; } .card1{ display: flex; justify-content: space-between; align-items: center; padding: 28rpx 24rpx; font-size: 26rpx; } .room-info { display: flex; flex-direction: column; } .room-date { font-size: 28rpx; color: #18394D; font-weight: 500; } .room-week { font-size: 24rpx; color: #999; margin-top: 6rpx; } .more-tip { font-size: 26rpx; color: #999; text-align: center; margin-top: 50rpx; } /* ===== 学员 Tab 切换 ===== */ .trainee-wrap { margin-top: 20rpx; } .tab-switcher { display: flex; justify-content: center; background: rgba(255,255,255,0.7); border-radius: 50rpx; padding: 8rpx; margin: 20rpx 60rpx 36rpx; box-shadow: 0 4rpx 20rpx rgba(73,165,252,0.15); } .tab-btn { flex: 1; text-align: center; padding: 16rpx 0; border-radius: 42rpx; font-size: 28rpx; color: #666; transition: all 0.25s; } .tab-btn-active { background: linear-gradient(135deg, #49a5fc, #1d78e8); color: #fff; font-weight: bold; box-shadow: 0 4rpx 14rpx rgba(73,165,252,0.45); } /* ===== 体测报告卡片 ===== */ .fitness-card { background: #fff; border-radius: 24rpx; padding: 30rpx 20rpx 10rpx; box-shadow: 0 4rpx 20rpx rgba(73,165,252,0.12); margin-bottom: 30rpx; display: flex; flex-direction: column; align-items: center; } .fitness-chart-title { font-size: 30rpx; font-weight: bold; color: #18394D; margin-bottom: 16rpx; position: relative; padding: 0 30rpx; } .fitness-chart-title::before, .fitness-chart-title::after { content: ''; display: inline-block; width: 60rpx; height: 4rpx; background: linear-gradient(90deg, transparent, #49a5fc); vertical-align: middle; margin-right: 16rpx; border-radius: 2rpx; } .fitness-chart-title::after { background: linear-gradient(90deg, #49a5fc, transparent); margin-right: 0; margin-left: 16rpx; } .radar-wrap { overflow: hidden; margin: 0 -20rpx; /* 抵消 fitness-card 两侧 padding,让图表更宽 */ } .radar-legend { display: flex; justify-content: center; gap: 48rpx; margin-top: 8rpx; margin-bottom: 10rpx; } .legend-item { display: flex; align-items: center; font-size: 24rpx; color: #555; } .legend-dot { width: 20rpx; height: 20rpx; border-radius: 50%; margin-right: 10rpx; } .legend-blue { background: #4A90E2; } .legend-red { background: #E74C3C; } /* ===== 六项指标网格 ===== */ .fitness-grid { display: flex; flex-wrap: wrap; gap: 20rpx; margin-bottom: 10rpx; } .fitness-item { width: calc(33.33% - 14rpx); background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 16rpx rgba(73,165,252,0.12); display: flex; flex-direction: column; align-items: center; padding: 30rpx 10rpx 24rpx; box-sizing: border-box; active-opacity: 0.7; } .fitness-item:active { transform: scale(0.96); } .fitness-icon-wrap { width: 100rpx; height: 100rpx; border-radius: 50%; background: linear-gradient(135deg, #8dcfff, #49a5fc); display: flex; align-items: center; justify-content: center; margin-bottom: 18rpx; box-shadow: 0 6rpx 18rpx rgba(73,165,252,0.35); } .fitness-icon { width: 88rpx; height: 88rpx; } .fitness-name { font-size: 24rpx; color: #333; font-weight: 500; text-align: center; margin-bottom: 8rpx; } .fitness-score { font-size: 30rpx; font-weight: bold; color: #1d78e8; } .fitness-unit { font-size: 20rpx; color: #999; font-weight: normal; } .more{ font-size: 26rpx; color: #575555; text-align: center; margin-top: 50rpx; } /* ===== 课堂报告子Tab ===== */ .sub-tab-switcher { display: flex; background: #e8f0fe; border-radius: 20rpx; padding: 6rpx; margin: 16rpx 20rpx 32rpx; } .sub-tab-btn { flex: 1; text-align: center; padding: 20rpx 0; border-radius: 16rpx; font-size: 27rpx; color: #6b7280; letter-spacing: 1rpx; } .sub-tab-active { background: linear-gradient(135deg, #1d78e8, #49a5fc); color: #fff; font-weight: bold; box-shadow: 0 4rpx 16rpx rgba(29,120,232,0.35); } /* ===== 周期选择器入口 ===== */ .period-selector { display: flex; align-items: center; justify-content: center; background: #f0f7ff; border-radius: 50rpx; padding: 14rpx 40rpx; margin: 0 auto 28rpx; border: 1rpx solid #c8dff8; width: fit-content; } .period-text { font-size: 28rpx; color: #1d78e8; font-weight: 600; } .period-caret { font-size: 24rpx; color: #1d78e8; margin-left: 8rpx; } /* ===== 统计区块标题 ===== */ .stat-section-header-wrap { display: flex; align-items: center; margin: 16rpx 0 20rpx; gap: 16rpx; } .stat-section-header-wrap::before, .stat-section-header-wrap::after { content: ''; flex: 1; height: 1rpx; background: linear-gradient(90deg, transparent, #cce0f8); } .stat-section-header-wrap::after { background: linear-gradient(90deg, #cce0f8, transparent); } .stat-section-header { color: #1d78e8; font-size: 26rpx; font-weight: bold; white-space: nowrap; background: none; padding: 0; border-radius: 0; } /* ===== 统计指标网格(2列)===== */ .stat-grid { display: flex; flex-wrap: wrap; gap: 16rpx; margin-bottom: 32rpx; justify-content: space-evenly; margin-top: 42rpx; margin-top: 0; } .stat-card { width: calc(50% - 20rpx); border-radius: 28rpx; padding: 30rpx 26rpx 28rpx; box-sizing: border-box; display: flex; flex-direction: column; gap: 12rpx; position: relative; overflow: hidden; box-shadow: 0 8rpx 28rpx rgba(0,0,0,0.13); } .stat-card-1 { background: linear-gradient(135deg, #ff5f6d 0%, #ffc371 100%); } .stat-card-2 { background: linear-gradient(135deg, #0fd850 0%, #00c3a9 100%); } .stat-card-3 { background: linear-gradient(135deg, #2980b9 0%, #6dd5fa 100%); } .stat-card-4 { background: linear-gradient(135deg, #7f7fd5 0%, #86a8e7 100%); } /* 装饰圆 */ .stat-card-bar { position: absolute; width: 180rpx; height: 180rpx; border-radius: 50%; background: rgba(255,255,255,0.13); bottom: -50rpx; right: -40rpx; flex-shrink: 0; } .stat-card-label { font-size: 24rpx; color: rgba(255,255,255,0.88); font-weight: 400; padding: 0; } .stat-card-value { font-size: 38rpx; font-weight: bold; color: #fff; padding: 0; word-break: break-all; line-height: 1.2; text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.12); } .stat-card-1 .stat-card-value, .stat-card-2 .stat-card-value, .stat-card-3 .stat-card-value, .stat-card-4 .stat-card-value { color: #fff; } /* ===== 跳绳统计 ===== */ .jump-tip { font-size: 22rpx; color: #999; margin-bottom: 16rpx; } .jump-summary-wrap { background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 16rpx rgba(73,165,252,0.1); overflow: hidden; margin-bottom: 10rpx; } .jump-summary-header { display: flex; background: #1d78e8; padding: 18rpx 0; } .jump-summary-data { display: flex; padding: 20rpx 0; border-bottom: 1rpx solid #f0f4f8; } .jump-col { flex: 1; text-align: center; font-size: 24rpx; color: #fff; } .jump-summary-data .jump-col { color: #18394D; font-size: 36rpx; font-weight: bold; } .jump-unit { font-size: 20rpx; color: rgba(255,255,255,0.85); } .jump-record-item { display: flex; align-items: center; padding: 24rpx 30rpx; border-bottom: 1rpx solid #f0f4f8; } .jump-record-item:last-child { border-bottom: none; } .jump-record-icon-wrap { width: 80rpx; height: 80rpx; border-radius: 50%; background: linear-gradient(135deg, #5ab4ff, #1d78e8); display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; overflow: hidden; } .jump-record-icon { width: 54rpx; height: 54rpx; filter: brightness(10); } .jump-record-main { display: flex; flex-direction: column; gap: 8rpx; } .jump-record-tag { display: inline-block; background: #1d78e8; color: #fff; font-size: 22rpx; padding: 4rpx 20rpx; border-radius: 30rpx; width: fit-content; } .jump-record-detail { font-size: 26rpx; color: #18394D; padding-left: 4rpx; } /* ===== 月份/季度选择弹窗 ===== */ .picker-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 200; } .picker-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 36rpx 36rpx 0 0; padding: 0 0 60rpx; z-index: 201; transform: translateY(100%); padding-bottom: 220rpx; transition: transform 0.3s ease; box-shadow: 0 -8rpx 40rpx rgba(73,165,252,0.18); } .picker-sheet-show { transform: translateY(0); } .picker-header { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 40rpx 20rpx; border-bottom: 1rpx solid #f0f4f8; } .picker-title { font-size: 32rpx; font-weight: bold; color: #18394D; } .picker-cancel { font-size: 28rpx; color: #999; } .picker-confirm { font-size: 28rpx; color: #1d78e8; font-weight: bold; } .picker-year-row { display: flex; align-items: center; justify-content: center; padding: 28rpx 0 20rpx; gap: 48rpx; } .picker-year-text { font-size: 34rpx; font-weight: bold; color: #18394D; min-width: 160rpx; text-align: center; } .picker-year-arrow { width: 64rpx; height: 64rpx; border-radius: 50%; background: #f0f6ff; display: flex; align-items: center; justify-content: center; font-size: 44rpx; color: #1d78e8; line-height: 1; text-align: center; } /* 月份网格 */ .picker-month-grid { display: flex; flex-wrap: wrap; padding: 8rpx 30rpx 20rpx; gap: 20rpx; } .picker-month-item { width: calc(25% - 16rpx); text-align: center; padding: 20rpx 0; border-radius: 16rpx; font-size: 28rpx; color: #333; background: #f5f7fa; box-sizing: border-box; } .picker-item-active { background: linear-gradient(135deg, #49a5fc, #1d78e8); color: #fff; font-weight: bold; box-shadow: 0 4rpx 12rpx rgba(73,165,252,0.4); } /* 季度列表 */ .picker-quarter-list { padding: 16rpx 40rpx 20rpx; display: flex; flex-direction: column; gap: 16rpx; } .picker-quarter-item { display: flex; justify-content: space-between; align-items: center; padding: 26rpx 36rpx; border-radius: 20rpx; background: #f5f7fa; } .picker-quarter-item.picker-item-active { background: linear-gradient(135deg, #49a5fc, #1d78e8); } .picker-quarter-label { font-size: 30rpx; font-weight: bold; color: #18394D; } .picker-quarter-item.picker-item-active .picker-quarter-label, .picker-quarter-item.picker-item-active .picker-quarter-months { color: #fff; } .picker-quarter-months { font-size: 24rpx; color: #999; } /* ===== 禁用状态 ===== */ .picker-item-disabled { opacity: 0.3; } .picker-year-arrow-disabled { opacity: 0.3; color: #ccc; } .report-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260rpx; margin: 30rpx 0; background: #fff; border-radius: 20rpx; box-shadow: 0 4rpx 16rpx rgba(73,165,252,0.1); color: #9aa7b2; font-size: 26rpx; } .report-empty-icon { width: 96rpx; height: 96rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18rpx; background: #eef8ff; color: #26A5F6; font-size: 24rpx; font-weight: 600; }