mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-09 10:56:48 +08:00
891 lines
27 KiB
Vue
891 lines
27 KiB
Vue
<template>
|
||
<div style=" background: #0078fc;height: 150px;width: 100%;position: absolute;top: 0;z-index:-9999;"></div>
|
||
<div class="surveydetail" style="padding: 30px">
|
||
<!-- 面包屑导航 -->
|
||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||
<div class="crumb">
|
||
<div>{{ pName }}</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div>{{ sName }}</div>
|
||
<div v-if="sName" style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div style="font-weight: 700; font-size: 16px">评估详情</div>
|
||
</div>
|
||
<div class="preNext">
|
||
<span @click="prevPage" v-if="hasPrev">
|
||
<button class="btn btn01"></button>
|
||
<span class="content" style="margin-left: 6px">上一个</span>
|
||
</span>
|
||
<span @click="nextPage" v-if="hasNext">
|
||
<span class="content" style="margin-left: 31px">下一个</span>
|
||
<button class="btn btn02" style="margin-left: 6px"></button>
|
||
</span>
|
||
</div>
|
||
<div class="return">
|
||
<div style="display: flex" @click="returnclick">
|
||
<el-button style="color:#0073FB"><img class="img2" style="margin-right:11px;cursor: pointer;"
|
||
src="../../assets/image/return.png"/>返回
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 面包屑导航 -->
|
||
<!-- 标题 -->
|
||
<div class="title">【评估】{{ data?.assessmentName }}</div>
|
||
<!-- 标题 -->
|
||
<!-- 基本信息 -->
|
||
<div class="bascinfo">
|
||
<div class="header_wrap" v-if="data?.projectInfoList&&data?.projectInfoList.length!=0&&type!=1">
|
||
<div class="header_wrap_item" v-if="level!=0">项目名称：{{ data?.projectInfoList[0].projectName }}</div>
|
||
<div class="header_wrap_item">开课名称：{{ data?.projectInfoList[0].courseName }}</div>
|
||
<div>培训讲师：{{ data?.projectInfoList.map(item => item.teacherName).join('，') }}</div>
|
||
</div>
|
||
<div>
|
||
<div class="question" v-for="(value, index) in questionList " :key="index"
|
||
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
|
||
<div v-if="value.questionType == '4'">
|
||
<div class="question" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
|
||
<div class="text">{{ value.assessmentScTitle }}</div>
|
||
<div class="answer">
|
||
<div class="answerL">{{value.minimumEvaluation?value.minimumEvaluation:'完全没用'}}</div>
|
||
<div class="answerC">
|
||
<div class="answerCitem"
|
||
v-for="(item, key) in orderArr(value.assessmentMinScore,value.assessmentMaxScore)"
|
||
:key="key"
|
||
:style="{
|
||
'margin-left': key === 0 ? '15px' : '10px',
|
||
background:
|
||
value.selectAnswer === item + 1
|
||
? 'rgba(86, 163, 249, 1)'
|
||
: 'rgba(86, 163, 249, 0)',
|
||
color:
|
||
value.selectAnswer === item + 1
|
||
? '#fff'
|
||
: 'rgba(86, 163, 249, 1)',
|
||
}"
|
||
@click="
|
||
() => {
|
||
if (data?.isSubmit) {
|
||
return;
|
||
}
|
||
value.selectAnswer = item + 1 ;
|
||
}
|
||
">
|
||
<div>{{ item + 1 }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="answerR">{{value.highestEvaluation?value.highestEvaluation:'非常有帮助/启发'}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="value.questionType == '1'">
|
||
<div class="question" style="margin-top: 41px">
|
||
<div class="text">
|
||
{{ value?.singleStemName }}
|
||
</div>
|
||
<!-- 需要遍历的选项 -->
|
||
<div style="display:flex;justify-content:flex-start;align-items:flex-start;margin-top: 24px;flex-direction: column;">
|
||
<div
|
||
v-for="(values, indexs) in value.assessmentSingleChoiceVoList"
|
||
:key="indexs"
|
||
style="display: flex; align-items: center;cursor: pointer;flex-direction: column;"
|
||
@click="
|
||
() => {
|
||
if (data?.isSubmit) {
|
||
return;
|
||
}
|
||
value.assessmentSingleChoiceVoList.forEach((e) => e.select = false);
|
||
values.select = true;
|
||
}
|
||
">
|
||
<div style="display:flex">
|
||
<img style="width: 19px; height: 18px; cursor: pointer"
|
||
:src="values.select ? checkbox : checkbox2"/>
|
||
<div class="people" style="width: 800px;">{{ values.singleOptionName }}</div>
|
||
</div>
|
||
<div style="display: flex;justify-content:flex-start;align-items:center;width: 100%;">
|
||
<img v-if="values.singleOptionPictureAddress"
|
||
style="width: 140px; height: 140px; border-radius: 8px;margin-left: 30px;margin-top: 12px;margin-bottom: 12px;"
|
||
:src="values.singleOptionPictureAddress ? fielPath + values.singleOptionPictureAddress : ''"/>
|
||
<div v-else style="width: 140px;height: 140px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="value.questionType == '2'">
|
||
<div class="question" style="margin-top: 41px">
|
||
<div class="text">
|
||
{{ value?.multipleStemName }}
|
||
</div>
|
||
<!-- 需要遍历的选项 -->
|
||
<div style="display:flex;justify-content:flex-start;align-items:flex-start;margin-top: 24px;flex-direction: column;">
|
||
<div
|
||
v-for="(values, indexs) in value.multipleChoiceVoList"
|
||
:key="indexs"
|
||
style="display: flex; align-items: center;cursor: pointer;flex-direction: column;"
|
||
@click="
|
||
() => {
|
||
if (data?.isSubmit) {
|
||
return;
|
||
}
|
||
values.select = !values.select;
|
||
}">
|
||
<div style="display:flex">
|
||
<img style="width: 19px; height: 18px; cursor: pointer"
|
||
:src="values.select ? checkbox : checkbox2"/>
|
||
<div class="people" style="width:800px;">{{ values.multipleOptionName }}</div>
|
||
</div>
|
||
<img v-if="values.multipleOptionPictureAddress"
|
||
style="width: 140px; height: 140px; border-radius: 8px;margin-left: 130px;margin-top: 12px;"
|
||
:src="values.multipleOptionPictureAddress ? fielPath + values.multipleOptionPictureAddress : ''"/>
|
||
<div v-else style="width: 140px;height: 140px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="value.questionType == '3'">
|
||
<div class="question" style="margin-top: 41px">
|
||
<div class="text">{{ value.assessmentQaTitle }}</div>
|
||
<div style="width: 713px; margin-top: 31px; position: relative">
|
||
<el-input v-model="value.content" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" maxlength="200"
|
||
type="textarea" :readonly="!!data?.isSubmit"/>
|
||
<div class="words">{{ value.content?.length || 0 }}/200</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: center" v-if="
|
||
data?.essayQuestionVoList?.length ||
|
||
data?.multipleStemVoList?.length ||
|
||
data?.scoringQuestionVoList?.length ||
|
||
data?.singleStemVoList?.length
|
||
">
|
||
<div v-if="projectStatus && projectEndTime">
|
||
<div v-if="projectStatus !=='3' && new Date(projectEndTime).getTime() > new Date().getTime()" class="submit"
|
||
@click="emptyValuePromp" :style="{ background: data?.isSubmit ? '#999' : '#2478ff' }">
|
||
提交
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="submit" @click="emptyValuePromp" :style="{ background: data?.isSubmit ? '#999' : '#2478ff' }">
|
||
提交
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 基本信息 -->
|
||
</div>
|
||
<el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true">
|
||
<div style="text-align: center;font-size:16px;"> <span style="color:black">
|
||
您已完成评估
|
||
</span></div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancel"
|
||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||
@click="centerDialogVisible = false">取消</el-button>
|
||
<el-button class="back"
|
||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||
type="primary" @click="returnclick">
|
||
返回
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 提示用户有未填选项 -->
|
||
<el-dialog v-model="isEmptyValue" title="" width="20%" center :show-close="false" :align-center="true">
|
||
<div style="text-align: center;font-size:16px;"> <span style="color:black">
|
||
您还有未完成的评估题目，请继续完成！
|
||
</span></div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancel"
|
||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||
@click="isEmptyValue = false">取消</el-button>
|
||
<el-button class="back"
|
||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||
type="primary" @click="isEmptyValue = false">
|
||
确定
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 可编辑名称 -->
|
||
<el-dialog @open="onDialogOpen" v-model="bg_name" title="" width="20%" center :show-close="false" :align-center="true">
|
||
<div style="text-align: center;font-size:16px;">
|
||
<el-input ref="inputElement" @focus="focusInput" v-model="nameInput" placeholder="请输入内容"></el-input>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button class="cancel"
|
||
style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
|
||
@click="of_name">取消</el-button>
|
||
<el-button class="back"
|
||
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
|
||
type="primary" @click="nameUpdata">
|
||
确定
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
</template>
|
||
<script setup>
|
||
import checkbox from "@/assets/image/checkbox.png";
|
||
import checkbox2 from "@/assets/image/checkbox2.png";
|
||
import {useRoute, useRouter} from "vue-router/dist/vue-router";
|
||
import {request, usePage, useRequest} from "@/api/request";
|
||
import {ASSESSMENT_QUERY, ASSESSMENT_SUBMIT,TASK_NO_COMMIT} from "@/api/api";
|
||
import {ElMessage} from "element-plus";
|
||
import {ref, watch,onMounted,nextTick } from "vue";
|
||
import dayjs from "dayjs";
|
||
import {useTaskPage} from "@/api/useCommon";
|
||
|
||
const {
|
||
query: { courseId, id: taskId, infoId, type, pName, sName, chapterOrStageId, projectStatus, projectEndTime,isSubmitTrue,level },
|
||
} = useRoute();
|
||
const router = useRouter();
|
||
const returnclick = () => {
|
||
router.back();
|
||
};
|
||
const { nextPage, prevPage, hasPrev, hasNext } = type == 3 || type == 4 ? "" : useTaskPage();
|
||
const fielPath = ref(import.meta.env.VITE_FILE_PATH);
|
||
const { data } = useRequest(ASSESSMENT_QUERY(courseId), {
|
||
id: courseId,
|
||
type,
|
||
chapterOrStageId,
|
||
targetId: infoId ? infoId : 0
|
||
});
|
||
console.log(data,'data')
|
||
// 答题时间
|
||
const answerTime = dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
||
|
||
console.log("录入首次进入页面时间", answerTime);
|
||
|
||
// 数组去空对象
|
||
function formateArr(datas) {
|
||
let allArr = [];
|
||
for (let i = 0; i < datas.length; i++) {
|
||
for (let j = 0; j < datas[i].length; j++) {
|
||
allArr.push(datas[i][j]);
|
||
}
|
||
}
|
||
let newarr = allArr.sort((a, b) => {
|
||
return a.orderNumber - b.orderNumber;
|
||
});
|
||
return newarr;
|
||
}
|
||
|
||
const questionList = ref([]);
|
||
|
||
watch(data, ()=> {
|
||
if (data.value.id) {
|
||
questionList.value = formateArr([data.value.essayQuestionVoList, data.value.multipleStemVoList, data.value.scoringQuestionVoList, data.value.singleStemVoList]);
|
||
}
|
||
});
|
||
|
||
// 生成数组
|
||
function orderArr(a, b) {
|
||
let arrs = [];
|
||
for (let i = 0; i < 10; i++) {
|
||
if ((i + 1) >= a && (i + 1) <= b) {
|
||
arrs.push(i);
|
||
}
|
||
}
|
||
return arrs;
|
||
}
|
||
onMounted(() => {
|
||
if(isSubmitTrue==true){
|
||
open();
|
||
return
|
||
}
|
||
useRequest(ASSESSMENT_QUERY(courseId), {
|
||
id: courseId,
|
||
type,
|
||
chapterOrStageId,
|
||
targetId: infoId ? infoId : 0
|
||
},(res)=>{
|
||
useRequest(TASK_NO_COMMIT, {
|
||
targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
|
||
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, // 关卡或者阶段Id 关卡Id不允许为空
|
||
assessmentId: courseId,
|
||
taskId: taskId ? taskId : 0,
|
||
type,
|
||
result: JSON.stringify(data.value),
|
||
beginTime: answerTime
|
||
})
|
||
if (res.data.isSubmit) {
|
||
open();
|
||
}
|
||
})
|
||
});
|
||
const centerDialogVisible = ref(false);
|
||
const open = () => {
|
||
centerDialogVisible.value = true;
|
||
};
|
||
const isEmptyValue = ref(false);
|
||
function emptyValuePromp() {
|
||
if (data.value.isSubmit) {
|
||
return;
|
||
}
|
||
if (data.value.singleStemVoList?.some(t=>t?.assessmentSingleChoiceVoList?.every(s => !s?.select))) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的单选评估题干");
|
||
}
|
||
if (data.value.multipleStemVoList?.some(t=>t?.multipleChoiceVoList?.every(s => !s?.select))) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的多选评估题干");
|
||
}
|
||
if (data.value.scoringQuestionVoList?.some(s => !s?.selectAnswer)) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的评分评估题干");
|
||
}
|
||
if (data.value.essayQuestionVoList?.some(s => !s?.content)) {
|
||
isEmptyValue.value = true;
|
||
// return ElMessage.warning("您有未填写的简答评估题干");
|
||
}
|
||
if(!isEmptyValue.value){
|
||
submit()
|
||
}
|
||
}
|
||
|
||
function submit() {
|
||
console.log("录入首次进入页面时间", answerTime);
|
||
data.value.isSubmit = !data.value.isSubmit;
|
||
request(ASSESSMENT_SUBMIT, {
|
||
targetId: infoId ? infoId : 0, // 项目、路径图或开课的Id
|
||
chapterOrStageId: chapterOrStageId ? chapterOrStageId : 0, // 关卡或者阶段Id 关卡Id不允许为空
|
||
assessmentId: courseId,
|
||
taskId: taskId ? taskId : 0,
|
||
type,
|
||
result: JSON.stringify(data.value),
|
||
beginTime: answerTime
|
||
}).then(() => {
|
||
isEmptyValue.value = false;
|
||
open();
|
||
});
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.selectonlineface{
|
||
z-index: 999;
|
||
width: 679px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -100%;
|
||
transform: translate(-50%, -50%);
|
||
.bg_headers {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 40px;
|
||
background: linear-gradient(
|
||
rgba(78, 166, 255, 0.2) 0%,
|
||
rgba(78, 166, 255, 0) 100%
|
||
);
|
||
}
|
||
.bg_main {
|
||
width: 100%;
|
||
position: relative;
|
||
.bg_main_header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20px;
|
||
padding-left: 26px;
|
||
font-size: 16px;
|
||
.bg_main_header_icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
// background-image: url(@/assets/images/evaluation/uploads.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg_main_header_close {
|
||
position: absolute;
|
||
right: 42px;
|
||
cursor: pointer;
|
||
width: 20px;
|
||
height: 20px;
|
||
// background-image: url(@/assets/images/coursewareManage/close.png);
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.text_color{
|
||
color:#d9d9d9;
|
||
}
|
||
.bg_body {
|
||
width: 80%;
|
||
margin: 3px auto;
|
||
|
||
.bg_body_bt {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
margin: 14px auto;
|
||
|
||
.bg_body_bttext {
|
||
width: 110px;
|
||
display: flex;
|
||
justify-content: end;
|
||
margin-right: 20px;
|
||
.bg_body_btimg{
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-top: -3px;
|
||
margin-right: 6px;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.mbl_items12 {
|
||
// width: 300px;
|
||
margin-left: 128px;
|
||
|
||
.i12_box1 {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 17px 0px 17px 21px;
|
||
border: 1px solid #eff4fc;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
.file_img {
|
||
width: 27px;
|
||
height: 32px;
|
||
// background-image: url(@/assets/images/coursewareManage/imgs.png);
|
||
margin-right: 22px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.file_detail {
|
||
width: 250px;
|
||
margin-right: 21px;
|
||
|
||
.file_updata {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.updatabox {
|
||
position: relative;
|
||
width: 230px;
|
||
height: 5px;
|
||
background-color: rgba(192, 192, 192, 0.25);
|
||
border-radius: 3px;
|
||
|
||
.updatacolor {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background-color: #57c887;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor2 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 80%;
|
||
height: 5px;
|
||
background-color: #ff7474;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updatacolor3 {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 60%;
|
||
height: 5px;
|
||
background-color: #4ea6ff;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.updataxq {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #57c887;
|
||
}
|
||
|
||
.updataxq2 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #ff7474;
|
||
}
|
||
|
||
.updataxq3 {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: -30px;
|
||
color: #4ea6ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.file_operation {
|
||
display: flex;
|
||
|
||
.fobox {
|
||
margin-right: 5px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bg_body_input {
|
||
flex: 1;
|
||
position: relative;
|
||
.ant-upload-picture-card-wrapper{
|
||
width: 200px;
|
||
margin-right: 18px;
|
||
}
|
||
.i_upload_img {
|
||
width: 200px;
|
||
height: 112px;
|
||
}
|
||
::v-deep .ant-upload.ant-upload-select-picture-card{
|
||
width: 200px;
|
||
height: 112px;
|
||
}
|
||
.i_upload {
|
||
width: 200px;
|
||
height: 112px;
|
||
text-align: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.addimg {
|
||
position: relative;
|
||
|
||
.heng {
|
||
position: absolute;
|
||
top: 59px;
|
||
left: 71px;
|
||
width: 60px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
|
||
.shu {
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 100px;
|
||
height: 60px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
}
|
||
}
|
||
.upload_box{
|
||
border: 1px solid #d9d9d9;
|
||
padding: 2px 5px;
|
||
background-color: #d9d9d9;
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
}
|
||
.error-message{
|
||
color: red;
|
||
font-size: 11px;
|
||
margin-top: 2px;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
.bg_footer {
|
||
width: 100%;
|
||
margin-left: 174px;
|
||
margin-top: 25px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
|
||
.btn {
|
||
width: 100px;
|
||
height: 40px;
|
||
background: rgba(64, 158, 255, 0);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
|
||
.btn5 {
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
color: #4ea6ff;
|
||
}
|
||
|
||
.btn6 {
|
||
background-color: #4ea6ff;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.headers{
|
||
margin-left: 38px;
|
||
margin-right: 38px;
|
||
margin-top: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.btn{
|
||
display: flex;
|
||
}
|
||
.headers_item{
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
.headers_item_text{
|
||
margin-right: 15px;
|
||
}
|
||
.headers_item_btn {
|
||
padding: 0px 26px 0px 26px;
|
||
height: 38px;
|
||
background: #4ea6ff;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(64, 158, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 14px;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
|
||
.search {
|
||
background-size: 100%;
|
||
}
|
||
|
||
.btnText {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.btn1 {
|
||
.search {
|
||
width: 15px;
|
||
height: 17px;
|
||
// background-image: url("../../assets/images/courseManage/search0.png");
|
||
}
|
||
}
|
||
.btn2 {
|
||
.search {
|
||
width: 16px;
|
||
height: 18px;
|
||
// background-image: url("../../assets/images/courseManage/reset0.png");
|
||
}
|
||
}
|
||
::v-deep .ant-select {
|
||
border-radius: 5px;
|
||
width: 100%;
|
||
height: 40px;
|
||
.ant-select-selector {
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
height: 40px;
|
||
}
|
||
.ant-select-selection-placeholder{
|
||
line-height: 40px;
|
||
}
|
||
.ant-select-selection-item{
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.preNext {
|
||
position: absolute;
|
||
right: 0px;
|
||
|
||
.content {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
width: 43px;
|
||
height: 14px;
|
||
display: inline-block;
|
||
position: relative;
|
||
top: -6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn {
|
||
width: 23px;
|
||
height: 23px;
|
||
border-radius: 50%;
|
||
border: 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn01 {
|
||
background-image: url("../../assets/image/prev.png");
|
||
}
|
||
|
||
.btn02 {
|
||
background-image: url("../../assets/image/next.png");
|
||
}
|
||
}
|
||
|
||
.surveydetail {
|
||
.crumb {
|
||
color: #fff;
|
||
display: flex;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.return {
|
||
position: absolute;
|
||
right: 10%;
|
||
|
||
.text {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.prevnext {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
|
||
.prev {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
margin-top: 17px;
|
||
margin-left: -11px;
|
||
}
|
||
|
||
.bascinfo {
|
||
width: 100%;
|
||
min-height: 1032px;
|
||
margin-top: 24px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.header_wrap{
|
||
margin: 10px 0 0 0;
|
||
padding: 5px 0 5px 10px;
|
||
background: #fff;
|
||
margin-left: -680px;
|
||
.header_wrap_item{
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
.question .text {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
}
|
||
|
||
.question .answer {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #56a3f9;
|
||
}
|
||
|
||
.question .answer .answerC {
|
||
width: 540px;
|
||
height: 73px;
|
||
border: 1px solid #d7e5fd;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 11px;
|
||
margin-right: 11px;
|
||
|
||
// justify-content: center;
|
||
.answerCitem {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid #56a3f9;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.question .people {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.question .words {
|
||
position: absolute;
|
||
right: 15px;
|
||
bottom: 5px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
}
|
||
|
||
.question .el-textarea__inner {
|
||
border-radius: 8px;
|
||
background-color: rgba(245, 246, 247, 1);
|
||
}
|
||
|
||
.submit {
|
||
width: 126px;
|
||
height: 46px;
|
||
background: #2478ff;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
margin-top: 39px;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|