feat:修改主内容背景色

This commit is contained in:
李晓鸽
2022-10-13 10:21:04 +08:00

View File

@@ -83,36 +83,42 @@
/> />
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div :class="out ? 'out' : 'unout'"> <a-modal v-model:visible="out" :footer="null" :closable="false" style="margin-top: 250px">
<div class="top"> <div class="out">
<img class="topimg" src="../../assets/images/courseManage/add1.png" /> <div class="top">
<div class="topc">创建调研</div> <img class="topimg" src="../../assets/images/courseManage/add1.png" />
<div @click="handleOut" style="margin-left: 440px; cursor: pointer"> <div class="topc">创建调研</div>
<img <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/close.png"
/>
</div>
</div>
<div class="mid clearfix">
<div class="name">
<div class="d" style="margin-top: -4px">
<img <img
style="width: 10px; height: 10px" style="width: 20px; height: 20px"
src="../../assets/images/basicinfo/asterisk.png" src="../../assets/images/basicinfo/close.png"
/> />
</div> </div>
<div class="inname">调研名称</div> </div>
<div class="in"> <div class="mid clearfix">
<a-input v-model:value="valueE" show-count :maxlength="15" style="border-radius: 8px"/> <div class="name">
<div class="d" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">调研名称</div>
<div class="in">
<a-input
v-model:value="value"
show-count :maxlength="15"
style="border-radius: 8px"
/>
</div>
</div>
<div class="btn">
<button class="samtn btn1" @click="handleOut">取消</button>
<button class="samtn btn2" @click="handleOut">确定</button>
</div> </div>
</div> </div>
<div class="btn"> </div></a-modal
<button class="samtn btn1" @click="handleOut">取消</button> >
<button class="samtn btn2" @click="handleOut">确定</button>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
@@ -350,6 +356,109 @@ export default {
display: block; display: block;
clear: both; clear: both;
} }
.out {
//display: flex;
display: block;
position: absolute;
top: 120px;
width: 680px;
// height: 525px;
background-color: #fff;
box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
left: 50%;
top: 20%;
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;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
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;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.showcount {
position: absolute;
right: 10px;
color: #c7cbd2;
bottom: 5px;
}
}
}
.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 #409EFF;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #409EFF;
color: #fff;
}
}
}
}
.researchmanage { .researchmanage {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -480,102 +589,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.out {
display: block;
position: absolute;
top: 120px;
width: 600px;
// 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;
}
.topc {
color: #000000;
font-size: 16px;
margin-left: 8px;
}
}
.mid {
width: 100%;
height: 100%;
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;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
}
}
.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 #409EFF;
border-radius: 8px;
cursor: pointer;
}
.btn1 {
background-color: #fff;
color: #4ea6ff;
}
.btn2 {
margin-left: 10px;
background-color: #409EFF;
color: #fff;
}
}
}
}
.unout { .unout {
display: none; display: none;
} }