Skip to content

C
center-exam-show
提交 5e3bb247 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

增加页面

上级 80111495
隐藏空白字符变更
内嵌 并排
正在显示 包含 1103 行增加 和 1 行删除
src/components/exam/answerCard.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div>
<div class="info">
<img src="http://placehold.it/200x200/" alt="">
<div class="right">
<div class="name">啊啊啊</div>
<div class="code">qweqwe123</div>
</div>
</div>
<div class="order-num">
<div class="tit">单选题</div>
<ul>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div class="tit">单选题</div>
<ul>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<div class="tit">单选题</div>
<ul>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="stu1">1</li>
<li class="stu1">2</li>
<li class="stu1 stu2 stu3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<ul class="flag-tips">
<li>
<div class="circle1"></div>
<div class="txt">已答</div>
</li>
<li>
<div class="circle2"></div>
<div class="txt">未答</div>
</li>
<li>
<div class="circle3"></div>
<div class="txt">当前</div>
</li>
<li>
<div class="circle4"></div>
<div class="txt">标记</div>
</li>
</ul>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.info{
display: flex;
align-items: center;
height: 100px;
img{
width: 60px;
height: 60px;
border-radius: 50%;
}
.right{
margin-left: 22px;
.name{
font-size: 18px;
color: #222222;
line-height: 25px;
}
.code{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 5px;
}
}
}
.order-num{
padding-bottom: 90px;
.tit{
font-size: 12px;
color: #999999;
line-height: 17px;
margin-bottom: 10px;
}
ul{
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
li{
position: relative;
border-radius: 50px;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
font-size: 14px;
color: #666666;
line-height: 24px;
margin-right: 20px;
margin-bottom: 10px;
text-align: center;
&:nth-child(5n+5){
margin-right: 0;
}
&.stu1{
background: #EEEEEE;
border: 1px solid #CCCCCC;
}
&.stu2{
border: 2px solid #0FC118;
}
&.stu3{
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
}
}
}
.flag-tips{
width: 260px;
position: fixed;
bottom: 60px;
right:0;
display: flex;
justify-content: space-around;
padding: 15px 0 10px;
background: #fff;
margin: 0;
list-style: none;
li{
.circle1{
width: 24px;
height: 24px;
background: #EEEEEE;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle1{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle2{
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.circle3{
width: 24px;
height: 24px;
border: 2px solid #0FC118;
border-radius: 50%;
}
.circle4{
position: relative;
width: 24px;
height: 24px;
border: 1px solid #CCCCCC;
border-radius: 50%;
&::after{
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 4px;
height: 4px;
background: #C01540;
border-radius: 50%;
}
}
.txt{
margin-top: 5px;
font-size: 12px;
color: #CCCCCC;
line-height: 17px;
}
}
}
</style>
src/components/exam/dialogComponent.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
src/components/exam/question.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div>
<template v-if="true">
<div class="title">
<span>1.</span>将以下5个句子重新排列组合，排列组合最连贯的是（ ）。
</div>
<div class="describe">甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。</div>
<ul class="check-option"> <!-- radio-option check-option -->
<li class="active">
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
</ul>
</template>
<template v-if="false">
<div class="case-que">
<div class="stem">李克强在讲话中首先代表党中央、国务院，向受命名的地方和受表彰的单位与个人
表示热烈祝贺，向人民解放军指战员、武警官兵、民兵预备役人员、部队职工，向烈军
属、伤残军人、转业复员退伍军人和军队离退休干部，向双拥工作战线的同志们致以诚
挚问候，向所有关心支持国防和军队建设的社会各界人士表示衷心感谢。
李克强说，党的十八大以来，在以习近平同志为核心的党中央坚强领导下，各地区
各有关部门积极支持和服务保障军队建设改革，进一步加大优抚安置保障，军队支援经
济社会发展积极有为，在参与重大自然灾害抢险救援和应对突发事件中当先锋，年面对
疫情，人民子弟兵闻令而动、敢打硬仗，广大军民携手同心、共克时艰，取得了抗击疫
情斗争重大战略成果，彰显了军政军民团结的强大力量。</div>
<ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
<li>
<div class="title">
<span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
</div>
<ul class="radio-option"> <!-- radio-option check-option -->
<li class="active">
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
</ul>
</li>
<li>
<div class="title">
<span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
</div>
<ul class="check-option"> <!-- radio-option check-option -->
<li class="active">
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div>
<div class="txt">A.⑤④②③①</div>
</li>
</ul>
</li>
</ul>
</div>
</template>
</div>
</template>
<script>
export default {
props: {
contentHeight: { type: Number, default: () => {} }
},
mounted() {
}
}
</script>
<style lang="scss" scoped>
.title{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
span{
font-size: 32px;
font-weight: bold;
color: #222222;
line-height: 45px;
}
}
.describe{
font-size: 18px;
color: #222222;
line-height: 25px;
margin-top: 20px;
}
.radio-option,.check-option{
padding: 24px 0 0 0;
margin: 0;
list-style: none;
li{
margin-bottom: 20px;
display: flex;
align-items: center;
.icon{
width: 18px;
height: 18px;
border: 1px solid #999999;
border-radius: 50%;
}
.txt{
font-size: 18px;
color: #222222;
line-height: 18px;
margin-left: 10px;
}
&.active{
.icon{
width: 8px;
height: 8px;
border: 6px solid #C01540;
}
}
}
}
.check-option{
.icon{
border-radius: 3px !important;
}
}
.case-que{
display: flex;
.stem{
flex: 1;
font-size: 14px;
font-weight: bold;
color: #222222;
line-height: 28px;
}
.topics{
flex: 1;
margin: 0;
padding: 0 0 0 20px;
list-style: none;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
li{
.title{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
span{
font-size: 32px;
font-weight: bold;
color: #222222;
line-height: 45px;
}
}
}
}
}
</style>
src/pages/exam/examAnswer.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div>
<div class="answer-box">
<div class="head" id="head-h">
<div class="title">全国统一高考试卷A</div>
<div class="right">
<div class="count">已答1/100</div>
<div class="time">
<div class="icon"></div>
<div class="mun">60:00</div>
</div>
</div>
</div>
<div class="exam-main" :style="{height: this.contentHeight + 'px'}">
<div class="left">
<question :contentHeight="contentHeight"></question>
</div>
<div class="right">
<answer-card></answer-card>
</div>
</div>
<div class="foot" id="foot-h">
<div class="exam-btn">
<div>上一题</div>
<div class="active">下一题</div>
</div>
<div class="rigth-btn">
<div class="sign">
<div class="icon"></div>
<div class="txt">标记</div>
</div>
<div class="end-exam-btn">
<div class="btn">结束考试</div>
</div>
</div>
</div>
</div>
<!-- <dialog-component></dialog-component> -->
</div>
</template>
<script>
import answerCard from '../../components/exam/answerCard.vue'
import question from '../../components/exam/question.vue'
import dialogComponent from '../../components/exam/dialogComponent.vue'
export default {
components: {
answerCard,
question,
dialogComponent
},
data() {
return {
contentHeight: 0
}
},
mounted() {
this.contentHeight = parseInt(document.body.clientHeight - (this.getDom('head-h').offsetHeight + this.getDom('foot-h').offsetHeight))
},
methods: {
getDom(id) {
return document.getElementById(id)
}
}
}
</script>
<style lang="scss" scoped>
.answer-box{
width: 100%;
height: 100%;
// background: #f9f9f9;
.head{
width: 100%;
height: 80px;
background: #FFFFFF;
display: flex;
.title{
padding-left: 30px;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
}
.right{
width: 260px;
margin-left: auto;
display: flex;
justify-content: space-around;
align-items: center;
.count{
font-size: 18px;
font-weight: bold;
color: #222222;
}
.time{
display: flex;
.icon{
width: 23px;
height: 23px;
background: url(../../assets/images/tick.png);
background-size:100% 100%;
}
.mun{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-left: 10px;
}
}
}
}
.exam-main{
display: flex;
.left{
flex: 1;
padding: 40px 20px 0 53px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.right{
position: relative;
width: 220px;
background: #fff;
padding: 0 20px;
overflow-y: scroll;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
.foot{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #FFFFFF;
display: flex;
align-items: center;
.exam-btn{
display: flex;
padding-left: 40px;
div{
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #CCCCCC;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 40px;
text-align: center;
margin-right: 20px;
&.active{
background: #C01540;
border-radius: 4px;
color: #fff;
}
}
}
.rigth-btn{
display: flex;
margin-left: auto;
.end-exam-btn{
width: 260px;
display: flex;
justify-content: center;
align-items: center;
.btn{
width: 200px;
height: 40px;
background: #EEEEEE;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #CCCCCC;
line-height: 40px;
text-align: center;
}
}
.sign{
margin-right: 20px;
.icon{
width: 24px;
height: 24px;
background: url(../../assets/images/sign.png);
background-size:100% 100%;
}
.txt{
font-size: 14px;
color: #CCCCCC;
line-height: 20px;
margin-top: 2px;
}
}
}
}
}
</style>
src/pages/exam/examTime.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div class="exam-t-box">
<div class="title">距离答题开始还有</div>
<div class="time-count">
<div class="time-block">32</div>
<div class="time-block">32</div>
<div class="spots">
<span></span>
<span></span>
</div>
<div class="time-block">32</div>
<div class="time-block">32</div>
</div>
<div class="tips-txt">倒计时结束后，系统会自动进入答题页面</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.exam-t-box{
width: 100%;
height: 100%;
background: url(../../assets/images/exam-t-bg.png);
background-size: cover;
.title{
font-size: 36px;
font-weight: bold;
color: #262626;
line-height: 50px;
letter-spacing: 30px;
text-align: center;
padding-top: 170px;
}
.time-count{
display: flex;
justify-content: center;
padding-top: 40px;
// justify-items: center;
// align-items: center;
.time-block{
width: 182px;
height: 182px;
background: rgba(255,255,255,.5);
font-size: 100px;
font-weight: bold;
color: #2B2B2B;
line-height: 182px;
text-align: center;
// justify-content: center;
// justify-items: center;
align-items: center;
margin-right: 10px;
}
.spots{
padding: 0 20px 0 10px;
span{
display: block;
width: 17px;
height: 17px;
background: #999999;
border-radius: 50%;
margin-top: 48px;
}
}
}
.tips-txt{
text-align: center;
font-size: 18px;
color: #C01540;
line-height: 25px;
letter-spacing: 3px;
margin-top: 40px;
}
}
</style>
src/pages/login/confirmInfo.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div class="confirm-mian">
<div class="con-info none">
<div class="head">全国统一高考试卷A</div>
<div class="info-form">
<div class="tit">基本信息确认</div>
<ul>
<li>
<div class="name">姓名</div>
<input type="text">
</li>
<li>
<div class="name">学号</div>
<input type="text">
</li>
<li>
<div class="name">性别</div>
<div class="select-btn">
<div>男</div>
<div>女</div>
</div>
</li>
</ul>
<div class="confirm-btn">确定</div>
</div>
</div>
<div class="explain-box">
<div class="head">全国统一高考试卷A</div>
<div class="exp-text">
<p>为保证本考试的公平性和严肃性，本次考试将会：</p>
</div>
<div class="exp-btn">
<div class="tips">点击“我同意”按钮接受以上内容。如果您不同意这些条款，将无法进行考试</div>
<div class="btn-box">
<div>我同意</div>
<div>不同意</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log(document.body.clientHeight)
}
}
</script>
<style lang="scss" scoped>
.confirm-mian{
width: 100%;
height: 100%;
}
.con-info{
width: 100%;
height: 100%;
background: url(../../assets/images/con-info-bg.png);
background-size: cover;
.head{
// width: 100%;
height: 80px;
background: #FFFFFF;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
padding-left: 30px;
}
.info-form{
// margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
margin-top: 40px;
width: 400px;
height: 458px;
background: #FFFFFF;
border-radius: 8px;
.tit{
text-align: center;
margin-top: 30px;
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
}
ul{
width: 320px;
margin: 0 auto 0 auto;
padding: 0;
list-style: none;
li{
margin-bottom: 20px;
.name{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-bottom: 10px;
}
input{
width: 310px;
height: 45px;
border-radius: 2px;
border: 1px solid #F1F1F1;
font-size: 14px;
color: #222222;
padding: 0 0 0 10px;
outline: none;
}
.select-btn{
width: 100%;
display: flex;
div{
width: 150px;
height: 40px;
border-radius: 4px;
border: 1px solid #CCCCCC;
font-size: 14px;
font-weight: bold;
color: #999999;
line-height: 14px;
text-align: center;
line-height: 40px;
&:nth-child(2){
margin-left: auto;
}
}
}
}
}
.confirm-btn{
width: 320px;
height: 40px;
background: #C01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 14px;
margin: 0 auto;
text-align: center;
line-height: 40px;
margin-top: 30px;
}
}
}
.explain-box{
width: 100%;
min-height: 100%;
background: #F9F9F9;
.head{
height: 80px;
background: #FFFFFF;
font-size: 24px;
font-weight: bold;
color: #222222;
line-height: 80px;
padding-left: 30px;
}
.exp-text{
width: 900px;
background: #FFFFFF;
border-radius: 8px;
padding: 40px 40px 80px;
margin: 40px auto 0;
margin-top: 40px;
p{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
}
}
.exp-btn{
position: absolute;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
.tips{
font-size: 14px;
color: #222222;
line-height: 20px;
}
.btn-box{
width: 240px;
display: flex;
margin: 20px auto 0;
div{
width: 100px;
height: 40px;
background: #C01540;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 40px;
text-align: center;
&:nth-child(2){
border-radius: 4px;
border: 1px solid #CCCCCC;
background: none;
color: #999;
margin-left: auto;
}
}
}
}
}
.none{
display: none;
}
</style>
src/pages/login/index.vue 0 → 100644
浏览文件 @ 5e3bb247
<template>
<div class="login-box">
<div class="content">
<div class="mian-cont900">
<div class="title">全国统一高考试卷A</div>
<div class="exam-time">
<div class="tit">考试时间</div>
<div class="line"></div>
<div class="time">
2020/06/09 8:24 - 2020/06/09 17:30
</div>
</div>
<div class="mian-form">
<!-- <div class="form prohibit"> -->
<div class="form">
<div class="tips" v-show="false">您登录的次数已超过最大限制</div>
<input type="text" placeholder="请输入准考证号">
<!-- <input type="text" placeholder="请输入准考证号" readonly="readonly" class="prohibit"> -->
<div class="btn">登录</div>
<!-- <div class="btn prohibit">登录</div> -->
<div class="time-tips" v-show="false">距离开考还有：3:23:04</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.mian-cont900{
margin: 0 auto;
width: 900px;
}
.login-box{
width: 100%;
height: 100%;
background: #fff;
.content{
width: 100%;
height: 387px;
background: url(../../assets/images/login-bg.png);
background-size: 100% 100%;
.title{
padding-top: 110px;
font-size: 36px;
font-weight: 600;
color: #FFFFFF;
line-height: 50px;
letter-spacing: 7px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.exam-time{
padding-top: 20px;
.tit{
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
line-height: 25px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.line{
width: 24px;
height: 2px;
background: #FFFFFF;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
margin: 10px 0;
}
.time{
height: 25px;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 25px;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
}
.mian-form{
width: 100%;
height: 230px;
background: #FFFFFF;
box-shadow: 0px 2px 12px 0px rgba(177, 186, 195, 0.3);
border-radius: 5px;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
.form{
position: relative;
display: flex;
&.prohibit{
input{
background: #EEEEEE;
border: 1px solid #CCCCCC;
}
.btn{
color: #ccc;
background: #eee;
}
}
}
input{
padding-left: 15px;
width: 585px;
height: 40px;
border-radius: 4px;
border: 1px solid #CCCCCC;
font-size: 14px;
outline: none;
&::-webkit-input-placeholder{
color: #999999;
}
&.prohibit{
background: #EEEEEE;
border: 1px solid #CCCCCC;
}
}
.btn{
width: 180px;
height: 42px;
background: #C01540;
border-radius: 4px;
margin-left: 20px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 40px;
text-align: center;
font-style: normal;
&.prohibit{
color: #ccc;
background: #eee;
}
}
.tips{
position: absolute;
top: -80%;
left: 0;
font-size: 18px;
font-weight: 400;
color: #C01540;
line-height: 25px;
}
.time-tips{
position: absolute;
bottom: -80%;
left: 0;
font-size: 18px;
color: #222222;
line-height: 25px;
}
}
}
}
</style>
src/router/routes.js
浏览文件 @ 5e3bb247
export default [
{ path: '/', redirect: '/test' },
{ path: '/', redirect: '/login' },
/* 测试页面 */
{ path: '/test', name: 'test', component: () => import('../pages/test.vue') },
/* 登录页面 */
{ path: '/login', name: 'login', component: () => import('../pages/login/index.vue') },
/* 确认信息 */
{ path: '/confirmInfo', name: 'confirmInfo', component: () => import('../pages/login/confirmInfo.vue') },
/* 考试倒计时 */
{ path: '/examTime', name: 'examTime', component: () => import('../pages/exam/examTime.vue') },
/* 答题 */
{ path: '/examAnswer', name: 'examAnswer', component: () => import('../pages/exam/examAnswer.vue') },
/* 如果所有页面都没找到 - 指向 */
{ path: '*', component: () => import('@/components/errorPages/404.vue') }
]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论