weixin/pages/scene/scene.wxss

/* pages/scene/scene.wxss */
page{
  width: 100%;
  height: 100%;
}
.logo{
  width: 100%;
  height: 20%;
  background-color: cornflowerblue;
}
.grouping{
  width: 100%;
  margin: 0 auto;
  height: 6%;
  position: relative;
  border-bottom: darkgrey solid 1px;
}
.grouping text{
  position: absolute;
  left: 5%;
  top:20%;
  font-size: calc(100vw * 12/375);
}

.grouping input{
  width: 40%;
  height: 80%;
  position: absolute;
  left: 27%;
  top: 10%;
}

.grouping button{
  width: 20%;
  height: 70%;
  position:absolute;
  right: 3%;
  top:15%;
  font-size: calc(100vw * 11/375);
  display: flex;
  align-items:center;
  justify-content:center; 
  background-color: cornflowerblue;
  color: white;
}

.grouping button:active{
  box-shadow:
  7px 6px 28px 1px;
  transform: translateY(4px);
}

/* 工程名称设置 */
.project{
  width: 100%;
  height: 6%;
  border-bottom: darkgrey solid 1px;
  position: relative;
}

.project text{
  position: absolute;
  left: 5%;
  top: 20%;
  font-size: calc(100vw * 12/375);
}

.project button{
  width: 25%;
  height: 70%;
  position: absolute;
  display: flex;
  align-items:center;
  justify-content:center; 
  left: 35%;
  top: 15%;
  background-color: cornflowerblue;
  color: white;
  font-size: calc(100vw * 11/375);
}

.project button:active{
  box-shadow:
  7px 6px 28px 1px;
  transform: translateY(4px);
}

.project image{
  position: absolute;
  right: 5%;
  top:12.25%;
  width: 6.7%;
  height: 75.5%;
}

.engin{
  width: 100%;
  height: 68%;
}
/* 工程选项 */
.engineering{
  background-color: cornflowerblue;
  width: 100%;
  height: 9%;
  display: flex;
  flex-direction: row;
  margin-top: 0.5%;
  position: relative;
}

.engineering text{
  font-size: calc(100vw * 14/375);
  position: absolute;
  left: 5%;
  top: 15%;
}

.engineering-image-1{
  width: 4.5%;
  height: 65%;
  position: absolute;
  right: 30%;
  top: 15%;
}
/* 扫码 */
.qrcode{
  width: 6%;
  height: 65%;
  position: absolute;
  right: 19%;
  top:15%;
}
/* 展开设备 */
.develop{
  width: 4%;
  height: 50%;
  position: absolute;
  right: 10%;
  top:20%;
}

.develops{
  width: 100%;
  height: 8.5%;
  position: relative;
}

.develops image{
  width: 6%;
  height: 70.3%;
  position: absolute;
  top: 14%;
}

.develops-1{
  position: absolute;
  left: 5%;
  top: 20%;
  font-size: calc(100vw * 12/375);
}

.develops-2{
  position: absolute;
  left: 25%;
  top: 20%;
  font-size: calc(100vw * 12/375);
}

.develops-3{
  position: absolute;
  left: 70%;
  top: 15%;
  color: red;
  font-size: calc(100vw * 16/375);
}


.engineering-image-2{
  width: 4%;
  height: 65%;
  position: absolute;
  right: 2%;
  top: 15%;
}