autoflow_wx/pages/home/index.wxss

/*  */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  background-color: #89bfea;
}
.navigation-bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  font-size: 36rpx;
  padding-left: 40rpx;
  flex-direction: row;
  color: #fff;
}
.title_1{
  font-weight: 500;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.title_image{
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
  transition: transform 3s ease; /* 添加过渡效果 */
}

.title_2{
  font-size: 28rpx;
  margin-top: 30rpx;
}
.nav-title {
  height: 100%;
  display: flex;
 align-items: center;
  margin-left: 20rpx;
  box-sizing: border-box;
}
 
.nav-search {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* // */
.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  /* 007544 */
 background: linear-gradient(to bottom, #0F80DC -40%, #F0F5F5 40%, #F0F5F5 100%);
 /* background: linear-gradient(to bottom, #007544 -40%, #F0F5F5 40%,#F0F5F5 100%); */
}
.home{
  width: 100%;
  padding: 20rpx 20rpx;
  box-sizing: border-box;
}
.statistics{
  width: 100%;
  padding: 0rpx 40rpx;
  box-sizing: border-box;
}
.statistics_top{
  display: flex;
  justify-content: space-between;
}

.statistics_1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.statistics_digit{
  font-size: 48rpx;
}
.statistics_title{
  margin-top: 10rpx;
}
.vajra{
  width: 100%;
  padding: 16rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin-top: 60rpx;
  }
  .vajra_role{
    width: 22%;
    padding: 20rpx 0rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    /* background-color: #ffffff; */
  }
  .vajra_rights{
    width: 22%;
    padding: 20rpx 0rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    /* background-color: #ffffff; */
  }
  .vajra_apply{
    width: 22%;
    padding: 20rpx 0rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    /* background-color: #ffffff; */
  }
  .role{
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
  }
  .role_botton{
    width: 60rpx;
    height: 60rpx;
    box-sizing: border-box;
  }
  .vajra_share{
    width: 22%;
    /* padding: 20rpx 0rpx; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10rpx;
    background-color: #ffffff;
  }
  .role_botton{
    width: 60rpx;
    height: 60rpx;
    box-sizing: border-box;
  }
  button{
    padding: 0rpx;
    margin: 0rpx;
    width: 100%;
    height: 148rpx;
  padding-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
    font-size: 28rpx;
    /* line-height: 130rpx; */
    border:0rpx #f5f5f5  solid;
  background-color: rgba(0, 0, 0, 0);
  
  }
  wx-button:after {
    display: flex;
  flex-direction: column;
    width: 100%;
    height: 148rpx;
  padding: 20rpx 0rpx;
    font-size: 28rpx;
    /* line-height: 130rpx; */
    border:0rpx #f5f5f5  solid;
  background-color: rgba(0, 0, 0, 0);
  }  
 .examine{
margin-top: 40rpx;
font-size: 32rpx;
 }
 .examine_box{
   width: 100%;
   background-color: #fff;
   padding: 30rpx 0rpx;
margin-top: 20rpx;
border-radius: 10rpx;
box-sizing: border-box;
 }
 .examine_title{
   width: 100%;
   display: flex;
   align-items: center;
   padding: 0rpx 0rpx 0rpx 20rpx;
   box-sizing: border-box;
 }
 .examine_title0{
  width: 120rpx;
  height: 40rpx;
  font-size: 22rpx; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  /* background-color: #0F80DC; */
  background-color: rgba(15, 128, 220, 0.2);
  color: #0F80DC;
  border: 1rpx solid #0F80DC;
box-sizing: border-box;

 }
 .examine_title01{
  width: 120rpx;
  height: 40rpx;
  font-size: 22rpx; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  /* background-color: #0F80DC; */
  color:#ee8d60;
  background-color: rgba(241, 120, 20, 0.2);

  border: 1rpx solid #f39b72;
 box-sizing: border-box;
 }
 .examine_title02{
  width: 120rpx;
  height: 40rpx;
  font-size: 22rpx; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  /* background-color: #0F80DC; */
  color:#0F80DC;
  background-color: rgba(15, 128, 220, 0.2);
  /* color: #007544; */
  border: 1rpx solid #0F80DC;
 box-sizing: border-box;
 }
 .examine_title1{
   flex: 1;
   font-weight: 600;
   font-size: 32rpx;
   display: flex;
   align-items: center;
   padding: 0rpx 10rpx;
   overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -ms-box-orient: vertical;
  line-clamp: 1; /* 超出2行显示省略号 */
  -webkit-line-clamp: 1; /* 超出2行显示省略号 */
   box-sizing: border-box;
 }
 .examine_title2{
   width: 100rpx;
   height: 40rpx;
  font-size: 22rpx; 
   display: flex;
   align-items: center;
   justify-content: center;
border-top-left-radius:100rpx;
border-bottom-left-radius:100rpx;
   background-color: rgb(255, 0, 0,0.2);
   color: red;
   border: 1rpx solid red;
   border-right: 0rpx solid red;
box-sizing: border-box;
 }
 .examine_content{
   flex: 1;
   font-size: 24rpx;
   padding: 20rpx 20rpx;
   margin: 20rpx 20rpx;
   color: #cccccc;
   background-color: #f9f9f9;
   border-radius: 8rpx;
   box-sizing: border-box;
 }
 .feedback{
  margin-top: 8rpx;
 }
 .examine_bottom{
   display: flex;
 }
 .examine_bottom{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0rpx 20rpx;
box-sizing: border-box;

 }
 .examine_button{
   width: 100%;
   padding: 0rpx 20rpx;
   margin-top: 30rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;

 }
 .examine_buttonleft{
   width: 160rpx;
   height:60rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
   background-color: #0F80DC;
color: #fff;
box-sizing: border-box;

 }
 .examine_buttonright{
   width:160rpx;
   height:60rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 10rpx;
   border-radius: 12rpx;
   background-color: #0F80DC;
   color: #fff;
box-sizing: border-box;

 }
 .examine_name{
   color: #cccccc;
 }
 .available{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 60rpx;
 }
 .picker{
   display: flex;
   align-items: center;
 }
 .chevron_down{
   margin-left: 10rpx;
 }
 .weather{
   width: 100rpx;
   height: 100rpx;
 }
 .weather_1{
   font-size: 28rpx;

 }
 .weather_2{
   margin: 0rpx 10rpx;
 }
 .realtime1{
  width: 100%;
  display: flex;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
}
.realtime2{
  width: 100%;
  display: flex;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
}

.data_box{
  width: 100%;
  border-radius: 20rpx;
  box-sizing: border-box;
padding-bottom:20rpx;
margin-top: 60rpx;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.titledata{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 10rpx 20rpx 20rpx;
  box-sizing: border-box;
}
.realtime_left1{
  width: 50%;
  height: 120rpx;
  padding-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-right:1rpx solid #E1E0F4;

}

.realtime_text{
  font-size: 18px;
  margin-right: 4px;
  color: #00BA82;
}
.realtime_title{
  font-size: 14px;
  margin-top: 10rpx;
  color: #222;
}
.realtime_right1{
  width: 50%;
  height: 120rpx;
  padding-bottom: 20rpx;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.realtime_left2{
  width: 50%;
  height: 90rpx;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-top:1rpx solid #E1E0F4;

}
.realtime_right2{
  width: 50%;
  height: 90rpx;
 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-top:1rpx solid #E1E0F4;

}
.canvasArea1 {
  width: 100%;
  display: flex;
  flex-direction: column;
 margin-top: 10rpx;
 align-items: center;
 }
.canvasArea canvas {
  width: 300rpx;
  height: 300rpx;
}


.data_box{
  width: 100%;
  border-radius: 20rpx;
  box-sizing: border-box;
padding-bottom:20rpx;
margin-top: 20rpx;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.data_box1{
  width: 100%;
  border-radius: 20rpx;
  box-sizing: border-box;
padding-bottom:20rpx;
}
.titledata{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 10rpx 10rpx 20rpx;
  box-sizing: border-box;
}
.realtime{
  width: 100%;
  display: flex;
  padding: 0px 20rpx;
  box-sizing: border-box;
}
.realtime_left{
  width: 50%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-bottom:1rpx solid #E1E0F4;
  border-right:1rpx solid #E1E0F4;

}
.realtime_right{
  width: 50%;
  height: 120rpx;
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-bottom:1rpx solid #E1E0F4;

}
.realtime1{
  width: 100%;
  display: flex;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
}
.realtime2{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0rpx 20rpx;
  padding-top: 20rpx;
  box-sizing: border-box;
}
.realtime_left1{
  width: 50%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-right:1rpx solid #E1E0F4;

}
.realtime_left2{
  width: 48%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 10rpx;
  
  font-size: 14px;
  background-color: #ffffff;

}
.realtime_right1{
  width: 50%;
  height: 120rpx;
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.realtime_right2{
  width: 48%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background-color: #ffffff;
  justify-content: space-around;
  border-radius: 10rpx;
}
.realtime_text{
  font-size: 18px;
  margin-right: 4px;
  color: #00BA82;
}
.realtime_unit{
  font-size: 12px;
  color: #222;
}
.realtime_title{
  font-size: 14px;
  margin-top: 10rpx;
  color: #222;
}
.line{
  width: 100%;
  height: 100%;
}
#mychart_line {
  width: 100%;
  height: 100%;
  margin-top: 20rpx;
}
.equipment{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
  margin-top: 40rpx;
  font-size: 28rpx;
}
.equipmenttext{
  font-size: 22rpx;
  color: #999999;
}
 .details{
   font-weight: 400;
   font-size: 26rpx;
  color: #999999;
  display: flex;
  align-items: center;
  box-sizing: border-box;
 }
.electric{
  width: 100%;
  padding: 0rpx 20rpx;
  box-sizing: border-box;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-between;
}
.electric1{
  width: 48%;
  height: 400rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 20rpx;
  box-sizing: border-box;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

}
.electric_rong{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.electric_{
  color: #999999;
}
.pic_pic{
  width: 100%;
  height: 320rpx;
}
.cumulative1{
display: flex;
justify-content: space-between;
align-items: center;
}
.cumulative11{
  font-size: 24rpx;
  color: #999999;
}
.cumulative2{
  display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
}
.electric2{
  width: 48%;
  height: 400rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffffff;
border-radius: 16rpx;
 padding: 0rpx 20rpx;
 box-sizing: border-box;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);

}
.electric21{
  width: 100%;
  height: 220rpx;
padding: 20rpx 0rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box
}
.electric22{
  width: 100%;
  height: 160rpx;
  padding: 20rpx 0rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-top:1rpx solid #E1E0F4;
}
.electric3{
  font-size: 22rpx;
}
.electric4{
  font-size: 22rpx;
  color: #999999;
}
.battery{
font-size: 24rpx;
 color: #222222;

}
.batteryccc{
  font-size: 20rpx;
  color: #999999;
  
  }
  .battery_bottom{
    width: 100%;
    /* border-bottom: 1rpx solid #E1E0F4; */
  }
.tag_type1 {
  font-size: 28rpx;
  color: #F0A26C;
  font-weight: 600;
}

.tag_type2 {
  font-size: 28rpx;
  color: #15DB9B;
  font-weight: 600;
}

.tag_type3 {
  font-size: 28rpx;
  color: #b0c4de;
  font-weight: 600;
/* 蓝 */
}