mall-web-ssr/assets/scss/mobileInvoice.scss

@import '~assets/scss/mixins';
$blue-base: #3f84f6;
.mobile-invoice {
  .switch-head {
    border-bottom: .28rem solid #f1f3f6;
  }
  .mi-remind-area {
    padding: .24rem 0.15rem;
    font-size: .28rem;
    color: #333;
    line-height: .42rem;
    margin: 0 0.24rem;
    background: #fff;
    .more {
      font-size: .24rem;
      color: $blue-base;
      text-align: center;
      margin-top: .1rem;
      i {
        font-size: .22rem;
      }
    }
    &.less {
      height: 1.5rem;
      overflow: hidden;
      position: relative;
      .more {
        margin: 0;
        position: absolute;
        bottom: 0;
        left: .3rem;
        right: .3rem;
        @include background-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 1));
      }
    }
    .content {
      word-break: break-all;
      color: #666;
      span {
        &:first-child {
          vertical-align: top;
          width: 6%;
        }
        &:last-child {
          width: 94%;
        }
      }
    }
  }
  .mi-search-content {
    padding: .24rem 0;
    text-align: center;
    background: #f1f3f6;
    input {
      border: 1px solid $blue-base;
    }
  }
  .mi-list-content {
    .mi-lc-filters {
      padding: .1rem 0;
      margin: 0 .3rem;
      border-bottom: 1px solid #dcdcdc;
      .multi-check {
        width: 1.4rem;
        height: .5rem;
        line-height: .5rem;
        border: 1px solid #bfbfbf;
        color: #666;
        font-size: .28rem;
        margin-left: .24rem;
        text-align: center;
        border-radius: .04rem;
        &:first-child {
          margin-left: 0;
        }
        &.active {
          border-color: $blue-base;
          color: $blue-base;
        }
      }
    }
    .mi-list {
      font-size: .28rem;
      padding: 0 .3rem;
      li {
        margin: .3rem 0;
        border-radius: .06rem;
        border: 1px solid #dcdcdc;
        &.active {
          border-color: $blue-base;
        }
        .line {
          border-bottom: 1px solid #dcdcdc;
          word-break: break-all;
          padding: .26rem;
          &:last-child {
            border-bottom: none;
          }
          .title {
            width: 31%;
            text-align: right;
            color: #666;
            vertical-align: top;
          }
          .content {
            width: 69%;
            text-align: right;
            padding-right: .18rem;
            padding-left: .6rem;
            color: #333;
            .inv {
              width: .7rem;
              height: .34rem;
              line-height: .3rem;
              text-align: center;
              font-size: .24rem;
              border-radius: .04rem;
              background: rgba(21, 178, 98, .1);
              border: 1px solid #15b262;
              color: #15b262;
              font-style: normal;
              display: block;
              float: right;
              &.spec-inv {
                background: rgba(254, 157, 3, .1);
                border: 1px solid #fe9d03;
                color: #fe9d03;
              }
            }
          }
          .price {
            color: #ee1111;
          }
          .link {
            color: $blue-base;
          }
        }
      }

    }
  }
  .mi-fix-result {
    position: fixed;
    bottom: .98rem;
    height: 1.06rem;
    width: 100%;
    line-height: 1.06rem;
    padding: 0 .3rem;
    background: #fff;
    border-top: 1px solid #bfbfbf;
    button {
      float: right;
      width: 2.48rem;
      height: .77rem;
      line-height: .77rem;
      font-size: .32rem;
      color: #fff;
      background: $blue-base;
      border-radius: .08rem;
      margin-top: .15rem;
    }
  }
  &.invoice-record {
    .switch-head {
      border: none;
    }
    .mi-list {
      padding: 0;
      li {
        border: none;
        margin: .3rem;
        border-bottom: 1px solid #dcdcdc;
        .line {
          border: none;
          padding: 0;
          margin-bottom: .36rem;
          .title {
            label {
              display: none;
            }
          }
        }
      }
    }
    .mi-fix-result {
      display: none;
    }
  }
}