weixin/pages/loop/loop.wxss

/* pages/loop/loop.wxss */
page{
  width: 100%;
  height: 100%;
}
.switch-1{
  width: 100%;
  height: 7.5%;
  background-color: white;
  position: relative;
  border-bottom: 0.5px solid grey;
}

.switch-1 image{
  position: absolute;
}

.Onlinestatus{
  position: absolute;
  right: 5%;
  top: 20%;
  font-weight: 550;
  font-size: calc(100vw * 18/375);
}
/* 下拉选择 */
.Dropdown{
  height: 100%;
  width: 70%;
  position: absolute;
  left: 15%;
}
/* 分组下拉选择 */
.group{
  background-color: cornflowerblue;
  color: white;
  font-size: calc(100vw * 16/375);
  float: left;
  margin-top: 5%;
}
/* 设备下拉选择 */
.device{
  background-color: cornflowerblue;
  color: white;
  font-size: calc(100vw * 16/375);
  margin-left: 3%;
  float: left;
  margin-top: 5%;
}
.loop{
  width: 100%;
  height: 7.5%;
  position: relative;
}

.loop text{
  position: absolute;
  left: 5%;
  top: 18%;
  font-weight: 550;
  font-size: calc(100vw * 16/375);
}

.loop-picker{
  position: absolute;
  height: 65%;
  left: 18%;
  top:18%;
  background-color:cornflowerblue;
  color: white;
  font-size: calc(100vw * 16/375);
}
/* 主体 */
.subject{
  width: 90%;
  margin:0% auto;
  height: 72%;
}
/* 时控一二 */
.Time-control{
  background-color: cornflowerblue;
  width: 100%;
  height: 23%;
  position: relative;
}
.Time-control text{
  position: absolute;
  font-weight: 550;
  font-size: calc(100vw * 16/375);
}

.Time-control switch{
  position: absolute;
  left: 30%;
  zoom:0.8;
}
.Timecontrol-picker-1{
  position: absolute;
  left: 55%;
  border-radius: 5px;
  height: 29.39%;
  text-align: center;
  font-size: calc(100vw * 10/375);
  display: flex;
  align-items:center;
  justify-content:center; 
}

.Timecontrol-button-2{
  height:29.39%;
  width: 15%;
  position: absolute;
  right: 3%;
  font-size: calc(100vw * 10/375);
  display: flex;
  align-items:center;
  justify-content:center; 
}

/* 日期调控 */
.Date-Setting{
  background-color: cornflowerblue;
  width: 100%;
  height: 18%;
  position: relative;
}
.Date-Setting text{
  position: absolute;
  font-weight: 550;
  font-size: calc(100vw * 16/375);
}

.Date-Setting image{
  width: 7.41%;
  height: 34.8%;
  position: absolute;
  top: 45%;
}

/* 光控 */
.Light-control{
  background-color: cornflowerblue;
  width: 100%;
  height: 23%;
  position: relative;
}
.Light-control text{
  position: absolute;
  font-weight: 550;
  font-size: calc(100vw * 16/375);
}
.Light-control switch{
  position: absolute;
  left: 30%;
  zoom: 0.8;
}

.Light-control-picker{
  background-color:blue;
  color: white;
  height: 27.21%;
  position: absolute;
  right: 16%;
  font-size: calc(100vw * 10/375);
  display: flex;
  align-items:center;
  justify-content:center; 
  border-radius: 5px;
  text-align: center;
}
/* 报警 */
.warning{
  background-color: cornflowerblue;
  width: 100%;
  height: 11.4%;
  position: relative;
  font-size: calc(100vw * 16/375);
}
.warning text{
  font-weight: 550;
  position: absolute;
  top: 10%;
}

.warning-control{
  position: absolute;
  left: 20%;
  top: 10%;
}

/* 刷新页面、存储数据 */
.Refresh{
  margin: 3% auto;
  width:100%;
  height: 10%;
  position: relative;
  text-align: center;
}
/* 刷新页面 */
.Refresh-1{
  height:72.1%;
  position: absolute;
  left: 12%;
  top:5%;
  background-color: cornflowerblue;
  font-size: calc(100vw * 14/375);
  display: flex;
  align-items:center;
  justify-content:center; 
  color: white;
}
/* 存储数据 */
.Refresh-2{
  height:72.1%;
  position: absolute;
  right: 12%;
  top:5%;
  background-color: cornflowerblue;
  font-size: calc(100vw * 14/375);
  display: flex;
  align-items:center;
  justify-content:center; 
  color: white;
}