hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-10 03:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：新增考试页面

Browse Source
This commit is contained in:
songwc
2022-09-19 14:26:54 +08:00
parent c5fb599b48
commit 1aca77ba9e
1 changed files with 214 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/views/examination/ExamPage.vue
View File

@@ -34,16 +34,81 @@
<!-- 标题 -->
<!-- 详细内容 -->
<div class="bascinfo">
<div></div>
<!-- 中间盒子 -->
<div class="centercontent">
<div class="righttitle">
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
<div class="text">考试测试</div>
<div class="box"></div>
</div>
<!-- 考试测试的盒子 -->
<div class="test clearfix">
<div class="detail">
<span style="margin-right: 43px">考试时间：30分钟</span>
<span>及格线：60</span>
</div>
<div class="testtime clearfix">
<div class="timedetail">
考试时间：2022-7-20 00:00 至 2022-8-29 23:59:59
</div>
</div>
</div>
<!-- 考试测试的盒子 -->
<!-- 开始考试按钮 -->
<button class="starttest">开始考试</button>
<!-- 开始考试按钮 -->
<div class="righttitle" style="padding-top: 80px">
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
<div class="text">历史纪录</div>
<div class="box" style="top: 94px"></div>
</div>
<div class="history">
<div class="historytitle clearfix tongyi">
<div class="content1">提交时间</div>
<div class="content2">成绩</div>
<div class="content3">状态</div>
<div class="content4">操作</div>
</div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-20&nbsp;00:00</div>
<div class="content2">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</div>
<div class="fenge"></div>
<div class="historytitle2 clearfix tongyi">
<div class="content1">2022-7-18&nbsp;00:00</div>
<div class="content2">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</div>
<div class="fenge"></div>
<div
class="historytitle2 clearfix tongyi"
style="border-radius: 0px 0px 8px 8px"
>
<div class="content1">2022-7-14&nbsp;00:00</div>
<div class="content2">10分</div>
<div class="content3" style="left: 505px">已完成</div>
<button class="contentbtn">查看考卷</button>
</div>
</div>
</div>
</div>
<!-- 详细内容 -->
</div>
</template>
<script>
export default {
name: "ExamPage",
};
</script>
<style scoped lang="scss">
.surveydetail {
.crumb {
@@ -73,6 +138,7 @@ export default {
margin-left: -11px;
}
.bascinfo {
min-height: 800px;
width: 100%;
background: #ffffff;
border-radius: 8px;
@@ -80,6 +146,153 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.centercontent {
position: relative;
.righttitle {
display: flex;
padding-top: 30px;
position: relative;
.text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.box {
width: 75px;
height: 10px;
background-color: rgba(36, 120, 255, 0.15);
position: absolute;
left: 23px;
top: 44px;
}
}
.test {
margin-top: 16px;
margin-bottom: 26px;
width: 842px;
height: 158px;
background: #f2f5f7;
border-radius: 8px;
.detail {
margin-top: 29px;
margin-left: 44px;
height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #56a3f9;
}
.testtime {
margin-top: 20px;
margin-left: 10px;
width: 823px;
height: 81px;
background: #ffffff;
border-radius: 0px 8px 0px 8px;
.timedetail {
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333330;
margin-top: 32px;
margin-left: 34px;
}
}
}
.starttest {
position: absolute;
width: 146px;
height: 46px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
border: 0;
font-size: 14px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
left: calc(50% - 73px);
}
.history {
position: relative;
margin-top: 32px;
width: 842px;
height: 200px;
border: 1px solid #d7e5fd;
border-radius: 8px;
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.fenge {
width: 841px;
border-top: 1px solid #d7e5fd;
}
.tongyi {
display: flex;
}
.content1 {
margin-top: 14px;
margin-left: 77px;
}
.content2 {
position: absolute;
margin-top: 14px;
left: 328px;
}
.content3 {
position: absolute;
margin-top: 14px;
left: 512px;
}
.content4 {
position: absolute;
margin-top: 14px;
left: 700px;
}
.contentbtn {
position: absolute;
margin-top: 14px;
left: 685px;
font-size: 15px;
// line-height: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #2478ff;
background-color: #fff;
border: 0;
}
.historycontent {
width: 59px;
height: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
// font-weight: 400;
color: #333330;
line-height: 38px;
}
.historytitle {
width: 842px;
height: 50px;
background: #f2f5f7;
border-radius: 8px 8px 0px 0px;
}
.historytitle2 {
width: 842px;
height: 48px;
background: #fff;
}
}
}
}
}
</style>