Files
2023-01-03 18:18:26 +08:00

929 lines
26 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<!--考试页面此页面是备份 未使用到-->
<view>
<u-toast ref="messager"></u-toast>
<view style="text-align: center;padding: 10px;"><text class="title-name">{{testPaper.testName}}</text></view>
<view class="epage" v-if="testStatus ==1">
<view class="">
<u-cell-group>
<u-cell size="large" title="答题时间" :value="testPaper.testDuration+ '分钟'"></u-cell>
<u-cell size="large" title="答题次数" :value="testPaper.times + '次'"></u-cell>
<u-cell size="large" title="及格线" :value="testPaper.passLine"></u-cell>
<u-cell v-if="testPaper.entranceTime" size="large" title="入场时间" :value="testPaper.entranceTime">
</u-cell>
</u-cell-group>
<view class="" style="padding: 20upx;" v-if="testPaper.testFront">
{{testPaper.testFront}}
</view>
<view class="sta-btn" v-if="canExam">
<!-- <u-button style="border-radius: 36upx;" v-if="startBtn" text="开始考试" @click="startTest" type="primary"></u-button>
<u-button style="border-radius: 36upx;" v-else text="考试已结束" type="primary"></u-button> -->
<view v-if="examStatus==0" style="text-align: center;color:#6d6d6d; ">考试还未开始</view>
<view v-if="examStatus==1">
<view v-if="tipText!=''" style="text-align: center;color:red">
<text>{{tipText}}</text>
</view>
<view v-else>
<u-button type="primary" :disabled="startButton" v-if="testStatus == 1" @click="startTest()">{{btnText}}</u-button>
</view>
</view>
<view v-if="examStatus==2" style="text-align: center;color:#6d6d6d; ">考试已结束</view>
</view>
<view class="" style="padding: 20upx;" v-if="canExam">
<view class="" style="margin-bottom: 20upx;">
考试记录
</view>
<u-list style="min-height: 200px; height: 200px;">
<u-list-item v-for="(item, index) in tableData" :key="index">
<view class=""
style="border-bottom: 2upx solid #eee;display: flex;justify-content: space-around; font-size: 12px;line-height: 60upx;">
<text>完成时间{{item.lastTime}}</text>
<text>得分{{item.score}}</text>
<text>查看详情</text>
</view>
</u-list-item>
</u-list>
</view>
</view>
</view>
<view v-if="testStatus ==2">
<view style="display: flex;justify-content: space-between;padding: 20upx;">
<view style="padding-top: 10upx;color: #757575; ">{{curIndex+1}} / {{total}}</view>
<view style="color: #000000;">
<text style="font-size: 40upx;" :class="{'redText':remainingTime<5}">{{formatSeconds(remainingTime)}}</text>
</view>
</view>
<!--试题内容-->
<view class="qitem">
<view class="qitem-info">[{{getQuestionType(curItem.type)}}]{{curItem.title}}</view>
<view v-if="curItem.type == 3">
<view class="qitem-opts">
<view class="qitem-opt" :class="{check:curItem.checked == true}"
@click="chooseOption(curItem,true)">
{{toLetter(1)}}.正确
<u-icon v-if="curItem.checked == true" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
<view class="qitem-opt" :class="{check:curItem.checked ==false}"
@click="chooseOption(curItem,false)">
{{toLetter(2)}}.错误
<u-icon v-if="curItem.checked == false" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
</view>
</view>
<view v-else v-for="(opt,optIdx) in curItem.optionList" :key="optIdx">
<view class="qitem-opts">
<view class="qitem-opt" :class="{check:opt.checked}" @click="chooseOption(opt)">
{{toLetter(optIdx+1)}}.{{opt.content}}
<u-icon v-if="opt.checked" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
</view>
</view>
</view>
<view style="height: 50px;"></view>
<view class="bottom-btns">
<u-button class="next" v-if="curIndex==(total-1)" type="success" text="提交" @click="manualSubmit"></u-button>
<u-button type="primary" text="下一题" @click="nextSub" class="next" v-if="curIndex<(total-1)"></u-button>
<u-button type="info" text="上一题" @click="prevSub" class="next" v-if="curIndex>0"></u-button>
</view>
</view>
<view class="" v-if="testStatus ==3">
<view class="pager-title">
<u-icon @click="toBack()" name="arrow-leftward"></u-icon><text
class="title-name">{{testPaper.testName}}</text>
</view>
<view class="score-box">
考试已结束得分 {{score}}
</view>
<view class="sta-btn">
<!-- <u-button style="border-radius: 36upx;" v-if="testPaper.showAnswer || testPaper.showAnalysis" text="查看答案或解析" @click="showPaperAnser = true;curIndex = 0" type="primary"></u-button> -->
</view>
<view class="" v-if="showPaperAnser">
<view class="qitem">
<view class="qitem-info">[{{getQuestionType(curItem.type)}}]{{curItem.title}}</view>
<view v-if="curItem.type == 3">
<view class="qitem-opts">
<view class="qitem-opt" :class="{check:curItem.checked}">
{{toLetter(1)}}.正确
<u-icon v-if="curItem.checked" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
<view class="qitem-opt" :class="{check:curItem.checked}">
{{toLetter(2)}}.错误
<u-icon v-if="curItem.checked" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
</view>
</view>
<view v-else v-for="(opt,optIdx) in curItem.optionList" :key="optIdx">
<view class="qitem-opts">
<view class="qitem-opt" :class="{check:opt.checked}">
{{toLetter(optIdx+1)}}.{{opt.content}}
<u-icon v-if="opt.checked" name="checkbox-mark" color="#00aa00"></u-icon>
</view>
</view>
</view>
<view class="" v-if="curItem.type == 3 && testPaper.showAnswer">
正确答案{{curItem && curItem.answer?'正确':'错误'}}
</view>
<view class="" v-if="curItem.type !== 3 && testPaper.showAnswer">
正确答案<text v-for="(item,a) in curItem.optionList"
:key="a">{{item.isAnswer?toLetter(a+1):''}}</text>
</view>
<view class="">
解析{{curItem.analysis}}
</view>
</view>
<view style="height: 50px;"></view>
<view v-if="!stop" class="bottom-btns">
<u-button type="primary" text="下一题" @click="nextSub" class="next" v-if="curIndex<(total-1)">
</u-button>
<u-button type="info" text="上一题" @click="prevSub" class="next" v-if="curIndex>0"></u-button>
</view>
</view>
</view>
<u-modal :show="stop" @confirm="confirmStop" @cancel="cancelStop" ref="stopModal"
content="时间已到,是否提交答卷? 否:不提交答卷返回课程页面,是:提交答卷并返回课程页面" confirmText="是" :showCancelButton="true" cancelText="否"
:asyncClose="true">
</u-modal>
<u-modal :show="scoreShow" @confirm="confirmFinish" title="您本次得分" :content="''+lastScore">
</u-modal>
</view>
</template>
<script>
import pushRecordApi from '@/api/modules/pushRecord.js'
import apiCourseStudy from '@/api/modules/courseStudy.js'
import apiCourse from '@/api/modules/course.js';
import apiTestPaper from '@/api/modules/testPaper.js'
import {
correctJudgment,
numberToLetter,
examType
} from '@/utils/tools.js';
import {
formatDate,
formatSeconds
} from '@/utils/index.js';
import {
mapGetters
} from 'vuex';
export default {
// computed: {
// ...mapGetters(['userInfo']),
// },
data() {
return {
startButton: false,
examId: '', //考试的id
taskId: '', //考试任务的id
lastId: '', //最后一次提交的答卷
canExam: false, //能否参加考试
tipText: '', //提示信息
examStatus: 0, //0表无1表考试中2表已结束
btnText: '开始考试',
handleSaveTest: null, //对应timout定时任务的指向
getTypeName: examType,
viewUserPapereShow: false,
paperDetailData: [],
showPaperAnser: false,
userInfo: {},
showPaperAnser: false,
formatDate,
testPaper: {
id: '',
testName: '', //考试名称
testDuration: null, //考试时长
showAnalysis: false, //显示解析
showAnswer: false, //显示答案
times: null, //尝试次数 默认是0无限制
arrange: null, //试题排列 1试题乱序2选项乱序3全部乱序
scoringType: null, //评分方式 1最高一次2最后一次
passLine: null, //及格线
randomMode: false, //随机模式
randomCount: null, //随机数量
testType: null, //考试的类型* 1测试模式 2练习模式
publishTime: '', //发布时间
testRemark: '', //考试描述
testFront: '', //考前描述
testUp: '', //考后描述
entranceTime: '', //入场时间
paperId: '', //试卷的ID
paperContent: '', //试卷内容
},
aloneExamAnswerId: null, // 考试提交答案ID
testStatus: 1, // 1考前 2考中 3考后
reckonTimeer: null, // 计时器
updateAnswerTimeer: null, //定时提交答案
score: 0,
paperQuestion: [], //试卷内容经过排序后的数据,该数据就是试卷
studyId: '',
examId: '',
remainingTime: 0,
ctype: 10,
startTime: null,
toLetter: numberToLetter,
info: {},
stop: false,
paper: [],
total: 0,
curIndex: 0,
curItem: {},
timer: null,
scoreShow: false,
lastScore: 0,
timerValue: 0,
noAnswers: [], //有未答完的试题
tableData: [],
}
},
computed: {
startBtn() {
if (this.tableData.length - this.testPaper.times > 0) {
return false;
} else {
return true;
}
}
},
onLoad(options) {
this.examId = options.id;
this.$store.dispatch('GetUserInfo').then(rs => {
this.userInfo = rs;
});
if (this.examId) {
this.loadData();
}
},
methods: {
loadData() { //加载考试信息
apiTestPaper.getTestInfo(this.examId).then(res => {
if (res.status == 200) {
this.canExam = res.result.hasTask;
this.examStatus = res.result.examStatus;
this.testPaper = res.result.exam;
this.taskId = res.result.taskId;
if (res.result.hasLast && res.result.lastStatus < 9) {
this.lastId = res.result.lastId;
}
//转换testDuration为秒,此转化在点击开始考试时才应该执行
this.remainingTime = this.testPaper.testDuration * 60;
//加载考试记录
if (res.result.hasTask) {
if (res.result.hasLast) {
this.btnText = '重新考试';
this.testAnswers();
}
}
} else {
this.$message.error(res.message);
}
});
},
getHas() {
pushRecordApi.getHas(this.examId).then(res => {
if (res.status == 200) {
this.canExam = true;
} else if (res.status == 404) {
this.canExam = false;
}
})
},
testAnswers() {
apiTestPaper.myTestAnswers(this.examId).then(res => {
if (res.status == 200) {
this.tableData = res.result;
let len = res.result.length;
let times = this.testPaper.times ? this.testPaper.times : 0;
if (times != 0 && len >= times) {
//考试次数限制
this.tipText = '已达到允许考试次数上限';
}
} else {
this.$message.error('加载考试记录失败');
}
})
},
toBack() {
let pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
if (!prevPage) {
uni.switchTab({
url: '/pages/index/index'
})
} else {
uni.navigateBack();
}
},
formatSeconds(time) {
return formatSeconds(time);
},
chooseOption(opt, is) {
if (this.curItem.type == 1) {
this.curItem.optionList.forEach(op => {
op.checked = false;
})
opt.checked = true;
this.curItem.userAnswer = opt.id;
} else if (this.curItem.type == 2) {
if (opt.checked) {
opt.checked = false;
} else {
opt.checked = true;
}
if (this.curItem.userAnswer.indexOf(opt.id) > -1) {
this.curItem.userAnswer.forEach((item, index) => {
if (item === opt.id) {
this.curItem.userAnswer.splice(index, 1)
}
})
} else {
this.curItem.userAnswer.push(opt.id);
}
} else if (this.curItem.type == 3) {
opt.checked = is;
this.curItem.userAnswer = String(is);
}
},
startTest() {
this.curTestAnswer = {};
// 先禁用,防止重复提交
if (this.testPaper.entranceTime && this.testPaper.entranceTime !== '') {
let time = new Date();
let entranceTime = new Date(this.testPaper.entranceTime);
if (time < entranceTime) {
this.$message.warning('考试还未开始,请耐心等候!')
return;
}
}
this.startButton = true;
this.remainingTime = this.testPaper.testDuration * 60;
//提取考试试卷内容
let startParams = {
exam: this.examId,
task: this.taskId,
lastId: this.lastId
}
let $this = this;
apiTestPaper.getTestStart(startParams).then(rs => {
if (rs.status == 200) {
//处理试卷内容
this.paperQuestion = JSON.parse(rs.result.paper);
this.total=this.paperQuestion.length;//计算试题总数
this.curItem = this.paperQuestion[this.curIndex];
this.arrangeQuestion();
//进入考试阶段
this.testStatus = 2;
this.startReckon();
//60秒后执行保存处理
window.setTimeout(function() {
$this.saveUserTest();
}, 10000);
} else {
this.startButton = false;
this.$message.error('加载试卷内容失败:' + rs.message);
}
});
},
saveUserTest() { //保存用户的考试在点击开始考试1分钟后执行
if (this.handleSaveTest != null) {
window.clearTimeout(this.handleSaveTest);
}
if (this.testStatus != 2) {
//只有在第二阶段才会保存
return;
}
let that = this;
let data = {};
data.testId = this.testPaper.id;
data.testName = this.testPaper.testName;
data.testDuration = this.testPaper.testDuration;
data.useSecond = 10; //用时秒
data.arrange = this.testPaper.arrange;
data.passLine = this.testPaper.passLine;
data.ucode = this.userInfo.userNo;
data.paperJson = JSON.stringify(this.paperQuestion);
data.answerJson = this.getAnswer();
//计算总分
let total = 0;
this.paperQuestion.forEach(item => {
total += item.defaultScore;
});
data.totalScore = total;
//计算出当前的成绩
data.realScore = this.countScore();
apiTestPaper.start(data).then((res) => {
if (res.status == 200) {
that.aloneExamAnswerId = res.result.id;
that.curTestAnswer = res.result; //
that.startUpdateAnswer();
} else {
this.$message.error(res.message);
}
})
},
countScore() {
let total = 0;
// if (this.judge.length > 0) {
this.paperQuestion.forEach(item => {
if (item.type == 3) {
if (item.answer == 'true' && item.userAnswer) {
//console.log('添加判断')
total += item.defaultScore;
}
}
if (item.type == 1) {
item.optionList.forEach(opt => {
if (opt.id == item.userAnswer && opt.isAnswer) {
total += item.defaultScore;
}
})
}
if (item.type == 2) {
let tempAnswer = [];
item.optionList.forEach(opt => {
if (opt.isAnswer) {
tempAnswer.push(opt.id);
}
})
tempAnswer.sort(function(n1, n2) {
return n1 > n2 ? -1 : 1;
});
if (item.userAnswer) {
item.userAnswer.sort(function(n1, n2) {
return n1 > n2 ? -1 : 1;
});
}
let str1 = item.userAnswer.join();
let str2 = tempAnswer.join();
//console.log(str1,str2,'aaa');
if (str1 == str2) {
total += item.defaultScore;
}
}
});
// }
// if (this.single.length > 0) {
// this.single.forEach(item => {
// item.optionList.forEach(opt => {
// if (opt.id == item.userAnswer && opt.isAnswer) {
// total += item.defaultScore;
// }
// })
// //console.log(item,"single item");
// });
// }
// if (this.multiple.length > 0) {
// this.multiple.forEach(item => {
// let tempAnswer = [];
// item.optionList.forEach(opt => {
// if (opt.isAnswer) {
// tempAnswer.push(opt.id);
// }
// })
// tempAnswer.sort(function(n1, n2) {
// return n1 > n2 ? -1 : 1;
// });
// if (item.userAnswer) {
// item.userAnswer.sort(function(n1, n2) {
// return n1 > n2 ? -1 : 1;
// });
// }
// let str1 = item.userAnswer.join();
// let str2 = tempAnswer.join();
// //console.log(str1,str2,'aaa');
// if (str1 == str2) {
// total += item.defaultScore;
// }
// });
// }
return total;
},
// 开始提交答案
startUpdateAnswer: function() {
let that = this;
that.updateAnswerTimeer = setInterval(function() {
if (that.remainingTime <= 0) {
that.stopUpdateAnswer();
// 提示考试时间已到自动提交
that.$message({
type: 'success',
message: '考试时间已结束,自动提交试卷'
});
that.submit();
} else {
// 提交答案
that.updateAnswer();
}
}, 50000)
},
// 停止提交答案
stopUpdateAnswer: function() {
clearInterval(this.updateAnswerTimeer)
},
// 提交考卷
submit: function() {
let that = this;
that.submitButton = true;
let data = {};
data.id = this.aloneExamAnswerId;
data.json = this.getAnswer();
testPaperApi.submit(data).then((res) => {
if (res.status == 200) {
that.testStatus = 3;
this.score = res.result.score;
this.submitButton = false;
} else {
this.submitButton = false;
this.$message.error(res.message)
}
})
},
// 提交答案
updateAnswer: function() {
let data = {};
data.id = this.aloneExamAnswerId;
data.json = this.getAnswer();
testPaperApi.updateAnswer(data).then((res) => {
if (res.status == 200) {}
})
},
getAnswer: function() {
let answer = {};
if (this.paper.length > 0) {
this.paper.forEach(item => {
let judgeUserAnswer = "";
if (item.userAnswer && item.userAnswer != null) {
judgeUserAnswer = item.userAnswer + "";
}
answer[item.id] = judgeUserAnswer;
});
}
return JSON.stringify(answer);
},
changeTimer() {
if (this.timerValue == 0) {
window.clearInterval(this.timer);
//系统自动提交
this.stop = true;
} else {
this.timerValue--;
}
},
loadExamInfo() { //加载课程信息
this.curIndex = 0;
testPaperApi.getTestPaper(this.examId).then(res => {
if (res.status == 200) {
this.testPaper = res.result
this.testPaper.entranceTime = this.formatDate(res.result.entranceTime)
// 转换testDuration为秒
this.remainingTime = this.testPaper.testDuration * 60;
// this.buildQuestion()
let paper = [];
this.testPaper.paperContent.forEach(item => {
if (item.type < 900) {
if (item.type == 1) {
item.userAnswer = '';
} else if (item.type == 2) {
item.userAnswer = [];
} else {
item.userAnswer = ''
}
item.optionList.forEach(opt => {
opt.checked = false;
})
paper.push(item);
}
})
this.total = paper.length;
this.paper = paper;
this.curItem = paper[this.curIndex];
this.arrangeQuestion()
} else if (res.status == 404) {
//没有找到考试信息
} else {
//this.$message.error(res.message);
}
})
},
// 构建试题对象
// buildQuestion() {
// if (this.testPaper && this.testPaper.paperContent) {
// this.paperQuestion = this.testPaper.paperContent
// }
// },
// 试题排序
arrangeQuestion() {
if (this.testPaper.arrange) {
if (this.testPaper.arrange == 1 || this.testPaper.arrange == 3) {
this.randArray(this.paperQuestion, this.paperQuestion.length)
}
if (this.testPaper.arrange == 2 || this.testPaper.arrange == 3) {
this.paperQuestion.forEach((item) => {
if (item.optionList && item.optionList.length > 0) {
this.randArray(item.optionList, item.optionList.length)
}
})
}
}
},
// 数组乱序
randArray(m, len) {
m.sort(function() {
return Math.random() - 0.5
})
return m.slice(0, len)
},
// 开始计时
startReckon: function() {
let that = this;
that.reckonTimeer = setInterval(function() {
if (that.remainingTime <= 0) {
that.stopReckon();
} else {
that.remainingTime--;
}
}, 1000)
},
// 停止计时
stopReckon: function() {
clearInterval(this.reckonTimeer)
},
prevSub() {
if (this.curIndex == 0) {
return;
}
this.curIndex--;
if (this.curIndex > -1) {
this.curItem = this.paper[this.curIndex];
}
},
nextSub() {
if (this.curIndex >= (this.total - 1)) {
return;
}
this.curIndex++;
this.curItem = this.paper[this.curIndex];
},
countTest() { //计算课程的分数
let totalScore = 0;
this.paper.forEach(item => {
totalScore += item.score; //加到总分中
if (item.type != 102) {
item.userAnswer = '';
item.options.forEach(opt => {
if (opt.checked) {
item.userAnswer = opt.id;
}
});
} else {
item.userAnswer = [];
item.options.forEach(opt => {
if (opt.checked) {
item.userAnswer.push(opt.id);
}
});
}
});
let scoreNum = 0; //用户得分
let noAnswers = []; //是否都已答
this.paper.items.forEach((item, idx) => {
if (item.type != 102) {
if (item.userAnswer == '') {
noAnswers.push(idx + 1);
}
item.options.forEach(it => {
if (it.answer && item.userAnswer == it.id) {
scoreNum += item.score
}
})
} else {
if (item.userAnswer.length == 0) {
noAnswers.push(idx + 1);
}
let allRight = true;
item.options.forEach(it => {
if (it.answer && item.userAnswer.indexOf(it.id) == -1) {
allRight = false;
}
});
if (allRight) {
scoreNum += item.score;
}
}
})
this.noAnswers = noAnswers;
if (scoreNum === null) scoreNum = 0;
this.lastScore = scoreNum;
//转化成百分制显示
if (this.info.percentScore) {
this.lastScore = parseInt(scoreNum * 100 / totalScore);
}
return this.lastScore;
},
submitTest() {
let now = new Date();
let postData = {
studyId: this.studyId, //
studyItemId: this.studyItemId, //此值没有的,需要单独的查询了来
courseId: this.info.courseId,
contentId: this.info.contentId,
testId: this.info.id,
testName: '' + this.info.testName, //应该是课程的名称 + 内容的名称
testDuration: 0,
arrange: this.info.arrange,
passLine: this.info.passLine,
randomMode: this.info.randomMode,
score: this.lastScore, //分数需要计算,在检查是否填写完整性时就可以计算出分数
paperJson: JSON.stringify(this.paper), //原来是对象,这里要也要对象
//startTime:formatDate(this.startTime),//此时间需要格式化,格式化时间可以放在util中
//endTime:formatDate(now),
}
//计划考试的时长
var dateDiff = now.getTime() - this.startTime.getTime(); //时间差的毫秒数
var minutes = Math.floor(dateDiff / (1000)) //计算相差秒数分钟记录的太大经常为0
postData.testDuration = minutes;
apiCourseStudy.saveExam(postData).then(res => {
if (res.status == 200) {
this.studyItemId = res.result.studyItemId;
this.scoreShow = true;
} else {
this.$refs.messager.show({
message: res.message,
type: 'error'
});
}
})
},
// 人工提交
manualSubmit() {
let that = this;
uni.showModal({
title: '提示',
content: '您确定要提交试卷吗?',
success(res) {
if (res.confirm) {
that.stopUpdateAnswer();
that.submit();
}
}
});
// this.$confirm('您确定要提交试卷吗?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// that.stopUpdateAnswer();
// that.submit();
// }).catch(() => {});
},
// confirmFinish() {
// //这里应该是返回课程的页面
// if (this.ctype == 10) {
// uni.redirectTo({
// url: '/pages/resource/microDetail?id=' + this.info.courseId + '&exam=1'
// })
// } else if (this.ctype == 20) {
// uni.redirectTo({
// url: '/pages/study/onlineCourse?id=' + this.info.courseId
// })
// }
// },
getQuestionType(type) {
let name = '';
switch (type) {
case 1:
name = '单选';
break;
case 2:
name = '多选';
break;
case 3:
name = '判断';
break;
}
return name;
}
}
}
</script>
<style lang="scss" scoped>
.epage{
background-color: #FFFFFF;
}
.sta-can {
text-align: center;
color: red;
margin-top: 20px;
}
.pager-title {
height: 40px;
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20upx;
.title-name {
margin-left: 20upx;
font-weight: bold;
}
.titlt-btn {
display: flex;
.sub {
height: 20px;
border-radius: 40px;
margin-top: 10px;
margin-left: 20upx;
}
}
}
.score-box {
height: 40px;
text-align: center;
margin: 20px;
}
.sta-btn {
margin: 20upx 50upx;
}
.redText {
color: #ff0000;
}
.footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 80upx;
line-height: 80upx;
border-top: 1px solid #d9d9d9;
background-color: #FFFFFF;
}
.column {
color: #838383;
font-size: 40upx;
padding: 10px 20px;
}
.qitem {
padding: 10px 20px;
.qitem-info {
font-size: 1.2em;
padding: 10px 0px;
}
.qitem-opts {
padding: 5px 0px;
.qitem-opt {
display: flex;
margin-bottom: 10px;
padding: 20px 15px;
background-color: #FFFFFF;
border-radius: 6px;
}
.check {
color: #00aa00;
}
}
}
.bottom-btns {
padding: 10px 0px;
position: fixed;
width: 100%;
bottom: 0px;
.next {
width: 60%;
border-radius: 40px;
margin-bottom: 20px;
}
// display: flex;
// justify-content: space-around;
}
</style>