@import "@styles/theme.scss";
.top-screen{
  height:56px;
  line-height: 56px;
  background:#f4f4f4;
  color: #999;
  font-size: 24px;
  text-align: right;
  padding-right: 30px;
  .screen-img{
    width: 24px;
    height: 24px;
    margin: 0 0 -4px 4px;
  }
}
.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
  background:rgba(0,0,0,0.22);
  .content {
    width: 100%;
    height:538px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    padding: 20px 40px;
    .status-box{
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      .status-item{
        flex:0 0 23%;
        margin:  20px 1%;
        border: 2px solid $primary-color;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 12px;
        color: $primary-color;
      }
      .checked{
        flex:0 0 23%;
        margin:  20px 1%;
        border: 2px solid $primary-color;
        height: 56px;
        line-height: 56px;
        text-align: center;
        border-radius: 12px;
        color: #fff;
        background-color: $primary-color;
      }
    }
    .time-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0;
      color: #555;
        .picker{
          width: 240px;
          height:56px;
          line-height: 56px;
          background:rgba(244,244,244,1);
          border-radius:4px;
          padding: 0 16px;
          font-size: 26px;
          .placeholder{
            color: #999;
          }
        }
    }
    .bottom-btn{
      margin-top: 80px;
      width: 100%;
      height: 80px;
      border-radius: 12px;
      border:2px solid $primary-color;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-between;
      font-size: 30px;
      .save{
        flex:  0 0 50%;
        background-color: $primary-color;
        color:#fff;
        height: 78px;
        line-height: 78px;
        text-align: center;
        border-radius: 12px 0 0 12px;
      }
      .cancel{
        flex:  0 0 50%;
        color: $primary-color;
        text-align: center;
        height: 78px;
        line-height: 78px;
      }
    }
  }
}

.search-box{
  display: flex;
  align-items: center;
  padding: 20px 40px;
  .input{
    height: 56px;
    line-height: 56px;
    width: 84%;
    background:#f4f4f4;
    border-radius: 4px 0px 0px 4px;
    padding: 0 20px;
    font-size: 22px;
  }
  .placeholder{
    color:#C9C9C9;
  }
  .btn{
    height: 56px;
    padding: 0;
    line-height: 56px;
    width: 16%;
    text-align: center;
    background-color: $primary-color; 
    color: #fff;
    font-size: 28px;
    border-radius:0px 4px 4px 0px;

  }
}
.item{
  padding: 20px 0;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: space-between;
  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.12);
  .img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
  .name{
    display: flex;
    align-items: center;
    color: #333;
    font-size: 30px;
    position: absolute;
    top:24px;
    left:120px;
  }
  .phone{
    color: #333;
    font-size: 30px;
    position: absolute;
    bottom:24px;
    left:120px;
    display: flex;
    align-items: center;
  }
  .status{
    color:$primary-color;
    font-size: 32px;
  }
}