微信小程序开发uni-app

uniapp自定义弹窗,可覆盖tabBar底部导航栏

2021-01-27  本文已影响0人  吃肉肉不吃肉肉

效果:


image.png

代码:

<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>
上一篇 下一篇

猜你喜欢

热点阅读