Merge branch 'develop' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-stu into develop

This commit is contained in:
zhangyc
2022-12-23 19:59:07 +08:00
15 changed files with 2325 additions and 2387 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View File

@@ -0,0 +1,82 @@
<template>
<div class="pathDetail" v-if="visiable" :style="{background:`url('${back}') no-repeat`}">
<div v-for="(item,i) in detail.chapterDtoList" :key="i" class="cha"
:style="{top:`${imgAttr.positions[i]?.top - (current===i?10:0)}px`,left:`${imgAttr.positions[i]?.left - (current===i?10:0)}px`}">
<div @click="toDetail(i)"
:style="{background: `url('${current===i?currentBack:nameBack}')`,width:`${current===i?278:245}px`,height:`${current===i?120:105}px`,textAlign:'center',lineHeight:'75px',color:'#FFF'}">
{{ item.name }}
</div>
</div>
</div>
</template>
<script setup>
import {computed, defineProps, ref, watch} from "vue";
import back from '@/assets/image/pathdetails/路径图背景线.png'
import nameBack from '@/assets/image/pathdetails/组 23@2x.png'
import currentBack from '@/assets/image/pathdetails/组 23(1).png'
import {useRouter} from "vue-router/dist/vue-router";
const props = defineProps({
value: String,
img: String,
detail: {
type: Object,
default: {}
}
})
const router = useRouter();
const visiable = ref(true)
const imageAttrs = {
'路径图背景-1671015331292.png': {
width: 1437,
height: 594,
positions: [
{left: -72, top: 508},
{left: 147, top: 356},
{left: 689, top: 263},
{left: 617, top: 69},
{left: 1047, top: 42},
]
}
}
const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId))
function show() {
visiable.value = true
}
function toDetail(i) {
if (current.value !== i) {
return
}
import.meta.env.MODE === "development"
? router.push({
path: "/pathdetails",
query: {routerId: props.detail.routerId, routerName: props.detail.routerName},
})
: window.open(
`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
`routerId=${props.detail.routerId}&routerName=${props.detail.routerName}`
)}`
);
}
function close() {
visiable.value = false
}
</script>
<style lang="scss">
.pathDetail {
width: 100%;
height: 1011px;
position: relative;
}
.cha {
position: absolute;
cursor: pointer;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -14,13 +14,11 @@
<span class="content" style="margin-left: 31px">下一个</span> <span class="content" style="margin-left: 31px">下一个</span>
<button class="btn btn02" style="margin-left: 6px"></button> <button class="btn btn02" style="margin-left: 6px"></button>
</div>--> </div>-->
<div class="return">
<div class="return">
<div style="display: flex" @click="returnclick"> <div style="display: flex" @click="returnclick">
<img class="img2" style="margin-right: 22px;cursor: pointer;" src="../../assets/image/return.png" /> <el-button style="color:#0073FB"> <img class="img2" style="margin-right:11px;cursor: pointer;" src="../../assets/image/return.png" />返回</el-button>
<div style="cursor: pointer;" class="text">返回</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="debateTitle" style="color: #fff"> <div class="debateTitle" style="color: #fff">

File diff suppressed because it is too large Load Diff

View File

@@ -2,7 +2,7 @@
<div class="pathdetails" style="padding: 30px"> <div class="pathdetails" style="padding: 30px">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="crumb"> <div class="crumb">
<div>{{data.name}}</div> <div>{{ data.name }}</div>
<div style="margin-left: 6px; margin-right: 6px">/</div> <div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">项目详情</div> <div style="font-weight: 700">项目详情</div>
@@ -14,12 +14,12 @@
</div> </div>
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="pdname"> <div class="pdname">
{{ userInfo.bandDesc }} {{ userInfo.bandDesc }}
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介 <span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span> <span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
</span> </span>
</div> </div>
<!-- 详细信息 --> <!-- 详细信息 -->
<div class="detailinfo"> <div class="detailinfo">
<div class="detailL"> <div class="detailL">
@@ -115,7 +115,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程公告" name="first"> <el-tab-pane label="课程公告" name="first">
<div class="notice"> <div class="notice">
{{ data.remark || "暂无公告" }} {{ data.notice || "暂无公告" }}
</div> </div>
</el-tab-pane> </el-tab-pane>
<!-- <!--
@@ -237,17 +237,13 @@
</div> </div>
<!-- 详细信息 --> <!-- 详细信息 -->
<!-- 弹框提示信息 --> <!-- 弹框提示信息 -->
<el-dialog <el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;" style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px"> width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div> <div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
<span slot="footer" style="display:inline-block;margin-top:60px;"> <span slot="footer" style="display:inline-block;margin-top:60px;">
<el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button> <el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button>
<el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button> <el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@@ -374,18 +370,18 @@ const dialogVisibleTip = ref('该任务无法学习,请联系管理员进行
// } // }
function introductionPro() { function introductionPro() {
dialogVisibleTip.value =data.value.remark; dialogVisibleTip.value = data.value.remark;
dialogVisible.value = true; dialogVisible.value = true;
} }
function toFinish(d, sName, chapterId) { function toFinish(d, sName, chapterOrStageId) {
console.log("dddddd", d, sName); console.log("dddddd", d, sName, chapterOrStageId);
// 作业过期判断 // 作业过期判断
if (d.type == 4) { if (d.type == 4) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前作业已结束'; dialogVisibleTip.value = '当前作业已结束';
dialogVisible.value = true; dialogVisible.value = true;
// ElMessage.error("当前作业已结束") // ElMessage.error("当前作业已结束")
return return
@@ -396,7 +392,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前直播已结束'; dialogVisibleTip.value = '当前直播已结束';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -405,7 +401,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 5) { if (d.type == 5) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。") // ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!'; dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -414,7 +410,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 11) { if (d.type == 11) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。") // ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!'; dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -424,7 +420,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime(); let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
if (date1 < date2) { if (date1 < date2) {
dialogVisibleTip.value ='当前活动已结束'; dialogVisibleTip.value = '当前活动已结束';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -433,7 +429,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 1) { if (d.type == 1) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。") // ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!'; dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -442,7 +438,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 2) { if (d.type == 2) {
if (d.taskStatus == 1 || d.taskStatus == 2) { if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习,请联系管理员进行替换。") // ElMessage.error("该任务无法学习,请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习,请联系管理员进行替换!'; dialogVisibleTip.value = '该任务无法学习,请联系管理员进行替换!';
dialogVisible.value = true; dialogVisible.value = true;
return return
} }
@@ -475,6 +471,7 @@ function toFinish(d, sName, chapterId) {
courseId: d.courseId, courseId: d.courseId,
pName: data.value.name, pName: data.value.name,
sName, sName,
chapterOrStageId
}, },
}); });
} else if (typeof types.value.path[d.type] === "function") { } else if (typeof types.value.path[d.type] === "function") {
@@ -491,21 +488,23 @@ function whiteTypes(type) {
.el-dialog__header { .el-dialog__header {
display: none; display: none;
} }
.crumb { .crumb {
color: #fff; color: #fff;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;
.text { .text {
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
} }
} }

View File

@@ -1,79 +1,80 @@
<template> <template>
<div class="learnpath"> <div class="learnpath">
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<div class="titleL"> <div class="titleL">
<div @click="returnfun" class="text">学习路径图</div> <div @click="returnfun" class="text">学习路径图</div>
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName"> <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" /> <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
<div style="margin-top: 1px">{{ userInfo.jobName }}</div> <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
</div> </div>
<div class="info" v-if="userInfo.bandDesc"> <div class="info" v-if="userInfo.bandDesc">
<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" /> <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div> <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
</div> </div>
</div> </div>
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }"> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">--> <!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
<!-- <div>--> <!-- <div>-->
<!-- <div class="finish">--> <!-- <div class="finish">-->
<!-- <img--> <!-- <img-->
<!-- src="../../assets/image/circle.png"--> <!-- src="../../assets/image/circle.png"-->
<!-- style="width: 20px; height: 20px"--> <!-- style="width: 20px; height: 20px"-->
<!-- />--> <!-- />-->
<!-- <div class="text">未完成</div>--> <!-- <div class="text">未完成</div>-->
<!-- <div class="box"></div>--> <!-- <div class="box"></div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div--> <!-- <div-->
<!-- v-for="(value, index) in unCompleteTaskList"--> <!-- v-for="(value, index) in unCompleteTaskList"-->
<!-- :key="index"--> <!-- :key="index"-->
<!-- class="tasks"--> <!-- class="tasks"-->
<!-- :style="{--> <!-- :style="{-->
<!-- 'border-bottom':--> <!-- 'border-bottom':-->
<!-- index === unCompleteTaskList.length - 1--> <!-- index === unCompleteTaskList.length - 1-->
<!-- ? null--> <!-- ? null-->
<!-- : '1px solid rgba(229, 228, 228, 1)',--> <!-- : '1px solid rgba(229, 228, 228, 1)',-->
<!-- }"--> <!-- }"-->
<!-- >--> <!-- >-->
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">--> <!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
<!-- {{ value.name }}--> <!-- {{ value.name }}-->
<!-- </div>--> <!-- </div>-->
<!-- <img--> <!-- <img-->
<!-- style="width: 20px; height: 20px"--> <!-- style="width: 20px; height: 20px"-->
<!-- src="../../assets/image/go.png"--> <!-- src="../../assets/image/go.png"-->
<!-- @click="toUnTask(chapterId)"--> <!-- @click="toUnTask(chapterId)"-->
<!-- />--> <!-- />-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <template #reference>--> <!-- <template #reference>-->
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情--> <!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
<!-- <div class="titleR">进入未完成任务</div>--> <!-- <div class="titleR">进入未完成任务</div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-popover>--> <!-- </el-popover>-->
</div> </div>
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun"> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
返回列表 返回列表
</div> </div>
</div> </div>
<!-- 路径列表--> <!-- 路径列表-->
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head"> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div style="min-width: 770px; width: 100%"> <div style="min-width: 770px; width: 100%">
<el-table :data="data" style="width: 100%" @row-click="gofun"> <el-table :data="data" style="width: 100%" @row-click="gofun">
<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255"> <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
<img :src="scope.row.picUrl" style="width: 230px; height: 155px" /> <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="name" label="路径名称" /> <el-table-column align="center" prop="name" label="路径名称"/>
<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope"> <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
<el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover" :content="scope.row.remark"> <el-popover placement="bottom-start" :width="400" title="路径介绍" trigger="hover"
<template #reference> :content="scope.row.remark">
<div>{{ scope.row.remark }}</div> <template #reference>
</template> <div>{{ scope.row.remark }}</div>
</el-popover> </template>
</el-table-column> </el-popover>
</el-table-column>
<el-table-column align="center" prop="organizationName" label="归属组织" /> <el-table-column align="center" prop="organizationName" label="归属组织"/>
<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态"> <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
<img :src=" <img :src="
scope.row.taskStatus === 1 scope.row.taskStatus === 1
? ongoing ? ongoing
: scope.row.taskStatus === 2 : scope.row.taskStatus === 2
@@ -81,243 +82,220 @@
: scope.row.taskStatus === 0 : scope.row.taskStatus === 0
? nostarted ? nostarted
: null : null
" style="width: 99px; height: 99px" /> " style="width: 99px; height: 99px"/>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"--> <!-- 路径列表-->
<!-- 路径列表--> <!-- 路径详情图 -->
<!-- 路径详情图 --> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail"> <PathDetailImage img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :detail="detail"></PathDetailImage>
<div v-for="(item, i) in detail?.rows" :key="i"> </div>
<img :src="useImage(`222_0${i + 2}.png`)" /> <!-- 路径详情图 -->
</div> </div>
<!-- <div class="modal"--> </div>
<!-- style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
<!-- </div>-->
</div>
<!-- 路径详情图 -->
</div>
</div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue"; import {computed, ref} from "vue";
import nostarted from "../../assets/image/nostarted.png"; import nostarted from "../../assets/image/nostarted.png";
import completed from "../../assets/image/completed.png"; import completed from "../../assets/image/completed.png";
import ongoing from "../../assets/image/ongoing.png"; import ongoing from "../../assets/image/ongoing.png";
import { boeRequest, request, usePage, useRequest } from "@/api/request"; import {usePage} from "@/api/request";
import { import {ROUTER_LIST,} from "@/api/api";
ROUTER_CHAPTER_LIST, import {useRouter} from "vue-router";
ROUTER_LIST,
ROUTER_UNCOMPLETE_LIST,
} from "@/api/api";
import { useImage } from "@/api/utils";
import { useRouter } from "vue-router";
import store from "@/store"; import store from "@/store";
import PathDetailImage from "@/components/PathDetailImage.vue";
const detail = ref(); const detail = ref();
const showmapdetail = ref(false);
const currentStageId = ref();
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const { data } = usePage(ROUTER_LIST, { pageSize: 60 }); const {data} = usePage(ROUTER_LIST, {pageSize: 60});
console.log("datadata", data);
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {}); // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
const state = reactive({
showmapdetail: false,
});
const { showmapdetail } = toRefs(state);
const returnfun = () => { const returnfun = () => {
state.showmapdetail = false; showmapdetail.value = false;
}; };
async function gofun({ routerId, name: routerName }) { async function gofun(e) {
// console.log(routerId) detail.value = e
// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}}) showmapdetail.value = true;
// detail.value = data.data }
// state.showmapdetail = true;
// router.push({path: "/pathdetails", query: {routerId}}); function toUnTask() {
import.meta.env.MODE === "development"
? router.push({
path: "/pathdetails",
query: { routerId, routerName },
})
: window.open(
`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
`routerId=${routerId}&routerName=${routerName}`
)}`
);
} }
function toUnTask() { }
</script> </script>
<style lang="scss"> <style lang="scss">
#app div:nth-child(1) { #app div:nth-child(1) {
// background: rgba(0, 0, 0, 0) !important; // background: rgba(0, 0, 0, 0) !important;
} }
.modal {} .modal {
}
.modal:after { .modal:after {
content: ""; content: "";
} }
.learnpath { .learnpath {
width: 100%; width: 100%;
min-height: 800px; min-height: 800px;
//border-radius: 8px; //border-radius: 8px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
display: flex; display: flex;
.content { .content {
width: 100%; width: 100%;
// flex: 1; // flex: 1;
margin-top: 43px; margin-top: 43px;
position: relative;
// background-color: pink;
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
// background-color: pink; .title .titleL {
.title { display: flex;
display: flex; align-items: center;
justify-content: space-between; }
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL { .title .titleL .text {
display: flex; font-size: 18px;
align-items: center; font-weight: bold;
} color: #333333;
line-height: 24px;
margin-right: 26px;
}
.title .titleL .text { .title .titleL .info {
font-size: 18px; display: flex;
font-weight: bold; // align-items: center;
color: #333333; font-size: 14px;
line-height: 24px; font-weight: 400;
margin-right: 26px; color: #387df7;
} }
.title .titleL .info { .title .titleR {
display: flex; width: 157px;
// align-items: center; height: 48px;
font-size: 14px; border: 2px solid #0060ff;
font-weight: 400; border-radius: 8px;
color: #387df7; display: flex;
} align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #0060ff;
}
.title .titleR { .head {
width: 157px; // height: 50px;
height: 48px; background: #f9f9f9;
border: 2px solid #0060ff; margin-top: 50px;
border-radius: 8px; display: flex;
display: flex; justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; font-size: 14px;
cursor: pointer; font-weight: 500;
font-size: 16px; color: #333333;
font-weight: bold; margin-left: 53px;
color: #0060ff; margin-right: 54px;
} width: calc(100% - 107px);
// min-width: 770px;
overflow-x: auto;
.head { .el-table th.el-table__cell {
// height: 50px; background: rgba(249, 249, 249, 1);
background: #f9f9f9; color: rgba(51, 51, 51, 1);
margin-top: 50px; font-size: 14px;
display: flex; font-weight: 500;
justify-content: space-between; }
align-items: center;
font-size: 14px;
font-weight: 500;
color: #333333;
margin-left: 53px;
margin-right: 54px;
width: calc(100% - 107px);
// min-width: 770px;
overflow-x: auto;
.el-table th.el-table__cell { .el-table .cell {
background: rgba(249, 249, 249, 1); overflow: hidden;
color: rgba(51, 51, 51, 1); text-overflow: ellipsis;
font-size: 14px; width: 100%;
font-weight: 500; display: -webkit-box;
} -webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
}
.el-table .cell { .el-table__row {
overflow: hidden; height: 231px;
text-overflow: ellipsis; font-size: 14px;
width: 100%; color: rgba(102, 102, 102, 1);
display: -webkit-box; font-weight: 500;
-webkit-box-orient: vertical; }
-webkit-line-clamp: 3; }
word-break: break-all;
}
.el-table__row { .mapdetail {
height: 231px; width: calc(100% - 107px);
font-size: 14px; min-height: 577px;
color: rgba(102, 102, 102, 1); background: rgba(242, 245, 247, 0.6);
font-weight: 500; margin-top: 26px;
} border-radius: 8px;
} margin-left: 53px;
margin-right: 54px;
.mapdetail { display: flex;
width: calc(100% - 107px); align-items: center;
height: 577px; justify-content: center;
background: rgba(242, 245, 247, 0.6); }
margin-top: 26px; }
border-radius: 8px;
margin-left: 53px;
margin-right: 54px;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
.lppopover { .lppopover {
.finish { .finish {
padding-left: 27px; padding-left: 27px;
padding-right: 18px; padding-right: 18px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 17px; margin-bottom: 17px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
margin-left: 8px; margin-left: 8px;
} }
.box { .box {
width: 59px; width: 59px;
height: 10px; height: 10px;
background-color: rgba(36, 120, 255, 0.15); background-color: rgba(36, 120, 255, 0.15);
position: absolute; position: absolute;
left: 50px; left: 50px;
top: 15px; top: 15px;
} }
.tasks {
width: 405px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 28px;
cursor: pointer;
}
.tasks {
width: 405px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 28px;
cursor: pointer;
}
.box-item { .box-item {
width: 200px; width: 200px;
margin-top: 10px; margin-top: 10px;
} }
} }
</style> </style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,17 +1,15 @@
<template> <template>
<div class="surveydetail" style="padding: 30px"> <div class="surveydetail" style="padding: 30px">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div <div style="display: flex; align-items: center; justify-content: space-between">
style="display: flex; align-items: center; justify-content: space-between" <div class="crumb">
> <div>{{ pName }}</div>
<div class="crumb"> <div style="margin-left: 6px; margin-right: 6px">/</div>
<div>{{ pName }}</div> <div>{{ sName }}</div>
<div style="margin-left: 6px; margin-right: 6px">/</div> <div style="margin-left: 6px; margin-right: 6px">/</div>
<div>{{ sName }}</div> <div style="font-weight: 700; font-size: 16px">评估详情</div>
<div style="margin-left: 6px; margin-right: 6px">/</div> </div>
<div style="font-weight: 700; font-size: 16px">评估详情</div> <!--
</div>
<!--
<div class="prevnext"> <div class="prevnext">
<div class="prev"> <div class="prev">
<img <img
@@ -44,164 +42,115 @@
return a[0].orderNumber - b[0].orderNumber return a[0].orderNumber - b[0].orderNumber
}) }} --> }) }} -->
<div <div class="question" v-for="
class="question" (value, index) in formateArr([data.assessmentEssayQuestionDtoList, data.assessmentMultipleChoiceDtoList, data.assessmentScoringQuestionDtoList, data.assessmentSingleChoiceDtoList]).sort((a, b) => {
v-for=" return a[0].orderNumber - b[0].orderNumber
(value, index) in formateArr([data.assessmentEssayQuestionDtoList,data.assessmentMultipleChoiceDtoList,data.assessmentScoringQuestionDtoList,data.assessmentSingleChoiceDtoList]).sort((a,b)=>{ }) " :key="index" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
return a[0].orderNumber - b[0].orderNumber <div v-if="value[0].questionType == '4'">
}) " <div class="question" v-for="(value, index) in data.assessmentScoringQuestionDtoList" :key="index"
:key="index" :style="{ 'margin-top': index === 0 ? '57px' : '41px' }">
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }" <div class="text">{{ value.assessmentScTitle }}</div>
> <div class="answer">
<div v-if="value[0].questionType=='4'"> <div class="answerL">完全没用</div>
<div <div class="answerC">
class="question" <div class="answerCitem" v-for="(item, key) in Array.from(
v-for="(value, index) in data.assessmentScoringQuestionDtoList" { length: value.assessmentMaxScore },
:key="index" (k, i) => i
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }" )" :key="key" :style="{
> 'margin-left': key === 0 ? '15px' : '10px',
<div class="text">{{ value.assessmentScTitle }}</div> background:
<div class="answer"> value.selectAnswer === item
<div class="answerL">完全没用</div> ? 'rgba(86, 163, 249, 1)'
<div class="answerC"> : 'rgba(86, 163, 249, 0)',
<div color:
class="answerCitem" value.selectAnswer === item
v-for="(item, key) in Array.from( ? '#fff'
{ length: value.assessmentMaxScore }, : 'rgba(86, 163, 249, 1)',
(k, i) => i }" @click="
)" () => {
:key="key" if (data.isSubmit) {
:style="{ return;
'margin-left': key === 0 ? '15px' : '10px', }
background: value.selectAnswer = item;
value.selectAnswer === item }
? 'rgba(86, 163, 249, 1)' ">
: 'rgba(86, 163, 249, 0)', <div>{{ item + 1 }}</div>
color: </div>
value.selectAnswer === item </div>
? '#fff' <div class="answerR">非常有帮助/启发</div>
: 'rgba(86, 163, 249, 1)', </div>
}" </div>
@click=" </div>
() => {
if (data.isSubmit) {
return;
}
value.selectAnswer = item;
}
"
>
<div>{{ item + 1 }}</div>
</div>
</div>
<div class="answerR">非常有帮助/启发</div>
</div>
</div>
</div>
<div v-else-if="value[0].questionType=='1'"> <div v-else-if="value[0].questionType == '1'">
<div <div class="question" style="margin-top: 41px" v-if="
class="question" data.assessmentSingleChoiceDtoList &&
style="margin-top: 41px" data.assessmentSingleChoiceDtoList.length
v-if=" ">
data.assessmentSingleChoiceDtoList && <div class="text">
data.assessmentSingleChoiceDtoList.length {{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }}
" </div>
> <div v-for="(value, index) in data.assessmentSingleChoiceDtoList" :key="index"
<div class="text"> style="display: flex; align-items: center" :style="{
{{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }} 'margin-top': index === 0 ? '29px' : '22px',
</div> cursor: 'pointer',
<div }" @click="
v-for="(value, index) in data.assessmentSingleChoiceDtoList" () => {
:key="index" if (data.isSubmit) {
style="display: flex; align-items: center" return;
:style="{ }
'margin-top': index === 0 ? '29px' : '22px', data.assessmentSingleChoiceDtoList.forEach((e) => {
cursor: 'pointer', e.select = false;
}" });
@click=" value.select = true;
() => { }
if (data.isSubmit) { ">
return; <img style="width: 19px; height: 18px; cursor: pointer" :src="value.select ? checkbox : checkbox2" />
} <div class="people">{{ value.singleOptionName }}</div>
data.assessmentSingleChoiceDtoList.forEach((e) => { </div>
e.select = false; </div>
}); </div>
value.select = true;
}
"
>
<img
style="width: 19px; height: 18px; cursor: pointer"
:src="value.select ? checkbox : checkbox2"
/>
<div class="people">{{ value.singleOptionName }}</div>
</div>
</div>
</div>
<div v-else-if="value[0].questionType=='2'"> <div v-else-if="value[0].questionType == '2'">
<div <div class="question" style="margin-top: 41px" v-if="
class="question" data.assessmentMultipleChoiceDtoList &&
style="margin-top: 41px" data.assessmentMultipleChoiceDtoList.length
v-if=" ">
data.assessmentMultipleChoiceDtoList && <div class="text">
data.assessmentMultipleChoiceDtoList.length {{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }}
" </div>
> <div v-for="(value, index) in data.assessmentMultipleChoiceDtoList" :key="index"
<div class="text"> style="display: flex; align-items: center" :style="{
{{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }} 'margin-top': index === 0 ? '29px' : '22px',
</div> cursor: 'pointer',
<div }" @click="
v-for="(value, index) in data.assessmentMultipleChoiceDtoList" () => {
:key="index" if (data.isSubmit) {
style="display: flex; align-items: center" return;
:style="{ }
'margin-top': index === 0 ? '29px' : '22px', value.select = !value.select;
cursor: 'pointer', }
}" ">
@click=" <img style="width: 19px; height: 18px; cursor: pointer" :src="value.select ? checkbox : checkbox2" />
() => { <div class="people">{{ value.multipleOptionName }}</div>
if (data.isSubmit) { </div>
return; </div>
} </div>
value.select = !value.select;
}
"
>
<img
style="width: 19px; height: 18px; cursor: pointer"
:src="value.select ? checkbox : checkbox2"
/>
<div class="people">{{ value.multipleOptionName }}</div>
</div>
</div>
</div>
<div v-else-if="value[0].questionType=='3'"> <div v-else-if="value[0].questionType == '3'">
<div <div class="question" style="margin-top: 41px" v-for="(item, i) in data.assessmentEssayQuestionDtoList"
class="question" :key="i">
style="margin-top: 41px" <div class="text">{{ item.assessmentQaTitle }}</div>
v-for="(item, i) in data.assessmentEssayQuestionDtoList" <div style="width: 713px; margin-top: 31px; position: relative">
:key="i" <el-input v-model="item.content" :autosize="{ minRows: 5, maxRows: 5 }" resize="none" maxlength="200"
> type="textarea" :readonly="!!data.isSubmit" />
<div class="text">{{ item.assessmentQaTitle }}</div> <div class="words">{{ item.content?.length || 0 }}/200</div>
<div style="width: 713px; margin-top: 31px; position: relative"> </div>
<el-input </div>
v-model="item.content" </div>
:autosize="{ minRows: 5, maxRows: 5 }" </div>
resize="none"
maxlength="200"
type="textarea"
:readonly="!!data.isSubmit"
/>
<div class="words">{{ item.content?.length || 0 }}/200</div>
</div>
</div>
</div>
</div>
<!-- <div <!-- <div
class="question" class="question"
v-for="(value, index) in data.assessmentScoringQuestionDtoList" v-for="(value, index) in data.assessmentScoringQuestionDtoList"
:key="index" :key="index"
@@ -339,42 +288,39 @@
<div class="words">{{ item.content?.length || 0 }}/200</div> <div class="words">{{ item.content?.length || 0 }}/200</div>
</div> </div>
</div> --> </div> -->
<div <div style="display: flex; justify-content: center" v-if="
style="display: flex; justify-content: center" data.assessmentEssayQuestionDtoList?.length ||
v-if=" data.assessmentMultipleChoiceDtoList?.length ||
data.assessmentEssayQuestionDtoList?.length || data.assessmentSingleChoiceDtoList?.length ||
data.assessmentMultipleChoiceDtoList?.length || data.assessmentScoringQuestionDtoList?.length
data.assessmentSingleChoiceDtoList?.length || ">
data.assessmentScoringQuestionDtoList?.length <div class="submit" @click="submit" :style="{ background: data.isSubmit ? '#999' : '#2478ff' }">
" 提交
> </div>
<div </div>
class="submit" </div>
@click="submit" </div>
:style="{ background: data.isSubmit ? '#999' : '#2478ff' }" <!-- 基本信息 -->
> <!-- todo 测评页面 没有接口-->
提交 </div>
</div> <el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true">
</div> <div style="text-align: center;font-size:16px;"> <span style="color:black">
</div> 提交成功
</div> </span></div>
<!-- 基本信息 --> <template #footer>
<!-- todo 测评页面 没有接口--> <span class="dialog-footer">
</div> <el-button class="cancel"
<el-dialog v-model="centerDialogVisible" title="" width="20%" center :show-close="false" :align-center="true"> style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
<div style="text-align: center;font-size:16px;"> <span style="color:black"> @click="centerDialogVisible = false">取消</el-button>
提交成功 <el-button class="back"
</span></div> style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
<template #footer> type="primary" @click="returnclick">
<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>
<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"> </span>
返回 </template>
</el-button> </el-dialog>
</span>
</template>
</el-dialog>
</template> </template>
<script setup> <script setup>
import checkbox from "@/assets/image/checkbox.png"; import checkbox from "@/assets/image/checkbox.png";
@@ -383,226 +329,243 @@ import { useRoute, useRouter } from "vue-router/dist/vue-router";
import { request, usePage, useRequest } from "@/api/request"; import { request, usePage, useRequest } from "@/api/request";
import { ASSESSMENT_QUERY, ASSESSMENT_SUBMIT } from "@/api/api"; import { ASSESSMENT_QUERY, ASSESSMENT_SUBMIT } from "@/api/api";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { ref} from "vue"; import { ref } from "vue";
const { const {
query: { courseId, id: taskId, type, pName, sName }, query: { courseId, id: taskId, type, pName, sName, chapterOrStageId },
} = useRoute(); } = useRoute();
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
// 数组去空对象 // 数组去空对象
function formateArr(arr1) { function formateArr(arr1) {
console.log(arr1,arr1[0],arr1[0].length) console.log(arr1, arr1[0], arr1[0].length)
let newarr = [] let newarr = []
for(let i=0;i<arr1.length;i++){ for (let i = 0; i < arr1.length; i++) {
if(arr1[i].length!==0){ if (arr1[i].length !== 0) {
newarr.push(arr1[i]) newarr.push(arr1[i])
} }
} }
return newarr return newarr
} }
const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId }); const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId, type, chapterOrStageId, targetId: taskId });
console.log('我是需要排序得题目', data ) console.log('我是需要排序得题目', data)
function goHome() { function goHome() {
} }
const centerDialogVisible =ref(false); const centerDialogVisible = ref(false);
const open=()=>{ const open = () => {
centerDialogVisible.value = true centerDialogVisible.value = true
}; };
function submit() { function submit() {
if (data.value.isSubmit) { if (1 > 0) {
return; console.log(data)
} console.log('我是提交的数据', {
console.log("data.value",data.value); targetId: taskId, // 项目、路径图或开课的Id
let list1 = data.value.assessmentEssayQuestionDtoList; chapterOrStageId: chapterOrStageId, // 关卡或者阶段Id 关卡Id不允许为空
if(list1 &&list1.length > 0){ assessmentId: courseId,
list1.forEach((item) => { taskId,
if(item && !item.content){ type,
result: JSON.stringify(data.value),
return ElMessage.warning("您有未填写的评估题干"); })
} }
}) if (data.value.isSubmit) {
} return;
let list2 = data.value.assessmentScoringQuestionDtoList; }
if(list2 &&list2.length > 0){ console.log("data.value", data.value);
list2.forEach((item) => { let list1 = data.value.assessmentEssayQuestionDtoList;
if(item && !item.selectAnswer){ if (list1 && list1.length > 0) {
list1.forEach((item) => {
return ElMessage.warning("您有未填写的评估题干"); if (item && !item.content) {
}
}) return ElMessage.warning("您有未填写的评估题干");
} }
let list3 = data.value.assessmentSingleChoiceDtoList; })
if(list3 &&list3.length > 0){ }
let flag = 0; let list2 = data.value.assessmentScoringQuestionDtoList;
list3.forEach((item) => { if (list2 && list2.length > 0) {
flag = flag + item.select? 1 : 0; list2.forEach((item) => {
}) if (item && !item.selectAnswer) {
if(flag ==0 ){
return ElMessage.warning("您有未填写的评估题干");
return ElMessage.warning("您有未填写的评估题干"); }
} })
} }
let list4 = data.value.assessmentMultipleChoiceDtoList; let list3 = data.value.assessmentSingleChoiceDtoList;
if(list4 &&list4.length > 0){ if (list3 && list3.length > 0) {
let flag = 0; let flag = 0;
list4.forEach((item) => { list3.forEach((item) => {
flag = flag + item.select? 1 : 0; flag = flag + item.select ? 1 : 0;
}) })
if(flag == 0 ){ if (flag == 0) {
return ElMessage.warning("您有未填写的评估题干"); return ElMessage.warning("您有未填写的评估题干");
} }
} }
data.value.isSubmit = !data.value.isSubmit; let list4 = data.value.assessmentMultipleChoiceDtoList;
request(ASSESSMENT_SUBMIT, { if (list4 && list4.length > 0) {
assessmentId: courseId, let flag = 0;
taskId, list4.forEach((item) => {
type, flag = flag + item.select ? 1 : 0;
result: JSON.stringify(data.value), })
}).then(() => { if (flag == 0) {
open();
}); return ElMessage.warning("您有未填写的评估题干");
}
}
data.value.isSubmit = !data.value.isSubmit;
request(ASSESSMENT_SUBMIT, {
targetId: taskId, // 项目、路径图或开课的Id
chapterOrStageId: chapterOrStageId, // 关卡或者阶段Id 关卡Id不允许为空
assessmentId: courseId,
taskId,
type,
result: JSON.stringify(data.value),
}).then(() => {
open();
});
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.surveydetail { .surveydetail {
.crumb { .crumb {
color: #fff; color: #fff;
display: flex; display: flex;
font-size: 14px; font-size: 14px;
line-height: 24px; 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 { .return {
display: flex; position: absolute;
align-items: center; right: 10%;
cursor: pointer;
}
}
.title { .text {
font-size: 20px; text-align: center;
font-weight: 800; display: flex;
color: #ffffff; flex-direction: row;
line-height: 24px; align-items: center;
margin-top: 17px; }
margin-left: -11px; }
}
.bascinfo { .prevnext {
width: 100%; display: flex;
min-height: 1032px; align-items: center;
margin-top: 24px; font-size: 14px;
background: #ffffff; font-weight: 500;
border-radius: 8px; color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
.question .text { .prev {
font-size: 16px; display: flex;
font-weight: 500; align-items: center;
color: #333330; cursor: pointer;
} }
}
.question .answer { .title {
margin-top: 30px; font-size: 20px;
display: flex; font-weight: 800;
align-items: center; color: #ffffff;
font-size: 14px; line-height: 24px;
font-weight: 500; margin-top: 17px;
color: #56a3f9; margin-left: -11px;
} }
.question .answer .answerC { .bascinfo {
width: 540px; width: 100%;
height: 73px; min-height: 1032px;
border: 1px solid #d7e5fd; margin-top: 24px;
border-radius: 8px; background: #ffffff;
display: flex; border-radius: 8px;
align-items: center; display: flex;
margin-left: 11px; flex-direction: column;
margin-right: 11px; align-items: center;
// 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 { .question .text {
font-size: 14px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #333330; color: #333330;
margin-left: 15px; }
}
.question .words { .question .answer {
position: absolute; margin-top: 30px;
right: 15px; display: flex;
bottom: 5px; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #333330; color: #56a3f9;
} }
.question .el-textarea__inner { .question .answer .answerC {
border-radius: 8px; width: 540px;
background-color: rgba(245, 246, 247, 1); height: 73px;
} border: 1px solid #d7e5fd;
border-radius: 8px;
display: flex;
align-items: center;
margin-left: 11px;
margin-right: 11px;
.submit { // justify-content: center;
width: 126px; .answerCitem {
height: 46px; width: 40px;
background: #2478ff; height: 40px;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7); border: 1px solid #56a3f9;
border-radius: 4px; border-radius: 8px;
font-size: 16px; font-size: 14px;
font-weight: 800; font-weight: 400;
color: #ffffff; color: #ffffff;
line-height: 24px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; margin-left: 10px;
cursor: pointer; cursor: pointer;
margin-top: 39px; }
margin-bottom: 30px; }
}
} .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> </style>