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> </template>
</div> </div>
</van-pull-refresh> </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>
<div class="empty" v-show="showEmpty"> <div class="empty" v-show="showEmpty">
<img src="@/assets/empty.png" /> <img src="@/assets/empty.png" />
</div> </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> </div>
</template> </template>
@ -137,30 +142,70 @@ export default {
margin-right: 8px; margin-right: 8px;
text-align: right text-align: right
} }
.wrap{
position: relative;
}
.poupWrap{ .poupWrap{
box-sizing: border-box; position: absolute;
width: 75%; width: 320px;
padding:15px 20px; height: 310px;
border-radius: 8px; background-image: url("@/assets/trainBg.png");
height: 160px; background-size: 320px 310px;
.wrap{ background-repeat: no-repeat;
display: flex; top: 0;
flex-direction: column; bottom: 0;
justify-content: space-between; left: 0;
align-items: center; right: 0;
background-color: #FFFFFF; margin: auto;
.container{
position: absolute;
top: 100px;
left: 20px;
.title{ .title{
font-weight: bold; font-weight: bold;
} font-size: 19px;
.btn{ color: #3364B7;
width: 100%; line-height: 26px;
height: 30px; width: 70%;
line-height: 30px; margin-left: 35px;
text-align: center; text-align: center;
background-color: #2A5094; }
border-radius: 15px; .content{
color: #FFFFFF; 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;
}
} }
} }
} }