hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
yuping
2022-12-23 19:03:08 +08:00
parent 968ad0c769 b171871d6f
commit ea82b689d2
5 changed files with 379 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/faceteach/FaceTeach.vue
View File

@@ -333,6 +333,7 @@ function toSurvery() {
courseId: data.value.planDto.evaluateId,
pName: "面授课",
sName: data.value.planDto.name,
type: 3
},
});
}

1
src/views/liveBroadcast/LiveBroadcast.vue
View File

@@ -213,6 +213,7 @@ const commitClick = () => {
courseId: data.value.assessmentId,
pName: "直播",
sName: data.value.liveName,
type: 4
},
});
};

5
src/views/project/ProjectDetails.vue
View File

@@ -375,8 +375,8 @@ function introductionPro() {
dialogVisible.value = true;
}
function toFinish(d, sName, chapterId) {
console.log("dddddd", d, sName);
function toFinish(d, sName, chapterOrStageId) {
console.log("dddddd", d, sName, chapterOrStageId);
// 作业过期判断
if (d.type == 4) {
let date1 = new Date(d.endTime).getTime();
@@ -472,6 +472,7 @@ function toFinish(d, sName, chapterId) {
courseId: d.courseId,
pName: data.value.name,
sName,
chapterOrStageId
},
});
} else if (typeof types.value.path[d.type] === "function") {

8
src/views/roadmap/PathDetails.vue
View File

@@ -96,7 +96,7 @@
<div class="goclass" :style="{
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}" @click="toFinish(value)">
{{value.currentRatio === 1 ? "已完成" : types.path[value.type] ? types.toName[value.type] : "未开放"}}
{{ value.currentRatio === 1 ? "已完成" : types.path[value.type] ? types.toName[value.type] : "未开放" }}
</div>
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
<!-- <div-->
@@ -368,6 +368,8 @@ const types = ref({
});
function toFinish(d) {
console.log(d)
console.log(data.value.currentStageId, routerId)
if (!types.value.path[d.type]) {
ElMessage.error("暂时未开放");
return;
@@ -390,11 +392,13 @@ function toFinish(d) {
router.push({
path: types.value.path[d.type],
query: {
id: d.routerTaskId,
// id: d.routerTaskId,
id: routerId,
type: 1,
courseId: d.courseId,
pName: data.value.name,
sName: data.value.currentStageName,
chapterOrStageId: data.value.currentStageId
},
});
} else if (typeof types.value.path[d.type] === "function") {

777
src/views/survey/SurveyDetail.vue
View File

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