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

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

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