operation_wx/pages/index/index.wxss

/*  */
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
}
.navigation-bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding-left: 40rpx;
  flex-direction: row;
  color: #333333;
}
.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%;
  height: 100vh;
  display: flex;
  align-items: center;
  /* 007544 */
 /* background: linear-gradient(to bottom, #D9EAE3 -60%, #D9EAE3 40%, #D9EAE3 100%); */
 background: linear-gradient(to bottom, #007544 -40%, #F0F5F5 40%,#F0F5F5 100%);

}

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


.data_box{
  width: 94%;
  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: 94%;
  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;
/* 蓝 */
}