vue样式集 - 自适应居中弹窗

<!-- 答题正确弹窗 -->
        <block v-if="answer_true_show">
            <view class="answer_true_bg"></view>
            <view class="answer_true">
                <img class="true_bg_img" :src="qualifyingAnswerIng_true_bg" />
                <view class="answer_true_centent">
                    <view class="tips">
                        问题解析
                    </view>
                    <view class="detail">
                        错题分析错题分析错题分析错题分析 错题分析错题分析错题分析错题分析 错题分析错题分析错题分析
                    </view>
                    <view class="answer_true_btn">
                        结束游戏
                    </view>
                    <view class="ttt">
                        上滑跳转下一题
                    </view>
                </view>
            </view>
        </block>

<style lang="scss" scoped>

.answer_true_bg {
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 98;
        background: #000;
    }
 
    .answer_true {
        position: absolute;
        width: 80vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        display: -webkit-flex;
        z-index: 100;
 
        .true_bg_img {
            z-index: 100;
            position: absolute;
            width: 100%;
        }
 
        .answer_true_centent {
            // background-color: red;
            z-index: 100;
            position: absolute;
            width: 90%;
            left: 5%;
            text-align: center;
 
            .tips {
                margin-top: 320rpx;
                font-size: 28rpx;
                text-align: center;
            }
 
            .detail {
                // position: relative;
                // top: 100rpx;
                background-color: #fff;
                line-height: 44rpx;
                border-radius: 10rpx;
                padding: 10rpx 20rpx 30rpx 20rpx;
                margin: 10rpx 40rpx 20rpx 40rpx;
                font-size: 26rpx;
                color: #333;
            }
 
            .answer_true_btn {
                width: 164rpx;
                height: 58rpx;
                line-height: 58rpx;
                background: #102841;
                border-radius: 14rpx;
                margin: auto;
                margin-top: 40rpx;
                color: #fff;
                font-size: 30rpx;
            }
 
            .ttt {
                margin-top: 10rpx;
                font-size: 28rpx;
            }
        }
    }

<block v-if="answer_over_show">
            <view class="answer_over_bg"></view>
            <view class="answer_over">
                <img class="over_bg_img" :src="qualifyingAnswerIng_over_bg" />
                <view class="answer_over_centent">
                    <view class="over_tips tips1 p_r">
                        您一共答题：<view class="num">212</view>题
                    </view>
                    <view class="over_tips tips2 p_r">
                        共答对问题：<view class="num">210</view>题
                    </view>
                    <view class="over_tips tips3 p_r">
                        共答错问题：<view class="num">2</view>题
                    </view>
                    <view class="p_r over_btns">
                        <view class="answer_over_btn1">
                            结束游戏
                        </view>
                        <view class="answer_over_btn2">
                            返回首页
                        </view>
                    </view>
                    <view class="tips4">
                        本次排名提升了5位
                    </view>
                </view>
            </view>
        </block>

css

// 挑战结束
    .answer_over_bg {
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 98;
        background: #000;
    }
 
    .answer_over {
        position: absolute;
        width: 80vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        display: -webkit-flex;
        z-index: 100;
 
        .over_bg_img {
            z-index: 100;
            position: absolute;
            width: 100%;
        }
 
        .answer_over_centent {
            // background-color: red;
            z-index: 100;
            position: absolute;
            width: 90%;
            left: 5%;
            text-align: center;
            margin-top: 340rpx;
            
            .over_tips {
                font-size: 28rpx;
                width: 60%;
                margin-left: 20%;
                margin-bottom: 10rpx;
                
                color: #333;
                text-align: center;
            }
 
            .tips1 .num,
            .tips2 .num {
                color: #317a8c;
                font-size: 40rpx;
                font-weight: 500rpx;
                width: 120rpx;
                line-height: 30rpx;
            }
 
            .tips3 .num {
                color: red;
                font-size: 40rpx;
                font-weight: 500rpx;
                width: 120rpx;
                line-height: 30rpx;
            }
 
            .tips4 {
                // position: relative;
                // top: 100rpx;
                background-color: #fff;
                line-height: 34rpx;
                border-radius: 10rpx;
                padding: 10rpx 20rpx 10rpx 20rpx;
                margin: 30rpx 110rpx 20rpx 110rpx;
                font-size: 26rpx;
                color: #333;
            }
 
            .over_btns {
                width: 76%;
                margin-left: 12%;
                    margin-top: 30rpx;
 
                .answer_over_btn1 {
                    width: 164rpx;
                    height: 58rpx;
                    line-height: 58rpx;
                    background: #102841;
                    border-radius: 14rpx;
                    margin: auto;
                    color: #fff;
                    font-size: 30rpx;
                }
 
                .answer_over_btn2 {
                    width: 164rpx;
                    height: 58rpx;
                    line-height: 58rpx;
                    background: #6b7823;
                    border-radius: 14rpx;
                    margin: auto;
                    color: #fff;
                    font-size: 30rpx;
                }
            }
 
        }
    }