jimu-mobile/src/styles/jimu-carBrand.less

积木组件库助力移动端开发

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
  animation-duration: .75s;
  -webkit-animation-duration: .75s;
}

@-webkit-keyframes slideOutRight {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
  -webkit-animation-name: slideOutRight;
}

@-webkit-keyframes slideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

@keyframes slideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    visibility: visible
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight
}

.catBrandWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: @fill-base;
  -webkit-overflow-scrolling: touch;
  .max_char {
    position: absolute;
    z-index: 22;
    top: 50%;
    left: 50%;
    color: @color-text-default;
    margin-left: -2.5rem;
    margin-top: -2.5rem;
    font-size: @city-max-char-font-size;
  }
  .selectTitle {
    padding-left: 10px;
    height: 42px;
    line-height: 42px;
    color: @color-text-light;
    font-size: @font-size-base;
    background-color: @fill-body;
  }
  .hotCarBrandCon {
    width: 100%;
    padding-bottom: 15px;
    .hotCarBrandList {
      text-align: center;
      width: 24%;
      margin-top: 15px;
      float: left;
      img {
        width: 50px;
        height: 50px;
        display: block;
        margin: 0 auto;
      }
      .hotCarBrandName {
        display: block;
        font-size: @font-size-caption;
        overflow: hidden;
      }
      &.select {
        .hotCarBrandName {
          color: @color-icon-base;
        }
      }
    }
  }
  .fast_char {
    position: fixed;
    top: 50%;
    right: 0px;
    margin-top: -176px;
    text-align: center;
    width: 50px;
    a {
      height: 16px;
      line-height: 16px;
      display: block;
      font-size: @font-size-caption-sm;
    }
  }
}

._carBrandCon {
  height: 100%;
  overflow: scroll;
}

.carBrandCon {
  .first_char {
    height: 25px;
    line-height: 25px;
    display: block;
    padding-left: 15px;
    color: @color-text-base;
    font-size: @font-size-caption-sm;
    background: @fill-body;
  }
  .list {
    display: block;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    .check {
      width: 16px;
      height: 16px;
      display: inline-block;
      margin-left: 16px;
      border-radius: @radius-xm;
      border: 1px solid @border-color-base;
      vertical-align: top;
      .icon {
        display: none;
      }
    }
    img {
      width: 40px;
      margin-left: 10px;
      vertical-align: middle;
    }
    .carBrandName {
      font-size: @font-size-caption;
      color: @color-text-base;
      margin-left: 10px;
      vertical-align: middle;
    }
    /*当城市选中的时候样式*/
    &.select {
      .carBrandName {
        color: @color-icon-base;
      }
    }
  }
}