hfln_miniprogram/src/pagesA/healthAlarm/healthAlarm.vue

<template>
    <view class="container">
        <view class="nomalNotice">
            <view class="nomalTitle">异常提醒</view>
            <view class="nomal_contain">
                <view class="nomalItem">
                    <view class="switchBox">
                        <view class="switchBox">
                            <text class="name">起夜频次</text>
                            <switch
                                :value="statusLight"
                                @change="handleLightChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8)"
                            />
                        </view>
                        <view class="nomalLeft">
                            <text>
                                <view class="uni-list-cell-db">
                                    <picker
                                        mode="time"
                                        :value="timeOne"
                                        start="00:00"
                                        end="23:59"
                                        @change="bindTimeChange"
                                    >
                                        <view class="uni-input">{{
                                            timeOne
                                        }}</view>
                                    </picker> </view
                                >-<view class="uni-list-cell-db">
                                    <picker
                                        mode="time"
                                        :value="timeOne"
                                        start="00:00"
                                        end="23:59"
                                        @change="bindTimeChange"
                                    >
                                        <view class="uni-input">{{
                                            timeOne
                                        }}</view>
                                    </picker>
                                </view></text
                            >
                            <image src="../../static/arrThree.png" mode="" />
                        </view>
                    </view>
                </view>
                <view class="nomalItem">
                    <view class="switchBox">
                        <view class="switchBox">
                            <text class="name">如厕频次</text>
                            <switch
                                :value="statusLight"
                                @change="handleLightChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8)"
                            />
                        </view>
                        <view class="nomalLeft">
                            <text>23:00-06:30</text>
                            <image src="../../static/arrThree.png" mode="" />
                        </view>
                    </view>
                </view>
                <view class="nomalItem">
                    <view class="switchBox">
                        <view class="switchBox">
                            <text class="name">卫生间频次</text>
                            <switch
                                :value="statusLight"
                                @change="handleLightChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8)"
                            />
                        </view>
                        <view class="nomalLeft">
                            <text>23:00-06:30</text>
                            <image src="../../static/arrThree.png" mode="" />
                        </view>
                    </view>
                </view>
                <view class="nomalItem">
                    <view class="switchBox">
                        <view class="switchBox">
                            <text class="name">夜间如厕频次</text>
                            <switch
                                :value="statusLight"
                                @change="handleLightChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8)"
                            />
                        </view>
                        <view class="nomalLeft">
                            <text>23:00-06:30</text>
                            <image src="../../static/arrThree.png" mode="" />
                        </view>
                    </view>
                </view>
                <view class="nomalItem">
                    <view class="switchBox">
                        <view class="switchBox">
                            <text class="name">如厕频次异常</text>
                            <switch
                                :value="statusLight"
                                @change="handleLightChange"
                                :active-value="1"
                                :inactive-value="0"
                                size="24px"
                                active-color="#07c160"
                                inactive-color="#eeeff1"
                                style="transform: scale(0.8)"
                            />
                        </view>
                        <view class="nomalLeft">
                            <text>23:00-06:30</text>
                            <image src="../../static/arrThree.png" mode="" />
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="box">
            <view class="handle-btn">
                <view class="btn2" @click="healthAlarm"> 保存设置 </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "my",
    data() {
        return {
            status_light: 1,
            devInfo: "",
            statusLight: 1,
            timeOne: "23:00",
        };
    },
    computed: {},
    methods: {
        bindTimeChange(e) {
            this.timeOne = e.detail.value;
        },
    },
    onLoad(option) {
        this.devInfo = JSON.parse(option.devInfo);
        console.log(this.devInfo, 999999);
    },
    onShow() {},
    onHide() {},
    onUnload() {},
};
</script>
<style lang="less" scoped>
.container {
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    padding-top: 20rpx;

    .nomalNotice {
        width: 712rpx;
        margin: 0 auto;
        box-sizing: border-box;

        &.moreNotice {
            margin-top: 56rpx;
        }

        .nomalTitle {
            padding-left: 38rpx;
            font-family: MiSans;
            color: #9d8179;
            font-size: 28rpx;
        }

        .nomal_contain {
            padding: 10rpx 37rpx;
            margin-top: 18rpx;
            background: #ffffff;
            border-radius: 37rpx;

            .nomalItem {
                display: flex;
                justify-content: space-between;

                .switchBox {
                    width: 600rpx;
                    height: 94rpx;
                    display: flex;
                    align-items: center;
                    padding-top: 20rpx;
                    padding-bottom: 20rpx;
                    border-bottom: 2rpx solid #eef2f6;
                    background: #ffffff;

                    &.switchLast {
                        border-bottom: none;
                    }

                    .name {
                        margin-left: 18rpx;
                        color: #111111;
                        font-size: 32rpx;
                        margin-bottom: 10rpx;

                        &.otherClass {
                            color: #999999;
                        }
                    }

                    .nomalLeft {
                        width: 250rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-left: auto;
                        color: #a0acbe;
                        font-size: 28rpx;
                        text-align: right;
                        margin-bottom: 10rpx;

                        .otherClass {
                            color: #999999;
                        }

                        image {
                            width: 12rpx;
                            height: 21rpx;
                            margin-left: 10rpx;
                        }
                    }
                }
            }
        }
    }

    .box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 168rpx;
        padding: 0 37rpx;
        background: #ffffff;
        box-sizing: border-box;

        .handle-btn {
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .btn2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 700rpx;
                height: 94rpx;
                background: linear-gradient(
                    105.95deg,
                    #a27867 0%,
                    #74483d 100%
                );
                border-radius: 28rpx;
                box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
                    0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
                    0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
                font-family: MiSans;
                font-weight: 500;
                color: #ffffff;
                font-size: 32rpx;
            }
        }
    }
}
</style>