weixin/pages/control/control.wxss

/* pages/control/control.wxss */
/* logo */
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-0{
  width: 90%;
  height: 92%;
  margin: 0 auto;
}
/* 各个回路区域 */
.loop-1{
  width: 100%;
  height: 7.3%;
  margin-top: 0.5%;
  background-color: cornflowerblue;
  position: relative;
}

.loop-1-image-1{
  position: absolute;
  width: calc(100vw * 27/375);
  height: calc(100vw * 27/375);
  left: 5%;
  top: 13.5%;
}

.loops{
  position: absolute;
  left: 16%;
  width: 53%;
  height: 85%;
}
.loops image{
  width: 9%;
  height: 70%;
}

.loop-1 button{
  position: absolute;
  display: flex;
  align-items:center;
  justify-content:center; 
  font-size: calc(100vw * 11/375);
  border-radius: 20px;
  width: 12%;
  height: 75%;
  top: 10%;
}

.loop-1 button:active{
  box-shadow:cornflowerblue;
  transform: translateY(4px);
}

/* 手动控制栏的按钮定位 */
.manual{
  position: absolute;
  top: 20%;
  left: 5%;
  font-size: calc(100vw * 16/375);
}
.loop-install-1{
  position: absolute;
  left: 20%;
}
.loop-install-2{
  position: absolute;
  left: 40%;
}
.loop-install-3{
  position: absolute;
  left: 60%;
}
.loop-install-4{
  position: absolute;
  left: 80%;
}