mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 17:36:45 +08:00
945 lines
27 KiB
Vue
945 lines
27 KiB
Vue
<template>
|
|
<div class="pathmap">
|
|
<ReturnHead
|
|
text="路径详情"
|
|
:showfile="true"
|
|
:courseId="routerId"
|
|
:type="2"
|
|
></ReturnHead>
|
|
<div class="main">
|
|
<div class="up">
|
|
<!-- <div class="notice">
|
|
<span class="text"
|
|
>请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
|
|
>
|
|
<span class="close"></span>
|
|
</div> -->
|
|
<div class="content">
|
|
<div class="title">{{ data?.name }}</div>
|
|
<div class="text2">
|
|
{{ data?.remark }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="down">
|
|
<div class="project_title">学习路径内容</div>
|
|
|
|
<div class="project_second">
|
|
<div class="course1_first">
|
|
<div class="text8">{{ data?.currentStageName }}</div>
|
|
<div class="course1_right">
|
|
<div
|
|
class="circular"
|
|
:style="
|
|
data.statusName === '已完成' || data.statusName === '进行中'
|
|
? 'border: 1px solid #0060ff'
|
|
: 'border: 1px solid #999'
|
|
"
|
|
></div>
|
|
<!-- <div class="text9">进行中</div> -->
|
|
<div
|
|
class="text9"
|
|
:style="
|
|
data.statusName === '已完成' || data.statusName === '进行中'
|
|
? 'color:#0060ff'
|
|
: 'color:#999'
|
|
"
|
|
>
|
|
{{
|
|
data.statusName ||
|
|
(data.unlockMode === 1 ? "未开始" : "未解锁")
|
|
}}
|
|
</div>
|
|
<!-- <div class="btn1"></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="secondcontent">
|
|
<div
|
|
class="question"
|
|
v-for="(el, index) in data?.taskBoList?.filter(
|
|
(e) => !whiteTypes(e.type)
|
|
)"
|
|
:key="index"
|
|
:style="{
|
|
height: el.type === 1 ? '90px' : '72px',
|
|
}"
|
|
>
|
|
<div style="width: calc(100% - 80px)">
|
|
<div class="issue" :title="el.name">
|
|
{{ el.name }}
|
|
</div>
|
|
<div v-if="el.type === 1" class="progressBox">
|
|
<!-- <div>当前进度</div> -->
|
|
<div
|
|
class="progress"
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 3px;
|
|
"
|
|
>
|
|
<div style="width: 200px">
|
|
<el-progress
|
|
:percentage="parseInt(el.currentRatio)"
|
|
:show-text="false"
|
|
:stroke-width="8"
|
|
:color="
|
|
{
|
|
0: 'rgba(238, 112, 108, 1)',
|
|
1: 'rgba(255, 151, 38, 1)',
|
|
2: 'rgba(39, 122, 255, 1)',
|
|
3: 'rgba(59, 94, 251, 1)',
|
|
4: 'rgba(57, 219, 183, 1)',
|
|
5: 'rgba(57, 219, 183, 1)',
|
|
}[parseInt(parseInt(el.currentRatio) / 20)]
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #277aff;
|
|
margin-left: 10px;
|
|
"
|
|
:style="{
|
|
color: {
|
|
0: 'rgba(238, 112, 108, 1)',
|
|
1: 'rgba(255, 151, 38, 1)',
|
|
2: 'rgba(39, 122, 255, 1)',
|
|
3: 'rgba(59, 94, 251, 1)',
|
|
4: 'rgba(57, 219, 183, 1)',
|
|
5: 'rgba(57, 219, 183, 1)',
|
|
}[parseInt(parseInt(el.currentRatio) / 20)],
|
|
}"
|
|
>
|
|
{{ parseInt(el.currentRatio) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="coursetag">
|
|
<div
|
|
class="tag1"
|
|
style="margin-right: 11px; margin-top: 3px"
|
|
v-if="el.flag"
|
|
>
|
|
必修
|
|
</div>
|
|
<div
|
|
class="tag2"
|
|
style="margin-right: 11px; margin-top: 3px"
|
|
v-if="!el.flag"
|
|
>
|
|
选修
|
|
</div>
|
|
<div class="tag3" style="margin-right: 11px; margin-top: 3px">
|
|
{{ TASK_TYPES.typeName[el.type] || "" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="isStudy == 'true'"
|
|
class="goclass"
|
|
:style="{
|
|
background:
|
|
el.statusName !== '已结束' &&
|
|
(el.statusName || data.unlockMode === 1)
|
|
? '#2478ff'
|
|
: '#999',
|
|
}"
|
|
@click="toFinish(el)"
|
|
>
|
|
{{
|
|
el.statusName ||
|
|
(data.unlockMode === 1
|
|
? TASK_TYPES.toName[el.type]
|
|
: "未解锁")
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive, ref, watch, onMounted } from "vue";
|
|
// import circle from "../../assets/image/pathdetails/circle.png";
|
|
// import circle2 from "../../assets/image/pathdetails/circle2.png";
|
|
import { boeRequest, useRequest, request } from "@/api/request";
|
|
import {
|
|
ROUTER_PROCESS,
|
|
LINK_DETAILS,
|
|
STUDY_RECORD,
|
|
SubmitExternalExam,
|
|
UPDATE_CURRENT_TASK,
|
|
} from "@/api/api";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import store from "@/store";
|
|
import { ROUTER, TASK_TYPES } from "@/api/CONST";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import { useStore } from "vuex";
|
|
import { changeTime } from "@/api/method";
|
|
const {
|
|
query: { routerId, routerName, chapterId, isStudy },
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const { commit, dispatch, state } = useStore();
|
|
const data = computed(() => state.routerInfo);
|
|
onMounted(() => {
|
|
dispatch("getRouterInfo", { routerId, chapterId });
|
|
});
|
|
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
console.log("lalalallala", data, userInfo);
|
|
const activeName = ref("first");
|
|
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
};
|
|
const path = { 1: "path" };
|
|
|
|
const dialogVisible = ref(false);
|
|
const dialogVisibleTip = ref("");
|
|
|
|
const types = ref({
|
|
typeName: {
|
|
1: "在线",
|
|
2: "面授",
|
|
3: "案例",
|
|
4: "作业",
|
|
5: "考试",
|
|
6: "直播",
|
|
7: "外链",
|
|
8: "讨论",
|
|
9: "活动",
|
|
10: "测评",
|
|
11: "评估",
|
|
12: "投票",
|
|
13: "项目",
|
|
},
|
|
toName: {
|
|
1: "去上课",
|
|
2: "去上课",
|
|
3: "去阅读",
|
|
4: "去完成",
|
|
5: "去完成",
|
|
6: "去观看",
|
|
7: "去查看",
|
|
8: "去讨论",
|
|
9: "去签到",
|
|
10: "去完成",
|
|
11: "去完成",
|
|
12: "去投票",
|
|
13: "去完成",
|
|
},
|
|
path: {
|
|
1: window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
|
|
2: ({ courseId }) =>
|
|
window.open(
|
|
`${location.protocol}//${location.host}${
|
|
import.meta.env.VITE_BASE_API
|
|
}/stu/project/redirectDetail?courseId=${courseId}`,
|
|
"_top"
|
|
),
|
|
3: window.location.protocol + import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
|
|
4: "/homeworkpage",
|
|
5: window.location.protocol + import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
|
|
// 5: "/externalexam",
|
|
6: "/liveboradcast",
|
|
7: "/outerchain", //外联
|
|
// 7: ({ targetId }) => window.open(targetId, "_top"), //外联
|
|
8: "/discusspage",
|
|
9: "/activitiespage",
|
|
// 10: ({ evaType, targetId }) =>
|
|
// window.open(
|
|
// evaType == 0
|
|
// ? import.meta.env.VITE_BOE_TEST_DETAIL_URL + targetId
|
|
// : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL +
|
|
// targetId +
|
|
// `&quizTaskKid=${routerId}&channelCode=learningpath`,
|
|
// "_top"
|
|
// ), //测评
|
|
10: "/evaluation", //测评
|
|
11: "/investigatpage",
|
|
12: "/ballotpage",
|
|
13: "/projectdetails",
|
|
},
|
|
});
|
|
|
|
// 判断当前任务已结束及时间意义上的结束 提示用户
|
|
function judgeTaskIsEnd(type, endTimes, status) {
|
|
// type 任务类型 endTime 结束时间 status 任务状态 (状态 0 未完成 1 已完成 2 未开始 -1 已结束)
|
|
console.log("judgeTaskIsEnd", type, endTimes, status);
|
|
let isEnd = false;
|
|
let nowTime = new Date().getTime();
|
|
let endTime = new Date().getTime(changeTime(endTimes));
|
|
switch (type) {
|
|
case 1:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
// case 3:
|
|
// status == 3 ? isEnd = true : nowTime > endTime ? isEnd = true : isEnd = false;
|
|
// break;
|
|
case 5:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 7:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
case 10:
|
|
status == -1
|
|
? (isEnd = true)
|
|
: nowTime > endTime
|
|
? (isEnd = true)
|
|
: (isEnd = false);
|
|
break;
|
|
}
|
|
return isEnd;
|
|
}
|
|
function toFinish(d) {
|
|
console.log(d);
|
|
console.log(data.value.currentStageId, routerId);
|
|
if (data.value.unlockMode !== 1 && !d.statusName) {
|
|
ElMessage.warning("当前未解锁");
|
|
return;
|
|
}
|
|
if (
|
|
data.value.endTime &&
|
|
judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)
|
|
) {
|
|
ElMessage.error("当前任务已结束");
|
|
return;
|
|
}
|
|
if (!TASK_TYPES.path[d.type]) {
|
|
ElMessage.error("暂时未开放");
|
|
return;
|
|
}
|
|
// 在线课 停用 -- 暂时没有在线课停用标记
|
|
if (d.type == 1) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
}
|
|
if (d.type == 2) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前面授课已结束");
|
|
return;
|
|
}
|
|
}
|
|
if (d.type === 3) {
|
|
ElMessage.warning("请在pc端查看");
|
|
return;
|
|
}
|
|
|
|
if (d.type == 4) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前作业已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 考试 停用
|
|
if (d.type == 5) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
// 此处判断外部考试跳转
|
|
if (d.examType == 2) {
|
|
// 点击即更新状态 进行中
|
|
request(SubmitExternalExam, {
|
|
chapterId: data.value.currentStageId,
|
|
externalId: d.courseId,
|
|
externalName: d.name,
|
|
targetId: routerId,
|
|
studentNo: userInfo.value.userNo,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
router.push({
|
|
path: "/externalexam",
|
|
query: {
|
|
courseId: d.courseId,
|
|
type: ROUTER,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
// 直播结束时间
|
|
if (d.type == 6) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前直播已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 其他活动 结束时间
|
|
if (d.type == 9) {
|
|
let date1 = new Date(changeTime(d.endTime)).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 < date2) {
|
|
ElMessage.warning("当前活动已结束");
|
|
return;
|
|
}
|
|
}
|
|
// 评估 停用
|
|
if (d.type == 11) {
|
|
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
|
ElMessage.warning("该任务无法学习，请联系管理员进行替换！");
|
|
return;
|
|
}
|
|
}
|
|
|
|
console.log("点击跳转", d, d.id);
|
|
//更新学员当前任务
|
|
request(UPDATE_CURRENT_TASK, {
|
|
id: d.id,
|
|
type: ROUTER,
|
|
pid: routerId,
|
|
name: d.name,
|
|
});
|
|
// 项目任务 直接跳转项目详情
|
|
if (d.type == 13) {
|
|
// 此处判断跳转项目详情界面
|
|
router.push({
|
|
path: "/projectdetails",
|
|
query: {
|
|
projectId: d.courseId,
|
|
type: ROUTER,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
const path =
|
|
typeof TASK_TYPES.path[d.type] === "string"
|
|
? TASK_TYPES.path[d.type]
|
|
: TASK_TYPES.path[d.type](d);
|
|
path && path.startsWith("http")
|
|
? window.open(path + d.targetId, "_top")
|
|
: path.startsWith("/")
|
|
? router.push({
|
|
path,
|
|
query: {
|
|
id: d.id,
|
|
type: ROUTER,
|
|
infoId: routerId,
|
|
courseId: d.courseId,
|
|
pName: data.value.name,
|
|
sName: data.value.currentStageName,
|
|
chapterOrStageId: data.value.currentStageId,
|
|
studentId: userInfo.value.id,
|
|
status: d.status,
|
|
targetId: d.targetId,
|
|
evaType: d.evaType,
|
|
btype: 2,
|
|
quizTaskId: d.quizTaskId,
|
|
},
|
|
})
|
|
: "";
|
|
// if (typeof types.value.path[d.type] === "string") {
|
|
// // console.log(
|
|
// // "types.value.path[d.type]",
|
|
// // types.value.path[d.type],
|
|
// // import.meta.env.VITE_BOE_EXAM_DETAIL_URL,
|
|
// // import.meta.env.VITE_BOE_ONLINE_CLASS_URL
|
|
// // );
|
|
// types.value.path[d.type] &&
|
|
// types.value.path[d.type].startsWith("http") &&
|
|
// window.open(types.value.path[d.type] + d.targetId, "_top");
|
|
// types.value.path[d.type] &&
|
|
// types.value.path[d.type].startsWith("/") &&
|
|
// router.push({
|
|
// path: types.value.path[d.type],
|
|
// query: {
|
|
// id: d.id,
|
|
// type: ROUTER,
|
|
// infoId: routerId,
|
|
// courseId: d.courseId,
|
|
// pName: data.value.name,
|
|
// sName: data.value.currentStageName,
|
|
// chapterOrStageId: data.value.currentStageId,
|
|
// studentId: userInfo.value.id,
|
|
// status: d.status,
|
|
// targetId: d.targetId,
|
|
// evaType: d.evaType,
|
|
// btype: 2,
|
|
// },
|
|
// });
|
|
// } else if (typeof types.value.path[d.type] === "function") {
|
|
// console.log("ddddddd", d);
|
|
// types.value.path[d.type](d);
|
|
// // console.log("types.value.path[d.type](d)", d);
|
|
// }
|
|
}
|
|
function whiteTypes(type) {
|
|
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pathmap {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.main {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
//justify-content: center;
|
|
margin-top: 10px;
|
|
.up {
|
|
width: 100%;
|
|
height: 162px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
//justify-content: center;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
.notice {
|
|
background-color: rgba(255, 251, 238, 1);
|
|
width: 100%;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
.text {
|
|
//display: flex;
|
|
height: 25px;
|
|
//position: absolute;
|
|
color: rgba(255, 158, 0, 1);
|
|
padding: 6px 41px 6.5px 15.5px;
|
|
font-size: 12px;
|
|
//line-height: 24px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.close {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 9.5px;
|
|
height: 9.5px;
|
|
background-image: url(../../assets/image/pathmap/close.png);
|
|
margin-top: 10px;
|
|
margin-right: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.content {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.title {
|
|
margin-top: 15.5px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
line-height: 21.6px;
|
|
color: rgba(4, 36, 60, 1);
|
|
}
|
|
.text2 {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: 22.5px;
|
|
font-size: 13px;
|
|
color: rgba(51, 51, 48, 1);
|
|
line-height: 24px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.down {
|
|
width: 100%;
|
|
margin-top: 11.5px;
|
|
//height: 529px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
//justify-content: center;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
.project_title {
|
|
width: calc(100% - 36.5px);
|
|
display: flex;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 12px;
|
|
color: rgba(13, 35, 58, 1);
|
|
padding: 17px 0 17px 36.5px;
|
|
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
|
}
|
|
.project_first {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
.course1_first {
|
|
width: 100%;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: content;
|
|
border-radius: 10px;
|
|
background-color: #f9f9f9;
|
|
.text8 {
|
|
display: flex;
|
|
flex: 1;
|
|
margin-top: 11px;
|
|
margin-left: 20px;
|
|
margin-bottom: 10.5px;
|
|
height: 13.5px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #333330;
|
|
}
|
|
.course1_right {
|
|
display: flex;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 13.5px;
|
|
margin-top: 15px;
|
|
// margin-right: 10.5px;
|
|
.circular {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 63px;
|
|
width: 8.5px;
|
|
height: 8.5px;
|
|
border-radius: 7px;
|
|
border: 1px solid #0060ff;
|
|
}
|
|
.text9 {
|
|
display: flex;
|
|
justify-content: content;
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 13.5px;
|
|
top: 0;
|
|
//left: 20px;
|
|
right: 18.5px;
|
|
line-height: 13.5px;
|
|
color: #0060ff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.btn1 {
|
|
width: 7px;
|
|
height: 6px;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 6px;
|
|
background-image: url(../../assets/image/pathmap/btn.png);
|
|
}
|
|
}
|
|
}
|
|
.course_content {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-top: 26.5px;
|
|
.study1 {
|
|
display: flex;
|
|
//justify-content: center;
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
.firstclass {
|
|
display: flex;
|
|
width: 74px;
|
|
height: 43px;
|
|
background-image: url(../../assets/image/pathmap/firstclass.png);
|
|
}
|
|
.firstprogress {
|
|
display: flex;
|
|
flex: 1;
|
|
position: relative;
|
|
margin-left: 9.5px;
|
|
.firsttext {
|
|
position: absolute;
|
|
//top: 6px;
|
|
display: flex;
|
|
font-size: 13px;
|
|
line-height: 30.29px;
|
|
color: rgba(110, 123, 132, 1);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.secondtext {
|
|
position: absolute;
|
|
//top: 6px;
|
|
right: 0;
|
|
font-size: 12px;
|
|
line-height: 30.29px;
|
|
color: rgba(39, 122, 255, 1);
|
|
}
|
|
.progressbox {
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
height: 6.4px;
|
|
bottom: 4px;
|
|
background-color: rgba(232, 241, 254, 1);
|
|
border-radius: 2px;
|
|
.progressboxpart {
|
|
width: 70%;
|
|
height: 6.4px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(
|
|
-180deg,
|
|
rgba(36, 120, 255, 1),
|
|
rgba(80, 147, 255, 1)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.study2 {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
.secondclass {
|
|
width: 74px;
|
|
height: 43px;
|
|
background-image: url(../../assets/image/pathmap/secondclass.png);
|
|
}
|
|
.secondprogress {
|
|
display: flex;
|
|
flex: 1;
|
|
position: relative;
|
|
margin-left: 9.5px;
|
|
.firsttext {
|
|
position: absolute;
|
|
//top: 6px;
|
|
display: flex;
|
|
font-size: 13px;
|
|
line-height: 30.29px;
|
|
color: rgba(110, 123, 132, 1);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.secondtext {
|
|
position: absolute;
|
|
//top: 6px;
|
|
right: 0;
|
|
font-size: 12px;
|
|
line-height: 30.29px;
|
|
color: rgba(39, 122, 255, 1);
|
|
}
|
|
.progressbox {
|
|
width: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
height: 6.4px;
|
|
bottom: 4px;
|
|
background-color: rgba(232, 241, 254, 1);
|
|
border-radius: 2px;
|
|
.progressboxpart {
|
|
width: 52%;
|
|
height: 6.4px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(
|
|
-180deg,
|
|
rgba(36, 120, 255, 1),
|
|
rgba(80, 147, 255, 1)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.project_second {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 10.5px;
|
|
.course1_first {
|
|
width: 100%;
|
|
height: 35px;
|
|
display: flex;
|
|
justify-content: content;
|
|
border-radius: 10px;
|
|
background-color: #f9f9f9;
|
|
.text8 {
|
|
display: flex;
|
|
flex: 1;
|
|
margin-top: 11px;
|
|
margin-left: 20px;
|
|
margin-bottom: 10.5px;
|
|
height: 13.5px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #333330;
|
|
}
|
|
.course1_right {
|
|
display: flex;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 13.5px;
|
|
margin-top: 15px;
|
|
// margin-right: 10.5px;
|
|
.circular {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 63px;
|
|
width: 8.5px;
|
|
height: 8.5px;
|
|
border-radius: 7px;
|
|
border: 1px solid #0060ff;
|
|
}
|
|
.text9 {
|
|
display: flex;
|
|
justify-content: content;
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 13.5px;
|
|
top: 0;
|
|
//left: 20px;
|
|
right: 18.5px;
|
|
line-height: 13.5px;
|
|
color: #0060ff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.btn1 {
|
|
width: 7px;
|
|
height: 6px;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 6px;
|
|
background-image: url(../../assets/image/pathmap/btn.png);
|
|
}
|
|
}
|
|
}
|
|
.secondcontent {
|
|
width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
.question {
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
height: 72px;
|
|
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.issue {
|
|
width: 100%;
|
|
font-size: 13px;
|
|
// line-height: 30.29px;
|
|
color: rgba(110, 123, 132, 1);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-bottom: 2px;
|
|
}
|
|
.coursetag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.goclass {
|
|
width: 63px;
|
|
height: 23px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// margin-right: 37px;
|
|
cursor: pointer;
|
|
}
|
|
// .tag1 {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// bottom: 14.5px;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// font-size: 13px;
|
|
// color: rgba(203, 128, 231, 1);
|
|
// border: 0.5px solid rgba(203, 128, 231, 1);
|
|
// line-height: 19.2px;
|
|
// //padding: 0 10px;
|
|
// }
|
|
// .tag2 {
|
|
// position: absolute;
|
|
// left: 92px;
|
|
// bottom: 14.5px;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// font-size: 13px;
|
|
// color: rgba(136, 157, 238, 1);
|
|
// border: 0.5px solid rgba(136, 157, 238, 1);
|
|
// line-height: 19.2px;
|
|
// //padding: 0 10px;
|
|
// }
|
|
// .tag3 {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// bottom: 14.5px;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// font-size: 13px;
|
|
// color: rgba(104, 206, 234, 1);
|
|
// border: 0.5px solid rgba(104, 206, 234, 1);
|
|
// line-height: 19.2px;
|
|
// //padding: 0 10px;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|