mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 10:56:46 +08:00
feat:增加弹窗样式
This commit is contained in:
李晓鸽
BIN
src/assets/images/basicinfo/add.png
Normal file
BIN
src/assets/images/basicinfo/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 787 B |
BIN
src/assets/images/basicinfo/close22.png
Normal file
BIN
src/assets/images/basicinfo/close22.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 596 B |
@@ -144,7 +144,15 @@ export default {
|
|||||||
{
|
{
|
||||||
name: "管理",
|
name: "管理",
|
||||||
href: "",
|
href: "",
|
||||||
}
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (n === "/certificatecenter" || n === "/CertificateCenter") {
|
||||||
|
state.list = [
|
||||||
|
{
|
||||||
|
name: "证书中心",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
if (n === "/systemmanage" || n === "/SystemManage") {
|
if (n === "/systemmanage" || n === "/SystemManage") {
|
||||||
|
|||||||
@@ -144,7 +144,8 @@
|
|||||||
src="../assets/images/navleft/certificate.png"
|
src="../assets/images/navleft/certificate.png"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span>证书中心</span>
|
|
||||||
|
<router-link to="/certificatecenter">证书中心</router-link>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
<a-menu-item key="sub9" @titleClick="titleClick">
|
<a-menu-item key="sub9" @titleClick="titleClick">
|
||||||
<div class="imgBox">
|
<div class="imgBox">
|
||||||
@@ -293,6 +294,13 @@ export default {
|
|||||||
selectedKeys: "sub3-2",
|
selectedKeys: "sub3-2",
|
||||||
pagename: "课程管理",
|
pagename: "课程管理",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
href: "/certificatecenter",
|
||||||
|
openKeys: "sub8",
|
||||||
|
selectedKeys: "sub8",
|
||||||
|
pagename: "证书中心",
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
href: "/systemmanage",
|
href: "/systemmanage",
|
||||||
openKeys: "sub9",
|
openKeys: "sub9",
|
||||||
|
|||||||
@@ -0,0 +1,366 @@
|
|||||||
|
<template>
|
||||||
|
<div class="certificateCenter">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
background: #388be1;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: PingFangSC-Regular, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
"
|
||||||
|
@click="showModal"
|
||||||
|
>
|
||||||
|
新建面授课
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
title="Title"
|
||||||
|
@ok="closeModal"
|
||||||
|
:footer="null"
|
||||||
|
:closable="false"
|
||||||
|
wrapClassName="modalStyle"
|
||||||
|
>
|
||||||
|
<div class="modalHeader">
|
||||||
|
<div class="headerLeft">
|
||||||
|
<img
|
||||||
|
style="width: 17px; height: 18px; margin-right: 8px"
|
||||||
|
src="../../assets/images/basicinfo/add.png"
|
||||||
|
/>
|
||||||
|
<span class="headerLeftText">新建面授课</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-right: 57px; cursor: pointer">
|
||||||
|
<img
|
||||||
|
style="width: 22px; height: 22px"
|
||||||
|
src="../../assets/images/basicinfo/close22.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMain">
|
||||||
|
<div class="title">课程信息</div>
|
||||||
|
<div style="display: flex; margin-top: 10px">
|
||||||
|
<div class="modalMainLeft">
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
</div>
|
||||||
|
<div class="modalMainLeft">
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
<div class="vote">
|
||||||
|
<div class="votebox">
|
||||||
|
<img
|
||||||
|
class="voteimg"
|
||||||
|
src="../../assets/images/basicinfo/asterisk.png"
|
||||||
|
/>
|
||||||
|
<div class="votename">投票名称：</div>
|
||||||
|
</div>
|
||||||
|
<div class="modalMainInp">
|
||||||
|
<a-input v-model:value="value" placeholder="请输入投票名称" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 投票名称 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "CertificateCenter",
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
visible: true,
|
||||||
|
loading: false,
|
||||||
|
screenHeight: document.body.clientHeight, // 屏幕高度
|
||||||
|
});
|
||||||
|
|
||||||
|
const afterVisibleChange = (bool) => {
|
||||||
|
console.log("visible", bool);
|
||||||
|
};
|
||||||
|
|
||||||
|
const showModal = () => {
|
||||||
|
state.visible = true;
|
||||||
|
};
|
||||||
|
const closeModal = () => {
|
||||||
|
state.visible = false;
|
||||||
|
};
|
||||||
|
const getMousePosition = () => {
|
||||||
|
state.screenHeight = document.body.clientHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// console.log("11111", 1);
|
||||||
|
window.addEventListener("resize", getMousePosition, false);
|
||||||
|
// judgeUrl();
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener("resize", getMousePosition, false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
afterVisibleChange,
|
||||||
|
showModal,
|
||||||
|
closeModal,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.certificateCenter {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.modalStyle {
|
||||||
|
height: 100%;
|
||||||
|
.ant-modal {
|
||||||
|
height: calc(100% - 200px);
|
||||||
|
width: 80% !important;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
// overflow-y: scroll;
|
||||||
|
min-width: 900px;
|
||||||
|
max-width: 1300px;
|
||||||
|
padding: 0;
|
||||||
|
.ant-modal-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ant-modal-body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.ant-modal-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.ant-modal-body {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.modalHeader {
|
||||||
|
width: 100%;
|
||||||
|
height: 68px;
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(78, 166, 255, 0) 0%,
|
||||||
|
rgba(78, 166, 255, 0.2) 100%
|
||||||
|
);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.headerLeft {
|
||||||
|
margin-left: 27px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.headerLeftText {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modalMain {
|
||||||
|
height: 0px;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin-top: 7px;
|
||||||
|
margin: 0px 52px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4f5156;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
.modalMainLeft {
|
||||||
|
width: 50%;
|
||||||
|
height: 300px;
|
||||||
|
padding-left: 35px;
|
||||||
|
padding-right: 44px;
|
||||||
|
// background-color: red;
|
||||||
|
|
||||||
|
.vote {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
.votebox {
|
||||||
|
width: 100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
// background-color: pink;
|
||||||
|
.voteimg {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.votename {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modalMainInp {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modalMainRight {
|
||||||
|
width: 50%;
|
||||||
|
height: 300px;
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user