效果：
20add777621743eab7558a5f7cd9fbf.jpg
代碼：
<view class="showTotal" v-if="fillOut">
<view class="show">
<image src="../../static/team/lALPDiQ3NdD0r2DNAhDNAmw_620_528.png" mode="widthFix" class="show-image"></image>
<view class="show-button" @click="toFeed">
立即填寫
</view>
</view>
<view class="over"></view>
</view>
data(){
return{fillOut:true}
}
<style lang="scss" scoped>
.showTotal{
.show{
width: 620rpx;
position: fixed;
left: 0;
right: 0;
top:280rpx;
margin: auto;
z-index: 10000;
&-image{
width: 620rpx;
position: relative;
}
&-button{
width: 400rpx;
line-height: 96rpx;
text-align: center;
color: #fff;
font-size: 32rpx;
border-radius: 56rpx;
background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
position: absolute;
bottom: -40rpx;
left: 110rpx;
}
}
.over{
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.6;
position: fixed;
top: 0;
left: 0;
z-index: 999;//這一步很重要
}
.button{
width: 400rpx;
height: 96rpx;
background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
}
}
</style>
