165 lines
4.2 KiB
Vue
165 lines
4.2 KiB
Vue
<template>
|
||
<div class="qbox" v-if="question.question_type != 3">
|
||
<div class="title">
|
||
{{ question.question_name }}（{{ question.question_type == 1 ? '单选' : question.question_type == 2 ? '多选' :question.question_type == 3 ? '问答' : '判断'}}）</div>
|
||
<div class="tips" v-if="question.question_type == 2">注:本题可选择多个选项!</div>
|
||
<div class="tips" v-else-if="question.question_type == 1">注:本题最多可选择1个选项!</div>
|
||
<div class="options" v-if="question.question_type == 1 || question.question_type == 2 || question.question_type == 4">
|
||
|
||
<div class="cell" v-for="(item, index) in question.case_item_question_option" :key="item.option_id" v-if="question.case_item_question_option">
|
||
<div class="title">{{ item.option_value }}</div>
|
||
<div class="progressbox">
|
||
<div class="progress">
|
||
<div class="inner" :style="{ width: 220 / 100 * item.proportion + 'px' }"></div>
|
||
</div>
|
||
<div class="numbox">
|
||
<div class="num">{{ item.select_num }}票</div>
|
||
<div class="precent">{{ item.proportion }}%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="options_con" v-if="question.question_type == 3">
|
||
<van-field readonly :autosize="{ minHeight: 120 }" v-model="question.question_answer" rows="2" autosize type="textarea"
|
||
placeholder="请输入内容" show-word-limit />
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
const emit = defineEmits(['checkAnswer']);
|
||
const zimu = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
|
||
const props = defineProps({
|
||
question: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
pageIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
questionIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.options_con {
|
||
border-radius: 5px;
|
||
border: .5px solid #efefef;
|
||
margin-top: 15px;
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
|
||
border-radius: 10px;
|
||
padding: 15px 0px;
|
||
padding-bottom: 8px;
|
||
|
||
:deep() .van-cell {
|
||
background: none;
|
||
}
|
||
|
||
:deep() .van-field__word-limit {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.qbox {
|
||
margin-bottom: 15px;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
line-height: 20px;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
}
|
||
|
||
.tips {
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
}
|
||
|
||
.cell {
|
||
border-bottom: 1px solid #efefef;
|
||
background: #fff;
|
||
margin-bottom: 12px;
|
||
|
||
.title {
|
||
margin: 0 10px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #1F1F1F;
|
||
}
|
||
|
||
.numbox {
|
||
display: flex;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
|
||
.precent {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.progressbox {
|
||
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 8px 10px 15px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
|
||
border-radius: 5px;
|
||
|
||
.progress {
|
||
margin-right: 10px;
|
||
width: 220px;
|
||
overflow: hidden;
|
||
height: 5px;
|
||
background: #EFF3FF;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.inner {
|
||
width: 80%;
|
||
height: 5px;
|
||
border-radius: 5px;
|
||
background: #43C9C3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 1px solid #43C9C3;
|
||
}
|
||
|
||
.cell:last-child {
|
||
margin-bottom: 0;
|
||
border: none;
|
||
}
|
||
|
||
.options {
|
||
margin-top: 15px;
|
||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
|
||
border-radius: 10px;
|
||
padding: 15px 0px;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.img-icon {
|
||
width: 19px;
|
||
height: 19px;
|
||
}
|
||
}
|
||
</style>
|