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 * 18/375);
  float: left;
  margin-top: 5%;
  height:calc(100vw * 24/375);
  max-width: 60%;
}
/* 设备下拉选择 */
.device{
  background-color: cornflowerblue;
  color: white;
  font-size: calc(100vw * 18/375);
  margin-left: 3%;
  float: left;
  margin-top: 5%;
  height: calc(100vw * 24/375);
  max-width: 37%;
}
.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;
  left: 18%;
  top:18%;
  background-color:cornflowerblue;
  color: white;
  font-size: calc(100vw * 18/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 * 18/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 * 14/375);
  display: flex;
  align-items:center;
  justify-content:center; 
}

.Timecontrol-button-2{
  height:29.39%;
  width: 18%;
  position: absolute;
  right: 3%;
  font-size: calc(100vw * 14/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 * 18/375);
}

.Date-Setting image{
  width: calc(100vw * 25/375);
  height: calc(100vw * 25/375);
  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 * 18/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 * 14/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 * 18/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 button:active{
  box-shadow:cornflowerblue;
  transform: translateY(4px);
}
/* 刷新页面 */
.Refresh-1{
  height:72.1%;
  position: absolute;
  left: 12%;
  top:5%;
  background-color: cornflowerblue;
  font-size: calc(100vw * 18/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 * 18/375);
  display: flex;
  align-items:center;
  justify-content:center; 
  color: white;
}

/* 新设备时控 */
.newtime1{
  background-color: cornflowerblue;
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  position: relative;
}

.newtime1 switch{
  position: absolute;
  left: 12%;
}

.startTime{
  position: absolute;
  left: 40%;
  top: 35%;
  background-color: rgb(33, 111, 156);
  width: 20%;
  height: 30%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(100vw * 16/375);
}

.endTime{
  position: absolute;
  left: 74%;
  top: 35%;
  background-color: rgb(33, 111, 156);
  width: 20%;
  height: 30%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(100vw * 16/375);
}

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

.newtime2{
  background-color: cornflowerblue;
  width: 100%;
  height: 25%;
  margin-top: 1%;
  display: flex;
  align-items: center;
  position: relative;
}

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

.newtime2 switch{
  position: absolute;
  left: 12%;
}
/* 新设备光控 */
.newlight{
  background-color: cornflowerblue;
  width: 100%;
  height: 42%;
  margin-top: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.newlight switch{
  position: absolute;
  left: 15%;
}

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

.lightstartTime{
  position: absolute;
  left: 42%;
  top:25%;
  background-color: rgb(33, 111, 156);
  width: 20%;
  height: 20%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(100vw * 16/375);
}

.lightendTime{
  position: absolute;
  left: 77%;
  top:25%;
  background-color: rgb(33, 111, 156);
  width: 20%;
  height: 20%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(100vw * 16/375);
}

.weather{
  position: absolute;
  left: 78%;
  top:35%;
  background-color: rgb(33, 111, 156);
  width: 20%;
  height: 30%;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(100vw * 16/375);
}
/* 条件多选框 */
.check1{
  position: absolute;
  top: 55%;
  left: 45%;
  font-size: calc(100vw * 16/375);
  font-weight: 550;
}

.check2{
  position: absolute;
  top: 55%;
  left: 70%;
  font-size: calc(100vw * 16/375);
  font-weight: 550;
}

.check3{
  position: absolute;
  top: 80%;
  left: 45%;
  font-size: calc(100vw * 16/375);
  font-weight: 550;
}

.check4{
  position: absolute;
  top: 80%;
  left: 70%;
  font-size: calc(100vw * 16/375);
  font-weight: 550;
}