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

$base-color: #3f84f6;
.mobile-pay-center {
  .mp-head {
    height: .82rem;
    line-height: .82rem;
    text-align: center;
    background: #fff;
    span {
      font-size: .28rem;
      &:first-child {
        margin-right: 1.24rem;
      }
      &.active {
        color: $base-color;
        border-bottom: 1px solid $base-color;
      }
    }
  }
  .mp-content {
    padding: .2rem .3rem 0;
    .mp-content-header {
      font-size: .28rem;
      font-weight: bold;
      padding: .25rem 0;
      color: #666;
      .fr {
        color: #3f84f6;
        font-weight: normal;
        i {
          font-size: .3rem;
          color: #3f84f6;
          margin-right: .1rem;
        }
      }
    }
  }
  .mp-list {
    li {
      //padding: 0 0 .24rem 0;
      background: #fff;
      border-radius: .04rem;
      //border: 1px solid #d2d2d2;
      margin-bottom: .24rem;
      .content-line {
        padding: .24rem .26rem 0 .21rem;
        font-size: .28rem;
        i {
          margin-right: .05rem;
        }
        .title {
          color: #666;
          width: 23%;
        }
        .content {
          text-align: right;
          width: 77%;
        }
        .link {
          color: $base-color;
        }
        .fr {
          color: $base-color;
          border: 1px solid $base-color;
          font-size: .28rem;
          padding: .1rem .16rem;
          margin-left: .2rem;
          border-radius: .04rem;
          &.set-default-icon {
            color: #fff;
            background: #15b464;
            border-color: #15b464;
          }
          &.default-icon {
            color: #fff;
            background: $base-color;
            border-color: $base-color;
          }
        }
      }
      .btn-wrap {
        border-top: 1px solid #d9d9d9;
        margin-top: .32rem;
        .inline-block {
          width: 50%;
          height: .8rem;
          line-height: .8rem;
          text-align: center;
          font-size: .26rem;
          color: #333;
          i {
            font-size: .3rem;
            margin-right: .05rem;
          }
          &:first-child {
            border-right: 1px solid #d9d9d9;
          }
          &.default-icon {
            color: #15b262;
            i {
              color: #15b262;
            }
          }
        }
      }
    }
    &.mp-list-record {
      li {
        padding: 0 .26rem .24rem .21rem;
        .content-line {
          padding: .24rem 0 0 0;
          display: inline-block;
          vertical-align: middle;
          width: 62%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(even) {
            width: 38%;
          }
          .content {
            text-align: left;
            width: auto;
          }
          .title {
            width: auto;
          }
        }
      }
    }
  }
  .add-account-modal {
    .account-modal {
      padding: 0 .24rem;
      .title {
        height: .73rem;
        line-height: .73rem;
        font-size: .28rem;
        border-bottom: 1px solid #dcdcdc;
        margin-bottom: .24rem;
      }
      i {
        font-style: normal;
        color: #ff0000;
      }
      .modal-content-line {
        margin-bottom: .3rem;
        position: relative;
        span {
          width: 2.5rem;
          color: #226ce7;
          font-size: .28rem;
          text-align: right;
        }
        input[type='text'] {
          width: 3.59rem;
          height: .56rem;
          font-size: .24rem;
          border-radius: .04rem;
          border: 1px solid #d2d2d2;
          padding: 0 .2rem;
        }
        input[readonly] {
          background: url('/images/mobile/select-arrow.png') no-repeat;
          background-size: .24rem .15rem;
          background-position: 3.1rem .2rem;
        }
        .similar {
          position: absolute;
          left: 2.5rem;
          border: 1px solid $base-color;
          border-radius: .04rem;
          top: .56rem;
          width: 3.59rem;
          background: #fff;
          z-index: 1;
          max-height: 3.96rem;
          overflow-y: auto;
          li {
            height: .66rem;
            line-height: .66rem;
            padding: 0 .19rem;
            font-size: .24rem;
            &:active, &:focus {
              background: #f7f7f7;
            }
          }
        }
      }
      .remind {
        color: #666;
        font-size: .24rem;
        width: 3.59rem;
        float: right;
        margin-right: .44rem;
        line-height: .37rem;
        i {
          margin-right: .05rem;
        }
      }
      .am-btn-wrap {
        margin-top: .74rem;
        button {
          width: 3.16rem;
          height: .77rem;
          line-height: .77rem;
          color: #fff;
          font-size: .32rem;
          border-radius: .08rem;
          background: #bfbfbf;
          &:last-child {
            background: $base-color;
            margin-left: .3rem;
          }
        }
      }
    }
  }
  .account-modal-wrap {
    position: absolute;
    top: 50%;
    bottom: unset;
    left: 50%;
    right: unset;
    width: 7.1rem;
    height: 7.58rem;
    margin-left: -3.55rem;
    margin-top: -3.79rem;
    border-radius: .05rem;
    background: #fff;
  }
  .mp-record {
    .search-content {
      padding: .25rem 0;
      text-align: center;
      input {
        width: 6.9rem;
        border: 1px solid #376ff3;
      }
    }
    .filters-wrap {
      background: #fff;
      border-radius: .05rem;
      padding: .24rem .21rem;
      width: 7.1rem;
      margin: 0 auto;
      /*.date-wrap {
        label {
          width: 2.22rem;
          height: .5rem;
          line-height: .5rem;
          border-radius: .04rem;
          border: 1px solid #a0a0a0;
          background: url('/images/mobile/select-arrow.png')no-repeat;
          background-size: .12rem .06rem;
          vertical-align: middle;
          background-color: #fff;
          background-position: 1.9rem .2rem;
          position: relative;
          margin: .24rem 0 .4rem;
          input {
            opacity: 0;
            width: 2.22rem;
            height: .5rem;
            position: absolute;
            left: 0;
            z-index: 1;
          }
          i {
            font-size: .28rem;
            color: $base-color;
            margin-left: .2rem;
            float: left;
          }
        }
        p {
          font-weight: normal;
          font-size: .22rem;
          padding-right: .2rem;
        }
        span {
          color: #a0a0a0;
          margin: 0 .1rem;
        }
      }
      .select-wrap {
        padding: .24rem 0;
        border-top: 1px solid #d2d2d2;
        li.inline-block {
          width: 33.3%;
          position: relative;
          div {
            width: 1.85rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .28rem;
            color: #666;
            border: 1px solid #bfbfbf;
            border-radius: .04rem;
            margin: 0 auto;
            text-align: left;
            padding: 0 .23rem;
            background: url('/images/mobile/select-arrow.png')no-repeat;
            background-size: .12rem .06rem;
            background-position: 1.55rem .2rem;
          }
          .select-list {
            position: absolute;
            left: .32rem;
            top: .49rem;
            border: 1px solid #bfbfbf;
            width: 1.85rem;
            -webkit-box-shadow: 0 1px 5px 0 #aaa;
            -moz-box-shadow: 0 1px 5px 0 #aaa;
            box-shadow: 0 1px 5px 0 #aaa;
            border-radius: .04rem;
            li {
              background: #fff;
              text-align: left;
              padding: 0 .24rem;
              font-size: .28rem;
              height: .53rem;
              line-height: .53rem;
              &:active, &:focus {
                background: $base-color;
                color: #fff;
              }
            }
          }
        }
      }*/
    }
    .record-list {
      width: 7.1rem;
      margin: .24rem auto;
    }
  }
  .mp-btn-wrap {
    position: fixed;
    bottom: .98rem;
    left: 0;
    right: 0;
    height: 1.2rem;
    padding-top: .21rem;
    background: #f1f3f7;
  }
}