style:table渲染图片 修改弹窗类名

This commit is contained in:
songwc
2022-10-20 10:51:25 +08:00
parent fd063e6ff4
commit ab652a0924
6 changed files with 322 additions and 290 deletions

View File

@@ -29,6 +29,7 @@
centered="true"
:footer="null"
:closable="clos"
wrapClassName="AddLevel"
>
<div class="header">
<div class="headmain">
@@ -310,7 +311,7 @@
<div class="draw" style="position: relative">
<a-drawer
v-model:visible="visible"
class="drawerStyle"
class="drawerStyle ProjectDrawer"
title="关联项目"
placement="right"
width="80%"
@@ -322,7 +323,7 @@
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="showDrawer"
@click="closeDrawer"
/>
</div>
<div class="drawerbox">
@@ -648,6 +649,9 @@ export default {
const showDrawer = () => {
state.visible = true;
};
const closeDrawer = () => {
state.visible = false;
};
const showModal = () => {
state.modal = true;
};
@@ -802,6 +806,7 @@ export default {
selectProjectName2,
tableDataFunc,
showDrawer,
closeDrawer,
showModal,
closeModal,
afterVisibleChange,
@@ -819,151 +824,153 @@ export default {
display: block;
clear: both;
}
.ant-modal {
width: 624px !important;
height: 388px !important;
.ant-modal-content {
.AddLevel {
.ant-modal {
width: 624px !important;
height: 388px !important;
border-radius: 4px !important;
.ant-modal-body {
// background-color: blue;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
.ant-modal-content {
width: 624px !important;
height: 388px !important;
border-radius: 4px !important;
.ant-modal-body {
// background-color: blue;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
.header {
width: 624px;
height: 68px;
background: linear-gradient(
180deg,
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
justify-content: center;
.headmain {
width: 90%;
height: 100%;
.header {
width: 624px;
height: 68px;
background: linear-gradient(
180deg,
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
justify-content: space-between;
.add {
font-size: 16px;
font-weight: 600;
color: #333333;
}
.img {
width: 20px;
height: 20px;
background-image: url(../../assets/images/basicinfo/close22.png);
background-size: 100% 100%;
justify-content: center;
.headmain {
width: 90%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.add {
font-size: 16px;
font-weight: 600;
color: #333333;
}
.img {
width: 20px;
height: 20px;
background-image: url(../../assets/images/basicinfo/close22.png);
background-size: 100% 100%;
}
}
}
}
.main {
width: 100%;
height: calc(100% - 68px);
// background-color: #bfa;
display: flex;
justify-content: center;
.inma {
width: 75%;
height: 100%;
// background-color: lightblue;
.name {
display: flex;
position: relative;
margin-top: 30px;
.fir {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
white-space: nowrap;
margin-top: 3px;
.main {
width: 100%;
height: calc(100% - 68px);
// background-color: #bfa;
display: flex;
justify-content: center;
.inma {
width: 75%;
height: 100%;
// background-color: lightblue;
.name {
display: flex;
position: relative;
margin-top: 30px;
.fir {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
white-space: nowrap;
margin-top: 3px;
}
.input {
width: 100%;
.ant-input {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
.ant-textarea {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
}
}
.co {
position: absolute;
right: 10px;
top: 4px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
.co1 {
position: absolute;
right: 10px;
bottom: 8px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
}
.input {
.btn {
margin-top: 40px;
width: 100%;
.ant-input {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
display: flex;
justify-content: center;
.btn1 {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #387df7;
font-size: 14px;
color: #387df7;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
}
.ant-textarea {
border-radius: 8px;
border: 1px solid #c7cbd2;
&::placeholder {
font-size: 12px;
position: absolute;
top: 5px;
}
.btn2 {
width: 100px;
height: 40px;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
border: 0;
background: #388be1;
}
}
.co {
position: absolute;
right: 10px;
top: 4px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
.co1 {
position: absolute;
right: 10px;
bottom: 8px;
font-size: 14px;
font-weight: 400;
color: #c7cbd2;
}
}
.btn {
margin-top: 40px;
width: 100%;
display: flex;
justify-content: center;
.btn1 {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #387df7;
font-size: 14px;
color: #387df7;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
}
.btn2 {
width: 100px;
height: 40px;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
border: 0;
background: #388be1;
}
}
}
}
}
}
}
.drawerStyle {
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.ProjectDrawer {
// .ant-drawer-content-wrapper {
// .ant-drawer-header {
// display: none !important;
// }
// .ant-drawer-body {
// padding: 0;
// }
// }
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;