mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-10 19:36:48 +08:00
feat:合并
This commit is contained in:
lixg
@@ -12,122 +12,116 @@
|
||||
<div class="detailinfo">
|
||||
<div class="detailL">
|
||||
<div v-for="(i, k) in data.stageProcessList" :key="k">
|
||||
<div v-if="i.stageId !== '0'">
|
||||
<div class="title">
|
||||
<div class="titleL">{{ i.stageName }}</div>
|
||||
<div class="titleR" :style="{ display: 'flex' }">
|
||||
<img src="../../assets/image/pathdetails/circle.png" />
|
||||
<div class="titleRT">进行中</div>
|
||||
</div>
|
||||
<div
|
||||
class="titleR"
|
||||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||||
>
|
||||
<img src="../../assets/image/pathdetails/circle2.png" />
|
||||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||||
未开始
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
|
||||
<div v-else class="title">
|
||||
<div class="titleL">{{ i.stageName }}</div>
|
||||
<div class="titleR" :style="{ display: 'flex' }">
|
||||
<img src="../../assets/image/pathdetails/circle.png" />
|
||||
<div class="titleRT">进行中</div>
|
||||
</div>
|
||||
<div
|
||||
class="course"
|
||||
v-for="(value, index) in i.taskProcessList.filter(
|
||||
(e) => !whiteTypes(e.type)
|
||||
)"
|
||||
:key="index"
|
||||
class="titleR"
|
||||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||||
>
|
||||
<div style="width: 70%">
|
||||
<div class="coursename">{{ value.name }}</div>
|
||||
<div class="coursetag">
|
||||
<div
|
||||
class="tag1"
|
||||
style="margin-right: 11px; margin-top: 16px"
|
||||
>
|
||||
必修
|
||||
</div>
|
||||
<div
|
||||
class="tag3"
|
||||
style="margin-right: 11px; margin-top: 16px"
|
||||
>
|
||||
{{ types.typeName[value.type] || "" }}
|
||||
</div>
|
||||
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, key) in value.flag"-->
|
||||
<!-- :key="key"-->
|
||||
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
|
||||
<!-- style="margin-right: 11px; margin-top: 16px"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item.name }}-->
|
||||
<!-- </div>-->
|
||||
<img src="../../assets/image/pathdetails/circle2.png" />
|
||||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||||
未开始
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
|
||||
<div
|
||||
v-else
|
||||
class="course"
|
||||
v-for="(value, index) in i.taskProcessList.filter(
|
||||
(e) => !whiteTypes(e.type)
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: 70%">
|
||||
<div class="coursename">{{ value.name }}</div>
|
||||
<div class="coursetag">
|
||||
<div class="tag1" style="margin-right: 11px; margin-top: 16px">
|
||||
必修
|
||||
</div>
|
||||
<div
|
||||
class="progressBox"
|
||||
:style="{ display: value.status === 1 ? 'block' : 'none' }"
|
||||
>
|
||||
<div>当前进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="value.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(value.currentRatio / 20)]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
"
|
||||
:style="{
|
||||
color: {
|
||||
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
|
||||
{{ types.typeName[value.type] || "" }}
|
||||
</div>
|
||||
<!-- <div-->
|
||||
<!-- v-for="(item, key) in value.flag"-->
|
||||
<!-- :key="key"-->
|
||||
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
|
||||
<!-- style="margin-right: 11px; margin-top: 16px"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item.name }}-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div
|
||||
class="progressBox"
|
||||
:style="{ display: value.status === 1 ? 'block' : 'none' }"
|
||||
>
|
||||
<div>当前进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="value.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(value.currentRatio / 20)],
|
||||
}"
|
||||
>
|
||||
{{ value.currentRatio }}%
|
||||
</div>
|
||||
}[parseInt(value.currentRatio / 20)]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 14px;
|
||||
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(value.currentRatio / 20)],
|
||||
}"
|
||||
>
|
||||
{{ value.currentRatio }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goclass" @click="toFinish(value, i.name, i.stageId)">
|
||||
{{
|
||||
value.status === 1
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
}}
|
||||
</div>
|
||||
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
|
||||
<!-- <div-->
|
||||
<!-- class="goclass"-->
|
||||
<!-- :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
|
||||
<!-- </div>-->
|
||||
<!-- <img-->
|
||||
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
|
||||
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
|
||||
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="goclass" @click="toFinish(value, i.name, i.stageId)">
|
||||
{{
|
||||
value.status === 1
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
}}
|
||||
</div>
|
||||
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
|
||||
<!-- <div-->
|
||||
<!-- class="goclass"-->
|
||||
<!-- :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
|
||||
<!-- </div>-->
|
||||
<!-- <img-->
|
||||
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
|
||||
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
|
||||
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
|
||||
<!-- />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tag1">必修</div>
|
||||
@@ -216,7 +210,6 @@
|
||||
<div class="ratetext">上次学到：启航班-领导寄语</div>
|
||||
<div class="ratebtn">继续学习</div>
|
||||
</div>-->
|
||||
|
||||
<div style="margin-top: 16px">
|
||||
<div class="progressBox">
|
||||
<div>总进度</div>
|
||||
@@ -308,7 +301,6 @@
|
||||
<!-- 详细信息 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import word from "@/assets/image/file/word.png";
|
||||
@@ -330,7 +322,6 @@ import {
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import store from "@/store";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const {
|
||||
query: { courseId, projectId },
|
||||
} = useRoute();
|
||||
@@ -343,14 +334,11 @@ const { data } = useRequest(PROJECT_PROCESS, {
|
||||
});
|
||||
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: "在线",
|
||||
@@ -406,7 +394,6 @@ const types = ref({
|
||||
13: "/projectdetails",
|
||||
},
|
||||
});
|
||||
|
||||
function toFinish(d, sName, chapterId) {
|
||||
console.log("dddddd", d);
|
||||
if (!types.value.path[d.type]) {
|
||||
@@ -446,7 +433,6 @@ function whiteTypes(type) {
|
||||
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss">
|
||||
.pathdetails {
|
||||
@@ -456,19 +442,16 @@ function whiteTypes(type) {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.pdname {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.detailinfo {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
|
||||
.detailL {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
@@ -477,7 +460,6 @@ function whiteTypes(type) {
|
||||
padding-left: 45px;
|
||||
padding-right: 45px;
|
||||
padding-top: 23px;
|
||||
|
||||
.title {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
@@ -486,19 +468,16 @@ function whiteTypes(type) {
|
||||
background-color: rgba(249, 249, 249, 1);
|
||||
margin-top: 27px;
|
||||
margin-bottom: 19px;
|
||||
|
||||
.titleL {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #333333;
|
||||
margin-left: 27px;
|
||||
}
|
||||
|
||||
.titleR {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.titleR .titleRT {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
@@ -507,7 +486,6 @@ function whiteTypes(type) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.course {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -515,7 +493,6 @@ function whiteTypes(type) {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 32px;
|
||||
margin-left: 26px;
|
||||
|
||||
.coursename {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@@ -525,28 +502,23 @@ function whiteTypes(type) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.coursetag {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.progressBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #677d86;
|
||||
margin-top: 24px;
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress .el-progress-bar__outer {
|
||||
background-color: rgba(232, 241, 254, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.goclass {
|
||||
width: 126px;
|
||||
height: 46px;
|
||||
@@ -564,26 +536,21 @@ function whiteTypes(type) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailR {
|
||||
width: 434px;
|
||||
|
||||
.detailRT {
|
||||
min-height: 298px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-tabs__item {
|
||||
height: 56px;
|
||||
padding: 10px 33px 0px 27px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
background-color: rgba(56, 125, 247, 0.2);
|
||||
}
|
||||
|
||||
.notice {
|
||||
padding: 15px 43px 30px 47px;
|
||||
font-size: 14px;
|
||||
@@ -591,7 +558,6 @@ function whiteTypes(type) {
|
||||
color: #333330;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.sharedocname {
|
||||
width: 259px;
|
||||
font-size: 14px;
|
||||
@@ -600,7 +566,6 @@ function whiteTypes(type) {
|
||||
margin-left: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.download {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -611,13 +576,11 @@ function whiteTypes(type) {
|
||||
color: #2478ff;
|
||||
}
|
||||
}
|
||||
|
||||
.detailRB {
|
||||
min-height: 459px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-top: 17px;
|
||||
|
||||
.info .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -625,14 +588,12 @@ function whiteTypes(type) {
|
||||
position: relative;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.info .title .text {
|
||||
margin-left: 8px;
|
||||
font-size: 16px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.info .title .box {
|
||||
width: 75px;
|
||||
height: 10px;
|
||||
@@ -641,7 +602,6 @@ function whiteTypes(type) {
|
||||
left: 23px;
|
||||
top: 53px;
|
||||
}
|
||||
|
||||
.info .teacheritem {
|
||||
margin-left: 48px;
|
||||
margin-right: 48px;
|
||||
@@ -649,13 +609,11 @@ function whiteTypes(type) {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
.info .teacheritem .peopleimg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.info .teacheritem .teacherName {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
@@ -664,7 +622,6 @@ function whiteTypes(type) {
|
||||
align-items: center;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.info .teacheritem .teacherName .teacherMedal {
|
||||
width: 17px;
|
||||
height: 19px;
|
||||
@@ -672,7 +629,6 @@ function whiteTypes(type) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info .teacheritem .introduce {
|
||||
width: 260px;
|
||||
font-size: 14px;
|
||||
@@ -681,7 +637,6 @@ function whiteTypes(type) {
|
||||
margin-top: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.info .rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -690,7 +645,6 @@ function whiteTypes(type) {
|
||||
margin-left: 48px;
|
||||
margin-right: 26px;
|
||||
}
|
||||
|
||||
.info .rate .ratetext {
|
||||
width: 259px;
|
||||
font-size: 14px;
|
||||
@@ -698,7 +652,6 @@ function whiteTypes(type) {
|
||||
color: #677d86;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.info .rate .ratebtn {
|
||||
width: 86px;
|
||||
height: 36px;
|
||||
@@ -713,19 +666,16 @@ function whiteTypes(type) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info .progressBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #677d86;
|
||||
margin-top: 16px;
|
||||
margin-left: 44px;
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress .el-progress-bar__outer {
|
||||
background-color: rgba(232, 241, 254, 1);
|
||||
}
|
||||
@@ -734,4 +684,4 @@ function whiteTypes(type) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user