intelligent-medicine-cabinet/mini-pro-web/src/views/device/humidity/index.vue

<template>
    <div class='humidityIndex'>
        <div class='bgc-17b3ec ptb10 plr15 c-fff c-f14'>
            <div class='flex f_y_c f_x_s'>
                <span>设备实时湿度</span>
                <van-button plain size="small" type="info" class='tbtn w60'>获取</van-button>
            </div>
            <div class='c-f20'>22°</div>
            <div class='mt10'>设备实时温度每10分钟会从设备端返回一次</div>
        </div>
        <div class='mt10 p10 bgc-fff c-f14 c-333 c-border-tb'>
            <div class='flex f_y_c'>
                <span>湿度控制：</span>
                <van-switch @click="gotoUrl('/device/humidity/turnControl')" inactive-color='#ccc' active-color='#17b3ec' v-model="checked" />
            </div>
            <div class='mt10' v-show='checked'>湿度控制值为  {{'22°'}}</div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'humidityIndex',
    data(){
        return {
            checked: false
        }
    },
    methods:{

    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.humidityIndex{
    .tbtn{
        border: 0;
        border-radius: 5px;
    }
}
</style>