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

@@ -95,6 +95,7 @@
centered="true"
v-model:visible="out"
:footer="null"
wrapClassName="CreatePath"
>
<div class="out">
<div class="top">
@@ -534,193 +535,195 @@ export default {
};
</script>
<style lang="scss">
.ant-modal {
width: 680px !important;
height: 528px !important;
.ant-modal-content {
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.CreatePath {
.ant-modal {
width: 680px !important;
height: 528px !important;
.ant-modal-body {
.ant-modal-content {
width: 680px !important;
height: 528px !important;
padding: 0 !important;
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
.ant-modal-body {
width: 680px !important;
height: 528px !important;
padding: 0 !important;
.out {
display: block;
position: absolute;
top: 90px;
width: 680px;
// height: 525px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
.d {
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
display: flex;
align-items: center;
.topimg {
width: 18px;
height: 18px;
margin-left: 27px;
margin-top: -2px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.bac {
width: 78%;
// background-color: lightcoral;
.mid {
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
margin-top: 30px;
// border: 1px solid black;
flex-direction: column;
align-items: center;
.d {
margin-top: 18px;
color: #ff4e4e;
// margin-top: 8px;
// color: #ff4e4e;
margin-left: -5px;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 20px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
.bac {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// border: 1px solid black;
.d {
margin-top: 18px;
color: #ff4e4e;
}
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 7px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
height: 110px;
// background-color: red;
display: flex;
justify-content: space-between;
.im {
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
.im {
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
width: 140px;
height: 110px;
cursor: pointer;
}
}
}
.info {
width: 78%;
// background-color: lightcoral;
display: flex;
margin-top: 30px;
// align-items: center;
// height: 40px;
// border: 1px solid black;
.inname {
color: #6f6f6f;
font-size: 14px;
margin-left: 26px;
margin-top: 15px;
}
.in {
margin-left: 14px;
width: 81%;
position: relative;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 130px;
resize: none;
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
.btn {
width: 33%;
margin-top: 30px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
.samtn {
width: 100px;
height: 40px;
font-size: 14px;
border: 1px solid #4ea6ff;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #fff;
}
}
}
}
}
}
}
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
clear: both;
}
.learningPath {
width: 100%;
height: 100%;