movecar_wx/pages/details/index.wxss

/* pages/details/index.wxss */
/* 自定义导航栏 */
 .details{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #007544 -40%, #F0F5F5 40%,#F0F5F5 100%);
 }
.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
}
.navigation-bar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: #333333;
}
.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;
}
  
.bg-logo {
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #f7f7f7;
  position: absolute;
  top: 0;
  left:20rpx;
}
.detail_s{
  height: 100%;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.card_top{
 padding: 20rpx 30rpx;
 display: flex;
 /* justify-content: space-around; */
 justify-content: space-between;
 margin-top: 20rpx;
}
 .card_top1{
   width: 100rpx;
   height: 60rpx;
   color: #ffffff;
   display: flex;
   justify-content: center;
  border-bottom:4rpx solid #ffffff;
 }
 .card_top1c{
  width: 100rpx;
  height: 60rpx;
  color: #222222;
  display: flex;
  justify-content: center;
 border-bottom:4rpx solid #222222;
}
 .card_top2{
  width: 200rpx;
  height: 60rpx;
  color: #222222;
  display: flex;
  justify-content: center;
 border-bottom:4rpx solid #222222;
 }
 .card_top3{
  width: 200rpx;
  height: 60rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
 border-bottom:4rpx solid #ffffff;
 }
 .proportion{
 width: 100%;
 height: 40rpx;
padding: 0rpx 30rpx;
box-sizing: border-box;
 }
 .proportion_{
  width: 100%;
  height: 20rpx;
  background-color: #007544;
  border-radius: 20rpx;
  overflow: hidden;
  margin-top: 20rpx;
 }
 .proportion_1{
   height: 30rpx;
 }
 .proportion_2{
  height: 60rpx;

 }
 .proportion_c{
   height: 20rpx;
  background-color:#00a9ff;
 }
 .cumulative{
  display: flex; 
 }
 .cumulative_1{
display: flex;
margin-top: 40rpx;
padding-right: 60rpx;
 }
 .cumulative_2{
   width: 16rpx;
   height: 16rpx;
  background-color:#00a9ff;
  border-radius: 100rpx;
margin-top: 10rpx;
margin-right: 20rpx;
 }
 .cumulative_22{
  width: 16rpx;
  height: 16rpx;
  background-color:#007544;
 border-radius: 100rpx;
margin-top: 10rpx;
margin-right: 20rpx;
 }
 .cumulative_3{
   display: flex;
   flex-direction: column;
padding-right: 20rpx;
height: 90rpx;
 justify-content: space-between;
}
swiper{
  height: 100vh;
}
.datelabel{
  width: 100%;
  height: 80rpx;
  background-color: #ffffff;
 border-radius: 6rpx;
 margin-top: 100rpx;
 display: flex;
 
}
.datelabel_1{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6rpx;
  box-sizing: border-box;
}
.datelabel_2{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6rpx;
}
.datelabel_3{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6rpx;
}
.switch{
  width: 100%;
  height: 80rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content:space-between;
  /* justify-content: space-around; */
}
.switch1{
  width: 100%;
  height: 80rpx;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  /* justify-content: space-around; */
}
.switch_1{
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.switch_11{
  width: 20%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.switch_2{
  padding:0rpx 20rpx;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.switch_2_{
  padding:0rpx 20rpx;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.switch_22{
  margin-right: 10rpx;
}
.switch_3{
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
}
.switch_33{
  width: 20%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 6rpx;
display: flex;
align-items: center;
justify-content: center;
padding-left: 10rpx;
}
.tt_calendar{
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.canvasbox{
  width: 100%;
  height: 400rpx;
 border-bottom:2rpx solid #cccccc;
}
.canvasbox1{
  width: 100%;
  height: 400rpx;
}
#mychart_line1{
  width: 100%;
  height: 100%;
  margin-top: 20rpx;
box-sizing: border-box;

}
#mychart_line2{
  width: 100%;
  height: 100%;
  margin-top: 20rpx;
box-sizing: border-box;
}
.t-bottom {
  z-index: 999 !important;
}
.t-tabs {
  /* background: var(--td-tab-nav-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); */
  background: rgba(var(--td-tab-nav-bg-color-rgb, 255, 255, 255), 0) !important;
  border-bottom: none !important;
}
.t-tabs__wrapper{
  background: rgba(var(--td-tab-nav-bg-color-rgb, 255, 255, 255), 0) !important;

}
.t-tabs__item--evenly{
  color: #ffffff !important;
}
.t-tabs__item--active{
  font-weight: 400 !important;
  color: var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #222222))) !important;
}
.t-tabs__track{
  background-color: var(--td-tab-track-color, var(--td-brand-color, var(--td-primary-color-7, #222222))) !important;
}