512 lines
9.9 KiB
Vue
512 lines
9.9 KiB
Vue
<template>
|
||
<view class="main_div max_page">
|
||
<view class="body-title">
|
||
<view class="back_div" @click="common.navigateBack()">
|
||
<view class="back-icon"></view>
|
||
</view>
|
||
<view>考试详情</view>
|
||
</view>
|
||
<view class="detail_div completed incomplete">
|
||
<view class="subscript">已完成</view>
|
||
<view class="title_div">
|
||
<view class="title ellipsis-text">{{detailData.papersName}}</view>
|
||
<!-- <view class="subscript" >未完成</view> -->
|
||
</view>
|
||
<view class="time">
|
||
<text class="color_3">起止时间：</text><text
|
||
class="color_class">{{detailData.examStartTm}}至{{detailData.examEndTm}}</text>
|
||
</view>
|
||
<view class="num_div">
|
||
<text class="color_3">完成人数：</text><text
|
||
class="color_2">{{detailData.execPersionNumer}}/{{detailData.planPersionNumber}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="paper_div">
|
||
<view class="paper">
|
||
<!-- 试卷信息 -->
|
||
<view class="paper_title_div">
|
||
<image src="@/static/images/testingHall/testing.png" mode="heightFix" class="img"></image>
|
||
<view class="title">
|
||
试卷信息
|
||
</view>
|
||
</view>
|
||
<view class="title-note">
|
||
考试时长：<text class="bold">{{detailData.totalGrade}}</text>分钟
|
||
</view>
|
||
|
||
<view class="title-table">
|
||
<view class="title-table-item">
|
||
<view class="top">
|
||
<text class="text_2">{{detailData.passGrade}}</text><text class="text_1">分</text>
|
||
</view>
|
||
<view class="bottom text_1">
|
||
试卷总分
|
||
</view>
|
||
</view>
|
||
<view class="title-table-item">
|
||
<view class="top">
|
||
<text class="text_2">{{detailData.passGrade}}</text><text class="text_1">分</text>
|
||
</view>
|
||
|
||
<view class="bottom text_1">
|
||
通过分数
|
||
</view>
|
||
</view>
|
||
<view class="title-table-item">
|
||
<view class="top text_2">
|
||
不限制
|
||
</view>
|
||
<view class="bottom text_1">
|
||
通过次数
|
||
</view>
|
||
</view>
|
||
<view class="title-table-item">
|
||
<view class="top text_2">
|
||
随机
|
||
</view>
|
||
<view class="bottom text_1">
|
||
试卷类型
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="table">
|
||
<view class="table_th">
|
||
<view class="table_td">
|
||
题型
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
数量
|
||
</view>
|
||
<view class="table_td">
|
||
分值
|
||
</view>
|
||
</view>
|
||
<view class="table_tr">
|
||
<view class="table_td">
|
||
判断题
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
{{detailData.judgeNumber}}
|
||
</view>
|
||
<view class="table_td">
|
||
{{detailData.judgeGrade}}
|
||
</view>
|
||
</view>
|
||
<view class="table_tr table_tr_dark">
|
||
<view class="table_td">
|
||
单选题
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
{{detailData.singleNumber}}
|
||
</view>
|
||
<view class="table_td">
|
||
{{detailData.singleGrade}}
|
||
</view>
|
||
</view>
|
||
<view class="table_tr">
|
||
<view class="table_td">
|
||
多选题
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
{{detailData.multiNumber}}
|
||
</view>
|
||
<view class="table_td">
|
||
{{detailData.multiGrade}}
|
||
</view>
|
||
</view>
|
||
<view class="table_tr table_tr_dark">
|
||
<view class="table_td">
|
||
问答题
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
{{detailData.essayNumber}}
|
||
</view>
|
||
<view class="table_td">
|
||
{{detailData.essayGrade}}
|
||
</view>
|
||
</view>
|
||
<view class="table_tr">
|
||
<view class="table_td">
|
||
总计
|
||
</view>
|
||
<view class="fl1"></view>
|
||
<view class="table_td">
|
||
20
|
||
</view>
|
||
<view class="table_td">
|
||
100
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="fixed_button_div">
|
||
<uv-button type="primary" class="send_evaluate" :custom-style="customStyle" :throttleTime="300"
|
||
:hairline="false" @click="goto_examination()">开始考试</uv-button>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
reactive
|
||
} from 'vue'
|
||
import {
|
||
startTraExamPapersInfo
|
||
} from '@/api/examination.js'
|
||
|
||
import common from '@/common/common';
|
||
import {setPageCache, getPageCache} from '@/common/common';
|
||
const detailData = reactive({
|
||
papersId: '',
|
||
papersName: '',
|
||
examStartTm: '',
|
||
examEndTm: '',
|
||
execPersionNumer: '',
|
||
planPersionNumber: '',
|
||
})
|
||
const customStyle = {
|
||
backgroundColor: '#0066FF',
|
||
border: '1px solid rgb(12, 123, 245)',
|
||
}
|
||
const goto_examination = async () => {
|
||
common.loading()
|
||
startTraExamPapersInfo({
|
||
examId : "1"
|
||
}).then(res => {
|
||
setPageCache('examination', res.body)
|
||
common.navigateTo('/pages/examination/index')
|
||
}).finally(() => {
|
||
common.hideLoading()
|
||
})
|
||
// papersId.value = e.papersId
|
||
// paperData.value = setPageCache('examination_'+papersId.value)
|
||
// if (!papersId.value || !paperData.value) {
|
||
// common.navigateBack()
|
||
// return
|
||
// }
|
||
}
|
||
onLoad((e) => {
|
||
const testing_hall_details = getPageCache('testing_hall_details')
|
||
Object.assign(detailData, {
|
||
...testing_hall_details
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.fixed_button_div {
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
width: calc(100vw - 60rpx);
|
||
}
|
||
|
||
.title-table {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
background-color: #F4F6F9;
|
||
border-radius: 16rpx;
|
||
padding: 28rpx 28rpx 26rpx 28rpx;
|
||
margin: 32rpx 0 48rpx 0;
|
||
|
||
.title-table-item {
|
||
// background-color: red;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 96rpx;
|
||
}
|
||
|
||
.text_1 {
|
||
font-family: PingFangTC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.text_2 {
|
||
font-family: Arial, Arial;
|
||
font-weight: normal;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.text_3 {}
|
||
}
|
||
|
||
.paper_div {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
flex: 1;
|
||
|
||
.paper {
|
||
// width: 100%;
|
||
background-color: red;
|
||
height: 100%;
|
||
margin: 24rpx 30rpx 0 30rpx;
|
||
border-radius: 20rpx;
|
||
padding: 16rpx;
|
||
background-color: #FFFFFF;
|
||
// /* 顶部100px区域设置渐变 */
|
||
background-image: linear-gradient(to bottom, #EBF2FE, #FFFFFF);
|
||
// /* 只显示顶部100px的渐变 */
|
||
background-size: 100% 100px;
|
||
background-repeat: no-repeat;
|
||
box-shadow: 0 23rpx 38rpx 0px rgba(0, 0, 0, 0.06);
|
||
border: 2rpx solid #fff;
|
||
}
|
||
|
||
.paper_title_div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
height: 32rpx;
|
||
}
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
font-family: PingFangTC;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
font-style: normal;
|
||
margin-left: 12rpx;
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.title-note {
|
||
font-size: 28rpx;
|
||
color: rgb(16, 16, 16);
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 设置主轴为垂直方向 */
|
||
justify-content: space-between;
|
||
padding: 20rpx 0 80rpx 0;
|
||
|
||
.table_th {
|
||
flex: 1;
|
||
display: flex;
|
||
background-color: #F4F6F9;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.table_tr_dark {
|
||
background-color: #FAFAFA;
|
||
}
|
||
|
||
.table_th>.table_td {
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.table_tr {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.table_td {
|
||
padding: 14rpx 0;
|
||
flex: 1;
|
||
font-family: PingFangSC;
|
||
font-size: 30rpx;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.table_tr>.table_td {
|
||
color: #666666;
|
||
font-weight: 400;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.main_div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: var(--status-bar-height);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.body-title {
|
||
background-color: #337FFF;
|
||
width: 100%;
|
||
position: relative;
|
||
text-align: center;
|
||
height: 140rpx;
|
||
line-height: 140rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 500;
|
||
font-size: 38rpx;
|
||
color: #FFFFFF;
|
||
font-style: normal;
|
||
|
||
|
||
}
|
||
|
||
.detail_div {
|
||
margin-top: -20rpx;
|
||
z-index: 2;
|
||
width: 100%;
|
||
padding: 48rpx 40rpx 20rpx 40rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.subscript {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 102rpx;
|
||
height: 42rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
line-height: 42rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 0 0 0 28rpx;
|
||
}
|
||
|
||
.title_div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex: 1;
|
||
|
||
.title {
|
||
font-family: PingFangSC;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
line-height: 46rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 28rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.num_div {
|
||
font-family: PingFangSC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
|
||
}
|
||
|
||
.color_1 {
|
||
color: #D70C18;
|
||
}
|
||
|
||
.color_2 {
|
||
color: #333333;
|
||
}
|
||
|
||
.color_3 {
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.incomplete {
|
||
|
||
// 进行中
|
||
.subscript {
|
||
color: #FFFFFF;
|
||
background-color: #EF5705;
|
||
}
|
||
|
||
.color_class {
|
||
color: #D70C18;
|
||
}
|
||
}
|
||
|
||
.completed {
|
||
|
||
// 已完成
|
||
.subscript {
|
||
color: #FFFFFF;
|
||
background-color: #33C583;
|
||
}
|
||
|
||
.color_class {
|
||
color: #0066FF;
|
||
}
|
||
}
|
||
|
||
.back_div {
|
||
position: absolute;
|
||
left: 26rpx;
|
||
height: 100%;
|
||
top: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.back-icon {
|
||
position: relative;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-icon::before,
|
||
.back-icon::after {
|
||
content: '';
|
||
position: absolute;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.back-icon::after {
|
||
top: 25%;
|
||
left: 25%;
|
||
width: 40%;
|
||
height: 40%;
|
||
border-top: 4rpx solid #fff;
|
||
border-left: 4rpx solid #fff;
|
||
transform: rotate(-45deg);
|
||
}
|
||
}
|
||
</style> |