832 lines
23 KiB
Vue
832 lines
23 KiB
Vue
<template>
|
||
<view>
|
||
<div class="content">
|
||
<div class="top-content">
|
||
<div class="top-wrapper">
|
||
<div class="all" :class="{ isAllActive: isActive !== 1 }" @click="handleTab(1)">全部</div>
|
||
<div :class="{ isTopActive: isActive == 2 }" @click="handleTab(2)">正确（{{ rightCount }}）</div>
|
||
<div :class="{ isTopActive: isActive == 3 }" @click="handleTab(3)">错误（{{ wrongCount }}）</div>
|
||
<div :class="{ isTopActive: isActive == 4 }" @click="handleTab(4)">未答（{{ unAnsweredCount }}）</div>
|
||
<div>
|
||
第
|
||
<span style="color: #1989fa">{{ currentIndex + 1 }}</span>
|
||
/{{ list.length }}题
|
||
</div>
|
||
</div>
|
||
|
||
<div class="center-wrapper">
|
||
<div class="answer-wrapper">
|
||
<div
|
||
class="item-wrapper"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
v-show="item.isShow"
|
||
@click="handleQuestionNumber(item, index)"
|
||
>
|
||
<div
|
||
class="answer-item"
|
||
:class="{ currentBg: currentIndex == index, rightBg: item.isRight, wrongBg: item.isWrong }"
|
||
>
|
||
{{ index + 1 }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="unfold" @click="handleUnfold">
|
||
{{ isRotating ? '收起' : '展开' }}
|
||
<u-icon v-if="!this.isRotating" name="arrow-down-fill" size="10" />
|
||
<u-icon v-else name="arrow-up-fill" size="10" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 题目 -->
|
||
<div class="question-wrapper" v-for="(item, index) in list" :key="index" v-show="index == currentIndex">
|
||
<div class="question-type-wrapper">
|
||
<div class="line" />
|
||
<div class="question-type">
|
||
<div v-if="item.examType == 1">单选题（{{ item.questionScore }}分）</div>
|
||
<div v-if="item.examType == 2">多选题（{{ item.questionScore }}分）</div>
|
||
<div v-if="item.examType == 3">判断题（{{ item.questionScore }}分）</div>
|
||
</div>
|
||
</div>
|
||
<div class="question">{{ currentIndex + 1 }}. {{ item.examTopic }}</div>
|
||
|
||
<div class="options">
|
||
<div
|
||
class="option"
|
||
v-for="(option, optionIndex) in item.listOption"
|
||
:key="optionIndex"
|
||
:class="{ isRight: option.isRight, isError: option.isError }"
|
||
>
|
||
<div class="option-item">{{ option.optionIdent }}.</div>
|
||
<div class="option-content">
|
||
<div>{{ option.optionContent }}</div>
|
||
<u-icon v-if="option.isRight" name="/static/images/correct.png" />
|
||
<u-icon v-if="option.isError" name="/static/images/error.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="(item, index) in list" v-show="index == currentIndex" style="margin-top: 30px; font-size: 12px">
|
||
<div v-if="item.isRight" style="color: #48d66b">回答正确</div>
|
||
<div v-else-if="item.isWrong" style="color: #fa4f19">回答错误</div>
|
||
<div v-else-if="item.isUnAnswered" style="color: #656565">未选择</div>
|
||
|
||
<div class="select-wrapper">
|
||
<div class="select-item">
|
||
<div>正确选择</div>
|
||
<div v-if="item.examType == 1 || item.examType == 3" style="color: #48d66b">
|
||
{{ item.correctGrade || '' }}
|
||
</div>
|
||
<div v-else style="color: #48d66b" class="grade">
|
||
<div v-for="(grade, gradeIndex) in item.correctGrade.split('')" :key="gradeIndex">
|
||
{{ grade }}{{ gradeIndex + 1 == item.correctGrade.split('').length ? '' : ', ' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="select-item" v-show="!item.isUnAnswered">
|
||
<div>你的选择</div>
|
||
<div
|
||
v-if="item.examType == 1 || item.examType == 3"
|
||
:style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }"
|
||
>
|
||
{{ item.selectAnswer || '' }}
|
||
</div>
|
||
<div v-else :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }" class="grade">
|
||
<div v-if="item.selectAnswer">
|
||
<span v-for="(grade, gradeIndex) in item.selectAnswer.split('')" :key="gradeIndex">
|
||
{{ grade }}{{ gradeIndex + 1 == item.selectAnswer.split('').length ? '' : ', ' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analysis">
|
||
<u-icon name="/static/images/analysis.png" style="margin-right: 5px" />
|
||
解析
|
||
</div>
|
||
<div class="analysis-item">{{ item.examAnaly }}</div>
|
||
</div>
|
||
|
||
<!-- 底部按钮 -->
|
||
<div class="bottom-btn">
|
||
<div class="btn" v-show="currentIndex != 0">
|
||
<u-button size="small" shape="circle" text="上一题" @click="currentIndex--" />
|
||
</div>
|
||
<div class="btn" v-if="currentIndex !== list.length - 1">
|
||
<u-button type="primary" size="small" shape="circle" text="下一题" @click="currentIndex++" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getExamRecordAnswer } from '@/api/eduApp'
|
||
import config from '@/config'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
examId: '', // 考试id
|
||
recordId: '', // 考试记录id
|
||
isActive: 1,
|
||
isRotating: false,
|
||
currentIndex: 0,
|
||
// 正确
|
||
rightCount: 0,
|
||
// 错误
|
||
wrongCount: 0,
|
||
// 未答
|
||
unAnsweredCount: 0,
|
||
// 问题列表
|
||
questionList: [],
|
||
// questionList: [
|
||
// {
|
||
// type: 1,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// correctGrade: 'A',
|
||
// selectAnswer: 'B',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// correctGrade: ['B', 'D'],
|
||
// selectAnswer: ['B', 'C'],
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '对',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '错',
|
||
// value: 'B'
|
||
// }
|
||
// ],
|
||
// correctGrade: 'A',
|
||
// selectAnswer: 'A',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 1,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// correctGrade: 'A',
|
||
// userAnswer: 'A',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// correctGrade: ['B', 'D'],
|
||
// userAnswer: ['B', 'C'],
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// correctGrade: ['B', 'D'],
|
||
// userAnswer: ['B', 'D'],
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '对',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '错',
|
||
// value: 'B'
|
||
// }
|
||
// ],
|
||
// correctGrade: 'A',
|
||
// userAnswer: 'A',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 1,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// rightAnswer: 'A',
|
||
// userAnswer: 'B',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// rightAnswer: ['B', 'D'],
|
||
// userAnswer: ['B', 'C'],
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '对',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '错',
|
||
// value: 'B'
|
||
// }
|
||
// ],
|
||
// rightAnswer: 'A',
|
||
// userAnswer: 'A',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 1,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// rightAnswer: 'A',
|
||
// userAnswer: 'B',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 2,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '正常工作电压作用下的电气设备',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'B'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'C'
|
||
// },
|
||
// {
|
||
// label: '电气设备的绝缘电阻',
|
||
// value: 'D'
|
||
// }
|
||
// ],
|
||
// rightAnswer: ['B', 'D'],
|
||
// userAnswer: ['B', 'C'],
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '对',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '错',
|
||
// value: 'B'
|
||
// }
|
||
// ],
|
||
// rightAnswer: 'A',
|
||
// userAnswer: 'A',
|
||
// analysis: '解析'
|
||
// },
|
||
// {
|
||
// type: 3,
|
||
// question: '送配电线路架设工模拟考试',
|
||
// options: [
|
||
// {
|
||
// label: '对',
|
||
// value: 'A'
|
||
// },
|
||
// {
|
||
// label: '错',
|
||
// value: 'B'
|
||
// }
|
||
// ],
|
||
// correctGrade: 'A',
|
||
// userAnswer: '',
|
||
// analysis: '解析'
|
||
// }
|
||
// ],
|
||
// 正确列表
|
||
rightList: [],
|
||
// 错误列表
|
||
wrongList: [],
|
||
// 未答列表
|
||
unAnsweredList: [],
|
||
list: []
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
opt = JSON.parse(opt.params)
|
||
console.log('🚀 ~ onLoad ~ opt-结果详情:', opt)
|
||
this.examId = opt.examId
|
||
this.recordId = opt.recordId
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
getList() {
|
||
const params = {
|
||
examId: this.examId,
|
||
recordId: this.recordId
|
||
}
|
||
// const res = await getExamRecordAnswer(params)
|
||
// this.questionList = res.data.examPaperData
|
||
this.$verificationToken()
|
||
uni.request({
|
||
url: config.baseUrl + '/exam-student/studentExam/getExamRecordAnswer',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
Authorization: uni.getStorageSync('access_token')
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ getList ~ res:', res.data.examPaperData)
|
||
if (res.code != 200) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.questionList = res.data.examPaperData
|
||
this.list = this.questionList
|
||
this.list.forEach((item, index) => {
|
||
if (index < 7) {
|
||
item.isShow = true
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
})
|
||
console.log('🚀 ~ getList ~ res:', res)
|
||
this.questionList.forEach((item, index) => {
|
||
if (item.examType === 1 || item.examType === 3) {
|
||
if (!item.selectAnswer) {
|
||
this.unAnsweredCount++
|
||
item.isUnAnswered = true
|
||
// 添加正确背景色
|
||
item.listOption.forEach(option => {
|
||
option.isRight = option.optionIdent === item.correctGrade
|
||
})
|
||
} else {
|
||
if (item.selectAnswer == '对' || item.selectAnswer == '错') {
|
||
item.selectAnswer = item.selectAnswer === '对' ? 'A' : 'B'
|
||
}
|
||
if (item.correctGrade === item.selectAnswer) {
|
||
this.rightCount++
|
||
// 添加正确背景色
|
||
item.isRight = true
|
||
item.listOption.forEach(option => {
|
||
option.isRight = option.optionIdent === item.correctGrade
|
||
})
|
||
} else {
|
||
this.wrongCount++
|
||
// 添加错误背景色
|
||
item.isWrong = true
|
||
item.listOption.forEach(option => {
|
||
option.isError = option.optionIdent === item.selectAnswer
|
||
if (option.optionIdent === item.correctGrade) {
|
||
option.isRight = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
if (!item.selectAnswer) {
|
||
this.unAnsweredCount++
|
||
item.isUnAnswered = true
|
||
// 添加正确背景色
|
||
item.listOption.forEach(option => {
|
||
option.isRight = item.correctGrade.includes(option.optionIdent)
|
||
})
|
||
} else {
|
||
if (item.correctGrade.toString() === item.selectAnswer.toString()) {
|
||
this.rightCount++
|
||
// 添加正确背景色
|
||
item.isRight = true
|
||
} else {
|
||
this.wrongCount++
|
||
// 添加错误背景色
|
||
item.isWrong = true
|
||
}
|
||
item.listOption.forEach(option => {
|
||
if (item.correctGrade.includes(option.optionIdent)) {
|
||
option.isRight = true
|
||
}
|
||
if (item.selectAnswer.includes(option.optionIdent)) {
|
||
option.isError = true
|
||
}
|
||
if (option.isRight && option.isError) {
|
||
option.isError = false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
this.rightList = this.questionList.filter(item => item.isRight)
|
||
this.wrongList = this.questionList.filter(item => item.isWrong)
|
||
this.unAnsweredList = this.questionList.filter(item => item.isUnAnswered)
|
||
},
|
||
fail: err => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
handleTab(index) {
|
||
console.log('🚀 ~ handleTab ~ index:', index)
|
||
this.isActive = index
|
||
this.currentIndex = 0
|
||
if (index === 1) {
|
||
this.list = this.questionList
|
||
} else if (index === 2) {
|
||
this.list = this.rightList
|
||
} else if (index === 3) {
|
||
this.list = this.wrongList
|
||
} else if (index === 4) {
|
||
this.list = this.unAnsweredList
|
||
}
|
||
this.list.forEach((item, index) => {
|
||
if (index < 7) {
|
||
item.isShow = true
|
||
} else {
|
||
item.isShow = false
|
||
}
|
||
})
|
||
},
|
||
handleUnfold() {
|
||
this.isRotating = !this.isRotating
|
||
this.list.forEach((item, index) => {
|
||
if (index >= 7) {
|
||
item.isShow = this.isRotating
|
||
}
|
||
})
|
||
},
|
||
handleQuestionNumber(item, index) {
|
||
this.currentIndex = index
|
||
this.list.forEach(element => {
|
||
element.isActive = false
|
||
})
|
||
item.isActive = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
padding: 10px;
|
||
|
||
.top-content {
|
||
background: #fff;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.top-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: #333;
|
||
.isTopActive {
|
||
color: #1989fa;
|
||
}
|
||
.all {
|
||
box-sizing: border-box;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #1989fa;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
&.isAllActive {
|
||
background: #fff;
|
||
color: #333;
|
||
border: 1px solid #1989fa;
|
||
}
|
||
}
|
||
}
|
||
|
||
.center-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.unfold {
|
||
height: 50px;
|
||
line-height: 50px;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.answer-wrapper {
|
||
width: 86%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.item-wrapper {
|
||
padding: 5px 5px 0 0;
|
||
width: 12%;
|
||
height: 45px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.answer-item {
|
||
width: 33px;
|
||
height: 33px;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
background: #f4f9fe;
|
||
color: #333;
|
||
}
|
||
// 正确背景色
|
||
.rightBg {
|
||
background: #eaf8ed;
|
||
}
|
||
// 错误背景色
|
||
.wrongBg {
|
||
background: #fcefe9;
|
||
}
|
||
.currentBg {
|
||
background: #1989fa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.question-wrapper {
|
||
.question-type-wrapper {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.line {
|
||
width: 2px;
|
||
height: 11px;
|
||
background: #1989fa;
|
||
margin-right: 3px;
|
||
}
|
||
.question-type {
|
||
color: #8a8a8a;
|
||
}
|
||
}
|
||
|
||
.question {
|
||
font-weight: 800;
|
||
font-size: 15px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.options {
|
||
margin-top: 10px;
|
||
.option {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
background: #f4f9fe;
|
||
border-radius: 5px;
|
||
|
||
&.isRight {
|
||
background: #eaf8ed;
|
||
}
|
||
&.isError {
|
||
background: #fcefe9;
|
||
}
|
||
.option-item {
|
||
width: 33px;
|
||
height: 33px;
|
||
line-height: 33px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
.option-content {
|
||
width: calc(100% - 60px);
|
||
margin-left: 10px;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.select-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
.select-item {
|
||
width: 48%;
|
||
height: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #646464;
|
||
background: #edf2f7;
|
||
border-radius: 5px;
|
||
|
||
.grade {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.analysis {
|
||
margin: 10px 0;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
font-weight: 800;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
}
|
||
.analysis-item {
|
||
margin-bottom: 100px;
|
||
height: 80px;
|
||
background: #edf2f7;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
color: #656565;
|
||
overflow: auto;
|
||
}
|
||
|
||
.bottom-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
padding: 15px 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|