.lamp{ width: 100vw; height: 100vh; position: relative; background-color: #3b3b3b; } .lamp_header{ width: 100%; height: 40px; background-color: #fff; box-sizing: border-box; } .lamp__content{ width: 100%; height: auto; min-height: 100vh; position: relative; height: calc(100% - 40px); /* 暗灰 */ background-color: #3b3b3b; box-sizing: border-box; padding-bottom: 40px; overflow: hidden; } .lampControl{ width: 100%; height: auto; padding: 5px 20px; box-sizing: border-box; } .lampControl .lampControl__placeholder{ width: 100%; height: 180px; } .lampControl .lampControl_chunk{ width: 100%; border-radius: 5px; background-color: #fff; padding: 5px 10px; margin-top: 20px; box-sizing: border-box; box-shadow: 0 0 1px 0px #3b3b3b; } .lampControl .lampControl_title{ height: 40px; font-size: 18px; font-weight: bold; margin-bottom: 5px; display: flex; align-items: center; } .lampControl__switch{ width: 30px; height: 30px; border-radius: 50%; background-color: #3b3b3b; align-items: center; padding: 5px; box-sizing: border-box; } .switch-open{ background-color: #f58505; } .lampControl__switch image{ width: 100%; height: 100%; } .lampControl__switch-text{ font-size: 18px; margin-left: 10px; } .lampControl_title{ font-size: 18px; font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; } .lampControl_title .subTitle{ font-size: 14px; font-weight: normal; margin-left: 10px; } .lampControl_slider{ width: 100%; height: 50px; } .lampControl__scan{ width: 100%; height: calc(100% - 40px); border-radius: 5px; box-shadow: 0 0 1px 0px #3b3b3b; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .lampControl__scan .scanBtn{ width: 130px; height: 130px; border-radius: 50%; background-color: #f58505; color:#fff; padding: 5px; font-size: larger; box-sizing: border-box; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 1px 0px #3b3b3b; } .scanBtn:active{ background-color: #f78e16; box-shadow: 0 0 3px 0px #858484; }