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

style:增加学习路径页面

Browse Source
This commit is contained in:
李晓鸽
2022-09-14 15:38:19 +08:00
parent 195e763231
commit eb3a714396
7 changed files with 212 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.vue
View File

@@ -52,15 +52,14 @@ export default defineComponent({
#container {
display: flex;
width: 100%;
height: 100%;
min-height: 100%;
background-color: rgba(242, 245, 247, 1);
main {
flex: 1;
height: 100%;
// min-height: 100%;
width: 100%;
padding: 30px;
box-sizing: border-box;
background-color: rgba(242, 245, 247, 1);
}
}
</style>

BIN
src/assets/image/circle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/image/go.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 742 B

BIN
src/assets/image/mapdetail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

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

@@ -277,7 +277,7 @@ export default {
flex: 1;
margin-right: 20px;
.detailT {
height: 263px;
min-height: 263px;
background: #ffffff;
border-radius: 8px;
color: rgba(51, 51, 51, 1);
@@ -308,6 +308,7 @@ export default {
font-weight: 500;
line-height: 35px;
margin-top: 30px;
padding-bottom: 30px;
}
}
.detailB {

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

@@ -1,5 +1,5 @@
<template>
<div class="LearnPath">
<div class="learnpath">
<div class="content">
<div class="title">
<div class="titleL">
@@ -19,58 +19,117 @@
<div style="margin-top: 2px">Band8</div>
</div>
</div>
<div class="titleR">进入未完成任务</div>
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
<el-popover width="475px" trigger="hover" popper-class="lppopover">
<div>
<div class="finish">
<img
src="../../assets/image/circle.png"
style="width: 20px; height: 20px"
/>
<div class="text">未完成</div>
<div class="box"></div>
</div>
<div
v-for="(value, index) in unfinishedTasks"
:key="index"
class="tasks"
:style="{
'border-bottom':
index === unfinishedTasks.length - 1
? null
: '1px solid rgba(229, 228, 228, 1)',
}"
>
<div style="font-size: 14px; font-weight: 500; color: #677d86">
{{ value.text }}
</div>
<img
style="width: 20px; height: 20px"
src="../../assets/image/go.png"
/>
</div>
</div>
<template #reference>
<div class="titleR">进入未完成任务</div>
</template>
</el-popover>
</div>
<div
:style="{ display: showmapdetail ? 'flex' : 'none' }"
class="titleR"
@click="returnfun"
>
返回列表
</div>
</div>
<div class="head">
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="img"
label="缩略图"
#default="scope"
align="center"
width="255"
>
<img :src="scope.row.img" style="width: 230px; height: 155px" />
</el-table-column>
<el-table-column
align="center"
class-name="name"
prop="name"
label="路径名称"
/>
<el-table-column
align="center"
class-name="introduce"
prop="introduce"
label="路径介绍"
/>
<el-table-column
align="center"
class-name="target"
prop="target"
label="目标人群"
/>
<el-table-column
#default="scope"
align="center"
class-name="state"
width="110"
prop="state"
label="状态"
>
<img
:src="
scope.row.state === 0
? require('../../assets/image/nostarted.png')
: scope.row.state === 1
? require('../../assets/image/completed.png')
: require('../../assets/image/ongoing.png')
"
style="width: 99px; height: 99px"
/>
</el-table-column>
</el-table>
<!-- 路径列表-->
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div style="min-width: 770px; width: 100%">
<el-table :data="tableData" style="width: 100%" @row-click="gofun">
<el-table-column
prop="img"
label="缩略图"
#default="scope"
align="center"
width="255"
>
<img :src="scope.row.img" style="width: 230px; height: 155px" />
</el-table-column>
<el-table-column align="center" prop="name" label="路径名称" />
<el-table-column
align="center"
prop="introduce"
label="路径介绍"
#default="scope"
>
<el-popover
placement="top-start"
title="路径介绍"
:width="350"
trigger="hover"
:content="scope.row.introduce"
>
<template #reference>
<div>{{ scope.row.introduce }}</div>
</template>
</el-popover>
</el-table-column>
<el-table-column align="center" prop="target" label="目标人群" />
<el-table-column
#default="scope"
align="center"
width="110"
prop="state"
label="状态"
>
<img
:src="
scope.row.state === 0
? require('../../assets/image/nostarted.png')
: scope.row.state === 1
? require('../../assets/image/completed.png')
: require('../../assets/image/ongoing.png')
"
style="width: 99px; height: 99px"
/>
</el-table-column>
</el-table>
</div>
</div>
<!-- 路径列表-->
<!-- 路径详情图 -->
<div
:style="{ display: showmapdetail ? 'flex' : 'none' }"
class="mapdetail"
>
<img
src="../../assets/image/mapdetail.png"
style="width: calc(100% - 168px); height: 425px"
/>
</div>
<!-- 路径详情图 -->
</div>
</div>
</template>
@@ -85,7 +144,7 @@ export default {
img: require("../../assets/image/roadmap1.png"),
name: "产品经理学习路径图",
introduce:
"为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……",
"为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径……为了提升集团各条线产品经理的 专业能力，集团XX组织为产品经 理设置了统一的学习径",
target: "Band8-Band12",
state: 1,
},
@@ -98,16 +157,39 @@ export default {
state: 0,
},
],
unfinishedTasks: [
{
id: 1,
text: "产品经理学习路径图-第三阶段",
},
{
id: 2,
text: "管理者进阶-启航班-",
},
// {
// id: 3,
// text: "产品经理学习路径图-第三阶段",
// },
],
showmapdetail: false,
});
const returnfun = () => {
state.showmapdetail = false;
};
const gofun = (row, column, event) => {
console.log("点击了", row, column, event);
state.showmapdetail = true;
};
return {
...toRefs(state),
returnfun,
gofun,
};
},
};
</script>
<style lang="scss">
.LearnPath {
.learnpath {
width: 100%;
min-height: 734px;
border-radius: 8px;
@@ -143,6 +225,7 @@ export default {
font-weight: 400;
color: #387df7;
}
.title .titleR {
width: 157px;
height: 48px;
@@ -169,7 +252,77 @@ export default {
margin-left: 53px;
margin-right: 54px;
width: calc(100% - 107px);
// min-width: 770px;
overflow-x: scroll;
.el-table th.el-table__cell {
background: rgba(249, 249, 249, 1);
color: rgba(51, 51, 51, 1);
font-size: 14px;
font-weight: 500;
}
.el-table .cell {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-break: break-all;
}
.el-table__row {
height: 231px;
font-size: 14px;
color: rgba(102, 102, 102, 1);
font-weight: 500;
}
}
.mapdetail {
width: calc(100% - 107px);
height: 577px;
background: rgba(242, 245, 247, 0.6);
margin-top: 26px;
border-radius: 8px;
margin-left: 53px;
margin-right: 54px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.lppopover {
.finish {
padding-left: 27px;
padding-right: 18px;
margin-top: 15px;
margin-bottom: 17px;
position: relative;
display: flex;
align-items: center;
}
.text {
font-size: 16px;
font-weight: 800;
color: #333333;
margin-left: 8px;
}
.box {
width: 59px;
height: 10px;
background-color: rgba(36, 120, 255, 0.15);
position: absolute;
left: 50px;
top: 15px;
}
.tasks {
width: 405px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 28px;
cursor: pointer;
}
}
</style>

0
src/views/roadmap/PathDetails.vue Normal file
View File