task#13769,答题完成，弹窗提示优化
This commit is contained in:
@ -28,8 +28,8 @@
|
||||
<div class="empty" v-show="showEmpty">
|
||||
<img src="@/assets/empty.png" />
|
||||
</div>
|
||||
<div class="poupWrap" v-if="showPoup">
|
||||
<div class="container">
|
||||
<div class="poupCommon" v-if="showPoup">
|
||||
<div class="container showPoupContainer">
|
||||
<div class="con">
|
||||
<div class="title">培训提醒</div>
|
||||
<div class="content">欢迎使用中道供应商APP。请您先完成培训，阅读文章，并问答相应问题。完成后即可正常使用APP。祝您使用愉快!</div>
|
||||
@ -41,8 +41,8 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="poupWrap" v-if="isFinished">
|
||||
<div class="container">
|
||||
<div class="poupCommon" v-if="isFinished">
|
||||
<div class="container finishContainer">
|
||||
<div class="con">
|
||||
<div class="title">提示</div>
|
||||
<div class="content">恭喜您，您已经全部完成培训！现在您可以正常使用我们的app，请前往体验。</div>
|
||||
@ -78,6 +78,8 @@ export default {
|
||||
isLoading:false,
|
||||
showPoup:true,//进入弹框
|
||||
isFinished:false,
|
||||
// showPoup:false,//进入弹框
|
||||
// isFinished:true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -170,77 +172,163 @@ export default {
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.poupWrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.container{
|
||||
width: 320px;
|
||||
height: 310px;
|
||||
background-image: url("@/assets/trainBg.png");
|
||||
background-size: 320px 310px;
|
||||
background-repeat: no-repeat;
|
||||
.poupCommon{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
.con{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 20px;
|
||||
.showPoupContainer{
|
||||
height: 310px;
|
||||
background-size: 320px 310px;
|
||||
.content{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.btnWrap{
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.finishContainer{
|
||||
height: 260px;
|
||||
background-size: 320px 260px;
|
||||
.con{
|
||||
top: 80px !important;
|
||||
}
|
||||
}
|
||||
.container{
|
||||
width: 320px;
|
||||
background-image: url("@/assets/trainBg.png");
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
.con{
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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-left: 35px;
|
||||
}
|
||||
.line{
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
border-right: 1px solid #F1F2F5;
|
||||
width: 285px;
|
||||
height: 1px;
|
||||
border-bottom: 1px solid #F1F2F5;
|
||||
}
|
||||
.nextBtn{
|
||||
color: #3364B7;
|
||||
.btnWrap{
|
||||
width: 92%;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
.closeBtn{
|
||||
color: #999B9F;
|
||||
}
|
||||
.line{
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
border-right: 1px solid #F1F2F5;
|
||||
}
|
||||
.nextBtn{
|
||||
color: #3364B7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//.poupWrap{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// background-color: rgba(0,0,0,.7);
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// .container{
|
||||
// width: 320px;
|
||||
// height: 310px;
|
||||
// background-image: url("@/assets/trainBg.png");
|
||||
// background-size: 320px 310px;
|
||||
// background-repeat: no-repeat;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// margin: auto;
|
||||
// .con{
|
||||
// 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;
|
||||
// }
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user