autoflow_wx/pages/index/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;
 }