mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-18 07:16:46 +08:00
feat:新增学习路径关卡的概览有无数据
This commit is contained in:
dongwug
@@ -44,7 +44,170 @@
|
|||||||
size="large"
|
size="large"
|
||||||
:tabBarStyle="{ marginLeft: '10px' }"
|
:tabBarStyle="{ marginLeft: '10px' }"
|
||||||
>
|
>
|
||||||
<a-tab-pane key="1" tab="路径管理">
|
<a-tab-pane key="1" tab="概览">
|
||||||
|
<div class="split"></div>
|
||||||
|
<!-- 概览（无数据） -->
|
||||||
|
<div :style="{display: nodata ? 'block' : 'none'}">
|
||||||
|
<div class="onerow">
|
||||||
|
<div class="taskmain">快速创建项目详情</div>
|
||||||
|
</div>
|
||||||
|
<div class="second">
|
||||||
|
<div
|
||||||
|
class="taskbox"
|
||||||
|
style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
|
||||||
|
>
|
||||||
|
<div class="leftt">
|
||||||
|
<img src="../../assets/images/taskpage/left1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="../../assets/images/taskpage/picture1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="rightt">
|
||||||
|
<img src="../../assets/images/taskpage/right1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="centerbox" style="color: rgba(255, 182, 78, 1)">
|
||||||
|
添加任务
|
||||||
|
</div>
|
||||||
|
<div class="centermain">快速添加任务/阶段</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="taskbox"
|
||||||
|
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
|
||||||
|
>
|
||||||
|
<div class="leftt">
|
||||||
|
<img src="../../assets/images/taskpage/left2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="../../assets/images/taskpage/picture2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="rightt">
|
||||||
|
<img src="../../assets/images/taskpage/right2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="centerbox" style="color: rgba(78, 166, 255, 1)">
|
||||||
|
添加学员
|
||||||
|
</div>
|
||||||
|
<div class="centermain">快速添加学员</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="taskbox"
|
||||||
|
@click="showModal"
|
||||||
|
style="background: linear-gradient(180deg, #e5f6ec, #eef9f3)"
|
||||||
|
>
|
||||||
|
<div class="leftt">
|
||||||
|
<img src="../../assets/images/taskpage/left3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="../../assets/images/taskpage/picture3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="rightt">
|
||||||
|
<img src="../../assets/images/taskpage/right3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="centerbox" style="color: rgba(93, 201, 136, 1)">
|
||||||
|
发布
|
||||||
|
</div>
|
||||||
|
<div class="centermain">快速发布项目</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 概览（无数据） -->
|
||||||
|
<!-- 概览（有数据） -->
|
||||||
|
<div :style="{display: nodata ? 'none' : 'block'}">
|
||||||
|
<div class="onerow"><div class="taskmain">项目概览</div></div>
|
||||||
|
<div class="second" style="margin-top: 0">
|
||||||
|
<div class="nubbox">
|
||||||
|
<span class="nub1">200</span>
|
||||||
|
<div class="nub2">总人数</div>
|
||||||
|
</div>
|
||||||
|
<div class="nubbox">
|
||||||
|
<span class="nub1" style="color: #ff90ae">15</span>
|
||||||
|
<div class="nub2">必修课</div>
|
||||||
|
</div>
|
||||||
|
<div class="nubbox">
|
||||||
|
<span class="nub1" style="color: #a497ff">15</span>
|
||||||
|
<div class="nub2">选修课</div>
|
||||||
|
</div>
|
||||||
|
<div class="nubbox">
|
||||||
|
<div>
|
||||||
|
<span class="nub1" style="color: #5dc988">50</span
|
||||||
|
><span style="color: #5dc988; font-size: 14px">%</span>
|
||||||
|
</div>
|
||||||
|
<div class="nub2">完成率</div>
|
||||||
|
</div>
|
||||||
|
<div class="nubbox">
|
||||||
|
<div>
|
||||||
|
<span class="nub1" style="color: #ff90ae">30</span
|
||||||
|
><span style="color: #ff90ae; font-size: 14px">%</span>
|
||||||
|
</div>
|
||||||
|
<div class="nub2">必修完成率</div>
|
||||||
|
</div>
|
||||||
|
<div class="nubbox">
|
||||||
|
<div>
|
||||||
|
<span class="nub1" style="color: #a497ff">30</span
|
||||||
|
><span style="color: #a497ff; font-size: 14px">%</span>
|
||||||
|
</div>
|
||||||
|
<div class="nub2">选修完成率</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="onerow"><div class="taskmain">阶段信息</div></div>
|
||||||
|
<div class="stagemess">
|
||||||
|
<div class="stage1">阶段1</div>
|
||||||
|
<div class="stage2">阶段2</div>
|
||||||
|
</div>
|
||||||
|
<div class="stagesecond">
|
||||||
|
<div class="staname">阶段名称：</div>
|
||||||
|
<div class="stamess">管理者进阶-腾飞班1第一阶段</div>
|
||||||
|
</div>
|
||||||
|
<div class="stagelast">
|
||||||
|
<div class="stagepro">
|
||||||
|
<a-progress
|
||||||
|
type="dashboard"
|
||||||
|
gapDegree="0"
|
||||||
|
:percent="50"
|
||||||
|
:width="140"
|
||||||
|
/>
|
||||||
|
<div class="protext">课程完成率</div>
|
||||||
|
</div>
|
||||||
|
<div class="stagepro">
|
||||||
|
<a-progress
|
||||||
|
type="dashboard"
|
||||||
|
gapDegree="0"
|
||||||
|
:percent="50"
|
||||||
|
:width="140"
|
||||||
|
/>
|
||||||
|
<div class="protext">考试通过率</div>
|
||||||
|
</div>
|
||||||
|
<div class="stagepro" style="margin-right: 0">
|
||||||
|
<a-progress
|
||||||
|
type="dashboard"
|
||||||
|
gapDegree="0"
|
||||||
|
:percent="50"
|
||||||
|
:width="140"
|
||||||
|
/>
|
||||||
|
<div class="protext">作业合格率</div>
|
||||||
|
</div>
|
||||||
|
<div class="proright">
|
||||||
|
<div class="pronub" style="margin-left: 280px">10</div>
|
||||||
|
<div class="proright1">
|
||||||
|
<span class="textpro">阶段任务总数</span>
|
||||||
|
<a-progress :percent="50" style="width: 369px" />
|
||||||
|
</div>
|
||||||
|
<div class="pronub" style="margin-left: 206px">5</div>
|
||||||
|
<div class="proright1">
|
||||||
|
<span class="textpro">必修课</span>
|
||||||
|
<a-progress :percent="25" style="width: 369px" />
|
||||||
|
</div>
|
||||||
|
<div class="pronub" style="margin-left: 142px">1</div>
|
||||||
|
<div class="proright1">
|
||||||
|
<span class="textpro">选修课</span>
|
||||||
|
<a-progress :percent="5" style="width: 369px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 概览（有数据） -->
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" tab="路径管理">
|
||||||
|
<div class="split"></div>
|
||||||
<div class="cont">
|
<div class="cont">
|
||||||
<div class="pad"></div>
|
<div class="pad"></div>
|
||||||
<div class="sametab">
|
<div class="sametab">
|
||||||
@@ -168,7 +331,8 @@
|
|||||||
<div class="pad"></div>
|
<div class="pad"></div>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="学员管理" force-render>
|
<a-tab-pane key="3" tab="学员管理" force-render>
|
||||||
|
<div class="split"></div>
|
||||||
<div class="xwid">
|
<div class="xwid">
|
||||||
<div class="pad"></div>
|
<div class="pad"></div>
|
||||||
<div class="xin" style="overflow-x: auto">
|
<div class="xin" style="overflow-x: auto">
|
||||||
@@ -249,8 +413,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="pad"></div></div
|
<div class="pad"></div></div
|
||||||
></a-tab-pane>
|
></a-tab-pane>
|
||||||
|
<a-tab-pane key="4" tab="设置">
|
||||||
<a-tab-pane key="3" tab="设置">
|
<div class="split"></div>
|
||||||
<div class="sametab">
|
<div class="sametab">
|
||||||
<div class="Gcon">
|
<div class="Gcon">
|
||||||
<div class="pad"></div>
|
<div class="pad"></div>
|
||||||
@@ -550,6 +714,7 @@ export default {
|
|||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
visible: false,
|
visible: false,
|
||||||
sh: false,
|
sh: false,
|
||||||
|
nodata: true,
|
||||||
closeDeleteAll: false,
|
closeDeleteAll: false,
|
||||||
curLevel: "",
|
curLevel: "",
|
||||||
//关卡的数据
|
//关卡的数据
|
||||||
@@ -1041,7 +1206,6 @@ export default {
|
|||||||
.addwrapper {
|
.addwrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// background-color: green;
|
|
||||||
.addhead {
|
.addhead {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 130px;
|
height: 130px;
|
||||||
@@ -1198,13 +1362,226 @@ export default {
|
|||||||
margin-left: 0px !important;
|
margin-left: 0px !important;
|
||||||
padding-left: 32px !important;
|
padding-left: 32px !important;
|
||||||
}
|
}
|
||||||
.cont {
|
.onerow {
|
||||||
|
//width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
height: 40px;
|
||||||
.pad {
|
position: relative;
|
||||||
height: 100%;
|
margin-top: 15px;
|
||||||
width: 40px;
|
margin-left: 38px;
|
||||||
// background-color: red;
|
//margin-right: 38px;
|
||||||
|
.taskmain {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-top: 7px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 168px;
|
||||||
|
background-color: #409eff;
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #409eff;
|
||||||
|
color: #ffffff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.edit {
|
||||||
|
position: absolute;
|
||||||
|
right: 38px;
|
||||||
|
top: 0;
|
||||||
|
color: #409eff;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
border: 1px solid #409eff;
|
||||||
|
border-radius: 8px;
|
||||||
|
.editimg {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-left: 25px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.editext {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.edit:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #409eff;
|
||||||
|
cursor: pointer;
|
||||||
|
.editimg {
|
||||||
|
background-image: url("../../assets/images/projectadd/edit1.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
.nubbox {
|
||||||
|
width: 253px;
|
||||||
|
height: 116px;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #fafbfc;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-left: 15px;
|
||||||
|
.nub1 {
|
||||||
|
color: #ffb54a;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.nub2 {
|
||||||
|
color: #6d7584;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.taskbox {
|
||||||
|
width: 412px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 68px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
.leftt {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.photo {
|
||||||
|
position: absolute;
|
||||||
|
top: 42px;
|
||||||
|
left: 37px;
|
||||||
|
}
|
||||||
|
.rightt {
|
||||||
|
position: absolute;
|
||||||
|
top: 69px;
|
||||||
|
right: 26px;
|
||||||
|
}
|
||||||
|
.centerbox {
|
||||||
|
position: absolute;
|
||||||
|
top: 52px;
|
||||||
|
left: 145px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
//line-height: 36px;
|
||||||
|
}
|
||||||
|
.centermain {
|
||||||
|
color: rgba(135, 139, 146, 1);
|
||||||
|
font-size: 14px;
|
||||||
|
position: absolute;
|
||||||
|
left: 144px;
|
||||||
|
bottom: 49px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stagemess {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 38px;
|
||||||
|
.stage1 {
|
||||||
|
width: 100px;
|
||||||
|
height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 34px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #4ea6ff;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 19px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.stage2 {
|
||||||
|
width: 100px;
|
||||||
|
height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 34px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #ebeef3;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #ffffff;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 19px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stagesecond {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 39px;
|
||||||
|
margin-top: 29px;
|
||||||
|
.staname {
|
||||||
|
color: #999ba3;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.stamess {
|
||||||
|
color: #4f5156;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stagelast {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 55px;
|
||||||
|
.stagepro {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 55px;
|
||||||
|
margin-right: 120px;
|
||||||
|
.ant-progress-circle-path {
|
||||||
|
stroke: #4ea6ff;
|
||||||
|
}
|
||||||
|
.ant-progress-text {
|
||||||
|
color: #4ea6ff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.protext {
|
||||||
|
color: #6d7584;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.proright {
|
||||||
|
width: 500px;
|
||||||
|
margin-top: 55px;
|
||||||
|
margin-left: 50px;
|
||||||
|
.ant-progress-bg {
|
||||||
|
height: 24px !important;
|
||||||
|
background: #4ea6ff;
|
||||||
|
}
|
||||||
|
.ant-progress-inner {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
.pronub {
|
||||||
|
color: #4ea6ff;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
.proright1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
.textpro {
|
||||||
|
color: #6d7584;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.ant-progress-text {
|
||||||
|
color: #4ea6ff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.sametab {
|
.sametab {
|
||||||
// margin-left: 30px;
|
// margin-left: 30px;
|
||||||
@@ -1470,6 +1847,14 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cont {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.pad {
|
||||||
|
height: 100%;
|
||||||
|
width: 40px;
|
||||||
|
// background-color: red;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.xwid {
|
.xwid {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
|
|||||||
Reference in New Issue
Block a user