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

feat:学员查看和查看说明

Browse Source
This commit is contained in:
岳佳鑫
2022-10-21 09:54:26 +08:00
parent 30429f1d7a
commit 2abaf82966
10 changed files with 509 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
src/components/drawers/SeeStu.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<a-drawer
:visible="Seevisible"
class="drawerStyle seestu"
placement="right"
width="70%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">学员换组</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="main">
<div class="stuinfor">
<div class="portrait"><img src="../../assets/images/studentimg/character.png"/></div>
<div class="stumation">
<div class="stuname">王明</div>
<div class="stugangw">产研部门 - 产品经理</div>
</div>
<div class="sortbox">
<div class="sortname">进度排名</div>
<div class="sortnub">
<span class="nub1">2</span>
<span class="total">/10</span>
</div>
</div>
<a-divider type="vertical" style="height: 49px;margin-left: 34px; background-color: rgba(170, 166, 166, 0.3)" />
<div class="sortbox" style="margin-left: 34px">
<div class="sortname">完成必修</div>
<div class="sortnub">
<span class="nub1">3</span>
<span class="total">/10</span>
</div>
</div>
<a-divider type="vertical" style="height: 49px;margin-left: 34px; background-color: rgba(170, 166, 166, 0.3)" />
<div class="sortbox" style="margin-left: 34px">
<div class="sortname">已修证书</div>
<div class="sortnub">
<span class="nub1">1</span>
</div>
</div>
</div>
<div class="secondrow">
<div class="rowleft">产品经理管理 - 腾飞班1</div>
<div class="rowbox" @click="showProMess">
<div class="shuom">说明</div>
<div><img src="../../assets/images/studentimg/chak.png"/></div>
</div>
</div>
<div class="mainbox">
<div class="rowtitle">
<div class="titleimg"><img src="../../assets/images/studentimg/open.png"/></div>
<div class="titletext">阶段1 腾飞班阶段1</div>
</div>
<div class="rowclass">
<div class="leftclass">
<div><img src="../../assets/images/leveladd/zai.png"/></div>
<div class="text1">在线</div>
<div class="text2">如何成为一个产品经理</div>
</div>
<div class="alreadyclass">
<div class="alimg"><img src="../../assets/images/studentimg/complete.png"/></div>
<div class="altext">已完成</div>
</div>
</div>
<div class="rowclass">
<div class="leftclass">
<div><img src="../../assets/images/leveladd/zhi.png"/></div>
<div class="text1">直播</div>
<div class="text2">管理者播课</div>
</div>
<div class="alreadyclass">
<div class="alimg"><img src="../../assets/images/studentimg/complete.png"/></div>
<div class="altext">已完成</div>
</div>
</div>
<div class="rowclass">
<div class="leftclass">
<div><img src="../../assets/images/leveladd/mian.png"/></div>
<div class="text1">面授</div>
<div class="text2">管理面授课</div>
</div>
<div class="alreadyclass">
<div class="alimg"><img src="../../assets/images/studentimg/notice.png"/></div>
<div class="altext">未完成</div>
</div>
</div>
<div class="rowclass">
<div class="leftclass">
<div><img src="../../assets/images/leveladd/huo.png"/></div>
<div class="text1">活动</div>
<div class="text2">管理者活动</div>
</div>
<div class="alreadyclass">
<div class="alimg"><img src="../../assets/images/studentimg/notice.png"/></div>
<div class="altext">未完成</div>
</div>
</div>
<div class="rowclass">
<div class="leftclass">
<div><img src="../../assets/images/leveladd/zuo.png"/></div>
<div class="text1">作业</div>
<div class="text2">管理者作业</div>
</div>
<div class="alreadyclass">
<div class="alimg"><img src="../../assets/images/studentimg/notice.png"/></div>
<div class="altext">未完成</div>
</div>
</div>
</div>
<div class="mainbox" style="margin-top: 15px; height: 56px">
<div class="rowtitle">
<div class="titleimg"><img src="../../assets/images/studentimg/close.png"/></div>
<div class="titletext">阶段2 腾飞班阶段2</div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn2">关闭</button>
</div>
</div>
</a-drawer>
<pro-mess v-model:Provisible="Provisible" />
</template>
<script>
import { reactive, toRefs } from "vue";
import ProMess from "./ProMess.vue";
export default {
name: "SeeStu",
components: { ProMess },
props: {
Seevisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
Provisible: false,
});
const closeDrawer = () => {
ctx.emit("update:Seevisible", false);
};
const showProMess = () => {
state.Provisible = true;
};
const afterVisibleChange = (bool) => {
console.log("state", bool);
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
showProMess,
// change,
};
},
};
</script>
<style scoped lang="scss" >
.seestu {
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.main {
display: flex;
flex-direction: column;
.stuinfor {
display: flex;
align-items: center;
height: 133px;
margin-top: 20px;
margin-right: 37px;
background-image: url("../../assets/images/studentimg/bgimg.png");
background-repeat: no-repeat;
background-position: right;
.stumation {
margin-left: 24px;
.stuname {
color: #333333;
font-size: 18px;
}
.stugangw {
color: #999999;
font-size: 16px;
margin-top: 7px;
}
}
.sortbox {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 114px;
.sortname {
color: #666660;
font-size: 14px;
}
.sortnub {
display: flex;
justify-content: center;
margin-top: 7px;
.nub1 {
color: #0060FF;
font-size: 22px;
}
.total {
color: #999999;
font-size: 22px;
}
}
}
}
.secondrow {
margin-top: 32px;
display: flex;
.rowleft {
color: rgba(51, 51, 51, 1);
font-size: 16px;
}
.rowbox {
width: 64px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 24px;
border: 1px solid rgba(64, 158, 255, 1);
background: rgba(64, 158, 255, 0.1);
cursor: pointer;
.shuom {
color: rgba(64, 158, 255, 1);
font-size: 14px;
line-height: 20px;
margin-right: 5px;
}
}
}
.mainbox {
height: 463px;
margin-right: 37px;
margin-top: 32px;
border: 1px solid rgba(221, 238, 255, 1);
border-radius: 6px;
.rowtitle {
height: 56px;
background: rgba(240, 246, 252, 1);
display: flex;
align-items: center;
.titleimg {
width: 20px;
height: 20px;
margin-left: 23px;
}
.titletext {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 16px;
}
}
.rowclass {
height: 81px;
border-bottom: 1px solid rgba(221, 238, 255, 1);
display: flex;
justify-content: space-between;
align-items: center;
.leftclass {
display: flex;
margin-left: 25px;
align-items: center;
.text1 {
color: #000000;
font-size: 14px;
font-weight: 500;
margin-left: 25px;
}
.text2 {
color: rgba(51, 51, 51, 0.8);
font-size: 14px;
margin-left: 65px;
}
}
.alreadyclass {
display: flex;
margin-right: 57px;
.alimg {
height: 16px;
width: 16px;
}
.altext {
color: rgba(56, 125, 247, 1);
font-size: 14px;
margin-left: 16px;
}
}
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>