mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-07 01:46:45 +08:00
feat:新增考试的三个页面
This commit is contained in:
dongwug
BIN
src/assets/image/checkbox.png
Normal file
BIN
src/assets/image/checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
BIN
src/assets/image/checkbox2.png
Normal file
BIN
src/assets/image/checkbox2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
src/assets/image/cycle.png
Normal file
BIN
src/assets/image/cycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 826 B |
BIN
src/assets/image/next.png
Normal file
BIN
src/assets/image/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 B |
BIN
src/assets/image/pre.png
Normal file
BIN
src/assets/image/pre.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
BIN
src/assets/image/readyexamination/sandclock.png
Normal file
BIN
src/assets/image/readyexamination/sandclock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
280
src/views/examination/Examination.vue
Normal file
280
src/views/examination/Examination.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="examination">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="dir">
|
||||
<div class="samegt pre"></div>
|
||||
<div class="sameg">上一个</div>
|
||||
<div class="sameg" style="margin-left: 15.5px">下一个</div>
|
||||
<div class="samegt next"></div>
|
||||
</div>
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">考试测试</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentone clearfix">
|
||||
<div class="areaone">
|
||||
<div class="texttime">
|
||||
考试时间：30分钟
|
||||
</div>
|
||||
<div class="passline">
|
||||
及格线：60
|
||||
</div>
|
||||
</div>
|
||||
<div class="areatwo">
|
||||
<div class="time">
|
||||
<span>考试时间：</span>
|
||||
<br/>
|
||||
<span>2022-7-20 00:00 至 2022-8-29 23:59:59</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<button class="textbtn">
|
||||
开始考试
|
||||
</button>
|
||||
</div>
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="talk">历史记录</div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contenttwo clearfix">
|
||||
<table>
|
||||
<tr class="trbox1">
|
||||
<th>提交时间</th>
|
||||
<th>成绩</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr >
|
||||
<tr class="trbox2">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span> </td>
|
||||
</tr>
|
||||
<tr class="trbox3">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
<tr class="trbox4">
|
||||
<td>
|
||||
2022-7-20
|
||||
<br/>
|
||||
00:00
|
||||
</td>
|
||||
<td>10分</td>
|
||||
<td>已完成</td>
|
||||
<td><span>查看考卷</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ExamiNation",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.examination{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
.dir {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
// background-color: red;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
font-size: 12px;
|
||||
color: #2478ff;
|
||||
.samegt {
|
||||
margin-top: 3px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.samege {
|
||||
line-height: 12px;
|
||||
}
|
||||
.pre {
|
||||
margin-right: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/pre.png);
|
||||
}
|
||||
.next {
|
||||
margin-left: 5px;
|
||||
// background-size: 100%;
|
||||
background-image: url(../../assets/image/next.png);
|
||||
}
|
||||
}
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 90px;
|
||||
.img {
|
||||
margin-top: 1.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../../assets/image/cycle.png);
|
||||
}
|
||||
.rightmain {
|
||||
margin-left: 7.5px;
|
||||
.talk {
|
||||
margin-left: -1.5px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 62.5px;
|
||||
height: 10px;
|
||||
right: 8px;
|
||||
bottom: -5px;
|
||||
background: #ccdfff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentone{
|
||||
width: 100%;
|
||||
background: #F2F5F7;
|
||||
border-radius: 2px;
|
||||
margin-top: 20.5px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.areaone{
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
color: #56A3F9;
|
||||
.texttime{
|
||||
margin-left: 22.5px ;
|
||||
}
|
||||
.passline{
|
||||
margin-left: 42px;
|
||||
}
|
||||
}
|
||||
.areatwo{
|
||||
// width: 290.5px;
|
||||
// height: 50.5px;
|
||||
margin: 0 5.5px 6.5px 5.5px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0px 4px 0px 4px;
|
||||
font-size: 13px;
|
||||
|
||||
.time{
|
||||
margin: 9px 16px 9.5px 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 13.5px;
|
||||
margin: 20px 109.5px 21.5px 109.5px;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.textbtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.contenttwo{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
table{
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
// border-collapse:separate;
|
||||
// border-spacing:0px 15.5px;
|
||||
text-align: center;
|
||||
margin: 21px auto 48px auto;
|
||||
.trbox1{
|
||||
width: 302px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background-color: #F2F5F7;
|
||||
th{
|
||||
font-size: 12px;
|
||||
color: #333330;
|
||||
}
|
||||
}
|
||||
td{
|
||||
padding: 14.5px;
|
||||
}
|
||||
.trbox2,
|
||||
.trbox3,
|
||||
.trbox4{
|
||||
border-bottom: 0.5px solid #D7E5FD ;
|
||||
}
|
||||
span{
|
||||
color: #2478FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
src/views/examination/ExaminationScore.vue
Normal file
116
src/views/examination/ExaminationScore.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="examinationscore">
|
||||
<TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="mainbody">
|
||||
<div class="scoretitle">
|
||||
阶段性考试
|
||||
</div>
|
||||
<div class="scorebox">
|
||||
<div class="scoredetail">
|
||||
您本次考试分数：
|
||||
<div class="score">84</div>
|
||||
<div class="grade">分</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<div class="closebtn">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ExaminationScore",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.examinationscore{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
border-radius: 2px;
|
||||
// background-color: #FFFFFF;
|
||||
.mainbody{
|
||||
width: 100%;
|
||||
margin-top: 133.5px;
|
||||
background-color: #F2F5F7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.scoretitle{
|
||||
margin: 18px auto 15px auto;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #56A3F9;
|
||||
}
|
||||
.scorebox{
|
||||
width: 290.5px;
|
||||
height: 55.5px;
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 6.5px;
|
||||
.scoredetail{
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
margin: 21.5px auto 29.5px 72.5px;
|
||||
.score{
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #EE423D;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.grade{
|
||||
font-size: 13px;
|
||||
color: #EE423D;
|
||||
margin-bottom: 21.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 218.5px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.closebtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
src/views/examination/ReadyExamination.vue
Normal file
211
src/views/examination/ReadyExamination.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="readyexamination">
|
||||
<TitleHead text="考试模式"></TitleHead>
|
||||
<div class="notice">
|
||||
<div class="noticebox">
|
||||
<div class="main">
|
||||
<div class="lefttitle">
|
||||
<div class="img"></div>
|
||||
<div class="rightmain">
|
||||
<div class="time">剩余时间</div>
|
||||
<div class="box">29分钟53秒</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">
|
||||
判断题
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
1、控制计划是由工艺部门完成 （4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
2、.PFMEA假定所设计的产品能满足设计要求
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
3、PFMEA假定所设计的产品能满足设计要求 （4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">正确</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">错误</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="questiontype clearfix">
|
||||
<div class="type">
|
||||
选择题
|
||||
</div>
|
||||
</div>
|
||||
<div class="questions">
|
||||
<div class="questiontitle">
|
||||
4、.FMEA 是一种（ ）工具（4分）
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">问题解决</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">项目策划</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">过程分析</div>
|
||||
</div>
|
||||
<div class="btnswitch">
|
||||
<div class="checkoutbtn"></div>
|
||||
<div class="select">风险分析</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnbox">
|
||||
<div class="submitbtn">
|
||||
提交试卷
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { reactive, toRefs } from "vue";
|
||||
import TitleHead from "@/components/TitleHead.vue";
|
||||
export default {
|
||||
name: "ReadyExamination",
|
||||
components: {
|
||||
TitleHead,
|
||||
},
|
||||
setup() {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.readyexamination{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.notice {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -17.5px;
|
||||
.noticebox {
|
||||
width: 90%;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.main {
|
||||
width: 90%;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #333330;
|
||||
.lefttitle {
|
||||
display: flex;
|
||||
margin-bottom: 21.5px;
|
||||
.img {
|
||||
width: 16px;
|
||||
height: 18.5px;
|
||||
background-image: url(../../assets/image/readyexamination/sandclock.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.rightmain {
|
||||
display: flex;
|
||||
margin-left: 4.5px;
|
||||
font-size: 14px;
|
||||
.time {
|
||||
color:#56A3F9;
|
||||
}
|
||||
.box {
|
||||
margin-left: 9.5px;
|
||||
color: #EE423D;
|
||||
}
|
||||
}
|
||||
}
|
||||
.questiontype{
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #F9F9F9;
|
||||
line-height: 35px;
|
||||
.type{
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
.questions{
|
||||
width: 100%;
|
||||
margin-left: 9.5px;
|
||||
.questiontitle{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btnswitch{
|
||||
display: flex;
|
||||
height: 13.6px;
|
||||
line-height: 13.6px;
|
||||
// align-items: center;
|
||||
margin-bottom: 15px;
|
||||
.checkoutbtn {
|
||||
width: 13.6px;
|
||||
height: 13.6px;
|
||||
background-image: url(../../assets/image/checkbox2.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 6.5px;
|
||||
}
|
||||
.select{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnbox{
|
||||
width: 83px;
|
||||
height: 33px;
|
||||
background-color: #2478FF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 1px 8px 0px rgba(56,125,247,0.7);
|
||||
font-size: 14px;
|
||||
margin: 18px auto 24px auto;
|
||||
text-align: center;
|
||||
line-height: 33px;
|
||||
.submitbtn{
|
||||
border: none;
|
||||
background-color: #2478FF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user