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

feat:项目-基础信息-设置 新增项目-基础信息-排行榜 考试管理抽屉 作业管理，导出，查看抽屉

Browse Source
This commit is contained in:
songwc
2022-10-19 18:27:37 +08:00
parent dbf651e716
commit 5a681da088
15 changed files with 1361 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/components/drawers/WorkDetail.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<a-drawer
:visible="WDvisible"
class="drawerStyle WorkDetail"
placement="right"
width="50%"
@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="isGood">
<div class="cj">作业名称：</div>
<div class="ch">管理者进阶作业</div>
</div>
<div class="score">
<div class="sleft">
<div class="cj">作业要求：</div>
<div class="ch">写一篇观后感，字数600字</div>
</div>
</div>
<div class="workInfo">
<div class="infotit">作业信息：</div>
<div class="workImgCon">
<div class="img">
<div class="see"></div>
<div class="download"></div>
</div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { toRefs, reactive } from "vue";
export default {
name: "WorkDetail",
props: {
WDvisible: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({
pageSize: 10,
currentPage: 1,
tableDataTotal: 100,
});
const closeDrawer = () => {
ctx.emit("update:WDvisible", false);
};
return {
...toRefs(state),
closeDrawer,
};
},
};
</script>
<style scoped lang="scss" >
// .drawerStyle {
// .ant-drawer-content-wrapper {
// // max-width: 1000px;
// .ant-drawer-header {
// display: none !important;
// }
// .ant-drawer-body {
// padding: 0;
// }
// }
// }
.WorkDetail {
.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 {
width: 100%;
height: 100%;
.cj {
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
}
.ch {
font-size: 16px;
font-weight: 400;
color: rgba(153, 153, 153, 0.85);
margin-left: 12px;
}
// background-color: #bfa;
// overflow-y: auto;
.isGood {
display: flex;
align-items: center;
}
.score {
display: flex;
margin-top: 30px;
.sleft {
display: flex;
align-items: center;
}
}
.workInfo {
margin-top: 30px;
.infotit {
font-size: 16px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
}
.workImgCon {
display: flex;
flex-wrap: wrap;
margin-top: 16px;
.img {
width: 240px;
height: 240px;
background-size: 100%;
background-image: url(../../assets/px.jpg);
display: flex;
align-items: center;
justify-content: center;
.see {
width: 50px;
height: 50px;
background-image: url(../../assets/images/basicinfo/see.png);
background-size: 100% 100%;
cursor: pointer;
}
.download {
width: 50px;
height: 50px;
background-image: url(../../assets/images/basicinfo/download.png);
background-size: 100% 100%;
margin-left: 40px;
cursor: pointer;
}
}
}
}
}
.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);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>