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

task#13728, 新人培训进入弹框更改

Browse Source
This commit is contained in:
zhouxueli
2024-05-15 11:53:00 +08:00
parent 5dd995d82d
commit b120960c80
2 changed files with 72 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/trainBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

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

@ -24,17 +24,22 @@
</template>
</div>
</van-pull-refresh>
<van-popup v-model="showPoup" class="poupWrap">
<div class="wrap">
<div class="title">培训提醒</div>
<div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
<div class="btn" @click="showPoup = false">确定</div>
</div>
</van-popup>
</div>
<div class="empty" v-show="showEmpty">
<img src="@/assets/empty.png" />
</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="line"></div>
<div class="nextBtn" @click="showPoup = false">前往</div>
</div>
</div>
</div>
</div>
</template>
@ -137,30 +142,70 @@ export default {
margin-right: 8px;
text-align: right
}
.poupWrap{
box-sizing: border-box;
width: 75%;
padding:15px 20px;
border-radius: 8px;
height: 160px;
.wrap{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
position: relative;
}
.poupWrap{
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{
position: absolute;
top: 100px;
left: 20px;
.title{
font-weight: bold;
}
.btn{
width: 100%;
height: 30px;
line-height: 30px;
font-size: 19px;
color: #3364B7;
line-height: 26px;
width: 70%;
margin-left: 35px;
text-align: center;
background-color: #2A5094;
border-radius: 15px;
color: #FFFFFF;
}
.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: 1px;
height: 48px;
border-right: 1px solid #F1F2F5;
}
.nextBtn{
color: #3364B7;
}
}
}
}