mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 02:46:47 +08:00
949 lines
27 KiB
Vue
949 lines
27 KiB
Vue
<template>
|
||
<div class="projectdetails">
|
||
<ReturnHead
|
||
text="项目详情"
|
||
:showfile="true"
|
||
:courseId="projectId || courseId"
|
||
></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_first">
|
||
<div class="course1_first">
|
||
<div class="text8">序：管理者如何持续找到发力点</div>
|
||
<div class="course1_right">
|
||
<div class="circular"></div>
|
||
<div class="text9">进行中</div>
|
||
<div class="btn1"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course_content">
|
||
<div class="study1">
|
||
<div class="firstclass"></div>
|
||
<div class="firstprogress">
|
||
<span class="firsttext">BOE端到端体系 - 第七章</span>
|
||
<span class="secondtext">70%</span>
|
||
<div class="progressbox">
|
||
<div class="progressboxpart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="study2">
|
||
<div class="secondclass"></div>
|
||
<div class="secondprogress">
|
||
<span class="firsttext">中级产品经理项目 - 产品经理…</span>
|
||
<span class="secondtext">52%</span>
|
||
<div class="progressbox">
|
||
<div class="progressboxpart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div
|
||
class="project_second"
|
||
v-for="(item, key) in data?.stageProcessList"
|
||
:key="key"
|
||
>
|
||
<div
|
||
v-if="item.stageId == '0' && item.taskProcessList.length == 0"
|
||
></div>
|
||
<div
|
||
v-else
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<div class="course1_first">
|
||
<div class="text8">{{ item.stageName }}</div>
|
||
<div class="course1_right">
|
||
<div class="circular"></div>
|
||
<div class="text9">进行中</div>
|
||
<div class="btn1"></div>
|
||
</div>
|
||
</div>
|
||
<div class="secondcontent">
|
||
<div
|
||
class="question"
|
||
v-for="(el, index) in item.taskProcessList"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<div class="issue">
|
||
{{ el.name }}
|
||
</div>
|
||
<div class="coursetag">
|
||
<div
|
||
class="tag1"
|
||
style="margin-right: 11px; margin-top: 16px"
|
||
v-if="el.flag"
|
||
>
|
||
必修
|
||
</div>
|
||
<div
|
||
class="tag2"
|
||
style="margin-right: 11px; margin-top: 16px"
|
||
v-if="!el.flag"
|
||
>
|
||
选修
|
||
</div>
|
||
<div
|
||
class="tag3"
|
||
style="margin-right: 11px; margin-top: 16px"
|
||
>
|
||
{{ types.typeName[el.type] || "" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="goclass"
|
||
:style="{
|
||
background: `${types.path[el.type] ? '#2478ff' : '#999'}`,
|
||
}"
|
||
@click="toFinish(el)"
|
||
>
|
||
{{
|
||
el.status === 1
|
||
? "已完成"
|
||
: types.path[el.type]
|
||
? types.toName[el.type]
|
||
: "未开放"
|
||
}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="last">
|
||
<div class="project_title">数据排行</div>
|
||
<div class="ranking">
|
||
<div class="rankingbox">
|
||
<div class="ranknumber">
|
||
<div class="describe">积分</div>
|
||
<div class="number">12</div>
|
||
<div class="describe_part">名</div>
|
||
</div>
|
||
<div class="ranknumber">
|
||
<div class="describe">完成度</div>
|
||
<div class="number">21</div>
|
||
<div class="describe_part">名</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, reactive, ref } from "vue";
|
||
import { ElLoading } from "element-plus";
|
||
|
||
import { useRequest, request } from "@/api/request";
|
||
import { PROJECT_PROCESS, STUDY_RECORD } from "@/api/api";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import store from "@/store";
|
||
import { ElMessage } from "element-plus";
|
||
import ReturnHead from "@/components/ReturnHead.vue";
|
||
import { PROJECT } from "@/api/CONST";
|
||
|
||
const {
|
||
query: { courseId, projectId },
|
||
} = useRoute();
|
||
const router = useRouter();
|
||
|
||
const { data } = useRequest(PROJECT_PROCESS, {
|
||
projectId: projectId || courseId,
|
||
});
|
||
|
||
console.log("datadata", data);
|
||
|
||
const userInfo = computed(() => store.state.userInfo);
|
||
const activeName = ref("first");
|
||
const handleClick = (tab, event) => {
|
||
console.log(tab, event);
|
||
};
|
||
const path = { 1: "path" };
|
||
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: 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: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
|
||
4: "/homeworkpage",
|
||
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
|
||
// 5: "/externalexam",
|
||
6: "/livebroadcast",
|
||
7: "/outerchain", //外联
|
||
8: "/discusspage",
|
||
9: "/moreactive",
|
||
// 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=${projectId}&channelCode=project`,
|
||
// "_top"
|
||
// ), //测评
|
||
10: "/evaluation", //测评
|
||
11: "/investigatpage",
|
||
12: "/ballotpage",
|
||
13: "/projectdetails",
|
||
},
|
||
});
|
||
|
||
const dialogVisible = ref(false);
|
||
const dialogVisibleTip = ref("该任务无法学习，请联系管理员进行替换！");
|
||
|
||
// 判断当前任务已结束及时间意义上的结束 提示用户
|
||
function judgeTaskIsEnd(type, endTimes, status) {
|
||
// type 任务类型 endTime 结束时间 status 任务状态 (状态 0 未完成 1 已完成 2 未开始 3 已结束)
|
||
console.log(type, endTimes, status);
|
||
let isEnd = false;
|
||
let nowTime = new Date().getTime();
|
||
let endTime = new Date().getTime(endTimes);
|
||
switch (type) {
|
||
case 1:
|
||
status == 3
|
||
? (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 == 3
|
||
? (isEnd = true)
|
||
: nowTime > endTime
|
||
? (isEnd = true)
|
||
: (isEnd = false);
|
||
break;
|
||
case 7:
|
||
status == 3
|
||
? (isEnd = true)
|
||
: nowTime > endTime
|
||
? (isEnd = true)
|
||
: (isEnd = false);
|
||
break;
|
||
case 10:
|
||
status == 3
|
||
? (isEnd = true)
|
||
: nowTime > endTime
|
||
? (isEnd = true)
|
||
: (isEnd = false);
|
||
break;
|
||
}
|
||
return isEnd;
|
||
}
|
||
|
||
function toFinish(d, sName, chapterOrStageId) {
|
||
console.log("dddddd", d, sName, chapterOrStageId);
|
||
|
||
if (judgeTaskIsEnd(d.type, data.value.endTime, data.value.status)) {
|
||
ElMessage.error("当前任务已结束");
|
||
return;
|
||
}
|
||
if (d.type == 2) {
|
||
let date1 = new Date(d.endTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) {
|
||
dialogVisibleTip.value = "当前面授课已结束";
|
||
dialogVisible.value = true;
|
||
|
||
//return
|
||
}
|
||
}
|
||
// 作业过期判断
|
||
if (d.type == 4) {
|
||
let date1 = new Date(d.endTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) {
|
||
dialogVisibleTip.value = "当前作业已结束";
|
||
dialogVisible.value = true;
|
||
|
||
//return
|
||
}
|
||
}
|
||
// 直播结束时间
|
||
if (d.type == 6) {
|
||
let date1 = new Date(d.endTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) {
|
||
dialogVisibleTip.value = "当前直播已结束";
|
||
dialogVisible.value = true;
|
||
//return
|
||
}
|
||
}
|
||
// 考试 停用
|
||
if (d.type == 5) {
|
||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
|
||
dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
|
||
dialogVisible.value = true;
|
||
return;
|
||
}
|
||
// 此处判断外部考试跳转
|
||
if (d.startTime == null || d.endTime == null) {
|
||
router.push({
|
||
path: "/externalexam",
|
||
query: {
|
||
courseId: d.courseId,
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
// 评估 停用
|
||
if (d.type == 11) {
|
||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
|
||
dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
|
||
dialogVisible.value = true;
|
||
return;
|
||
}
|
||
}
|
||
// 其他活动 结束时间
|
||
if (d.type == 9) {
|
||
let date1 = new Date(d.endTime).getTime();
|
||
let date2 = new Date().getTime();
|
||
if (date1 < date2) {
|
||
dialogVisibleTip.value = "当前活动已结束";
|
||
dialogVisible.value = true;
|
||
//return
|
||
}
|
||
}
|
||
// 在线课 停用 -- 暂时没有在线课停用标记
|
||
if (d.type == 1) {
|
||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
|
||
dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
|
||
dialogVisible.value = true;
|
||
return;
|
||
}
|
||
}
|
||
// 面授课 停用
|
||
if (d.type == 2) {
|
||
if (d.taskStatus == 1 || d.taskStatus == 2) {
|
||
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
|
||
dialogVisibleTip.value = "该任务无法学习，请联系管理员进行替换！";
|
||
dialogVisible.value = true;
|
||
return;
|
||
}
|
||
}
|
||
|
||
if (!types.value.path[d.type]) {
|
||
ElMessage.error("暂时未开放");
|
||
return;
|
||
}
|
||
if (d.type == 3 || d.type == 7) {
|
||
d.status !== 1 &&
|
||
request(STUDY_RECORD, {
|
||
studentId: data.value.userInfoBo.userId,
|
||
targetId: data.value.routerId,
|
||
logo: PROJECT,
|
||
stageOrChapterId: chapterOrStageId,
|
||
taskId: d.projectTaskId,
|
||
});
|
||
}
|
||
|
||
if (typeof types.value.path[d.type] === "string") {
|
||
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.projectTaskId,
|
||
type: PROJECT,
|
||
infoId: data.value.projectId,
|
||
courseId: d.courseId,
|
||
pName: data.value.name,
|
||
sName,
|
||
chapterOrStageId: data.value.currentStageId,
|
||
studentId: userInfo.value.id,
|
||
status: d.status,
|
||
targetId: d.targetId,
|
||
evaType: d.evaType,
|
||
btype: 1,
|
||
},
|
||
});
|
||
} else if (typeof types.value.path[d.type] === "function") {
|
||
types.value.path[d.type](d);
|
||
}
|
||
}
|
||
function whiteTypes(type) {
|
||
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
|
||
}
|
||
// 查询当前阶段所有任务是否都完成
|
||
const queryAllStatus = (data) => {
|
||
// status === 1 已完成
|
||
console.log(data);
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].status !== 1) {
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.projectdetails {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.main {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
//justify-content: center;
|
||
.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%;
|
||
display: flex;
|
||
font-size: 13px;
|
||
line-height: 30.29px;
|
||
color: rgba(110, 123, 132, 1);
|
||
}
|
||
.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;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.last {
|
||
width: 100%;
|
||
margin-top: 11.5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: 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);
|
||
}
|
||
.ranking {
|
||
width: 90%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 14px;
|
||
border-radius: 10px;
|
||
background-color: rgba(242, 245, 247, 1);
|
||
margin-bottom: 13.5px;
|
||
.rankingbox {
|
||
width: 90%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.ranknumber {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
border-bottom: 0.5px solid rgba(223, 223, 223, 1);
|
||
.describe {
|
||
display: flex;
|
||
position: absolute;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
color: rgba(51, 51, 48, 1);
|
||
}
|
||
.number {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 23.5px;
|
||
font-size: 21px;
|
||
font-weight: bold;
|
||
line-height: 24px;
|
||
color: rgba(0, 96, 255, 1);
|
||
}
|
||
.describe_part {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
color: rgba(51, 51, 48, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|