feat:增加导出作业

This commit is contained in:
lixg
2023-01-07 19:48:29 +08:00
parent ec61608e52
commit 72d2e7b987
15 changed files with 363 additions and 53 deletions

View File

@@ -0,0 +1,187 @@
<!--
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-07 17:25:14
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-07 17:43:55
* @FilePath: /fe-manage/src/components/Modals/ExportHomeWork.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<a-modal
:visible="exportHomeWorkV"
:footer="null"
wrapClassName="exportHomeWork"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="clostModal"></div>
</div>
<div class="body">
<img
style="width: 40px; height: 40px; margin-bottom: 16px"
src="../../assets/images/leveladd/success.png"
/>
<span>作业导出完成请下载本地或去下载中心查看</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="clostModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="downloadHomeWork">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</template>
<script>
import { toRefs, reactive } from "vue";
export default {
name: "ProjectHomeWorkManage",
props: {
exportHomeWorkV: {
type: Boolean,
default: false,
},
},
setup(props, ctx) {
const state = reactive({});
//关闭弹窗
const clostModal = () => {
ctx.emit("update:exportHomeWorkV", false);
};
// //下载作业
// const downloadHomeWork=()=>{
// // props.url
// }
console.log("props", props);
return {
...toRefs(state),
clostModal,
};
},
};
</script>
<style lang="scss">
.exportHomeWork {
.ant-modal {
width: 424px !important;
height: 308px !important;
.ant-modal-content {
width: 424px !important;
height: 308px !important;
.ant-modal-body {
width: 424px !important;
height: 308px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 308px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/taskpage/gan.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
.ant-modal-close-x {
display: none;
}
}
}
</style>