mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-24 10:12:56 +08:00
321 lines
8.4 KiB
Vue
321 lines
8.4 KiB
Vue
<template>
|
||
<div class="surveydetail">
|
||
<!-- 面包屑导航 -->
|
||
<div
|
||
style="display: flex; align-items: center; justify-content: space-between"
|
||
>
|
||
<div class="crumb">
|
||
<div>混合制项目</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div>管理者进阶-腾飞班</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div style="font-weight: 700; font-size: 16px">考试详情</div>
|
||
</div>
|
||
<div class="prevnext">
|
||
<div class="prev">
|
||
<img
|
||
style="width: 23px; height: 23px"
|
||
src="../../assets/image/prev.png"
|
||
/>
|
||
<div style="margin-left: 7px">上一个</div>
|
||
</div>
|
||
<div class="prev" style="margin-left: 31px">
|
||
<div style="margin-right: 7px">下一个</div>
|
||
<img
|
||
style="width: 23px; height: 23px"
|
||
src="../../assets/image/next.png"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 面包屑导航 -->
|
||
<!-- 标题 -->
|
||
<div class="title">【调研】管理者进阶腾飞班 - 培训阶段性考试</div>
|
||
<!-- 标题 -->
|
||
<!-- 详细内容 -->
|
||
<div class="bascinfo">
|
||
<!-- 中间盒子 -->
|
||
<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" style="cursor: pointer">开始考试</button>
|
||
<!-- 开始考试按钮 -->
|
||
<div class="righttitleE">
|
||
<img width="20px" height="20px" src="../../assets/image/yuan.png" />
|
||
|
||
<div class="text">历史纪录</div>
|
||
<div class="box"></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 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 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 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 {
|
||
color: #fff;
|
||
display: flex;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
}
|
||
.prevnext {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
.prev {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
margin-top: 17px;
|
||
margin-left: -11px;
|
||
}
|
||
.bascinfo {
|
||
min-height: 800px;
|
||
width: 100%;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
margin-top: 24px;
|
||
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);
|
||
cursor: pointer;
|
||
}
|
||
.righttitleE {
|
||
display: flex;
|
||
margin-top: 110px;
|
||
// 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: 14px;
|
||
}
|
||
}
|
||
.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;
|
||
cursor: pointer;
|
||
}
|
||
.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>
|