@import "variables";
.parts{
  background-color: #F0F0F0;
  .parts-carMessage{
    margin: 10px 0;
    padding:  17px 12px;
    //height: 53px;
    background-color: #fff;
    .parts-carMessage-line1{
      display: flex;
      >img{
        width: 40px;
        height: 40px;
        min-width: 40px;
      }
      >h3{
        margin-left: 12px;
        font-size:15px;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:18px;
      }
    }
    .parts-carMessage-line2{
      margin-left: 50px;
      height: 18px;
      display: flex;
      .parts-carMessage-line2-btn1{
        transform: translateY(-8px);
      }
      .vin-icon{
        margin: 2px 10px 2px 2px;
        font-size: 12px;
        min-width: 22px;
      }
      .vin-line{
        width:200px;
        height:17px;
        font-size:12px;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height:17px;
        display: block;
      }
    }
  }
  .parts-search{
    height:32px;
    background:rgba(255,255,255,1);
    display: flex;
    padding: 7px 12px;
    >a{
      width:80px;
      height:30px;
      background:rgba(244,245,247,1);
      border-radius:18px;
      font-size:14px;
      font-weight:400;
      color:rgba(51,51,51,1);
      line-height:30px;
      display: block;
      text-align: center;
      margin-right: 10px;
      &.selected{
        background:rgba(235,243,255,1);
        border:1px solid rgba(63,144,247,1);
        color:rgba(63,144,247,1);
      }
    }
  }
  .parts-info{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 94px;
    background-color: #fff;
    &.hasVin{
      top: 112px;
      .maintenance .van-sidebar{
        height: 406px;
      }
      .transmission-list{
        height: 452px;
      }
      .maintenance .maintenance-list{
        height: 406px;
      }
    }
  }
}
.transmission-list{
  overflow: auto;
  height: 470px;
  .transmission-list-item{
    border-bottom: 1px solid #EEEEEE;
    font-size:14px;
    font-weight:400;
    color:rgba(102,102,102,1);
    line-height:20px;
    min-height: 50px;
    position: relative;
    .transmission-list-item-key{
      padding: 15px 4px 15px 12px;
      background:rgba(250,250,250,1);
      border-right: 1px solid #EEEEEE;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      float: left;
      display: block;
      width: 80px;
    }
    .transmission-list-item-value{
      margin-left: 100px;
      width: 240px;
      padding: 15px;
      >img{
        width: 100px;
        height: 100px;
        display: block;
        margin: 10px;
      }
      .transmission-list-item-value-item{
        margin: 15px 0;
        display: flex;
        >img{
          width: 46px;
          height: 46px;
          display: block;
        }
        &:first-child{
          margin-top: 0;
        }
        &:last-child{
          margin-bottom: 0;
        }
        .transmission-list-item-value-item-value{
          margin-left: 10px;
          padding-top: 5px;
          margin-top: 2px;
          .title-4{
            width: 200px;
          }
          >span{
            height:12px;
            font-size:12px;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:12px;
          }
        }
      }
    }
  }

}
.maintenance{
  position: relative;
  overflow-y: auto;
  height: 100%;
  //.van-tabs{
  //  .van-tabs__wrap{
  //    margin-right: 42px;
  //  }
  //}
  .maintenance-list{
    background-color: #fff;
    position: absolute;
    top: 44px;
    right: 0;
    bottom: 0;
    height: 424px;
    width: 290px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .maintenance-filter{
      width:269px;
      height:30px;
      background:rgba(250,250,250,1);
      margin: 10px 0 8px 10px;
      padding-left: 10px;
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:30px;
      .van-popup{
        .van-button{
          display: inline-block;
          width: 50%;
          border-radius: 0;
        }
      }
      .maintenance-filter-brand{
        padding: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        .maintenance-filter-brand-item{
          height: 32px;
          width: 70px;
          overflow: hidden;
          text-overflow: ellipsis;
          //background:rgba(244,245,247,1);
          font-size:14px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:30px;
          display: block;
          text-align: center;
          margin: 5px 5px;
          //border-radius: 10px;
          //border: 1px solid transparent;
          &.selected{
            //background: #ebf3ff;
            //border: 1px solid #F25D24;
            color: #F25D24;
          }
        }
      }
      .maintenance-filter-info{
        .maintenance-filter-item{
          display: flex;
          justify-content: start;
          flex-wrap: wrap;
          padding: 8px 20px;
          >img{
            width: 40px;
            height: 40px;
            margin: 0 10px;
            text-align: center;
          }
          .title-4{
            font-size: 12px;
            color: #666666;
          }
          .info-4{
            margin-left: 10px;
            font-size: 12px;
            color: #666666;
          }
        }


      }
      .van-dropdown-menu{
        float: right;
        margin: 0px 10px;
        height:30px;
        font-size:12px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height: 30px;
        background-color: transparent;
        border: none;
        &:after{
          border: none;
        }
        .van-dropdown-item--down{
          width: 290px;
          margin-left: 85px;
          margin-top: 5px;
          .van-dropdown-item__content{
            width: 290px;
          }
        }
        .van-dropdown-menu__item{
          border: none;
          .van-dropdown-menu__title{
            &:after{
              border: none;
            }
            border:none;
            line-height: 17px;
            font-size:12px;
            font-weight:400;
            color:rgba(102,102,102,1);
            margin-left: 10px;
          }
        }
      }
      >a{
        float: right;
        margin: 0 10px;
        height:17px;
        font-size:12px;
        font-weight:400;
        color:rgba(102,102,102,1);
      }
    }
  }
  .van-sidebar-item{
    border: none;
    padding: 14px 0 14px 8px;
  }
  .van-sidebar{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 424px;
    background-color: #fafafa;
  }
  .van-sidebar-item--select{
    position: relative;
    .van-sidebar-item__text:before{
      content: '';
      display: block;
      width: 3px;
      height: 20px;
      position: absolute;
      background-color: $blue;
      left: -8px;
    }
  }
}
.maintenance-list-wrapper{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.maintenance-item{
  padding: 15px 10px;
  border-bottom: 1px solid #EEEEEE;
  position: relative;
  >img{
    width: 73px;
    height: 73px;
    display: block;
    float: left;
    border:1px solid #EEEEEE;
  }
  .right-box{
    margin-left: 10px;
    float: left;
    //width: 240px;
    .title-4{
      padding-top: 1px;
    }
    .errorCheck-icon{
      position: absolute;
      top: 14px;
      right: 15px;
    }
    >span{
      display: block;
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:16px;
      margin: 5px 0;
      &.remark{
        font-size: 12px;
      }
    }
  }
}
.no-message{
  height: 300px;
  background: url("../assets/no-message.png") no-repeat center;
  background-size: 80%;
  position: relative;
  .van-button{
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translateX(-50%);
  }
}
.parts-search-template{
  background-color: #fff;
  padding-bottom: 60px;
  overflow-y: auto;
  .van-checkbox{
    transform: translateY(4px);
  }
  .parts-search-item{
    margin-bottom: 8px;
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(102,102,102,1);
    .van-checkbox{
      margin-right: 20px;
    }
  }
}
.brandSearch{
  padding: 30px 10px;
  height: calc(100% - 120px);
  overflow-y: scroll;
  h2{
    font-size:12px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  h3{
    margin-top: 15px;
    font-size:12px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  .brand-wrapper{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    >a{
      display: block;
      width:65px;
      height:32px;
      background:rgba(244,245,247,1);
      text-align: center;
      border-radius:18px;
      font-size:12px;
      padding: 0 8px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin: 6px 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      border:1px solid rgba(244,245,247,1);
      &.selected{
        background:rgba(255,245,242,1);
        border-radius:18px;
        border:1px solid rgba(242,93,36,1);
        color:rgba(242,93,36,1);
      }
    }
  }
}
