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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source 
# Conflicts:
#	src/views/roadmap/PathDetails.vue
This commit is contained in:
yuping
2022-12-23 17:01:56 +08:00
parent 6807c52fd0 c16dfe5716
commit 041c0d6a8d
5 changed files with 1981 additions and 2123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/faceteach/FaceTeach.vue
View File

@@ -7,11 +7,7 @@
<div style="font-weight: 700">课程详情</div> <div style="font-weight: 700">课程详情</div>
<div v-if="pName != ''" class="return"> <div v-if="pName != ''" class="return">
<div style="display: flex" @click="returnclick"> <div style="display: flex" @click="returnclick">
<img <img class="img2" style="margin-right: 22px" src="../../assets/image/return.png" />
class="img2"
style="margin-right: 22px"
src="../../assets/image/return.png"
/>
<div class="text">返回</div> <div class="text">返回</div>
</div> </div>
</div> </div>
@@ -23,56 +19,31 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【面授课】{{ data.planDto?.name }}</div> <div class="title">【面授课】{{ data.planDto?.name }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img <img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px"> <div style="margin-left: 8px">
{{ data.planDto?.beginTime + "至" + data.planDto?.endTime }} {{ data.planDto?.beginTime + "至" + data.planDto?.endTime }}
</div> </div>
</div> </div>
<div class="time" style="margin-top: 23px"> <div class="time" style="margin-top: 23px">
<img <img style="width: 16px; height: 18px" src="../../assets/image/position.png" />
style="width: 16px; height: 18px"
src="../../assets/image/position.png"
/>
<div style="margin-left: 8px">{{ data.planDto?.address }}</div> <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
</div> </div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<botton <botton v-if="!isAllowSign" class="btn" style="margin-right: 20px; background: #999" @click="signClick">签到
v-if="!isAllowSign"
class="btn"
style="margin-right: 20px; background: #999"
@click="signClick"
>签到
</botton> </botton>
<botton <botton v-if="isAllowSign" class="btn" style="margin-right: 20px" :style="{
v-if="isAllowSign"
class="btn"
style="margin-right: 20px"
:style="{
background: data.signFlag ? '#999' : 'rgb(57, 146, 249)', background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
}" }" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton> </botton>
<botton <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
style="background: #999"
class="btn"
@click="toSurvery"
v-if="data.planDto?.evalFlag == 0"
>
评估 评估
</botton> </botton>
<botton <botton :style="{
:style="{
background: `${new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`, background: `${new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
}" }" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag && data.planDto?.evalFlag == 1">{{
class="btn" data.isSurvery ? "已评估" : "评估"
@click="toSurvery" }}
v-if="data.planDto?.evalFlag && data.planDto?.evalFlag == 1"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton> </botton>
</div> </div>
</div> </div>
@@ -84,10 +55,7 @@
<div class="detailT"> <div class="detailT">
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/course.png" />
style="width: 20px; height: 20px"
src="../../assets/image/course.png"
/>
<div class="text">课程详情</div> <div class="text">课程详情</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -99,79 +67,49 @@
<div class="detailB"> <div class="detailB">
<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 <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无附件 此课程无附件
</div> </div>
<div <div v-for="(el, index) in JSON.parse(data.planDto?.attach)" :key="index" v-if="data.planDto"
v-for="(el, index) in JSON.parse(data.planDto?.attach)" class="enclosure" :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
:key="index"
v-if="data.planDto"
class="enclosure"
:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
>
<div class="enclosureL"> <div class="enclosureL">
<FileTypeImg <FileTypeImg v-model="el.name" :style="{
v-model="el.name"
:style="{
width: '22px', width: '22px',
height: '26px', height: '26px',
marginLeft: '10px', marginLeft: '10px',
}" }"></FileTypeImg>
></FileTypeImg>
<div style="margin-left: 20px">{{ el.name }}</div> <div style="margin-left: 20px">{{ el.name }}</div>
</div> </div>
<div <div v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" class="download">
v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" <img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
class="download"> <div style="margin-left: 5px;color:#999;" @click="downloads(el.response.data)">
<img
style="width: 16px; height: 15px"
src="../../assets/image/download.png"
/>
<div
style="margin-left: 5px;color:#999;"
@click="downloads(el.response.data)"
>
下载 下载
</div> </div>
</div> </div>
<div <div v-else class="download">
v-else <img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
class="download"> <div style="margin-left: 5px" @click="download(el.response.data)">
<img
style="width: 16px; height: 15px"
src="../../assets/image/download.png"
/>
<div
style="margin-left: 5px"
@click="download(el.response.data)"
>
下载 下载
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="课程作业" name="second"> <el-tab-pane label="课程作业" name="second">
<div <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无作业 此课程无作业
</div> </div>
<div class="work" v-if="data.workDto?.workName"> <div class="work" v-if="data.workDto?.workName">
@@ -194,17 +132,14 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="课程考试" name="third"> <el-tab-pane label="课程考试" name="third">
<div <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无考试 此课程无考试
</div> </div>
<div class="work" v-if="data.examinationDto?.examinationTestName"> <div class="work" v-if="data.examinationDto?.examinationTestName">
@@ -213,16 +148,15 @@
{{ data.examinationDto?.examinationTestName }} {{ data.examinationDto?.examinationTestName }}
</div> </div>
<div style="margin-top: 16px; display: flex"> <div style="margin-top: 16px; display: flex">
<div <div class="tag1" v-if="data.examinationDto?.examinationFlag">
class="tag1"
v-if="data.examinationDto?.examinationFlag"
>
必修 必修
</div> </div>
<div class="tag3" style="margin-left: 11px">考试</div> <div class="tag3" style="margin-left: 11px">考试</div>
</div> </div>
</div> </div>
<div :style="{background: new Date(data.planDto.beginTime).getTime() > new Date().getTime()?'#999':''}" class="submit" @click="toExamItem(data.examinationDto)"> <div
:style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
class="submit" @click="toExamItem(data.examinationDto)">
去考试 去考试
</div> </div>
</div> </div>
@@ -232,10 +166,7 @@
</div> </div>
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png"
/>
<div class="text">面授课讲师</div> <div class="text">面授课讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -296,7 +227,7 @@ const download = (url) => {
window.open(url); window.open(url);
}; };
const downloads = (url) => { const downloads = (url) => {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
}; };
let timer = null; let timer = null;
//判断能否签到 //判断能否签到
@@ -360,7 +291,7 @@ const signClick = () => {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if (date1 > date2) { if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -388,7 +319,7 @@ function toSurvery() {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if (date1 > date2) { if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -424,7 +355,7 @@ function toWork() {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if (date1 > date2) { if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -445,7 +376,7 @@ function toExamItem(obj) {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if (date1 > date2) { if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -514,9 +445,11 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
} }
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;
.text { .text {
text-align: center; text-align: center;
display: flex; display: flex;
@@ -524,6 +457,7 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
} }
.detailinfo { .detailinfo {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;

108
src/views/liveBroadcast/LiveBroadcast.vue
View File

@@ -17,11 +17,7 @@
</div>--> </div>-->
<div class="return"> <div class="return">
<div style="display: flex" @click="returnclick"> <div style="display: flex" @click="returnclick">
<img <img class="img2" style="margin-right: 22px" src="../../assets/image/return.png" />
class="img2"
style="margin-right: 22px"
src="../../assets/image/return.png"
/>
<div class="text">返回</div> <div class="text">返回</div>
</div> </div>
</div> </div>
@@ -33,10 +29,7 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【直播】{{ data?.liveName }}</div> <div class="title">【直播】{{ data?.liveName }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img <img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px"> <div style="margin-left: 8px">
{{ data?.liveStartTime + "至" + data?.liveEndTime }} {{ data?.liveStartTime + "至" + data?.liveEndTime }}
</div> </div>
@@ -52,37 +45,23 @@
</div> --> </div> -->
</div> </div>
<div class="threeBtn"> <div class="threeBtn">
<botton <botton class="btn" :style="{
class="btn" background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : 'rgb(59, 191, 252)'}`,
style="background: rgb(59, 191, 252)" }" @click="showClick">观看
@click="showClick"
>观看
</botton> </botton>
<botton <botton class="btn" :style="{
class="btn" background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : data.signFlag ? '#999' : 'rgb(57, 146, 249)'}`,
:style="{ }" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
background: `${data.signFlag ? '#999' : 'rgb(57, 146, 249)'}`,
}"
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton> </botton>
<botton <botton style="background: #999" class="btn" @click="commitClick" v-if="data.isEvaluate == 0">
style="background: #999"
class="btn"
@click="commitClick"
v-if="data.isEvaluate == 0"
>
评估 评估
</botton> </botton>
<botton <botton :style="{
:style="{ background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
background: `${data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`, }" class="btn" @click="commitClick" v-if="data.isEvaluate && data.isEvaluate == 1">{{ data.isSurvery ? "已评估"
}" : "评估"
class="btn" }}
@click="commitClick"
v-if="data.isEvaluate && data.isEvaluate == 1"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton> </botton>
</div> </div>
</div> </div>
@@ -94,10 +73,7 @@
<div class="detailT"> <div class="detailT">
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/course.png" />
style="width: 20px; height: 20px"
src="../../assets/image/course.png"
/>
<div class="text">直播说明</div> <div class="text">直播说明</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -131,10 +107,7 @@
<div> <div>
<div class="tell"> <div class="tell">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/tv.png" />
style="width: 21px; height: 23px"
src="../../assets/image/tv.png"
/>
<div class="text">直播公告</div> <div class="text">直播公告</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -142,18 +115,12 @@
</div> </div>
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png"
/>
<!-- todo #直播详情 没有直播讲师--> <!-- todo #直播详情 没有直播讲师-->
<div class="text">直播讲师</div> <div class="text">直播讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<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="teacherInfo.avatar" /> <img class="peopleimg" :src="teacherInfo.avatar" />
<div style="margin-left: 17px; width: 190px"> <div style="margin-left: 17px; width: 190px">
<div class="teacherName" style="margin-right: 5px"> <div class="teacherName" style="margin-right: 5px">
@@ -189,7 +156,7 @@ const returnclick = () => {
}; };
const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId }); const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId });
console.log('直播信息', data)
const teacherInfo = useUserInfo( const teacherInfo = useUserInfo(
computed(() => data.value.userInfoBo?.userId) computed(() => data.value.userInfoBo?.userId)
); );
@@ -208,6 +175,14 @@ const state = reactive({
}); });
const { activeName, teacher } = toRefs(state); const { activeName, teacher } = toRefs(state);
const signClick = () => { const signClick = () => {
if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return;
}
}
if (data.value.signFlag) { if (data.value.signFlag) {
return; return;
} }
@@ -216,9 +191,17 @@ const signClick = () => {
request(TASK_BROADCAST_SIGN, { courseId: liveId, taskId, type }); request(TASK_BROADCAST_SIGN, { courseId: liveId, taskId, type });
}; };
const commitClick = () => { const commitClick = () => {
if (data.value.isSurvery) { if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
}
if (data.value.isSurvery) {
// return;
}
if (data.value.isEvaluate == 0) { if (data.value.isEvaluate == 0) {
ElMessage.info("此直播无评估"); ElMessage.info("此直播无评估");
return; return;
@@ -235,6 +218,14 @@ const commitClick = () => {
}; };
function showClick() { function showClick() {
if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return;
}
}
window.open(data.value.liveLink); window.open(data.value.liveLink);
} }
</script> </script>
@@ -249,9 +240,11 @@ function showClick() {
line-height: 24px; line-height: 24px;
position: relative; position: relative;
} }
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;
.text { .text {
text-align: center; text-align: center;
display: flex; display: flex;
@@ -259,6 +252,7 @@ function showClick() {
align-items: center; align-items: center;
} }
} }
.preNext { .preNext {
position: absolute; position: absolute;
right: 0px; right: 0px;
@@ -333,6 +327,7 @@ function showClick() {
} }
@media screen and (max-width: 1030px) { @media screen and (max-width: 1030px) {
// .threeBtn { // .threeBtn {
// margin-right: 30px; // margin-right: 30px;
// } // }
@@ -340,6 +335,7 @@ function showClick() {
margin-bottom: -24px; margin-bottom: -24px;
} }
} }
// @media screen and(max-width:) { // @media screen and(max-width:) {
// } // }
.time { .time {
@@ -530,11 +526,9 @@ function showClick() {
// min-height: 557px; // min-height: 557px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(36, 120, 255, 0.15) 0%, rgba(36, 120, 255, 0.15) 0%,
rgba(255, 255, 255) 50% rgba(255, 255, 255) 50%);
);
.title { .title {
display: flex; display: flex;

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%;

61
src/views/project/ProjectManage.vue
View File

@@ -31,37 +31,22 @@
<el-input v-model="projectname" placeholder="请输入项目名称" /> <el-input v-model="projectname" placeholder="请输入项目名称" />
</div> </div>
<div style="width: 420px"> <div style="width: 420px">
<el-date-picker <el-date-picker v-model="searchTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
v-model="searchTime" @change="selectTime" />
type="datetimerange"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="selectTime"
/>
</div> </div>
<button <button class="searchBtn" @click="searchClick" style="margin-left: 20px">
class="searchBtn"
@click="searchClick"
style="margin-left: 20px"
>
搜索 搜索
</button> </button>
<button class="searchBtn" @click="resetClick">重置</button> <button class="searchBtn" @click="resetClick">重置</button>
</div> </div>
<div class="projectList" v-if="!projectList.length" style="display:flex;color:#909399;"> <div class="projectList" v-if="!projectList.length" style="display:flex;color:#909399;">
<img <img class="img2" style="margin-left: 675px;margin-top: 165px;width:148px;height:220px;"
class="img2" src="../../assets/image/notask.png" />
style="margin-left: 675px;margin-top: 165px;width:148px;height:220px;"
src="../../assets/image/notask.png"
/>
</div> </div>
<div v-else class="projectList" v-for="(i, k) in projectList" :key="k"> <div v-else class="projectList" v-for="(i, k) in projectList" :key="k">
<div style="display: flex"> <div style="display: flex">
<img <img style="width: 253px; height: 144px; border-radius: 4px" :src="i.picUrl" />
style="width: 253px; height: 144px; border-radius: 4px"
:src="i.picUrl"
/>
<div style="margin-left: 29px"> <div style="margin-left: 29px">
<div class="projectName" :title="i.name"> <div class="projectName" :title="i.name">
{{ i.name }} {{ i.name }}
@@ -69,12 +54,8 @@
<div class="progress"> <div class="progress">
<div class="progressNow">当前进度：</div> <div class="progressNow">当前进度：</div>
<div style="width: 115px"> <div style="width: 115px">
<el-progress <el-progress :percentage="parseInt(i.finishTaskNum / i.totalTaskNum * 100)" :show-text="false"
:percentage="parseInt(i.finishTaskNum / i.totalTaskNum * 100) " :stroke-width="8" color="rgba(255, 160, 80, 1)" />
:show-text="false"
:stroke-width="8"
color="rgba(255, 160, 80, 1)"
/>
</div> </div>
<div class="progressNum"> <div class="progressNum">
{{ {{
@@ -85,11 +66,7 @@
<div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间：{{ i.lastStudyTime }}</div> <div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间：{{ i.lastStudyTime }}</div>
</div> </div>
</div> </div>
<div <div class="tobestarted" v-if="i.status == 2" @click="goProjectDetails(i)">
class="tobestarted"
v-if="i.status == 2"
@click="goProjectDetails(i)"
>
待开始 待开始
</div> </div>
<div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)"> <div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)">
@@ -98,11 +75,7 @@
<div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)"> <div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)">
已完成 已完成
</div> </div>
<div <div class="tobestarted" v-if="i.status == 3" @click="goProjectDetails(i)">
class="tobestarted"
v-if="i.status == 3"
@click="goProjectDetails(i)"
>
已结束 已结束
</div> </div>
</div> </div>
@@ -225,22 +198,26 @@ const goProjectDetails = (value) => {
//border-radius: 8px; //border-radius: 8px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
display: flex; display: flex;
// background-color: #ccc; // background-color: #ccc;
.content { .content {
width: 100%; width: 100%;
// flex: 1; // flex: 1;
margin-top: 50px; margin-top: 50px;
margin-left: 81px; margin-left: 81px;
.title { .title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
line-height: 25px; line-height: 25px;
} }
.search { .search {
margin-top: 31px; margin-top: 31px;
display: flex; display: flex;
align-items: center; align-items: center;
.searchBtn { .searchBtn {
width: 100px; width: 100px;
height: 35px; height: 35px;
@@ -255,12 +232,14 @@ const goProjectDetails = (value) => {
margin-left: 10px; margin-left: 10px;
} }
} }
.projectList { .projectList {
margin-top: 40px; margin-top: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
overflow-x: auto; overflow-x: auto;
.projectName { .projectName {
width: 270px; width: 270px;
margin-top: 12px; margin-top: 12px;
@@ -273,12 +252,15 @@ const goProjectDetails = (value) => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.progress { .progress {
display: flex; display: flex;
align-items: center; align-items: center;
.el-progress-bar__outer { .el-progress-bar__outer {
background-color: rgba(255, 160, 80, 0.19); background-color: rgba(255, 160, 80, 0.19);
} }
.progressNow { .progressNow {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
@@ -286,6 +268,7 @@ const goProjectDetails = (value) => {
line-height: 20px; line-height: 20px;
margin-right: 20px; margin-right: 20px;
} }
.progressNum { .progressNum {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
@@ -294,6 +277,7 @@ const goProjectDetails = (value) => {
margin-left: 26px; margin-left: 26px;
} }
} }
.studyNew { .studyNew {
margin-top: 16px; margin-top: 16px;
font-size: 14px; font-size: 14px;
@@ -301,6 +285,7 @@ const goProjectDetails = (value) => {
color: #999999; color: #999999;
line-height: 20px; line-height: 20px;
} }
.tobestarted { .tobestarted {
width: 140px; width: 140px;
height: 40px; height: 40px;
@@ -316,6 +301,7 @@ const goProjectDetails = (value) => {
cursor: pointer; cursor: pointer;
margin-right: 120px; margin-right: 120px;
} }
.gostudy { .gostudy {
width: 140px; width: 140px;
height: 40px; height: 40px;
@@ -332,6 +318,7 @@ const goProjectDetails = (value) => {
margin-right: 120px; margin-right: 120px;
cursor: pointer; cursor: pointer;
} }
.finish { .finish {
width: 140px; width: 140px;
height: 40px; height: 40px;

119
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,22 +87,17 @@
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.currentRatio === 1 value.status === 1
? "已完成" ? "已完成"
: types.path[value.type] : types.path[value.type]
? types.toName[value.type] ? types.toName[value.type]
@@ -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;
} }