apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task#13769, 新人培训弹框优化

Browse Source
This commit is contained in:
zhouxueli
2024-05-15 17:13:56 +08:00
parent 5cf2559335
commit 2c59b0f5a0
1 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/newcomerTraining/newTrainingList.vue
View File

@ -30,14 +30,15 @@
</div> </div>
<div class="poupWrap" v-if="showPoup"> <div class="poupWrap" v-if="showPoup">
<div class="container"> <div class="container">
<div class="title">培训提醒</div> <div class="con">
<div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div> <div class="title">培训提醒</div>
<div class="line"></div> <div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
<div class="btnWrap">
<div class="closeBtn" @click="showPoup = false">关闭</div>
<div class="line"></div> <div class="line"></div>
<div class="nextBtn" @click="showPoup = false">答题</div> <div class="btnWrap">
<div class="nextBtn" @click="showPoup = false">确定</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -147,66 +148,75 @@ export default {
overflow-y: hidden; overflow-y: hidden;
} }
.poupWrap{ .poupWrap{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
position: absolute; position: absolute;
width: 320px;
height: 310px;
background-image: url("@/assets/trainBg.png");
background-size: 320px 310px;
background-repeat: no-repeat;
top: 0; top: 0;
bottom: 0;
left: 0; left: 0;
right: 0;
margin: auto;
.container{ .container{
width: 320px;
height: 310px;
background-image: url("@/assets/trainBg.png");
background-size: 320px 310px;
background-repeat: no-repeat;
position: absolute; position: absolute;
top: 100px; top: 0;
left: 20px; bottom: 0;
.title{ left: 0;
font-weight: bold; right: 0;
font-size: 19px; margin: auto;
color: #3364B7; .con{
line-height: 26px; position: absolute;
width: 70%; top: 100px;
margin-left: 35px; left: 20px;
text-align: center;
} }
.content{
width: 70%; }
height: 92px; .title{
font-size: 14px; font-weight: bold;
color: #4C5361; font-size: 19px;
line-height: 23px; color: #3364B7;
text-align: justify; line-height: 26px;
margin-top: 8px; width: 70%;
margin-bottom: 20px; margin-left: 35px;
margin-left: 35px; text-align: center;
}
.content{
width: 70%;
height: 92px;
font-size: 14px;
color: #4C5361;
line-height: 23px;
text-align: justify;
margin-top: 8px;
margin-bottom: 20px;
margin-left: 35px;
}
.line{
width: 285px;
height: 1px;
border-bottom: 1px solid #F1F2F5;
}
.btnWrap{
width: 92%;
font-weight: bold;
font-size: 13px;
display: flex;
justify-content: space-around;
margin-top: 6px;
height: 40px;
line-height: 40px;
.closeBtn{
color: #999B9F;
} }
.line{ .line{
width: 285px; width: 1px;
height: 1px; height: 48px;
border-bottom: 1px solid #F1F2F5; border-right: 1px solid #F1F2F5;
} }
.btnWrap{ .nextBtn{
width: 92%; color: #3364B7;
font-weight: bold;
font-size: 13px;
display: flex;
justify-content: space-around;
margin-top: 6px;
height: 40px;
line-height: 40px;
.closeBtn{
color: #999B9F;
}
.line{
width: 1px;
height: 48px;
border-right: 1px solid #F1F2F5;
}
.nextBtn{
color: #3364B7;
}
} }
} }
} }