zx_flk_app/pages/bluetoothUnlock/unlockSet.vue

<template>
    <view class="unlockSet-page">
        <view class="lock-img"></view>
        <view class="main">
            <view class="primary-text">开启感应解锁后，携带手机靠近车辆并按Auto 键即可开机</view>
            <view class="car-option-wrap">
                <view class="img"></view>
                <view class="opt-text-wrap">
                    <view class="text">{{ $t('按键解锁') }}</view>
                    <view class="sub-text">手机接近车辆后，长按Auto键即可解锁</view>
                </view>
            </view>
            <view class="sensitivity-set" @tap="showSensitivityDialog = true">
                <view class="txt">{{ $t('灵敏度设置') }}</view>
            </view>
        </view>
        <view class="switch-btn">{{ $t('关闭感应解锁') }}</view>

        <u-popup v-model="showSensitivityDialog" mode="bottom" border-radius="28" @close="close">
            <view class="popup-content">
                <view class="title">灵敏度设置</view>
                <view class="text">距离建议适中，设置过近会降低成功率，设置</view>
                <u-slider v-model="sensitivityValue"></u-slider>

            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data () {
        return {
            showSensitivityDialog: true,
            sensitivityValue: 50
        }
    },
    methods: {
        close () {
            this.showSensitivityDialog = false
        }
    }
}
</script>


<style lang="scss" scoped>
.unlockSet-page {
    background: #fff;
    min-height: 100vh;
    .lock-img {
        width: 100%;
        height: 400rpx;
        background: url('https://qiniu.bms16.com/Fi7jWl2Uf5zBsZHd77SK0RSGXiWr');
        background-size: 100%;
    }
    .main {
        padding: 0 40rpx;
        .primary-text {
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 36rpx;
            color: #060809;
        }
        .car-option-wrap {
            border-radius: 40rpx;
            margin: 40rpx 0 24rpx;
            .img {
                width: 100%;
                height: 316rpx;
                background: url('https://qiniu.bms16.com/FsscWX4rYSUO_RxdlCqHUPqYqXu1');
                background-size: 100%;
            }
            .opt-text-wrap {
                background: #DCF4FF;
                border-radius: 0rpx 0rpx 40rpx 40rpx;
                padding: 32rpx 0;
                text-align: center;
                .text {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: bold;
                    font-size: 32rpx;
                    color: #060809;
                    margin-bottom: 16rpx;
                }
                .sub-text {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: 5C676B;
                }
            }
        }
        .sensitivity-set {
            width: 100%;
            padding: 40rpx 32rpx;
            background: #F1F3F4;
            border-radius: 40rpx;
            .txt {
                font-family: PingFangSC, PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #060809;
                text-align: left;
                font-style: normal;
                display: flex;
                align-items: center;
                &::before {
                    content: "";
                    width: 64rpx;
                    height: 64rpx;
                    margin-right: 16rpx;
                    background: url('https://qiniu.bms16.com/Fo-sYIixqyae6oTXXyq3RAruvosJ');
                    background-size: 100%;
                }
            }
        }
    }
    .switch-btn {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #FA2918;
        position: absolute;
        bottom: 64rpx;
        left: 50%;
        transform: translateX(-50%);
        &:active {
            opacity: .6;
        }
    }
    .popup-content {
        padding: 40rpx 32rpx 164rpx;
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 40rpx;
            color: #060809;
        }
        .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #828DA2;
            margin: 32rpx 0 40rpx;
        }
    }
}
</style>