nsgk_wechat/pages/index/index.wxss

.singleLinHidenEllipsis{
    color: black;
    text-align: center;
    width: auto;
}
.information_header{
  /* padding: 30rpx 32rpx 54rpx; */
  padding: 10rpx 32rpx 54rpx;
  display: flex;
}
.information_header .portrait_head{
  width: 110rpx;
  height: 110rpx;
  background: #000;
  border-radius: 50%;
}
.information_header .information_main{
  flex: 1;
  padding-left: 16rpx;
}
.information_header  .name_wrap{
 display: flex;
 height: 54rpx;
 align-items: center;
 margin-bottom: 10rpx;
}
.information_header  .name_wrap .name{
  font-size: 46rpx;
}
.information_header  .name_wrap .jobs{
  margin-left: 18rpx;
  width: 155rpx;
  height: 40rpx;
  background: #5bae75;
  border:2rpx solid #2c8e68;
  color: #fff;
  border-radius: 40rpx;
  display: flex;
  font-size: 28rpx;
  justify-content: center; 
  align-items: center;
}
.information_header .name_wrap .jobs .icon{
  width: 26rpx;
  height: 27rpx;
  margin-right: 5rpx;
}

.information_header .task_wrap{
  display: flex;
  height: 44rpx;
  margin-bottom: 18rpx;
}
.information_header .unfinished{
  margin-left: 12rpx;
}
.information_header .task_wrap .flex_block{
  
  height: 48rpx;
  display: flex;
  background: #fff;
  line-height: 44rpx;
  border-radius: 44rpx;
  border:2rpx solid #2c8e68;
  text-align: center;
  font-size: 28rpx;
}
.information_header .task_wrap .flex_block .desc{
  width: 115rpx;
  background: #2c8e68;
  position:relative;
  overflow: hidden;
  color: #fff;
  line-height: 44rpx;
  border-top-left-radius: 44rpx;
  border-bottom-left-radius: 44rpx;
  margin-top: -1rpx;
  margin-left: -1rpx;
}

.information_header .task_wrap .flex_block .desc::before{
  position:absolute;
  top:-40rpx;
  right:-40rpx;
  content:"";
  z-index:1;
  width:110rpx; /*如果需要圆角的话 不用比box的宽度长,如果不需要圆角需要增长*/
  height:40rpx;
  background-color:#fff;
  transform:rotate(-75deg);
  transform-origin:right bottom;
  border-radius:0px;
}

.information_header .task_wrap .flex_block .event{
  color: #2c8e68;
  margin-left: -2%;
  padding:0 8rpx 0 5rpx;
}


.information_header .address_wrap{
  font-size: 26rpx;
  color: #2b8e68;
  height: 46rpx;
  line-height: 46rpx;
}

.navList_main{
  width: 685rpx;
  height: 228rpx;
  background-color: #fff;
  border-radius: 24rpx;
  margin:0 auto;
  display: flex;
  box-shadow: 0rpx 0rpx 12rpx rgba(0,0,0,.2);
}
.navList_main  .tab_item{
  flex: 1;
  display: flex;
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
}

.navList_main  .tab_item .icon{
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 12rpx;
}
.navList_main  .tab_item .icon_img{
  width: 100rpx;
  height: 100rpx;
}
.navList_main  .tab_item .desc{
  font-size: 26rpx;
}

.child_function{
  margin: 55rpx 20rpx 0;
  display: flex;
}
.child_function .flex_block{
  flex: 1;
  display: flex;
  justify-content: center; 
  align-items: center; 
  flex-direction: column;
}
.child_function .flex_block .image{
  width: 76rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}
.child_function .flex_block .attribute{
  width: 76rpx;
  height: 70rpx;
}

.child_function .flex_block .desc{
  font-size: 26rpx;
}

.work_plan{
  padding: 40rpx 32.5rpx 30rpx;
  display: flex;
}

.work_plan  .menu_item{
  height: 60rpx;
  width: 140rpx;
  background-color: #fff;
  box-shadow: 0rpx 0rpx 9rpx rgba(0,0,0,.2);
  border-radius: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 32rpx;
  position: relative;
  margin-right: 16rpx;

}
.work_plan  .menu_item.active{
  background-color: #5bae78;
  color: #fff;
}
.work_plan .menu_item .remind{
  height: 30rpx;
  background: #e90101;
  color: #fff;
  font-size: 26rpx;
  position: absolute;
  line-height: 30rpx;
  padding:0 10rpx;
  border-radius: 50%;
  top: -10rpx;
  right: -10rpx;
}

.work_plan .more{
  flex: 1;
  text-align: center;
  line-height: 60rpx;
  font-size: 36rpx;
  color: #31936c;
}

.workflow{
  padding: 10rpx 32.5rpx;
}
.workflow .workflow_list{
  height: 150rpx;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow:0rpx 0rpx 10rpx rgba(0,0,0,.1);
  margin-bottom: 20rpx;
  padding:15rpx 25rpx 10rpx 35rpx;
}
.workflow .workflow_list .process_intro{
  display: flex;
  height: 62rpx;
  align-items: center; 
}

.workflow .process_intro .name{
  width: 324rpx;
  font-size: 34rpx;
  margin-right: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workflow .process_intro .state{
  width: 93rpx;
  height: 42rpx;
  background-color: #fbe3e3;
  color: #f31e1f;
  border-radius: 12rpx;
  text-align: center;
  line-height: 42rpx;
}

.workflow .process_intro .time{
  flex: 1;
  text-align: right;
  font-size: 32rpx;
  color: #9ea1aa;
}


.workflow .workflow_list .process_pay{
  display: flex;
  height: 52rpx;
  align-items: center; 
}


.workflow .workflow_list .process_pay .describe{
  font-size: 30rpx;
  width: 330rpx;
  color: #3c9370;
  display: flex;
  align-items: center; 
}
.workflow .workflow_list .process_pay .describe .amount_icon{
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}

.workflow .workflow_list .process_pay .amount{
  font-size: 38rpx;
  flex: 1;
  text-align: right;
  color: #f31e1f;
}
.workflow .workflow_list .process_pay .amount .unit{
  font-size: 26rpx;
}

/* <view class="workflow_list">
                <view class="process_intro">
                    <view class="name">啊啊啊啊啊啊啊啊啊啊</view>
                    <view class="state">待审</view>
                    <view class="time">2021-1-26</view>
                </view>
                <view class="process_pay">
                    <view class="describe">银行转账</view>
                    <view class="amount">￥-2600.00</view>
                </view>
            </view>  */