mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-15 05:46:45 +08:00
feat:新增学习路径关卡的概览有无数据
This commit is contained in:
dongwug
@@ -44,7 +44,170 @@
|
||||
size="large"
|
||||
: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="pad"></div>
|
||||
<div class="sametab">
|
||||
@@ -168,7 +331,8 @@
|
||||
<div class="pad"></div>
|
||||
</div>
|
||||
</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="pad"></div>
|
||||
<div class="xin" style="overflow-x: auto">
|
||||
@@ -249,8 +413,8 @@
|
||||
</div>
|
||||
<div class="pad"></div></div
|
||||
></a-tab-pane>
|
||||
|
||||
<a-tab-pane key="3" tab="设置">
|
||||
<a-tab-pane key="4" tab="设置">
|
||||
<div class="split"></div>
|
||||
<div class="sametab">
|
||||
<div class="Gcon">
|
||||
<div class="pad"></div>
|
||||
@@ -550,6 +714,7 @@ export default {
|
||||
pageSize: 10,
|
||||
visible: false,
|
||||
sh: false,
|
||||
nodata: true,
|
||||
closeDeleteAll: false,
|
||||
curLevel: "",
|
||||
//关卡的数据
|
||||
@@ -1041,7 +1206,6 @@ export default {
|
||||
.addwrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: green;
|
||||
.addhead {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
@@ -1198,6 +1362,491 @@ export default {
|
||||
margin-left: 0px !important;
|
||||
padding-left: 32px !important;
|
||||
}
|
||||
.onerow {
|
||||
//width: 100%;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
margin-left: 38px;
|
||||
//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 {
|
||||
// margin-left: 30px;
|
||||
// margin-right: 30px;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
// background-color: green;
|
||||
.Lhead {
|
||||
display: flex;
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
.search {
|
||||
background-size: 100%;
|
||||
}
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search1.png");
|
||||
}
|
||||
}
|
||||
.btn2 {
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add1.png");
|
||||
}
|
||||
}
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn3:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Lbom {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
// background-color: green;
|
||||
margin-top: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f4fe;
|
||||
.itemhead {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #f0f4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.lev {
|
||||
margin-left: 27px;
|
||||
margin-right: 16px;
|
||||
line-height: 100%;
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.lin {
|
||||
width: 1px;
|
||||
height: 35%;
|
||||
background-color: #c7cbd2;
|
||||
}
|
||||
.nam {
|
||||
margin-left: 16px;
|
||||
color: #4f5156;
|
||||
line-height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.count {
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
color: #4f5156;
|
||||
font-size: 14px;
|
||||
right: 40px;
|
||||
span:nth-child(2) {
|
||||
color: #63ca8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itembomm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
.it {
|
||||
// margin-left: 110px;
|
||||
// margin-right: 110px;
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
.on {
|
||||
font-size: 30px;
|
||||
}
|
||||
.ittext {
|
||||
color: #4f5156;
|
||||
margin-top: 16px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
.linee {
|
||||
background-color: #ecf2fb;
|
||||
width: 1px;
|
||||
height: 55%;
|
||||
}
|
||||
.itright {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
display: flex;
|
||||
.te {
|
||||
color: #4ea6ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.more {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
.moreArrow {
|
||||
width: 13px;
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
background-image: url("../../assets/images/navtop/down.png");
|
||||
background-size: 100%;
|
||||
margin: 2px;
|
||||
margin-left: 7px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.moreItems {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
border: 0px solid #dcdcdc;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
.roleItem {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(79, 81, 86, 1);
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.roleItem:hover {
|
||||
color: #4ea6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more:hover .moreArrow {
|
||||
background-image: url("../../assets/images/navtop/up.png");
|
||||
}
|
||||
.more:hover .moreItems {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
color: blue;
|
||||
}
|
||||
.noshow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.create {
|
||||
margin-top: 40px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cont {
|
||||
display: flex;
|
||||
|
||||
@@ -1206,270 +1855,6 @@ export default {
|
||||
width: 40px;
|
||||
// background-color: red;
|
||||
}
|
||||
.sametab {
|
||||
// margin-left: 30px;
|
||||
// margin-right: 30px;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
// background-color: green;
|
||||
.Lhead {
|
||||
display: flex;
|
||||
.btns {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
// flex-wrap: wrap;
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
background: rgba(64, 158, 255, 0);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(64, 158, 255, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
.search {
|
||||
background-size: 100%;
|
||||
}
|
||||
.btnText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(64, 158, 255, 1);
|
||||
line-height: 36px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.btn1 {
|
||||
.search {
|
||||
width: 15px;
|
||||
height: 17px;
|
||||
background-image: url("../../assets/images/courseManage/search1.png");
|
||||
}
|
||||
}
|
||||
.btn2 {
|
||||
.search {
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/reset1.png");
|
||||
}
|
||||
}
|
||||
.btn3 {
|
||||
margin-right: 0px;
|
||||
.search {
|
||||
width: 17px;
|
||||
height: 18px;
|
||||
background-image: url("../../assets/images/courseManage/add1.png");
|
||||
}
|
||||
}
|
||||
.btn1:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/search0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn2:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/reset0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.btn3:hover {
|
||||
background: rgba(64, 158, 255, 1);
|
||||
.search {
|
||||
background-image: url("../../assets/images/courseManage/add0.png");
|
||||
}
|
||||
.btnText {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Lbom {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
// background-color: green;
|
||||
margin-top: 40px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f4fe;
|
||||
.itemhead {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
background-color: #f0f4fe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.lev {
|
||||
margin-left: 27px;
|
||||
margin-right: 16px;
|
||||
line-height: 100%;
|
||||
color: #409eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.lin {
|
||||
width: 1px;
|
||||
height: 35%;
|
||||
background-color: #c7cbd2;
|
||||
}
|
||||
.nam {
|
||||
margin-left: 16px;
|
||||
color: #4f5156;
|
||||
line-height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.count {
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
color: #4f5156;
|
||||
font-size: 14px;
|
||||
right: 40px;
|
||||
span:nth-child(2) {
|
||||
color: #63ca8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itembomm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 150px;
|
||||
.it {
|
||||
// margin-left: 110px;
|
||||
// margin-right: 110px;
|
||||
width: 13%;
|
||||
text-align: center;
|
||||
.on {
|
||||
font-size: 30px;
|
||||
}
|
||||
.ittext {
|
||||
color: #4f5156;
|
||||
margin-top: 16px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
.linee {
|
||||
background-color: #ecf2fb;
|
||||
width: 1px;
|
||||
height: 55%;
|
||||
}
|
||||
.itright {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
display: flex;
|
||||
.te {
|
||||
color: #4ea6ff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.more {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
.moreArrow {
|
||||
width: 13px;
|
||||
height: 7px;
|
||||
display: inline-block;
|
||||
background-image: url("../../assets/images/navtop/down.png");
|
||||
background-size: 100%;
|
||||
margin: 2px;
|
||||
margin-left: 7px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.moreItems {
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
display: none;
|
||||
background: #ffffff;
|
||||
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
border: 0px solid #dcdcdc;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
.roleItem {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(79, 81, 86, 1);
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.roleItem:hover {
|
||||
color: #4ea6ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more:hover .moreArrow {
|
||||
background-image: url("../../assets/images/navtop/up.png");
|
||||
}
|
||||
.more:hover .moreItems {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
color: blue;
|
||||
}
|
||||
.noshow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.create {
|
||||
margin-top: 40px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.xwid {
|
||||
// width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user