zx_flk_app/pages/bluetoothUnlock/components/IosUnlockAuth.vue

<template>
    <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
        <view class="dialog-content">
            IOS
            <view class="title">清先开启位置授权</view>
            <view class="tips">为保证 感应解锁 的正常使用，请 开启位置授权 并 打开精准位置 开关，可提高解锁成功率，且不会明显增加手机电量消耗。</view>
            <view class="authorization-wrap">
                <!-- <view class="corner-mark">授权引导</view> -->
                 <view class="step-item">
                    
                 </view>
            </view>
            <view class="btn" @tap="close">我已开启</view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: this.value
        }
    },
    watch: {
        value(newValue) {
            this.showDialog = newValue
        }
    },
    methods: {
        close() {
            this.$emit('input', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-content {
    width: 100%;
    height: 100%;
    background: #F1F3F4;
    padding: 40rpx 32rpx;
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #060809;
    }
    .tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #828DA2;
        line-height: 40rpx;
        margin: 32rpx 0 40rpx;
    } 
    .authorization-wrap {
        background: #fff;
        width: 100%;
        height: 728rpx;
        width: 100%;
        border-radius: 40rpx;
        padding: 30rpx 24rpx;
        position: relative;
        .corner-mark {

        }
    }
    .btn {
        margin-top: 40rpx;
        width: 100%;
        height: 80rpx;
        background: #060809;
        border-radius: 40rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        &:active {
            opacity: 0.8;
        }
    }
}
</style>