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

feat:合并

Browse Source
This commit is contained in:
lixg
2022-12-21 16:18:58 +08:00
parent 40cf3a8bff d1fb89ac14
commit 3da28419ae
4 changed files with 1234 additions and 1373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/img/UploadImg.vue
View File

@@ -1,14 +1,6 @@
<template> <template>
<el-upload <el-upload :file-list="files" :action="FILE_UPLOAD" method="POST" :show-file-list="false" :on-change="handleChange"
:file-list="files" :limit="max" ref="imageRef" :on-exceed="exceed">
:action="FILE_UPLOAD"
method="POST"
:show-file-list="false"
:on-change="handleChange"
:limit="max"
ref="imageRef"
:on-exceed="exceed"
>
<template #trigger> <template #trigger>
<div> <div>
<slot></slot> <slot></slot>
@@ -58,6 +50,8 @@ function handleChange(e) {
function remove(i) { function remove(i) {
files.value.splice(i, 1) files.value.splice(i, 1)
console.log(imageRef)
imageRef.value.clearFiles();
} }
function reUpload(i) { function reUpload(i) {

156
src/views/homework/HomeworkPage.vue
View File

@@ -17,12 +17,8 @@
<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;cursor: pointer;" src="../../assets/image/return.png" />
class="img2" <div style="cursor: pointer;" class="text">返回</div>
style="margin-right: 22px"
src="../../assets/image/return.png"
/>
<div class="text">返回</div>
</div> </div>
</div> </div>
</div> </div>
@@ -34,19 +30,14 @@
<div class="detailinfo"> <div class="detailinfo">
<div class="detail"> <div class="detail">
<div class="detailT"> <div class="detailT">
<div <div style="
style="
margin-left: 45px; margin-left: 45px;
margin-right: 42px; margin-right: 42px;
position: relative; position: relative;
width: 100%; width: 100%;
" ">
>
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业名称</div> <div class="text">作业名称</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -58,38 +49,22 @@
</div> </div>
</div> </div>
<UploadImg v-model:value="fileList" ref="uploadRef"> <UploadImg v-model:value="fileList" ref="uploadRef">
<button <button class="shangchuan" style="cursor: pointer">
class="shangchuan"
style="cursor: pointer"
>
上传 上传
</button> </button>
</UploadImg> </UploadImg>
<div <div class="uploadDetail"
class="uploadDetail"
:style="{ display: showFileList && fileList && fileList.length > 0 ? 'block' : 'none' }" :style="{ display: showFileList && fileList && fileList.length > 0 ? 'block' : 'none' }"
@mousemove="showFileList = 1" @mousemove="showFileList = 1" @mouseout="showFileList = 0" style="padding-top: 60px">
@mouseout="showFileList = 0"
style="padding-top: 60px"
>
<div class="triangle"></div> <div class="triangle"></div>
<div class="square clearfix"> <div class="square clearfix">
<div <div class="squarecontent1" v-for="(file, i) in fileList" :key="i">
class="squarecontent1" <FileTypeImg v-model="file.name" :style="{ margin: '12px 15px 0 27px' }"></FileTypeImg>
v-for="(file, i) in fileList"
:key="i"
>
<FileTypeImg
v-model="file.name"
:style="{ margin: '12px 15px 0 27px' }"
></FileTypeImg>
<div class="rarDetail"> <div class="rarDetail">
<span class="detail1" style="margin-right: 130px"> <span class="detail1" style="margin-right: 130px">
{{ file.name }} {{ file.name }}
</span> </span>
<span class="detail2" style="margin-right: 10px" <span class="detail2" style="margin-right: 10px">{{ file.percentage }}%</span>
>{{ file.percentage }}%</span
>
<span class="detail1">{{ <span class="detail1">{{
{ {
ready: "正在上传", ready: "正在上传",
@@ -100,10 +75,7 @@
}[file.status] }[file.status]
}}</span> }}</span>
<div class="progress"> <div class="progress">
<div <div class="progressinner" :style="{ width: `${(291 * file.percentage) / 100}px` }"></div>
class="progressinner"
:style="{ width: `${(291 * file.percentage) / 100}px` }"
></div>
</div> </div>
</div> </div>
<button class="btn btndetail" @click="reUpload(i)"> <button class="btn btndetail" @click="reUpload(i)">
@@ -132,24 +104,18 @@
</div> </div>
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业内容</div> <div class="text">作业内容</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="join"> <div class="join">
<el-input <el-input v-model="sbValue.content" :autosize="{ minRows: 12.5, maxRows: 12.5 }" resize="none"
v-model="sbValue.content" type="textarea" />
:autosize="{ minRows: 12.5, maxRows: 12.5 }"
resize="none"
type="textarea"
/>
</div> </div>
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<button class="tijiao" @click="handleClick">{{submitList && submitList.length>0?"再次":""}}提交</button> <button class="tijiao" @click="handleClick">{{ submitList && submitList.length > 0 ? "再次" : ""
}}提交</button>
</div> </div>
@@ -158,11 +124,8 @@
<div class=""></div> <div class=""></div>
<div class="title" style="margin-top: 0px"> <div class="title" style="margin-top: 0px">
<img <img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
style="width: 20px; height: 20px" <div class="text">历史记录</div>
src="../../assets/image/yuan.png"
/>
<div class="text">历史纪录</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -172,17 +135,12 @@
<div class="content2">作业内容</div> <div class="content2">作业内容</div>
<div class="content3">附件</div> <div class="content3">附件</div>
</div> </div>
<div <div v-for="(value, index) in submitList" :key="index" class="historytitle2" :style="{
v-for="(value, index) in submitList"
:key="index"
class="historytitle2"
:style="{
'border-bottom': 'border-bottom':
index === submitList.length - 1 index === submitList.length - 1
? '1px solid rgba(215, 229, 253, 0)' ? '1px solid rgba(215, 229, 253, 0)'
: '1px solid rgba(215, 229, 253, 1)', : '1px solid rgba(215, 229, 253, 1)',
}" }">
>
<div class="content1">{{ value.createTime }}</div> <div class="content1">{{ value.createTime }}</div>
<div class="content2"> <div class="content2">
<div> <div>
@@ -194,7 +152,10 @@
<div> <div>
<span style="margin-left: 10px"> <span style="margin-left: 10px">
<el-link target="_blank" type="primary" :href="value.workUploadAddress?.split(',')[0] || ''">{{value.workUploadAddress?.split(',')[0].split('/').at(-1)|| ''}}</el-link> <el-link target="_blank" type="primary" :href="value.workUploadAddress?.split(',')[0] || ''">{{
value.workUploadAddress?.split(',')[0].split('/').at(-1) ||
''
}}</el-link>
</span> </span>
</div> </div>
</div> </div>
@@ -205,10 +166,7 @@
</div> </div>
<div class="right"> <div class="right">
<div class="righttitle"> <div class="righttitle">
<img <img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">截止时间</div> <div class="text">截止时间</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -227,30 +185,21 @@
parseInt( parseInt(
dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60 dayjs(data?.submitEndTime).diff(dayjs(), "minute") / 60
) )
}}</span }}</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{
>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span class="te">{{
dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60 dayjs(data?.submitEndTime).diff(dayjs(), "minute") % 60
}}</span }}</span>&nbsp;&nbsp;分钟
>&nbsp;&nbsp;分钟
</div> </div>
</div> </div>
</div> </div>
<div class="righttitle"> <div class="righttitle">
<img <img style="width: 20px; height: 20px" src="../../assets/image/yuan.png" />
style="width: 20px; height: 20px"
src="../../assets/image/yuan.png"
/>
<div class="text">作业说明</div> <div class="text">作业说明</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="explain clearfix"> <div class="explain clearfix">
<!-- todo #作业任务详情 作业说明是作业要求字段么？--> <!-- todo #作业任务详情 作业说明是作业要求字段么？-->
<div <div class="explain1" style="margin-top: 26px" v-html="data?.workRequirement"></div>
class="explain1"
style="margin-top: 26px"
v-html="data?.workRequirement"
></div>
</div> </div>
</div> </div>
</div> </div>
@@ -263,8 +212,12 @@
</span></div> </span></div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button class="cancel" style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;" @click="centerDialogVisible = false">取消</el-button> <el-button class="cancel"
<el-button class="back" style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;" type="primary" @click="returnclick"> style="color: #387DF7; border: 1px solid #387DF7;padding: 8px 32px; border-radius: 4px;"
@click="centerDialogVisible = false">取消</el-button>
<el-button class="back"
style="background: #387DF7;box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);border: 0px;padding: 8px 32px;"
type="primary" @click="returnclick">
返回 返回
</el-button> </el-button>
</span> </span>
@@ -319,10 +272,13 @@ const showFileList = computed(()=>{
}) })
const handleClick = () => { const handleClick = () => {
console.log(fileList.value, uploadRef.value)
if (!sbValue.value.content) { if (!sbValue.value.content) {
if (fileList.value.length == 0) {
return ElMessage.warning("请输入作业内容"); return ElMessage.warning("请输入作业内容");
} }
}
request(TASK_WORK_COMMIT, { request(TASK_WORK_COMMIT, {
projectOrRouterLogo: type, projectOrRouterLogo: type,
workUploadContent: sbValue.value.content, workUploadContent: sbValue.value.content,
@@ -337,6 +293,7 @@ const handleClick = () => {
}); });
sbValue.value.content = ""; sbValue.value.content = "";
fileList.value = []; fileList.value = [];
remove(0);
}; };
function remove(i) { function remove(i) {
@@ -358,9 +315,11 @@ function reUpload(i) {
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;
@@ -368,6 +327,7 @@ function reUpload(i) {
align-items: center; align-items: center;
} }
} }
.preNext { .preNext {
position: absolute; position: absolute;
right: 0px; right: 0px;
@@ -703,11 +663,13 @@ function reUpload(i) {
.content2 { .content2 {
margin-top: 14px; margin-top: 14px;
margin-left: 20px; margin-left: 20px;
width:460px;; width: 460px;
;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.content3 { .content3 {
margin-top: 14px; margin-top: 14px;
margin-left: 20px; margin-left: 20px;
@@ -771,27 +733,21 @@ function reUpload(i) {
margin-top: 43px; margin-top: 43px;
.allbox1 { .allbox1 {
background: linear-gradient( background: linear-gradient(0deg,
0deg,
rgba(160, 193, 230, 0) 0%, rgba(160, 193, 230, 0) 0%,
rgba(161, 195, 231, 0.2) 100% rgba(161, 195, 231, 0.2) 100%);
);
} }
.allbox2 { .allbox2 {
background: linear-gradient( background: linear-gradient(0deg,
0deg,
rgba(177, 219, 229, 0) 0%, rgba(177, 219, 229, 0) 0%,
rgba(172, 216, 227, 0.2) 100% rgba(172, 216, 227, 0.2) 100%);
);
} }
.allbox3 { .allbox3 {
background: linear-gradient( background: linear-gradient(0deg,
0deg,
rgba(195, 209, 234, 0) 0%, rgba(195, 209, 234, 0) 0%,
rgba(191, 206, 231, 0.2) 100% rgba(191, 206, 231, 0.2) 100%);
);
} }
.item { .item {
@@ -917,13 +873,16 @@ function reUpload(i) {
} }
} }
} }
.el-dialog { .el-dialog {
color: black; color: black;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
.title { .title {
text-align: center; text-align: center;
} }
.dialog-footer { .dialog-footer {
.back { .back {
background: #387DF7; background: #387DF7;
@@ -932,6 +891,7 @@ function reUpload(i) {
padding: 8px 32px; padding: 8px 32px;
border-radius: 4px; border-radius: 4px;
} }
.cancel { .cancel {
background: #387DF7; background: #387DF7;
border: 0px; border: 0px;
@@ -943,6 +903,4 @@ function reUpload(i) {
} }
} }
} }
</style> </style>

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

@@ -12,8 +12,8 @@
<div class="detailinfo"> <div class="detailinfo">
<div class="detailL"> <div class="detailL">
<div v-for="(i, k) in data.stageProcessList" :key="k"> <div v-for="(i, k) in data.stageProcessList" :key="k">
<div v-if="i.stageId !== '0'"> <div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
<div class="title"> <div v-else class="title">
<div class="titleL">{{ i.stageName }}</div> <div class="titleL">{{ i.stageName }}</div>
<div class="titleR" :style="{ display: 'flex' }"> <div class="titleR" :style="{ display: 'flex' }">
<img src="../../assets/image/pathdetails/circle.png" /> <img src="../../assets/image/pathdetails/circle.png" />
@@ -29,7 +29,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
<div <div
v-else
class="course" class="course"
v-for="(value, index) in i.taskProcessList.filter( v-for="(value, index) in i.taskProcessList.filter(
(e) => !whiteTypes(e.type) (e) => !whiteTypes(e.type)
@@ -39,19 +41,12 @@
<div style="width: 70%"> <div style="width: 70%">
<div class="coursename">{{ value.name }}</div> <div class="coursename">{{ value.name }}</div>
<div class="coursetag"> <div class="coursetag">
<div <div class="tag1" style="margin-right: 11px; margin-top: 16px">
class="tag1"
style="margin-right: 11px; margin-top: 16px"
>
必修 必修
</div> </div>
<div <div class="tag3" style="margin-right: 11px; margin-top: 16px">
class="tag3"
style="margin-right: 11px; margin-top: 16px"
>
{{ types.typeName[value.type] || "" }} {{ types.typeName[value.type] || "" }}
</div> </div>
<!-- <div--> <!-- <div-->
<!-- v-for="(item, key) in value.flag"--> <!-- v-for="(item, key) in value.flag"-->
<!-- :key="key"--> <!-- :key="key"-->
@@ -129,7 +124,6 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
</div>
<!-- <div class="tag1">必修</div> <!-- <div class="tag1">必修</div>
<div class="tag2">选修</div> <div class="tag2">选修</div>
<div class="tag3">测评</div> <div class="tag3">测评</div>
@@ -216,7 +210,6 @@
<div class="ratetext">上次学到：启航班-领导寄语</div> <div class="ratetext">上次学到：启航班-领导寄语</div>
<div class="ratebtn">继续学习</div> <div class="ratebtn">继续学习</div>
</div>--> </div>-->
<div style="margin-top: 16px"> <div style="margin-top: 16px">
<div class="progressBox"> <div class="progressBox">
<div>总进度</div> <div>总进度</div>
@@ -308,7 +301,6 @@
<!-- 详细信息 --> <!-- 详细信息 -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, reactive, ref } from "vue"; import { computed, reactive, ref } from "vue";
import word from "@/assets/image/file/word.png"; import word from "@/assets/image/file/word.png";
@@ -330,7 +322,6 @@ import {
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import store from "@/store"; import store from "@/store";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const { const {
query: { courseId, projectId }, query: { courseId, projectId },
} = useRoute(); } = useRoute();
@@ -343,14 +334,11 @@ const { data } = useRequest(PROJECT_PROCESS, {
}); });
console.log("datadata", data); console.log("datadata", data);
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const activeName = ref("first"); const activeName = ref("first");
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const path = { 1: "path" }; const path = { 1: "path" };
const types = ref({ const types = ref({
typeName: { typeName: {
1: "在线", 1: "在线",
@@ -406,7 +394,6 @@ const types = ref({
13: "/projectdetails", 13: "/projectdetails",
}, },
}); });
function toFinish(d, sName, chapterId) { function toFinish(d, sName, chapterId) {
console.log("dddddd", d); console.log("dddddd", d);
if (!types.value.path[d.type]) { if (!types.value.path[d.type]) {
@@ -446,7 +433,6 @@ function whiteTypes(type) {
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-"); return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"> <style lang="scss">
.pathdetails { .pathdetails {
@@ -456,19 +442,16 @@ function whiteTypes(type) {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
.pdname { .pdname {
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
color: #ffffff; color: #ffffff;
margin-top: 17px; margin-top: 17px;
} }
.detailinfo { .detailinfo {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
.detailL { .detailL {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
@@ -477,7 +460,6 @@ function whiteTypes(type) {
padding-left: 45px; padding-left: 45px;
padding-right: 45px; padding-right: 45px;
padding-top: 23px; padding-top: 23px;
.title { .title {
height: 50px; height: 50px;
display: flex; display: flex;
@@ -486,19 +468,16 @@ function whiteTypes(type) {
background-color: rgba(249, 249, 249, 1); background-color: rgba(249, 249, 249, 1);
margin-top: 27px; margin-top: 27px;
margin-bottom: 19px; margin-bottom: 19px;
.titleL { .titleL {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
margin-left: 27px; margin-left: 27px;
} }
.titleR { .titleR {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.titleR .titleRT { .titleR .titleRT {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
@@ -507,7 +486,6 @@ function whiteTypes(type) {
margin-left: 2px; margin-left: 2px;
} }
} }
.course { .course {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -515,7 +493,6 @@ function whiteTypes(type) {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 32px; margin-bottom: 32px;
margin-left: 26px; margin-left: 26px;
.coursename { .coursename {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -525,28 +502,23 @@ function whiteTypes(type) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.coursetag { .coursetag {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.progressBox { .progressBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #677d86; color: #677d86;
margin-top: 24px; margin-top: 24px;
.progress { .progress {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.progress .el-progress-bar__outer { .progress .el-progress-bar__outer {
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
} }
} }
.goclass { .goclass {
width: 126px; width: 126px;
height: 46px; height: 46px;
@@ -564,26 +536,21 @@ function whiteTypes(type) {
} }
} }
} }
.detailR { .detailR {
width: 434px; width: 434px;
.detailRT { .detailRT {
min-height: 298px; min-height: 298px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
.el-tabs__item { .el-tabs__item {
height: 56px; height: 56px;
padding: 10px 33px 0px 27px; padding: 10px 33px 0px 27px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2); background-color: rgba(56, 125, 247, 0.2);
} }
.notice { .notice {
padding: 15px 43px 30px 47px; padding: 15px 43px 30px 47px;
font-size: 14px; font-size: 14px;
@@ -591,7 +558,6 @@ function whiteTypes(type) {
color: #333330; color: #333330;
line-height: 24px; line-height: 24px;
} }
.sharedocname { .sharedocname {
width: 259px; width: 259px;
font-size: 14px; font-size: 14px;
@@ -600,7 +566,6 @@ function whiteTypes(type) {
margin-left: 20px; margin-left: 20px;
line-height: 24px; line-height: 24px;
} }
.download { .download {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -611,13 +576,11 @@ function whiteTypes(type) {
color: #2478ff; color: #2478ff;
} }
} }
.detailRB { .detailRB {
min-height: 459px; min-height: 459px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
margin-top: 17px; margin-top: 17px;
.info .title { .info .title {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -625,14 +588,12 @@ function whiteTypes(type) {
position: relative; position: relative;
margin-left: 48px; margin-left: 48px;
} }
.info .title .text { .info .title .text {
margin-left: 8px; margin-left: 8px;
font-size: 16px; font-size: 16px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
font-weight: 800; font-weight: 800;
} }
.info .title .box { .info .title .box {
width: 75px; width: 75px;
height: 10px; height: 10px;
@@ -641,7 +602,6 @@ function whiteTypes(type) {
left: 23px; left: 23px;
top: 53px; top: 53px;
} }
.info .teacheritem { .info .teacheritem {
margin-left: 48px; margin-left: 48px;
margin-right: 48px; margin-right: 48px;
@@ -649,13 +609,11 @@ function whiteTypes(type) {
display: flex; display: flex;
// align-items: center; // align-items: center;
} }
.info .teacheritem .peopleimg { .info .teacheritem .peopleimg {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 30px; border-radius: 30px;
} }
.info .teacheritem .teacherName { .info .teacheritem .teacherName {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@@ -664,7 +622,6 @@ function whiteTypes(type) {
align-items: center; align-items: center;
width: 260px; width: 260px;
} }
.info .teacheritem .teacherName .teacherMedal { .info .teacheritem .teacherName .teacherMedal {
width: 17px; width: 17px;
height: 19px; height: 19px;
@@ -672,7 +629,6 @@ function whiteTypes(type) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.info .teacheritem .introduce { .info .teacheritem .introduce {
width: 260px; width: 260px;
font-size: 14px; font-size: 14px;
@@ -681,7 +637,6 @@ function whiteTypes(type) {
margin-top: 14px; margin-top: 14px;
line-height: 24px; line-height: 24px;
} }
.info .rate { .info .rate {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -690,7 +645,6 @@ function whiteTypes(type) {
margin-left: 48px; margin-left: 48px;
margin-right: 26px; margin-right: 26px;
} }
.info .rate .ratetext { .info .rate .ratetext {
width: 259px; width: 259px;
font-size: 14px; font-size: 14px;
@@ -698,7 +652,6 @@ function whiteTypes(type) {
color: #677d86; color: #677d86;
line-height: 24px; line-height: 24px;
} }
.info .rate .ratebtn { .info .rate .ratebtn {
width: 86px; width: 86px;
height: 36px; height: 36px;
@@ -713,19 +666,16 @@ function whiteTypes(type) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.info .progressBox { .info .progressBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #677d86; color: #677d86;
margin-top: 16px; margin-top: 16px;
margin-left: 44px; margin-left: 44px;
.progress { .progress {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.progress .el-progress-bar__outer { .progress .el-progress-bar__outer {
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
} }

75
src/views/roadmap/LearnPath.vue
View File

@@ -5,17 +5,11 @@
<div class="titleL"> <div class="titleL">
<div @click="returnfun" class="text">学习路径图</div> <div @click="returnfun" class="text">学习路径图</div>
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName"> <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
<img <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
style="width: 20px; height: 18px; margin-right: 10px"
src="../../assets/image/pm.png"
/>
<div style="margin-top: 1px">{{ userInfo.jobName }}</div> <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
</div> </div>
<div class="info" v-if="userInfo.bandDesc"> <div class="info" v-if="userInfo.bandDesc">
<img <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
style="width: 18px; height: 17px; margin-right: 11px"
src="../../assets/image/band.png"
/>
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div> <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
</div> </div>
</div> </div>
@@ -57,11 +51,7 @@
<!-- </template>--> <!-- </template>-->
<!-- </el-popover>--> <!-- </el-popover>-->
</div> </div>
<div <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
:style="{ display: showmapdetail ? 'flex' : 'none' }"
class="titleR"
@click="returnfun"
>
返回列表 返回列表
</div> </div>
</div> </div>
@@ -69,51 +59,21 @@
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head"> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div style="min-width: 770px; width: 100%"> <div style="min-width: 770px; width: 100%">
<el-table :data="data" style="width: 100%" @row-click="gofun"> <el-table :data="data" style="width: 100%" @row-click="gofun">
<el-table-column <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
prop="img" <img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
label="缩略图"
#default="scope"
align="center"
width="255"
>
<img
:src="scope.row.picUrl"
style="width: 230px; height: 155px"
/>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="name" label="路径名称" /> <el-table-column align="center" prop="name" label="路径名称" />
<el-table-column <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
align="center" <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
prop="introduce"
label="路径介绍"
#default="scope"
>
<el-popover
placement="top-start"
title="路径介绍"
trigger="hover"
:content="scope.row.remark"
>
<template #reference> <template #reference>
<div>{{ scope.row.remark }}</div> <div>{{ scope.row.remark }}</div>
</template> </template>
</el-popover> </el-popover>
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" prop="organizationName" label="归属组织" />
align="center" <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
prop="organizationName" <img :src="
label="归属组织"
/>
<el-table-column
#default="scope"
align="center"
:width="150"
prop="state"
label="状态"
>
<img
:src="
scope.row.status === 0 scope.row.status === 0
? ongoing ? ongoing
: scope.row.status === 1 : scope.row.status === 1
@@ -121,9 +81,7 @@
: scope.row.status === -1 : scope.row.status === -1
? nostarted ? nostarted
: null : null
" " style="width: 99px; height: 99px" />
style="width: 99px; height: 99px"
/>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
@@ -132,10 +90,7 @@
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"--> <!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- 路径列表--> <!-- 路径列表-->
<!-- 路径详情图 --> <!-- 路径详情图 -->
<div <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
:style="{ display: showmapdetail ? 'flex' : 'none' }"
class="mapdetail"
>
<div v-for="(item, i) in detail?.rows" :key="i"> <div v-for="(item, i) in detail?.rows" :key="i">
<img :src="useImage(`222_0${i + 2}.png`)" /> <img :src="useImage(`222_0${i + 2}.png`)" />
</div> </div>
@@ -202,9 +157,12 @@ async function gofun({ routerId, name: routerName }) {
function toUnTask() { } function toUnTask() { }
</script> </script>
<style lang="scss"> <style lang="scss">
.modal { #app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important;
} }
.modal {}
.modal:after { .modal:after {
content: ""; content: "";
} }
@@ -220,6 +178,7 @@ function toUnTask() {}
width: 100%; width: 100%;
// flex: 1; // flex: 1;
margin-top: 43px; margin-top: 43px;
// background-color: pink; // background-color: pink;
.title { .title {
display: flex; display: flex;