vue样式集（八）弹窗，规则弹窗，半透明弹窗

<view class="popupBlock" v-if="showPopupBlock">
            <view class="xxx">
                <image class="xxxImg" @click="showPopupBlock=false" mode="widthFix"
                 src="../../static/xxx.png"></image>
            </view>
            <view class="popupCrad">
                <view class="popupCradCentent">
                    <view class="popupCradCententTitle">
                        关于如何正确进行体格测量
                    </view>
                    <view class="popupCradCententItems">
                        身高 / 身长
                    </view>
                    <view class="popupCradCententDtails">
                        随便啦
                    </view>
                </view>
            </view>
</view>

<style lang="scss" scoped>
    .popupBlock {
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
 
        .xxx {
            position: fixed;
            top: 120rpx;
            width: 70rpx;
            height: 70rpx;
            right: 70rpx;
 
            .xxxImg {
                width: 60rpx;
                height: 60rpx;
            }
        }
 
        .popupCrad {
            position: fixed;
            top: 210rpx;
            border-radius: 26rpx;
            background-color: #fff;
            width: 80%;
            left: 10%;
            min-height: 500rpx;
            .popupCradCentent{
                margin: 40rpx 30rpx 30rpx 30rpx;
                .popupCradCententTitle{
                    font-size: 36rpx;
                    font-weight: 600;
                    margin-top: 50rpx;
                    text-align: center;
                }
                .popupCradCententItems{
                    font-size: 32rpx;
                    font-weight: 600;
                    margin-top: 50rpx;
                    
                }
                .popupCradCententDtails{
                    margin-top: 30rpx;
                    font-size: 30rpx;                    
                }
            }
        }
    }
</style>