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

feat:增加项目/学习路径图的简介和关卡说明

Browse Source
This commit is contained in:
wuyx
2022-12-23 15:54:28 +08:00
parent 819c4148b0
commit 70c441e343
2 changed files with 618 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -116,7 +116,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程公告" name="first">
<div class="notice">
{{ data.remark || "暂无公告" }}
{{ data.notice || "暂无公告" }}
</div>
</el-tab-pane>
<!--
@@ -238,11 +238,7 @@
</div>
<!-- 详细信息 -->
<!-- 弹框提示信息 -->
<el-dialog
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -492,11 +488,13 @@ function whiteTypes(type) {
.el-dialog__header {
display: none;
}
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
.return {
position: absolute;
right: 10%;

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

@@ -16,7 +16,7 @@
<!-- 面包屑导航 -->
<div class="pdname">
{{ userInfo.bandDesc }}
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">关卡说明
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
</span>
</div>
@@ -27,35 +27,22 @@
<div class="title">
<div class="titleL">{{ data.currentStageName }}</div>
<div class="titleR" :style="{ display: 'flex' }">
<img
:src="data.currentChapterCnt?circle:circle2"/>
<img :src="data.currentChapterCnt ? circle : circle2" />
<div class="titleRT" :style="{ color: data.currentChapterCnt ? '' : 'rgba(102, 102, 102, 1)' }">
{{ data.currentChapterCnt ? '进行中' : '未开始' }}
</div>
</div>
</div>
<div
class="course"
v-for="(value, index) in data.taskBoList?.filter(
<div class="course" v-for="(value, index) in data.taskBoList?.filter(
(e) => !whiteTypes(e.type)
)"
:key="index"
>
)" :key="index">
<div style="width: 70%">
<div class="coursename" :title="value.name">{{ value.name }}</div>
<div class="coursetag">
<div
class="tag1"
style="margin-right: 11px; margin-top: 16px"
v-if="value.flag"
>
<div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">
必修
</div>
<div
class="tag2"
style="margin-right: 11px; margin-top: 16px"
v-if="!value.flag"
>
<div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">
选修
</div>
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
@@ -71,18 +58,11 @@
<!-- {{ item.name }}-->
<!-- </div>-->
</div>
<div
class="progressBox"
:style="{ display: value.type === 1 ? 'block' : 'none' }"
>
<div class="progressBox" :style="{ display: value.type === 1 ? 'block' : 'none' }">
<div>当前进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="value.currentRatio"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="value.currentRatio" :show-text="false" :stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -91,17 +71,14 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)]
"
/>
" />
</div>
<div
style="
<div style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -110,20 +87,15 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)],
}"
>
}">
{{ value.currentRatio }}%
</div>
</div>
</div>
</div>
<div
class="goclass"
:style="{
<div class="goclass" :style="{
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}"
@click="toFinish(value)"
>
}" @click="toFinish(value)">
{{
value.status === 1
? "已完成"
@@ -191,18 +163,12 @@
<div class="detailRB">
<div class="info">
<div class="title">
<img
style="width: 21px; height: 20px"
src="../../assets/image/pathdetails/info.png"
/>
<img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png" />
<div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div>
</div>
<!-- todo #路径详情 个人信息缺少img和介绍-->
<div
class="teacheritem"
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
>
<div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
<img class="peopleimg" :src="userInfo.avatar" />
<div style="margin-left: 17px">
<div class="teacherName">
@@ -219,10 +185,7 @@
</div>
<div class="info" style="padding-top: 20px">
<div class="title">
<img
style="width: 18px; height: 17px"
src="../../assets/image/pathdetails/study.png"
/>
<img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png" />
<div class="text" style="margin-left: 9px">学习进度</div>
<div class="box"></div>
</div>
@@ -236,11 +199,8 @@
<div>总进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="parseInt(data.currentChapterCnt / data.totalChapterCnt * 100)"
:show-text="false" :stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -249,12 +209,9 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[(parseInt(data.currentChapterCnt / data.totalChapterCnt) * 100) / 20]
"
/>
" />
</div>
<div
style="font-size: 14px; font-weight: 500; margin-left: 10px"
:style="{
<div style="font-size: 14px; font-weight: 500; margin-left: 10px" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -263,8 +220,7 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentChapterCnt / data.totalChapterCnt * 100) / 20)],
}"
>
}">
{{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}%
</div>
</div>
@@ -275,11 +231,8 @@
<div>必修进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="parseInt(data.currentReqCnt / data.totalReqCnt * 100)" :show-text="false"
:stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -288,17 +241,14 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)]
"
/>
" />
</div>
<div
style="
<div style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -307,8 +257,7 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)],
}"
>
}">
{{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
</div>
</div>
@@ -321,11 +270,7 @@
</div>
<!-- 详细信息 -->
<!-- 弹框提示信息 -->
<el-dialog
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -356,7 +301,7 @@ const returnclick = () => {
};
const { data } = useRequest(ROUTER_PROCESS, { routerId });
const userInfo = computed(() => store.state.userInfo);
console.log('lalalallala', data)
const activeName = ref("first");
const handleClick = (tab, event) => {
@@ -368,7 +313,7 @@ const dialogVisible = ref(false);
const dialogVisibleTip = ref('');
function introductionPro() {
dialogVisibleTip.value =data.value.remark;
dialogVisibleTip.value = data.value.chapterRemark ? data.value.chapterRemark : '暂无说明';
dialogVisible.value = true;
}