mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 03:16:46 +08:00
409 lines
14 KiB
Vue
409 lines
14 KiB
Vue
<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"
|
||
v-for="(q,index) in questions"
|
||
:key="index">
|
||
<div class="questiontitle" >
|
||
{{q.text}}
|
||
</div>
|
||
<div class="btnswitch" v-for="(j,index) in q.options"
|
||
:key="index"
|
||
@click="selectBtn(j)"
|
||
>
|
||
<div class="checkoutbtn"
|
||
:style="{
|
||
backgroundImage:
|
||
'url('+( j.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
|
||
}"
|
||
></div>
|
||
<div class="select">{{j.text}}</div>
|
||
</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"
|
||
v-for="(q,index) in s_questions"
|
||
:key="index">
|
||
<div class="questiontitle">
|
||
{{q.text}}
|
||
</div>
|
||
<div class="btnswitch" v-for="(s,index) in s_options"
|
||
:key="index"
|
||
@click="selectBtn2(s)"
|
||
>
|
||
<div class="checkoutbtn"
|
||
:style="{
|
||
backgroundImage:
|
||
'url('+( s.selected === true? Images.checkboxImg : Images.checkbox2Img )+')'
|
||
}"
|
||
></div>
|
||
<div class="select">{{s.text}}</div>
|
||
</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 Images from '../../assets/image/index'
|
||
import TitleHead from "@/components/TitleHead.vue";
|
||
export default {
|
||
name: "ReadyExamination",
|
||
components: {
|
||
TitleHead,
|
||
},
|
||
setup() {
|
||
const state = reactive({
|
||
questions: [
|
||
{
|
||
id: 1,
|
||
text: "1、控制计划是由工艺部门完成 （4分）",
|
||
options: [
|
||
{
|
||
text: "正确",
|
||
select:"flase",
|
||
},
|
||
{
|
||
text: "错误",
|
||
select:"flase",
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||
options: [
|
||
{
|
||
text: "正确",
|
||
select:"flase",
|
||
},
|
||
{
|
||
text: "错误",
|
||
select:"flase",
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "3、控制计划是由工艺部门完成 （4分）",
|
||
options: [
|
||
{
|
||
text: "正确",
|
||
select:"flase",
|
||
},
|
||
{
|
||
text: "错误",
|
||
select:"flase",
|
||
},
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
text: "4、.PFMEA假定所设计的产品能满足设计要求",
|
||
options: [
|
||
{
|
||
text: "正确",
|
||
select:"flase",
|
||
},
|
||
{
|
||
text: "错误",
|
||
select:"flase",
|
||
},
|
||
]
|
||
},
|
||
],
|
||
// j_questions: [
|
||
// {
|
||
// type: "judge",
|
||
// id: 1,
|
||
// text: "1、控制计划是由工艺部门完成 （4分）",
|
||
// },
|
||
// {
|
||
// type: "judge",
|
||
// id: 2,
|
||
// text: "2、.PFMEA假定所设计的产品能满足设计要求",
|
||
// },
|
||
// {
|
||
// type: "judge",
|
||
// id: 3,
|
||
// text: "3、PFMEA假定所设计的产品能满足设计要求 （4分）",
|
||
// },
|
||
// ],
|
||
s_questions: [
|
||
{
|
||
type: "choice",
|
||
id: 1,
|
||
text: "4、.FMEA 是一种（ ）工具（4分）",
|
||
},
|
||
],
|
||
// j_options: [
|
||
// {
|
||
// id: 1,
|
||
// text: "正确",
|
||
// selected: false,
|
||
// },
|
||
// {
|
||
// id: 2,
|
||
// text: "错误",
|
||
// selected: false,
|
||
// },
|
||
// ],
|
||
s_options: [
|
||
{
|
||
id: 1,
|
||
text: "问题解决",
|
||
selected: false,
|
||
},
|
||
{
|
||
id: 2,
|
||
text: "项目策划",
|
||
selected: false,
|
||
},
|
||
{
|
||
id: 3,
|
||
text: "过程分析",
|
||
selected: false,
|
||
},
|
||
{
|
||
id: 4,
|
||
text: "风险分析",
|
||
selected: false,
|
||
},
|
||
]
|
||
});
|
||
const selectBtn = (value) => {
|
||
// let arr = state.questions;
|
||
const arry = []
|
||
state.questions.map((item) => {
|
||
arry.push(item.options)
|
||
})
|
||
console.log(arry)
|
||
console.log(value)
|
||
// arry.map((i) => {
|
||
// if (i.id === value.id) {
|
||
// i.selected = !i.selected;
|
||
// }
|
||
// });
|
||
// state.questions = arry;
|
||
};
|
||
const selectBtn2 = (value) => {
|
||
let arr = state.s_options;
|
||
arr.map((i) => {
|
||
if (i.id === value.id) {
|
||
i.selected = !i.selected;
|
||
}
|
||
});
|
||
state.s_options = arr;
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
selectBtn,
|
||
selectBtn2,
|
||
Images,
|
||
};
|
||
}
|
||
};
|
||
</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: 18px;
|
||
}
|
||
.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> |