feat:结业 同意学习弹窗

This commit is contained in:
dongwug
2022-10-13 18:36:08 +08:00
parent f128a0a389
commit 949f200c27

View File

@@ -1122,7 +1122,7 @@
</div>
</a-modal>
<!--新建开课页面 -->
<!--新建开课学员管理页面页面 -->
<!--开课学员管理页面页面 -->
<a-modal
v-model:visible="sm_hs"
title="Title"
@@ -1264,8 +1264,8 @@
</div>
</div>
</a-modal>
<!--新建开课学员管理页面页面 -->
<!--新建二维码页面 -->
<!--开课学员管理页面页面 -->
<!--二维码页面 -->
<a-modal v-model:visible="QR_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
<div
class="QR"
@@ -1290,8 +1290,8 @@
</div>
</div>
</a-modal>
<!--新建二维码页面 -->
<!--新建录入成绩页面 -->
<!--二维码页面 -->
<!--录入成绩页面 -->
<a-modal v-model:visible="rg_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
<div
class="recordgrade"
@@ -1331,7 +1331,82 @@
</div>
</div>
</a-modal>
<!--新建录入成绩页面 -->
<!--录入成绩页面 -->
<!--结业页面 -->
<a-modal v-model:visible="graduate_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
<div
class="graduate"
:style="{ display: graduate_hs ? 'block' : 'none' }"
>
<div class="gra_header"></div>
<div class="gra_main">
<div class="gram_header">
<div class="gra_icon"></div>
<span>结业</span>
<div class="close_exit" @click="graduate_exit"></div>
</div>
<div class="gram_body">
<div class="gramb_items">
<div class="items_left">
<div class="sign"><img src="@/assets/images/coursewareManage/asterisk.png" alt=""></div>
<span >结业</span>
</div>
<div class="gramb_input">
<a-radio-group v-model:value="onftvalue">
<div class="bc_box">
<div class="ol_checkbox">
<a-radio v-model:checked="checked" :value="1">结业</a-radio>
</div>
<div class="ol_checkbox">
<a-radio v-model:checked="checked" :value="2">不结业</a-radio>
</div>
</div>
</a-radio-group>
</div>
</div>
</div>
<div class="qrm_btnbox">
<div class="qrm_btn btn1">
<div class="btnText">取消</div>
</div>
<div class="qrm_btn btn2">
<div class="btnText" @click="graduate_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--结业页面 -->
<!--请确定是否同意此学员学习此课程弹窗 -->
<a-modal v-model:visible="agreestudy_hs" :footer="null" :closable="closableQR" style="margin-top: 400px">
<div
class="agreestudy"
:style="{ display: agreestudy_hs ? 'block' : 'none' }"
>
<div class="agree_header"></div>
<div class="agree_main">
<div class="agreem_header">
<div class="agreem_icon"></div>
<span>提示</span>
<div class="close_exit" @click="agreestudy_exit"></div>
</div>
<div class="agreem_body">
<div class="body_box">
<span>请确定是否同意此学员学习此课程</span>
</div>
</div>
<div class="qrm_btnbox">
<div class="qrm_btn btn1">
<div class="btnText">取消</div>
</div>
<div class="qrm_btn btn2">
<div class="btnText" @click="agreestudy_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--请确定是否同意此学员学习此课程弹窗 -->
</div>
</template>
<script>
@@ -2003,6 +2078,8 @@ export default defineComponent({
QR_hs:false,
closableQR: false,
rg_hs:true,
graduate_hs:true,
agreestudy_hs:true,
value:"",
valueE:"",
});
@@ -2536,6 +2613,12 @@ export default defineComponent({
const rg_exit = () => {
state.rg_hs = false;
}
const graduate_exit = () => {
state.graduate_hs = false;
}
const agreestudy_exit = () => {
state.agreestudy_hs = false;
}
return {
onftvalue,
current,
@@ -2573,7 +2656,9 @@ export default defineComponent({
sm_exit,
clear_valueE,
qr_exit,
rg_exit
rg_exit,
graduate_exit,
agreestudy_exit,
};
},
});
@@ -3368,6 +3453,202 @@ export default defineComponent({
}
}
}
.ant-modal{
.ant-modal-content{
width:679px !important;
.ant-modal-body{
.graduate{
z-index: 999;
width: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.gra_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.gra_main {
width: 100%;
position: relative;
.gram_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.gra_icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/graduate.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%;
}
}
.gram_body{
width: 100%;
.gramb_items{
display: flex;
justify-content: center;
align-items:center;
width:80%;
margin:21px auto 10px auto;
.items_left{
display:flex;
margin-right:14px;
.sign{
margin-right:7px;
}
}
}
.gramb_input{
.bc_box{
display:flex;
}
}
}
.qrm_btnbox{
display:flex;
margin:30px auto;
justify-content: center;
.qrm_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
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;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
.ant-modal{
.ant-modal-content{
width:679px !important;
.ant-modal-body{
.agreestudy{
z-index: 999;
width: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.agree_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.agree_main {
width: 100%;
position: relative;
.agreem_header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.agreem_icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.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%;
}
}
.agree_body{
width: 100%;
.brderbox{
display:flex;
align-items:center;
justify-content: center;
}
}
.qrm_btnbox{
display:flex;
margin:30px auto;
justify-content: center;
.qrm_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
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;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
.modalStyle {
.ant-modal{
.ant-modal-content{