feat:学习路径图 无任务样式

This commit is contained in:
dongwug
2022-10-24 16:23:33 +08:00
parent 49c093b97b
commit ad41b22c1f
6 changed files with 881 additions and 422 deletions

View File

@@ -1001,7 +1001,8 @@ export default {
// bottom: 20px;
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
.ant-pagination-next,
.ant-pagination-options {
margin-bottom: 10px;
}
}

View File

@@ -304,6 +304,7 @@ export default {
}
}
.contentMain {
padding-right: 12px;
.main_items {
display: flex;
justify-content: space-between;

File diff suppressed because it is too large Load Diff

View File

@@ -1053,7 +1053,7 @@
<!-- 无数据样式 -->
<div
class="notable"
:style="{ display: stm_hs ? 'none' : 'block' }"
:style="{ display: stm_hs ? 'block' :'none' }"
>
<div class="notablebox">
<div class="boxbody">
@@ -1681,24 +1681,34 @@
</div>
</a-modal>
<!--请确定是否拒绝此学员学习此课程弹窗 -->
<!--删除弹窗 -->
<!--删除 复制 停用弹窗 -->
<a-modal
v-model:visible="delete_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
@cancel="delete_exit"
>
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
<div class="delete" :style="{ display: delete_hs || copy_hs || nouse_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icon"></div>
<div class="del-icon" :style="{ display: del_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/notice.png" alt=""></div>
<div class="del-icon" :style="{ display: copy_hs || nouse_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/QR.png" alt=""></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>您确定要删除此课程吗</span>
<div :style="{ display: del_hs ? 'block' : 'none' }">
<span>您确定要删除此课程吗</span>
</div>
<div :style="{ display: copy_hs ? 'block' : 'none' }">
<span>您确定要复制此课程吗</span>
</div>
<div :style="{ display: nouse_hs ? 'block' : 'none' }">
<span>您确定要停用此课程吗</span>
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
@@ -1712,68 +1722,6 @@
</div>
</a-modal>
<!--删除弹窗 -->
<!--复制弹窗 -->
<a-modal
v-model:visible="copy_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
>
<div class="delete" :style="{ display: copy_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>您确定要复制此课程吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="copy_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="copy_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--复制弹窗 -->
<!--停用弹窗 -->
<a-modal
v-model:visible="nouse_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
>
<div class="delete" :style="{ display: nouse_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="nouse_exit"></div>
</div>
<div class="body">
<span>您确定要停用此课程吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="nouse_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="nouse_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--停用弹窗 -->
<!-- 学员管理课程库-归属权抽屉 -->
<own-power v-model:ownpowervisible="ownpowervisible" />
<!-- 学员管理课程库-归属权抽屉 -->
@@ -2457,6 +2405,7 @@ export default defineComponent({
agreestudy_hs: false,
rejectstudy_hs: false,
delete_hs: false,
del_hs:false,
copy_hs: false,
nouse_hs: false,
// 二维码标题状态
@@ -2549,6 +2498,7 @@ export default defineComponent({
<div
class="jc"
onClick={() => {
state.delete_hs = true;
state.copy_hs = true;
}}
style={{ width: "30px" }}
@@ -2723,6 +2673,7 @@ export default defineComponent({
<div
class="jc"
onClick={() => {
state.delete_hs = true;
state.copy_hs = true;
}}
style={{ width: "30px" }}
@@ -2756,6 +2707,7 @@ export default defineComponent({
<div
class="jc"
onClick={() => {
state.delete_hs = true;
state.copy_hs = true;
}}
style={{ width: "30px" }}
@@ -2803,6 +2755,7 @@ export default defineComponent({
class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}
style="margin-left:22px"
>
@@ -2857,6 +2810,7 @@ export default defineComponent({
class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}
>
删除
@@ -2873,6 +2827,7 @@ export default defineComponent({
class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}
>
删除
@@ -2889,6 +2844,7 @@ export default defineComponent({
class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}
>
删除
@@ -2962,6 +2918,7 @@ export default defineComponent({
<div
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}
>
删除
@@ -3039,7 +2996,11 @@ export default defineComponent({
{value.status === "已拒绝" ? (
<div class="nselect">
<div class="ops2">
<div class="jc">删除</div>
<div class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}>删除</div>
</div>
</div>
) : (
@@ -3066,6 +3027,7 @@ export default defineComponent({
<div
class="use"
onClick={() => {
state.delete_hs = true;
state.nouse_hs = true;
}}
>
@@ -3238,11 +3200,8 @@ export default defineComponent({
};
const delete_exit = () => {
state.delete_hs = false;
};
const copy_exit = () => {
state.del_hs = false;
state.copy_hs = false;
};
const nouse_exit = () => {
state.nouse_hs = false;
};
const onSelectChange = (selectedRowKeys) => {
@@ -3304,8 +3263,6 @@ export default defineComponent({
agreestudy_exit,
rejectstudy_exit,
delete_exit,
copy_exit,
nouse_exit,
onSelectChange,
faceManageChange,
openMessage,
@@ -4792,8 +4749,6 @@ export default defineComponent({
.notable {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.notablebox {
width: 412px;
height: 212px;
@@ -4802,8 +4757,7 @@ export default defineComponent({
display: flex;
justify-content: center;
text-align: center;
margin-top: 77px;
margin-bottom: 109px;
margin:77px auto 109px auto;
cursor: pointer;
position: relative;
.smallleft {
@@ -4925,7 +4879,7 @@ export default defineComponent({
}
}
.studentsmanage {
z-index: 999;
z-index: 1000;
min-width: 1000px;
background: #ffffff;
.stm_main {
@@ -5235,18 +5189,18 @@ export default defineComponent({
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
background-size: 100% 100%;
}
}
.close_exit {
position: absolute;

View File

@@ -85,46 +85,16 @@
</div>
<div class="rightt">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 200px"
placeholder="自由学习模式"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
<div class="line"></div>
<img class="img2" src="../../assets/images/leveladd/pub.png" />
<div class="pub">发布</div>
<div class="line"></div>
<img
style="margin-right: 15px"
class="img2"
src="../../assets/images/leveladd/more.png"
/>
<!-- <div class="more">
<div style="color: #7096e3">更多</div>
<div class="moreArrow"></div>
<div class="moreItems">
<div class="sammo">撤回</div>
<div class="sammo">复制</div>
</div>
</div> -->
<div class="role">
<div style="white-space: nowrap">更多</div>
<div class="roleArrow"></div>
<div class="roleItems">
<div class="roleItem">复制</div>
<div class="roleItem">删除</div>
<span>学习模式</span>
<div class="inputbox">
<input type="text" placeholder="按学习时间解锁" />
<div class="bottonbox"><div class="btnText">切换模式</div></div>
</div>
</div>
<div class="line"></div>
<router-link to="/leveladd">
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
@@ -254,16 +224,19 @@
</div>
<div class="boom">
<div class="boomcen">
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="移动任务到关卡"
:options="projectNameList2"
@change="selectProjectName2"
allowClear
showSearch
></a-select>
<div class="title">
<div class="tit_left">
<span>任务列表</span>
</div>
<div class="tit_right">
<div class="btn btn1">
<div class="btnText">移动到任务阶段</div>
</div>
<div class="btn btn2">
<div class="imgIcon"></div>
<div class="btnText">批量删除</div>
</div>
</div>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
@@ -306,6 +279,36 @@
/>
</div>
</div>
<!-- 无数据样式 -->
<div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
<div class="notablebox">
<div class="boxbody">
<div class="boximg"></div>
<div class="boxtitle">
<span style="color: #ffb64e; font-size: 20px">无任务</span>
</div>
<div class="boxtitle2">
<span style="color: #878b92">请点击上方创建任务</span>
</div>
</div>
<div class="smallleft"></div>
<div class="smallright"></div>
</div>
</div>
<!-- 无数据样式 -->
</div>
</div>
<div class="footbtn">
<div class="btnbox">
<div class="btn btn2">
<div class="btnText">暂存</div>
</div>
<div class="btn btn2">
<div class="btnText">确定</div>
</div>
<div class="btn btn1">
<div class="btnText">下一步</div>
</div>
</div>
</div>
<div class="draw" style="position: relative">
@@ -392,40 +395,6 @@ export default {
name: "LevelAddDetail",
setup() {
const state = reactive({
projectNameList: [
{
id: 1,
value: "项目一",
label: "项目一",
},
{
id: 2,
value: "项目二",
label: "项目二",
},
{
id: 3,
value: "项目三",
label: "项目三",
},
{
id: 4,
value: "项目四",
label: "项目四",
},
],
projectNameList2: [
{
id: 1,
value: "删除任务",
label: "删除任务",
},
{
id: 2,
value: "移动任务到关卡",
label: "移动任务到关卡",
},
],
level: [
{
id: "1",
@@ -636,16 +605,11 @@ export default {
visible: false,
modal: false,
clos: false,
stm_hs: false,
value1: "",
value2: "",
selectedRowKeys: [],
});
const selectProjectName = (value, index) => {
console.log("value", value, index);
};
const selectProjectName2 = (value, index) => {
console.log("value", value, index);
};
const showDrawer = () => {
state.visible = true;
};
@@ -802,8 +766,6 @@ export default {
});
return {
...toRefs(state),
selectProjectName,
selectProjectName2,
tableDataFunc,
showDrawer,
closeDrawer,
@@ -1201,16 +1163,44 @@ export default {
}
.rightt {
// width: 500px;
height: 100%;
// background-color: red;
// position: absolute;
// right: 0;
display: flex;
align-items: center;
.select {
margin-right: 50px;
// margin-bottom: 20px;
display: flex;
align-items: center;
white-space: nowrap;
margin-right: 56px;
.inputbox {
display: flex;
align-items: center;
border: 1px solid #c7cbd2;
width: 238px;
height: 40px;
border-radius: 8px;
input {
border: none;
outline: none;
}
.bottonbox {
width: 100px;
height: 40px;
background: #409eff;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
flex-shrink: 0;
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
}
}
.line {
height: 60px;
@@ -1218,27 +1208,6 @@ export default {
background-color: #e8effa;
margin-right: 18px;
}
.img2 {
width: 42px;
height: 42px;
margin-right: 18px;
}
.pub {
color: #ffb64e;
font-size: 14px;
margin-top: 5px;
margin-right: 30px;
cursor: pointer;
white-space: nowrap;
}
@media screen and (max-width: 1050px) {
.pub {
margin-right: 10px;
}
.line {
margin-right: 10px;
}
}
.return {
color: #4ea6ff;
font-size: 14px;
@@ -1246,53 +1215,6 @@ export default {
margin-right: 20px;
white-space: nowrap;
}
.role {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #333330;
line-height: 36px;
cursor: pointer;
position: relative;
margin-right: 20px;
.roleArrow {
width: 13px;
height: 7px;
margin-left: 8px;
background-image: url(../../assets/images/navtop/down.png);
background-size: 100%;
}
.roleItems {
width: 109px;
height: 90px;
padding-top: 10px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
top: 35px;
right: 0px;
text-align: center;
display: none;
z-index: 100;
}
.roleItem {
font-size: 14px;
font-weight: 400;
color: rgba(79, 81, 86, 1);
line-height: 36px;
}
.roleItem:hover {
color: #4ea6ff;
}
}
.role:hover .roleItems {
display: block;
}
.role:hover .roleArrow {
background-image: url(../../assets/images/navtop/up.png);
}
}
}
}
@@ -1353,8 +1275,59 @@ export default {
width: 95%;
// height: 100%;
// background-color: #bfa;
.select {
margin-top: 30px;
.title {
display: flex;
align-items: center;
justify-content: space-between;
.tit_left {
font-size: 16px;
font-weight: 500;
color: #363636;
line-height: 36px;
margin-top: 30px;
}
.tit_right {
display: flex;
align-items: center;
margin-top: 30px;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
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;
white-space: nowrap;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background-color: #409eff;
.btnText {
color: #ffffff;
}
}
.btn2 {
background-color: #ffffff;
.imgIcon {
width: 16px;
height: 16px;
background-image: url(@/assets/images/projectadd/delete.png);
background-size: 100%;
}
.btnText {
color: #409eff;
}
}
}
}
.talk {
margin-top: 24px;
@@ -1426,20 +1399,97 @@ export default {
bottom: 20px;
}
}
.notable {
width: 100%;
height: 100%;
.notablebox {
width: 412px;
height: 212px;
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
border-radius: 10px;
display: flex;
justify-content: center;
text-align: center;
margin: 77px auto 109px auto;
cursor: pointer;
position: relative;
.smallleft {
position: absolute;
top: 18px;
left: 0px;
width: 8px;
height: 21px;
border-radius: 0px 4px 4px 0px;
background-color: #ffb64e;
}
.smallright {
position: absolute;
bottom: 18px;
right: 0px;
width: 8px;
height: 21px;
border-radius: 4px 0px 0px 4px;
background-color: #ffb64e;
}
.boxbody {
.boximg {
width: 72px;
height: 72px;
margin: 32px auto 20px auto;
background-image: url(@/assets/images/coursewareManage/nostate.png);
background-size: 100% 100%;
}
.boxtitle {
margin-bottom: 4px;
}
}
}
}
}
}
.footbtn {
width: 100%;
flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
justify-content: end;
.btnbox {
display: flex;
margin-right: 36px;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 21px 0px 19px 14px;
cursor: pointer;
white-space: nowrap;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
}
.btn1 {
background-color: #409eff;
.btnText {
color: #ffffff;
}
}
.btn2 {
background-color: #ffffff;
.btnText {
color: #409eff;
}
}
}
}
// .drawerbox {
// // margin: 20px 38px 30px;
// th.h {
// background-color: #eff4fc !important;
// }
// .ant-table-tbody
// > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
// > td {
// background: #f6f9fd;
// }
// }
}
.opat {

View File

@@ -766,14 +766,18 @@ export default {
padding-left: 26px;
font-size: 16px;
.del-icon {
display: flex;
align-items: center;
margin-right: 10px;
// background-image: url(@/assets/images/coursewareManage/notice.png);
img{
background-size: 100% 100%;
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
// background-image: url(@/assets/images/coursewareManage/notice.png);
img{
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
background-size: 100% 100%;
}
}
.icon {