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

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

View File

@@ -83,21 +83,41 @@
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
<div class="modal">
<a-modal v-model:visible="visible" :closable="close" :footer="null">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>
</div>
<a-modal
v-model:visible="visible"
:closable="close"
:footer="null"
wrapClassName="WorkManage"
>
<div class="header">
<div class="inheader">
<div class="left">提示</div>
<div class="right" @click="closeModal"></div>
</div>
</div>
<div class="main">
<div class="check"></div>
<div class="text">作业导出完成请在下载中心查看</div>
<div class="btn">
<button class="btn1 sabtn" @click="closeModal">取消</button>
<button class="btn2 sabtn">查看</button>
</div>
</div>
</a-modal>
<!-- 作业详情抽屉 -->
<work-detail v-model:WDvisible="WDvisible" />
</div>
</a-drawer>
</template>
<script>
import { toRefs, reactive } from "vue";
import WorkDetail from "../drawers/WorkDetail.vue";
export default {
name: "WorkManage",
components: { WorkDetail },
props: {
Wvisible: {
type: Boolean,
@@ -110,6 +130,7 @@ export default {
name: null,
visible: false, //导出数据弹窗
close: false, //导出弹窗的关闭按钮
WDvisible: false, //作业详情
projectNameList: [
{
id: 1,
@@ -285,7 +306,14 @@ export default {
return (
<div class="opa">
<div class="opacation">
<span style="color:#4EA6FF;cursor:pointer">查看</span>
<span
style="color:#4EA6FF;cursor:pointer"
onClick={() => {
showWorkDetail();
}}
>
查看
</span>
</div>
</div>
);
@@ -305,12 +333,16 @@ export default {
const closeModal = () => {
state.visible = false;
};
const showWorkDetail = () => {
state.WDvisible = true;
};
return {
...toRefs(state),
selectProjectName,
closeDrawer,
showModal,
closeModal,
showWorkDetail,
};
},
};
@@ -329,21 +361,109 @@ export default {
// }
// }
//作业管理弹窗
.WorkManage {
.modal {
.ant-modal {
width: 473px !important;
height: 308px !important;
.ant-modal-content {
width: 473px !important;
height: 308px !important;
.ant-modal-body {
width: 473px !important;
height: 308px !important;
.ant-modal {
width: 473px;
height: 308px;
.ant-modal-content {
width: 473px;
height: 308px;
.ant-modal-body {
width: 473px;
height: 308px;
padding: 0px;
.header {
width: 473px;
height: 68px;
background: linear-gradient(
180deg,
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
justify-content: center;
.inheader {
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
.left {
font-size: 16px;
font-weight: 600;
color: #333333;
}
.right {
width: 22px;
height: 22px;
background-image: url(../../assets/images/basicinfo/close.png);
background-size: 100% 100%;
cursor: pointer;
}
}
}
.main {
// background-color: red;
width: 100%;
// height: 100%;
margin-top: 32px;
display: flex;
flex-direction: column;
// justify-content: center;
align-items: center;
.check {
width: 40px;
height: 40px;
background-image: url(../../assets/images/basicinfo/check.png);
background-size: 100%;
}
.text {
margin-top: 16px;
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.btn {
display: flex;
margin-top: 40px;
.sabtn {
width: 100px;
height: 40px;
border-radius: 4px;
cursor: pointer;
}
.btn1 {
border: 1px solid #387df7;
background-color: #fff;
color: #387df7;
}
.btn2 {
background-color: #388be1;
color: #fff;
border: 0;
margin-left: 16px;
}
}
}
}
}
}
}
//作业管理弹窗
.WorkManage {
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;