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

fix: 修复跳转异常

Browse Source
This commit is contained in:
huangzhe
2025-09-23 19:48:18 +08:00
parent 0f4959d80b
commit 9b9dd8499d
1 changed files with 131 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/views/projectdetails/projectDetails.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="projectdetails"> <div class="projectdetails">
<!-- <ReturnHead--> <!-- <ReturnHead-->
<!-- text="项目详情"--> <!-- text="项目详情"-->
<!-- :showfile="true"--> <!-- :showfile="true"-->
<!-- :courseId="projectId || courseId"--> <!-- :courseId="projectId || courseId"-->
<!-- :type="1"--> <!-- :type="1"-->
<!-- :gohome="type == 1 ? true : false"--> <!-- :gohome="type == 1 ? true : false"-->
<!-- ></ReturnHead>--> <!-- ></ReturnHead>-->
<div class="main"> <div class="main">
<div class="up"> <div class="up">
<!-- <div class="notice"> <!-- <div class="notice">
@@ -167,7 +167,7 @@
<div <div
v-if="data.unlockMode === 1" v-if="data.unlockMode === 1"
class="goclass" class="goclass"
@click.prevent=" @click="
toFinish(el, item.stageName, item.id, item.studyModel, $event) toFinish(el, item.stageName, item.id, item.studyModel, $event)
" "
:style="{ :style="{
@@ -188,7 +188,7 @@
<div <div
v-else v-else
class="goclass" class="goclass"
@click.prevent=" @click="
toFinish(el, item.stageName, item.id, item.studyModel) toFinish(el, item.stageName, item.id, item.studyModel)
" "
:style="{ :style="{
@@ -313,59 +313,55 @@
</template> </template>
<script setup> <script setup>
import { computed, reactive, ref, watch, onMounted } from "vue"; import {computed, onMounted, ref, watch} from "vue";
import { ElLoading } from "element-plus"; import {ElMessage} from "element-plus";
import { useRequest, request } from "@/api/request"; import {request, useRequest} from "@/api/request";
import { import {
PROJECT_PROCESS,
STUDY_RECORD,
PROJECT_DETAIL,
SubmitExternalExam,
UPDATE_CURRENT_TASK,
checkStudentExist, checkStudentExist,
EvaluationToLearn, EvaluationToLearn,
QueryEvaluationTaskStatusOne, QueryEvaluationTaskStatusOne,
SubmitExternalExam,
UPDATE_CURRENT_TASK,
} from "@/api/api"; } from "@/api/api";
import { useRoute, useRouter } from "vue-router"; import {useRoute, useRouter} from "vue-router";
import store from "@/store"; import store from "@/store";
import { ElMessage } from "element-plus"; import {PROJECT, TASK_TYPES} from "@/api/CONST";
import ReturnHead from "@/components/ReturnHead.vue";
import { PROJECT, TASK_TYPES } from "@/api/CONST";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useStore } from "vuex"; import {useStore} from "vuex";
import { changeTime } from "@/api/method"; import {changeTime} from "@/api/method";
const { const {
query: { courseId, projectId, type, infoId, chapterOrStageId, id }, query: {courseId, projectId, type, infoId, chapterOrStageId, id},
} = useRoute(); } = useRoute();
const router = useRouter(); const router = useRouter();
const { commit, dispatch, state } = useStore(); const {commit, dispatch, state} = useStore();
const data = computed(() => state.projectInfo); const data = computed(() => state.projectInfo);
useRequest( useRequest(
checkStudentExist, checkStudentExist,
{ {
targetId: type == 1 ? projectId : infoId, targetId: type == 1 ? projectId : infoId,
type: type, type: type,
chapterId: chapterOrStageId, chapterId: chapterOrStageId,
courseId: id, courseId: id,
}, },
(res) => { (res) => {
console.log("判断任务是否删除", res); console.log("判断任务是否删除", res);
if (res.code === 7) { if (res.code === 7) {
router.push({
path: "/loseEfficacyProject",
query: {
msg: res.message,
},
});
} else {
if (res.code === 6) {
router.push({ router.push({
path: "/loseEfficacyProject", path: "/notpath",
query: {
msg: res.message,
},
}); });
} else {
if (res.code === 6) {
router.push({
path: "/notpath",
});
}
} }
} }
); }
);
watch(data, () => { watch(data, () => {
if (data.value.code === 6) { if (data.value.code === 6) {
router.push({ router.push({
@@ -375,7 +371,7 @@ watch(data, () => {
}); });
onMounted(() => { onMounted(() => {
sessionStorage.setItem("projectid", projectId) sessionStorage.setItem("projectid", projectId)
dispatch("getProjectInfo", { projectId, type }); dispatch("getProjectInfo", {projectId, type});
}); });
watch( watch(
() => data.value.stageProcessList, () => data.value.stageProcessList,
@@ -387,7 +383,7 @@ watch(
console.log("改变data", data); console.log("改变data", data);
} }
}, },
{ deep: true } {deep: true}
); );
// watch(data, () => { // watch(data, () => {
// console.log("data.value.projectId", data.value); // console.log("data.value.projectId", data.value);
@@ -422,6 +418,7 @@ function getTaskStatus(d) {
} }
return "进行中"; return "进行中";
} }
console.log("datadata", data); console.log("datadata", data);
const openCourseVisible = ref(false); const openCourseVisible = ref(false);
const openCourseList = ref([]); const openCourseList = ref([]);
@@ -432,7 +429,7 @@ const activeName = ref("first");
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const path = { 1: "path" }; const path = {1: "path"};
const types = ref({ const types = ref({
typeName: { typeName: {
1: "在线", 1: "在线",
@@ -466,7 +463,7 @@ const types = ref({
}, },
path: { path: {
1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线 1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
2: ({ targetId }) => 2: ({targetId}) =>
window.open( window.open(
`${location.protocol}//${location.host}${ `${location.protocol}//${location.host}${
import.meta.env.VITE_BASE_API import.meta.env.VITE_BASE_API
@@ -513,42 +510,42 @@ function judgeTaskIsEnd(type, endTimes, status) {
status == -1 status == -1
? (isEnd = true) ? (isEnd = true)
: nowTime > endTime : nowTime > endTime
? (isEnd = true) ? (isEnd = true)
: (isEnd = false); : (isEnd = false);
break; break;
case 3: case 3:
status == -1 status == -1
? (isEnd = true) ? (isEnd = true)
: nowTime > endTime : nowTime > endTime
? (isEnd = true) ? (isEnd = true)
: (isEnd = false); : (isEnd = false);
break; break;
case 5: case 5:
status == -1 status == -1
? (isEnd = true) ? (isEnd = true)
: nowTime > endTime : nowTime > endTime
? (isEnd = true) ? (isEnd = true)
: (isEnd = false); : (isEnd = false);
break; break;
case 7: case 7:
status == -1 status == -1
? (isEnd = true) ? (isEnd = true)
: nowTime > endTime : nowTime > endTime
? (isEnd = true) ? (isEnd = true)
: (isEnd = false); : (isEnd = false);
break; break;
case 10: case 10:
status == -1 status == -1
? (isEnd = true) ? (isEnd = true)
: nowTime > endTime : nowTime > endTime
? (isEnd = true) ? (isEnd = true)
: (isEnd = false); : (isEnd = false);
break; break;
} }
return isEnd; return isEnd;
} }
function toFinish(d, sName, chapterOrStageId, studyModel,e) { function toFinish(d, sName, chapterOrStageId, studyModel, e) {
if (studyModel != 0 && !d.statusName) { if (studyModel != 0 && !d.statusName) {
ElMessage.warning("当前未解锁"); ElMessage.warning("当前未解锁");
return; return;
@@ -751,7 +748,7 @@ function toFinish(d, sName, chapterOrStageId, studyModel,e) {
type: PROJECT, type: PROJECT,
pid: projectId, pid: projectId,
name: d.name, name: d.name,
}).then(()=>{ }).then(() => {
if (typeof TASK_TYPES.path[d.type] === "string") { if (typeof TASK_TYPES.path[d.type] === "string") {
console.log("TASK_TYPES.path[d.type]", TASK_TYPES.path[d.type]); console.log("TASK_TYPES.path[d.type]", TASK_TYPES.path[d.type]);
TASK_TYPES.path[d.type] && TASK_TYPES.path[d.type] &&
@@ -779,21 +776,20 @@ function toFinish(d, sName, chapterOrStageId, studyModel,e) {
}); });
} else if (typeof TASK_TYPES.path[d.type] === "function") { } else if (typeof TASK_TYPES.path[d.type] === "function") {
if (d.type == 5) { if (d.type == 5) {
// 模拟点击跳转
const url = TASK_TYPES.path[d.type](d) + d.targetId const url = TASK_TYPES.path[d.type](d) + d.targetId
if (isIOS()){ const a = document.createElement("a");
// 模拟点击跳转 a.href = url;
const a = document.createElement("a"); // a.target = "_blank";
a.href = url; a.click();
// a.target = "_blank";
a.click();
// 保底解决兼容问题 // 保底解决兼容问题
window.open(url, "_top"); window.open(url, "_top");
} else { } else {
TASK_TYPES.path[d.type](d); TASK_TYPES.path[d.type](d);
}
} }
}}}) })
// if (typeof types.value.path[d.type] === "string") { // if (typeof types.value.path[d.type] === "string") {
// types.value.path[d.type] && // types.value.path[d.type] &&
// types.value.path[d.type].startsWith("http") && // types.value.path[d.type].startsWith("http") &&
@@ -822,13 +818,14 @@ function toFinish(d, sName, chapterOrStageId, studyModel,e) {
// } // }
} }
function toOffcoursePlanPage(id){ function toOffcoursePlanPage(id) {
window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${id}`, '_top') window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${id}`, '_top')
} }
function whiteTypes(type) { function whiteTypes(type) {
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-"); return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
} }
// 查询当前阶段所有任务是否都完成 // 查询当前阶段所有任务是否都完成
const queryAllStatus = (data) => { const queryAllStatus = (data) => {
// status === 1 已完成 // status === 1 已完成
@@ -847,19 +844,23 @@ const queryAllStatus = (data) => {
.el-dialog__body { .el-dialog__body {
width: 80%; width: 80%;
} }
.el-dialog__header { .el-dialog__header {
display: none; display: none;
} }
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
//justify-content: center; //justify-content: center;
margin-top: 10px; margin-top: 10px;
.up { .up {
width: 100%; width: 100%;
height: 162px; height: 162px;
@@ -868,6 +869,7 @@ const queryAllStatus = (data) => {
align-items: center; align-items: center;
//justify-content: center; //justify-content: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.notice { .notice {
background-color: rgba(255, 251, 238, 1); background-color: rgba(255, 251, 238, 1);
width: 100%; width: 100%;
@@ -875,6 +877,7 @@ const queryAllStatus = (data) => {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
.text { .text {
//display: flex; //display: flex;
height: 25px; height: 25px;
@@ -887,6 +890,7 @@ const queryAllStatus = (data) => {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.close { .close {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -900,10 +904,12 @@ const queryAllStatus = (data) => {
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
.content { .content {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.title { .title {
margin-top: 15.5px; margin-top: 15.5px;
font-size: 14px; font-size: 14px;
@@ -911,6 +917,7 @@ const queryAllStatus = (data) => {
line-height: 21.6px; line-height: 21.6px;
color: rgba(4, 36, 60, 1); color: rgba(4, 36, 60, 1);
} }
.text2 { .text2 {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
@@ -923,6 +930,7 @@ const queryAllStatus = (data) => {
} }
} }
} }
.down { .down {
width: 100%; width: 100%;
margin-top: 11.5px; margin-top: 11.5px;
@@ -932,6 +940,7 @@ const queryAllStatus = (data) => {
align-items: center; align-items: center;
//justify-content: center; //justify-content: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.project_title { .project_title {
width: calc(100% - 36.5px); width: calc(100% - 36.5px);
display: flex; display: flex;
@@ -942,12 +951,14 @@ const queryAllStatus = (data) => {
padding: 17px 0 17px 36.5px; padding: 17px 0 17px 36.5px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1); border-bottom: 0.5px solid rgba(241, 242, 243, 1);
} }
.project_first { .project_first {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 18px; margin-top: 18px;
.course1_first { .course1_first {
width: 100%; width: 100%;
height: 35px; height: 35px;
@@ -955,6 +966,7 @@ const queryAllStatus = (data) => {
justify-content: content; justify-content: content;
border-radius: 10px; border-radius: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
.text8 { .text8 {
display: flex; display: flex;
flex: 1; flex: 1;
@@ -966,6 +978,7 @@ const queryAllStatus = (data) => {
font-weight: 600; font-weight: 600;
color: #333330; color: #333330;
} }
.course1_right { .course1_right {
display: flex; display: flex;
position: relative; position: relative;
@@ -982,6 +995,7 @@ const queryAllStatus = (data) => {
border-radius: 7px; border-radius: 7px;
border: 1px solid #0060ff; border: 1px solid #0060ff;
} }
.text9 { .text9 {
display: flex; display: flex;
justify-content: content; justify-content: content;
@@ -996,6 +1010,7 @@ const queryAllStatus = (data) => {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.btn1 { .btn1 {
width: 7px; width: 7px;
height: 6px; height: 6px;
@@ -1006,28 +1021,33 @@ const queryAllStatus = (data) => {
} }
} }
} }
.course_content { .course_content {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-top: 26.5px; margin-top: 26.5px;
.study1 { .study1 {
display: flex; display: flex;
//justify-content: center; //justify-content: center;
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
.firstclass { .firstclass {
display: flex; display: flex;
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/firstclass.png); background-image: url(../../assets/image/pathmap/firstclass.png);
} }
.firstprogress { .firstprogress {
display: flex; display: flex;
flex: 1; flex: 1;
position: relative; position: relative;
margin-left: 9.5px; margin-left: 9.5px;
.firsttext { .firsttext {
position: absolute; position: absolute;
//top: 6px; //top: 6px;
@@ -1039,6 +1059,7 @@ const queryAllStatus = (data) => {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.secondtext { .secondtext {
position: absolute; position: absolute;
//top: 6px; //top: 6px;
@@ -1047,6 +1068,7 @@ const queryAllStatus = (data) => {
line-height: 30.29px; line-height: 30.29px;
color: rgba(39, 122, 255, 1); color: rgba(39, 122, 255, 1);
} }
.progressbox { .progressbox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@@ -1055,33 +1077,38 @@ const queryAllStatus = (data) => {
bottom: 4px; bottom: 4px;
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
border-radius: 2px; border-radius: 2px;
.progressboxpart { .progressboxpart {
width: 70%; width: 70%;
height: 6.4px; height: 6.4px;
border-radius: 2px; border-radius: 2px;
background: linear-gradient( background: linear-gradient(
-180deg, -180deg,
rgba(36, 120, 255, 1), rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1) rgba(80, 147, 255, 1)
); );
} }
} }
} }
} }
.study2 { .study2 {
display: flex; display: flex;
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
.secondclass { .secondclass {
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/secondclass.png); background-image: url(../../assets/image/pathmap/secondclass.png);
} }
.secondprogress { .secondprogress {
display: flex; display: flex;
flex: 1; flex: 1;
position: relative; position: relative;
margin-left: 9.5px; margin-left: 9.5px;
.firsttext { .firsttext {
position: absolute; position: absolute;
//top: 6px; //top: 6px;
@@ -1093,6 +1120,7 @@ const queryAllStatus = (data) => {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.secondtext { .secondtext {
position: absolute; position: absolute;
//top: 6px; //top: 6px;
@@ -1101,6 +1129,7 @@ const queryAllStatus = (data) => {
line-height: 30.29px; line-height: 30.29px;
color: rgba(39, 122, 255, 1); color: rgba(39, 122, 255, 1);
} }
.progressbox { .progressbox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@@ -1109,14 +1138,15 @@ const queryAllStatus = (data) => {
bottom: 4px; bottom: 4px;
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
border-radius: 2px; border-radius: 2px;
.progressboxpart { .progressboxpart {
width: 52%; width: 52%;
height: 6.4px; height: 6.4px;
border-radius: 2px; border-radius: 2px;
background: linear-gradient( background: linear-gradient(
-180deg, -180deg,
rgba(36, 120, 255, 1), rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1) rgba(80, 147, 255, 1)
); );
} }
} }
@@ -1124,12 +1154,14 @@ const queryAllStatus = (data) => {
} }
} }
} }
.project_second { .project_second {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 10.5px; margin-top: 10.5px;
.course1_first { .course1_first {
width: 100%; width: 100%;
height: 35px; height: 35px;
@@ -1137,6 +1169,7 @@ const queryAllStatus = (data) => {
justify-content: content; justify-content: content;
border-radius: 10px; border-radius: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
.text8 { .text8 {
display: flex; display: flex;
flex: 1; flex: 1;
@@ -1148,6 +1181,7 @@ const queryAllStatus = (data) => {
font-weight: 600; font-weight: 600;
color: #333330; color: #333330;
} }
.course1_right { .course1_right {
display: flex; display: flex;
position: relative; position: relative;
@@ -1164,6 +1198,7 @@ const queryAllStatus = (data) => {
border-radius: 7px; border-radius: 7px;
border: 1px solid #0060ff; border: 1px solid #0060ff;
} }
.text9 { .text9 {
display: flex; display: flex;
justify-content: content; justify-content: content;
@@ -1178,6 +1213,7 @@ const queryAllStatus = (data) => {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
} }
.btn1 { .btn1 {
width: 7px; width: 7px;
height: 6px; height: 6px;
@@ -1188,12 +1224,14 @@ const queryAllStatus = (data) => {
} }
} }
} }
.secondcontent { .secondcontent {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-top: 10px; margin-top: 10px;
.question { .question {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -1215,10 +1253,12 @@ const queryAllStatus = (data) => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.coursetag { .coursetag {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.goclass { .goclass {
width: 63px; width: 63px;
height: 23px; height: 23px;
@@ -1234,6 +1274,7 @@ const queryAllStatus = (data) => {
// margin-right: 37px; // margin-right: 37px;
cursor: pointer; cursor: pointer;
} }
// .tag1 { // .tag1 {
// position: absolute; // position: absolute;
// left: 0; // left: 0;
@@ -1277,6 +1318,7 @@ const queryAllStatus = (data) => {
} }
} }
} }
.last { .last {
width: 100%; width: 100%;
margin-top: 11.5px; margin-top: 11.5px;
@@ -1284,6 +1326,7 @@ const queryAllStatus = (data) => {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.project_title { .project_title {
width: calc(100% - 36.5px); width: calc(100% - 36.5px);
display: flex; display: flex;
@@ -1294,6 +1337,7 @@ const queryAllStatus = (data) => {
padding: 17px 0 17px 36.5px; padding: 17px 0 17px 36.5px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1); border-bottom: 0.5px solid rgba(241, 242, 243, 1);
} }
.ranking { .ranking {
width: 90%; width: 90%;
display: flex; display: flex;
@@ -1302,11 +1346,13 @@ const queryAllStatus = (data) => {
border-radius: 10px; border-radius: 10px;
background-color: rgba(242, 245, 247, 1); background-color: rgba(242, 245, 247, 1);
margin-bottom: 13.5px; margin-bottom: 13.5px;
.rankingbox { .rankingbox {
width: 90%; width: 90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.ranknumber { .ranknumber {
width: 100%; width: 100%;
height: 50px; height: 50px;
@@ -1314,6 +1360,7 @@ const queryAllStatus = (data) => {
position: relative; position: relative;
align-items: center; align-items: center;
border-bottom: 0.5px solid rgba(223, 223, 223, 1); border-bottom: 0.5px solid rgba(223, 223, 223, 1);
.describe { .describe {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -1322,6 +1369,7 @@ const queryAllStatus = (data) => {
line-height: 24px; line-height: 24px;
color: rgba(51, 51, 48, 1); color: rgba(51, 51, 48, 1);
} }
.number { .number {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -1331,6 +1379,7 @@ const queryAllStatus = (data) => {
line-height: 24px; line-height: 24px;
color: rgba(0, 96, 255, 1); color: rgba(0, 96, 255, 1);
} }
.describe_part { .describe_part {
display: flex; display: flex;
position: absolute; position: absolute;