|
|
@@ -1,45 +1,630 @@
|
|
|
<!-- 在线考试列表 -->
|
|
|
<template>
|
|
|
<view class="safetyEducationExamination-exam">
|
|
|
-
|
|
|
+ <!-- 顶部 Tab -->
|
|
|
+ <view class="tab-bar">
|
|
|
+ <view
|
|
|
+ v-for="(tab, index) in tabs"
|
|
|
+ :key="index"
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ active: activeTab === index }"
|
|
|
+ @click="switchTab(index)"
|
|
|
+ >
|
|
|
+ {{ tab }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 内容区 -->
|
|
|
+ <scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
|
|
|
+ <!-- 考试任务 -->
|
|
|
+ <view v-if="activeTab === 0" class="panel">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in examTaskList"
|
|
|
+ :key="index"
|
|
|
+ class="exam-card"
|
|
|
+ @click="goToExamDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="card-top">
|
|
|
+ <view class="card-top-left">
|
|
|
+ <text class="tag tag-blue">{{ item.examTypeName }}</text>
|
|
|
+ <view class="status-dot" :class="item.examStatus == 1 ? 'dot-green' : 'dot-orange'"></view>
|
|
|
+ <text class="status-text" :class="item.examStatus == 1 ? 'text-gray' : 'text-orange'">
|
|
|
+ {{ item.examStatus == 1 ? '未开始' : '进行中' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="arrow-icon">›</text>
|
|
|
+ </view>
|
|
|
+ <text class="exam-name">{{ item.examName }}</text>
|
|
|
+ <!-- 有学时要求:三列 -->
|
|
|
+ <view v-if="item.needStudy || item.examStudy || item.mockExam" class="info-grid col3">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">学时要求</text>
|
|
|
+ <text class="info-value" :class="item.needStudy ? 'text-orange' : 'text-green'">
|
|
|
+ {{ item.completedStudyHours }}/{{ item.studyHoursRequirement }}
|
|
|
+ <text v-if="item.needStudy"> 未达标</text>
|
|
|
+ <text v-else> 已达标</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">学习任务</text>
|
|
|
+ <text class="info-value" :class="item.examStudy ? 'text-orange' : 'text-green'">
|
|
|
+ {{ item.examStudy ? '待完成' : '已完成' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">模拟考试</text>
|
|
|
+ <text class="info-value" :class="item.mockExam ? 'text-orange' : 'text-green'">
|
|
|
+ {{ item.mockExam ? '待完成' : '已完成' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 无前置条件:两列 -->
|
|
|
+ <view v-else class="info-grid col2">
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">满分/及格</text>
|
|
|
+ <text class="info-value">{{ item.totalScore }} / {{ item.passScore }} 分</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="info-label">可考次数</text>
|
|
|
+ <text class="info-value text-gray">{{ item.attemptLimit === 0 ? '不限' : item.attemptLimit + ' 次' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!examTaskList[0] && !examTaskLoading" class="empty-tip">暂无考试任务</view>
|
|
|
+ <view v-if="examTaskLoading" class="loading-tip">加载中...</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 模拟考试 -->
|
|
|
+ <view v-if="activeTab === 1" class="panel">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in mockExamList"
|
|
|
+ :key="index"
|
|
|
+ class="exam-card"
|
|
|
+ @click="goToMockDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="card-top">
|
|
|
+ <view class="card-top-left">
|
|
|
+ <text class="tag tag-blue">{{ item.examTypeName }}</text>
|
|
|
+ <text class="tag tag-orange" style="margin-left:8rpx;">模拟卷</text>
|
|
|
+ </view>
|
|
|
+ <text class="arrow-icon">›</text>
|
|
|
+ </view>
|
|
|
+ <text class="exam-name">{{ item.examName }}</text>
|
|
|
+ <view class="info-grid col2">
|
|
|
+ <view class="info-item-2">
|
|
|
+ <span class="info-value" style="color:#8896a7;">最高成绩:
|
|
|
+ <span class="info-value" :class="item.maxScore >= item.passScore ? 'text-green' : 'text-orange'">
|
|
|
+ {{ item.maxScore > 0 ? item.maxScore + ' 分' : '未参加' }}
|
|
|
+ </span></span>
|
|
|
+ </view>
|
|
|
+ <view class="info-item-2">
|
|
|
+ <text class="info-value" style="text-align:right;color:#8896a7;">及格线:{{ item.passScore }} 分</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!mockExamList[0] && !mockExamLoading" class="empty-tip">暂无模拟考试</view>
|
|
|
+ <view v-if="mockExamLoading" class="loading-tip">加载中...</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 我的成绩 -->
|
|
|
+ <view v-if="activeTab === 2" class="panel">
|
|
|
+ <!-- 筛选区 -->
|
|
|
+ <view class="filter-row">
|
|
|
+ <picker :range="resultOptions" :range-key="'label'" @change="onResultChange">
|
|
|
+ <view class="picker-input" style="width:100rpx;">{{ resultOptions[resultIndex].label }} ▾</view>
|
|
|
+ </picker>
|
|
|
+ <picker mode="date" :value="startDate" @change="onStartDateChange">
|
|
|
+ <view class="picker-input top-picker-input-box" :style="!startDate?'color:#999;font-size:22rpx;':''">{{ startDate?startDate:'请选择' }}</view>
|
|
|
+ </picker>
|
|
|
+ <text class="filter-sep">至</text>
|
|
|
+ <picker mode="date" :value="endDate" @change="onEndDateChange" >
|
|
|
+ <view class="picker-input top-picker-input-box" :style="!endDate?'color:#999;font-size:22rpx;':''">{{ endDate?endDate:'请选择' }}</view>
|
|
|
+ </picker>
|
|
|
+ <view class="top-right-box-button" @click="resetScoreList()">重置</view>
|
|
|
+ </view>
|
|
|
+ <!-- 考试类型标签 -->
|
|
|
+ <scroll-view scroll-x class="tag-scroll">
|
|
|
+ <view class="tag-scroll-inner">
|
|
|
+ <text
|
|
|
+ v-for="(tag, index) in examTypeTags"
|
|
|
+ :key="index"
|
|
|
+ class="filter-tag"
|
|
|
+ :class="{ 'filter-tag-active': activeTagIndex === index }"
|
|
|
+ @click="onTagChange(index)"
|
|
|
+ >{{ tag.label }}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 成绩卡片 -->
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in scoreList"
|
|
|
+ :key="index"
|
|
|
+ class="score-card"
|
|
|
+ @click="goToScoreDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="card-top">
|
|
|
+ <text class="tag tag-blue">{{ item.examTypeName }}</text>
|
|
|
+ <text class="score-result" :class="item.resultStatus == 2 ? 'result-pass' : 'result-fail'">
|
|
|
+ {{ item.resultStatus == 2 ? '通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="score-exam-name">{{ item.examName }}</text>
|
|
|
+ <view class="score-info-grid">
|
|
|
+ <view><text class="text-gray">考试时间:</text>{{ item.startTime }}</view>
|
|
|
+ <view><text class="text-gray">时长:</text>{{ item.answerDuration }} 分钟</view>
|
|
|
+ <view><text class="text-gray">满分/及格:</text>{{ item.totalScore }} / {{ item.passScore }}</view>
|
|
|
+ <view><text class="text-gray">考次:</text>{{ item.attemptCount }} / {{ item.attemptLimit === 0 ? '不限' : item.attemptLimit }}</view>
|
|
|
+ <view><text class="text-gray">用时:</text>{{ item.myDuration || '-' }}</view>
|
|
|
+ <view>
|
|
|
+ <text class="text-gray">最高成绩:</text>
|
|
|
+ <text :class="item.bestScore >= item.passScore ? 'text-green' : 'text-red'">{{ item.bestScore }} 分</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text class="text-gray">获得积分:</text>
|
|
|
+ <text :class="item.myScore > 0 ? 'text-orange' : 'text-gray'">
|
|
|
+ {{ item.myScore > 0 ? '+' + item.myScore + '分' : '无' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text class="text-gray">考试结果:</text>
|
|
|
+ <text :class="item.resultStatus === 1 ? 'text-green' : 'text-red'">
|
|
|
+ {{ item.resultStatus === 1 ? '通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="!scoreList[0] && !scoreLoading" class="empty-tip">暂无成绩记录</view>
|
|
|
+ <view v-if="scoreLoading" class="loading-tip">加载中...</view>
|
|
|
+ <view v-if="scoreNoMore && scoreList[0]" class="loading-tip">没有更多了</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // import {
|
|
|
- // systemMineUserEdit
|
|
|
- // } from '@/pages_safetyEducationExamination/api/index.js'
|
|
|
- // import {
|
|
|
- // workbench
|
|
|
- // } from '@/pages_safetyEducationExamination/component/workbench/index'
|
|
|
+ import {
|
|
|
+ parseTime
|
|
|
+ } from '@/component/public.js'
|
|
|
+ import {
|
|
|
+ examUserExamList,
|
|
|
+ examUserExamMockList,
|
|
|
+ examElExamUserResultMyScoreListPage,
|
|
|
+ examUserExamTypeSelectExamType,
|
|
|
+ } from '@/pages_safetyEducationExamination/api/index.js'
|
|
|
+
|
|
|
export default {
|
|
|
- // components: {
|
|
|
- // workbench,
|
|
|
- // },
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ tabs: ['考试任务', '模拟考试', '我的成绩'],
|
|
|
+ activeTab: 0,
|
|
|
+ // 考试任务
|
|
|
+ examTaskList: [],
|
|
|
+ examTaskLoading: false,
|
|
|
+ // 模拟考试
|
|
|
+ mockExamList: [],
|
|
|
+ mockExamLoading: false,
|
|
|
+ // 我的成绩
|
|
|
+ scoreList: [],
|
|
|
+ scoreLoading: false,
|
|
|
+ scorePage: 1,
|
|
|
+ scorePageSize: 10,
|
|
|
+ scoreTotal: 0,
|
|
|
+ scoreNoMore: false,
|
|
|
+ // 筛选
|
|
|
+ resultOptions: [
|
|
|
+ { label: '全部', value: null },
|
|
|
+ { label: '通过', value: 1 },
|
|
|
+ { label: '未通过', value: 2 },
|
|
|
+ ],
|
|
|
+ resultIndex: 0,
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ examTypeTags: [{ label: '全部', value: null }],
|
|
|
+ activeTagIndex: 0,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.loadExamTypeTags();
|
|
|
},
|
|
|
onShow() {
|
|
|
-
|
|
|
+ this.refreshCurrentTab();
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ switchTab(index) {
|
|
|
+ this.activeTab = index;
|
|
|
+ this.refreshCurrentTab();
|
|
|
+ },
|
|
|
+ refreshCurrentTab() {
|
|
|
+ if (this.activeTab === 0) {
|
|
|
+ this.loadExamTaskList();
|
|
|
+ } else if (this.activeTab === 1) {
|
|
|
+ this.loadMockExamList();
|
|
|
+ } else if (this.activeTab === 2) {
|
|
|
+ this.resetScoreList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 考试类型标签(用于我的成绩筛选)
|
|
|
+ async loadExamTypeTags() {
|
|
|
+ try {
|
|
|
+ const { data } = await examUserExamTypeSelectExamType({});
|
|
|
+ if (data.code === 200 && data.data) {
|
|
|
+ const tags = (data.data || []).map(item => ({
|
|
|
+ label: item.examTypeName,
|
|
|
+ value: item.examTypeId,
|
|
|
+ }));
|
|
|
+ this.$set(this, 'examTypeTags', [{ label: '全部', value: null }, ...tags]);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取考试类型失败', e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 考试任务列表
|
|
|
+ async loadExamTaskList() {
|
|
|
+ if (this.examTaskLoading) return;
|
|
|
+ this.examTaskLoading = true;
|
|
|
+ try {
|
|
|
+ const { data } = await examUserExamList({ page: 1, pageSize: 50 });
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$set(this, 'examTaskList', data.data.records || []);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取考试任务失败', e);
|
|
|
+ } finally {
|
|
|
+ this.examTaskLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 模拟考试列表
|
|
|
+ async loadMockExamList() {
|
|
|
+ if (this.mockExamLoading) return;
|
|
|
+ this.mockExamLoading = true;
|
|
|
+ try {
|
|
|
+ const { data } = await examUserExamMockList({ page: 1, pageSize: 50 });
|
|
|
+ if (data.code === 200) {
|
|
|
+ this.$set(this, 'mockExamList', data.data.records || []);
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取模拟考试失败', e);
|
|
|
+ } finally {
|
|
|
+ this.mockExamLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 重置成绩列表(筛选条件变更时调用)
|
|
|
+ resetScoreList() {
|
|
|
+ this.scorePage = 1;
|
|
|
+ this.scoreNoMore = false;
|
|
|
+ this.startTime = '';
|
|
|
+ this.endTime = '';
|
|
|
+ this.$set(this, 'scoreList', []);
|
|
|
+ this.loadScoreList();
|
|
|
+ },
|
|
|
+ // 我的成绩列表(支持分页)
|
|
|
+ async loadScoreList() {
|
|
|
+ if (this.scoreLoading || this.scoreNoMore) return;
|
|
|
+ this.scoreLoading = true;
|
|
|
+ try {
|
|
|
+ const tag = this.examTypeTags[this.activeTagIndex];
|
|
|
+ const result = this.resultOptions[this.resultIndex];
|
|
|
+ const obj = {
|
|
|
+ page: this.scorePage,
|
|
|
+ pageSize: this.scorePageSize,
|
|
|
+ examTypeId: tag.value || '',
|
|
|
+ resultStatus: result.value || '',
|
|
|
+ startTime: this.startDate?this.startDate + 'T00:00:00':'',
|
|
|
+ endTime: this.endDate?this.endDate + 'T23:59:59':'',
|
|
|
+ examScene:null
|
|
|
+ };
|
|
|
+ const { data } = await examElExamUserResultMyScoreListPage(obj);
|
|
|
+ if (data.code === 200) {
|
|
|
+ for(let i=0;i<data.data.records.length;i++){
|
|
|
+ data.data.records[i].startTime = parseTime(data.data.records[i].startTime, "{y}-{m}-{d}")
|
|
|
+ }
|
|
|
+ const records = data.data.records || [];
|
|
|
+ const newList = this.scorePage === 1 ? records : [...this.scoreList, ...records];
|
|
|
+ this.$set(this, 'scoreList', newList);
|
|
|
+ this.scoreTotal = data.data.total;
|
|
|
+ if (newList.length >= this.scoreTotal) {
|
|
|
+ this.scoreNoMore = true;
|
|
|
+ } else {
|
|
|
+ this.scorePage++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取成绩列表失败', e);
|
|
|
+ } finally {
|
|
|
+ this.scoreLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 滚动到底部加载更多(我的成绩)
|
|
|
+ onScrollToLower() {
|
|
|
+ if (this.activeTab === 2) {
|
|
|
+ this.loadScoreList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onResultChange(e) {
|
|
|
+ this.resultIndex = e.detail.value;
|
|
|
+ this.resetScoreList();
|
|
|
+ },
|
|
|
+ onStartDateChange(e) {
|
|
|
+ this.startDate = e.detail.value;
|
|
|
+ this.resetScoreList();
|
|
|
+ },
|
|
|
+ onEndDateChange(e) {
|
|
|
+ this.endDate = e.detail.value;
|
|
|
+ this.resetScoreList();
|
|
|
+ },
|
|
|
+ onTagChange(index) {
|
|
|
+ this.activeTagIndex = index;
|
|
|
+ this.resetScoreList();
|
|
|
+ },
|
|
|
+ goToExamDetail(item) {
|
|
|
+ // 跳转考试详情,传递 examId / attemptId
|
|
|
+ },
|
|
|
+ goToMockDetail(item) {
|
|
|
+ // 跳转模拟考试详情,传递 mockExamId
|
|
|
+ },
|
|
|
+ goToScoreDetail(item) {
|
|
|
+ // 跳转成绩详情,传递 examId
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
- .safetyEducationExamination-exam {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #f0f4fb;
|
|
|
- }
|
|
|
-</style>
|
|
|
+ .safetyEducationExamination-exam
|
|
|
+ height 100%
|
|
|
+ display flex
|
|
|
+ flex-direction column
|
|
|
+ overflow hidden
|
|
|
+ background-color #f0f4fb
|
|
|
+
|
|
|
+ // 顶部 Tab
|
|
|
+ .tab-bar
|
|
|
+ background #fff
|
|
|
+ border-bottom 1rpx solid #e8edf3
|
|
|
+ display flex
|
|
|
+ flex-shrink 0
|
|
|
+
|
|
|
+ .tab-item
|
|
|
+ flex 1
|
|
|
+ text-align center
|
|
|
+ padding 18rpx 8rpx 16rpx
|
|
|
+ font-size 26rpx
|
|
|
+ color #888
|
|
|
+ border-bottom 4rpx solid transparent
|
|
|
+
|
|
|
+ .tab-item.active
|
|
|
+ color #1677ff
|
|
|
+ font-weight 600
|
|
|
+ border-bottom-color #1677ff
|
|
|
+
|
|
|
+ // 滚动区
|
|
|
+ .scroll-content
|
|
|
+ flex 1
|
|
|
+ overflow hidden
|
|
|
+
|
|
|
+ .panel
|
|
|
+ padding 24rpx
|
|
|
+
|
|
|
+ // 考试卡片
|
|
|
+ .exam-card
|
|
|
+ background #fff
|
|
|
+ border-radius 20rpx
|
|
|
+ padding 24rpx 28rpx
|
|
|
+ margin-bottom 20rpx
|
|
|
+ box-shadow 0 2rpx 12rpx rgba(0,0,0,0.04)
|
|
|
+ border 1rpx solid #dde3ed
|
|
|
+
|
|
|
+ .card-top
|
|
|
+ display flex
|
|
|
+ justify-content space-between
|
|
|
+ align-items center
|
|
|
+ margin-bottom 16rpx
|
|
|
+
|
|
|
+ .card-top-left
|
|
|
+ display flex
|
|
|
+ align-items center
|
|
|
+
|
|
|
+ .arrow-icon
|
|
|
+ font-size 32rpx
|
|
|
+ color #bbb
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tag
|
|
|
+ font-size 20rpx
|
|
|
+ padding 4rpx 12rpx
|
|
|
+ border-radius 8rpx
|
|
|
+ border 1rpx solid transparent
|
|
|
+
|
|
|
+ .tag-blue
|
|
|
+ background #e6f4ff
|
|
|
+ color #1677ff
|
|
|
+ border-color #91caff
|
|
|
+
|
|
|
+ .tag-orange
|
|
|
+ background #fff7e6
|
|
|
+ color #d46b08
|
|
|
+ border-color #ffd591
|
|
|
+
|
|
|
+ // 状态点
|
|
|
+ .status-dot
|
|
|
+ width 12rpx
|
|
|
+ height 12rpx
|
|
|
+ border-radius 50%
|
|
|
+ margin-left 24rpx
|
|
|
+ margin-right:10rpx;
|
|
|
+
|
|
|
+ .dot-orange
|
|
|
+ background #fa8c16
|
|
|
+
|
|
|
+ .dot-green
|
|
|
+ background #999
|
|
|
+
|
|
|
+ .status-text
|
|
|
+ font-size 22rpx
|
|
|
+ margin-left 6rpx
|
|
|
+
|
|
|
+ .text-orange
|
|
|
+ color #fa8c16
|
|
|
+
|
|
|
+ .text-gray
|
|
|
+ color #999
|
|
|
+
|
|
|
+ .text-green
|
|
|
+ color #52c41a
|
|
|
+
|
|
|
+ .text-blue
|
|
|
+ color #1677ff
|
|
|
+
|
|
|
+ .text-red
|
|
|
+ color #f5222d
|
|
|
+
|
|
|
+ // 考试名称
|
|
|
+ .exam-name
|
|
|
+ display block
|
|
|
+ font-size 28rpx
|
|
|
+ font-weight 600
|
|
|
+ color #222
|
|
|
+ margin-bottom 16rpx
|
|
|
+
|
|
|
+ // 信息格
|
|
|
+ .info-grid
|
|
|
+ display grid
|
|
|
+ gap 12rpx
|
|
|
+
|
|
|
+ .col3
|
|
|
+ grid-template-columns 1fr 1fr 1fr
|
|
|
+
|
|
|
+ .col2
|
|
|
+ grid-template-columns 1fr 1fr
|
|
|
+
|
|
|
+ .info-item
|
|
|
+ background #f4f6fa
|
|
|
+ border-radius 12rpx
|
|
|
+ padding 12rpx 16rpx
|
|
|
+ display flex
|
|
|
+ flex-direction column
|
|
|
+
|
|
|
+ .info-item-2
|
|
|
+ display flex
|
|
|
+ flex-direction column
|
|
|
+
|
|
|
+ .info-label
|
|
|
+ font-size 20rpx
|
|
|
+ color #999
|
|
|
+ margin-bottom 8rpx
|
|
|
+
|
|
|
+ .info-value
|
|
|
+ font-size 22rpx
|
|
|
+
|
|
|
+ // 筛选
|
|
|
+ .filter-row
|
|
|
+ display flex
|
|
|
+ align-items center
|
|
|
+ gap 12rpx
|
|
|
+ padding 16rpx 0 8rpx
|
|
|
+ flex-wrap nowrap
|
|
|
+ .top-picker-input-box{
|
|
|
+ width:190rpx;
|
|
|
+ height:54rpx;
|
|
|
+ padding:0;
|
|
|
+ text-align: center;
|
|
|
+ line-height:54rpx;
|
|
|
+ }
|
|
|
+ .top-right-box-button{
|
|
|
+ border: 1rpx solid #dde3ed;
|
|
|
+ border-radius:10rpx
|
|
|
+ background:#fff;
|
|
|
+ font-size:24rpx;
|
|
|
+ width:100rpx;
|
|
|
+ height:54rpx;
|
|
|
+ padding:0;
|
|
|
+ text-align: center;
|
|
|
+ line-height:54rpx;
|
|
|
+ }
|
|
|
+ .picker-input
|
|
|
+ font-size 24rpx
|
|
|
+ color #333
|
|
|
+ background #fff
|
|
|
+ border 1rpx solid #dde3ed
|
|
|
+ border-radius 10rpx
|
|
|
+ padding 10rpx 16rpx
|
|
|
+
|
|
|
+ .filter-sep
|
|
|
+ font-size 22rpx
|
|
|
+ color #999
|
|
|
+ flex-shrink 0
|
|
|
+
|
|
|
+ // 类型标签滚动
|
|
|
+ .tag-scroll
|
|
|
+ white-space nowrap
|
|
|
+ padding 8rpx 0 16rpx
|
|
|
+
|
|
|
+ .tag-scroll-inner
|
|
|
+ display inline-flex
|
|
|
+ gap 12rpx
|
|
|
+
|
|
|
+ .filter-tag
|
|
|
+ display inline-block
|
|
|
+ font-size 22rpx
|
|
|
+ padding 8rpx 20rpx
|
|
|
+ border-radius 30rpx
|
|
|
+ background #eef1f6
|
|
|
+ color #666
|
|
|
+ border 1rpx solid transparent
|
|
|
+
|
|
|
+ .filter-tag-active
|
|
|
+ background #e6f0ff
|
|
|
+ color #1677ff
|
|
|
+ border-color #91caff
|
|
|
+
|
|
|
+ // 成绩卡片
|
|
|
+ .score-card
|
|
|
+ background #fff
|
|
|
+ border-radius 20rpx
|
|
|
+ padding 24rpx 28rpx
|
|
|
+ margin-bottom 20rpx
|
|
|
+ box-shadow 0 2rpx 12rpx rgba(0,0,0,0.04)
|
|
|
+ border 1rpx solid #dde3ed
|
|
|
+
|
|
|
+ .score-result
|
|
|
+ font-size 22rpx
|
|
|
+ font-weight 600
|
|
|
+ padding 4rpx 16rpx
|
|
|
+ border-radius 20rpx
|
|
|
+
|
|
|
+ .result-pass
|
|
|
+ background #f6ffed
|
|
|
+ color #52c41a
|
|
|
+ border 1rpx solid #b7eb8f
|
|
|
+
|
|
|
+ .result-fail
|
|
|
+ background #fff2f0
|
|
|
+ color #f5222d
|
|
|
+ border 1rpx solid #ffccc7
|
|
|
+
|
|
|
+ .score-exam-name
|
|
|
+ display block
|
|
|
+ font-size 30rpx
|
|
|
+ font-weight 700
|
|
|
+ color #222
|
|
|
+ margin 16rpx 0
|
|
|
+
|
|
|
+ .score-info-grid
|
|
|
+ display grid
|
|
|
+ grid-template-columns 1fr 1fr
|
|
|
+ gap 12rpx
|
|
|
+ margin-bottom 20rpx
|
|
|
+ font-size 26rpx
|
|
|
+ color #333
|
|
|
+
|
|
|
+ .empty-tip
|
|
|
+ text-align center
|
|
|
+ line-height 80rpx
|
|
|
+ color #aaa
|
|
|
+ font-size 24rpx
|
|
|
+
|
|
|
+ .loading-tip
|
|
|
+ text-align center
|
|
|
+ line-height 60rpx
|
|
|
+ color #aaa
|
|
|
+ font-size 22rpx
|
|
|
+</style>
|