mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-18 15:26:48 +08:00
feat:增加导出作业
This commit is contained in:
187
src/components/Modals/ExportHomeWork.vue
Normal file
187
src/components/Modals/ExportHomeWork.vue
Normal 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>
|
||||
Reference in New Issue
Block a user