mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-11 11:56:46 +08:00
Merge branch 'master' of ssh://gitlab.dongwu-inc.com:10022/BOE/fe-manage
This commit is contained in:
161
src/components/windows/DelWins.vue
Normal file
161
src/components/windows/DelWins.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<!--删除弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="delete_hs"
|
||||
:footer="null"
|
||||
:closable="closableQR"
|
||||
wrapClassName="DelModal"
|
||||
style="margin-top: 400px"
|
||||
>
|
||||
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
|
||||
<div class="del_header"></div>
|
||||
<div class="del_main">
|
||||
<div class="header">
|
||||
<div class="del-icon"></div>
|
||||
<span>提示</span>
|
||||
<div class="close_exit" @click="delete_exit"></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span>您确定要删除此课程吗</span>
|
||||
</div>
|
||||
<div class="del_btnbox">
|
||||
<div class="del_btn btn1">
|
||||
<div class="btnText" @click="delete_exit">取消</div>
|
||||
</div>
|
||||
<div class="del_btn btn2">
|
||||
<div class="btnText" @click="delete_exit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!--删除弹窗 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, reactive, defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
name: "DelWins",
|
||||
props: {
|
||||
delete_hs: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
delete_hs: false,
|
||||
closableQR: false,
|
||||
})
|
||||
const delete_exit = () => {
|
||||
state.delete_hs = false;
|
||||
}
|
||||
return {
|
||||
...toRefs(state),
|
||||
delete_exit,
|
||||
};
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
.DelModal {
|
||||
.ant-modal {
|
||||
.ant-modal-content {
|
||||
width: 424px !important;
|
||||
.ant-modal-body {
|
||||
.delete {
|
||||
z-index: 999;
|
||||
width: 424px;
|
||||
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: 40px;
|
||||
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;
|
||||
.del-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
background-image: url(@/assets/images/coursewareManage/notice.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
background-image: url(@/assets/images/coursewareManage/QR.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;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user