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