@charset "utf-8";
$font-size-base: 75;
@function pxTorem($px) {
  @return $px / $font-size-base * 1rem;
}

@mixin font-dpr($font-size) {
  font-size: $font-size*0.5px;

  [data-dpr="2"] & {
    font-size: $font-size * 1px;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 1.5px;
  }
}

body#contain {
  background: #e4ebf6;
}

.new-head-bill{
  height: pxTorem(88);
  background: #9bc4fd;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  span {
    color: #fff;
    line-height: pxTorem(88);
    @include font-dpr(36);
  }
  input{
    display: block;
    border: none;
    background: none;
    width: pxTorem(150);
    text-align: right;
    @include font-dpr(28);
    color: #ffffff;
    line-height: 1;
    position: absolute;
    top: pxTorem(30);
    right: pxTorem(25);
  }
}
.new-bill-main{
  margin-top: pxTorem(86);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  img{
    display: block;
    width: 100%;
  }
  .main-content{
    position: absolute;
    top: pxTorem(60);
    left: 0;
    width: 100%;
    padding: 0 pxTorem(40);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .main-left,.main-right{
      width: 50%;
    }
    p{
      @include font-dpr(28);
      color: #ffffff;
      line-height: 1;
      i{
        display: inline-block;
        padding: 0 pxTorem(15);
        font-style: normal;
      }
    }
    span{
      @include font-dpr(40);
      color: #ffffff;
      line-height: pxTorem(80);
    }
    .main-right{
      padding-left: pxTorem(40);
      border-left: pxTorem(2) solid #ffffff;
      box-sizing: border-box;
    }
  }
}
.bill-product{
  margin-top: pxTorem(463);
  padding: 0 pxTorem(24) pxTorem(20) pxTorem(24);
  .product-cont{
    margin-top: pxTorem(20);
    background: #ffffff;
    border-radius: pxTorem(10);
    a{
      display: block;
      padding: pxTorem(30) pxTorem(80);
      .product-head{
        height: pxTorem(98);
        padding-bottom: pxTorem(15);
        border-bottom: 2px dashed #e4ebf6;
        img{
          display: inline-block;
          width: pxTorem(98);
          height: pxTorem(98);
        }
        span{
          display: inline-block;
          margin-left: pxTorem(30);
          @include font-dpr(32);
          color: #333333;
          line-height: pxTorem(82);
        }
      }
      .product-ert{
        margin-top: pxTorem(38);
        .ert-trans,.ert-income{
          display: flex;
          justify-content: space-between;
          height: pxTorem(30);
          p{
            padding-left: pxTorem(50);
            @include font-dpr(28);
            color: #999999;
            line-height: pxTorem(30);
          }
          span{
            display: inline-block;
            @include font-dpr(28);
            color: #77a9fd;
            line-height: pxTorem(30);
          }
        }
        .ert-trans{
          p{
            background: url("../images/transaction.png")no-repeat pxTorem(4) center;
            background-size: pxTorem(30) pxTorem(30);
          }
        }
        .ert-income{
          margin-top: pxTorem(18);
          p{
            background: url("../images/income.png")no-repeat pxTorem(4) center;
            background-size: pxTorem(30) pxTorem(30);
          }
        }
      }
    }
  }
}
.new-bill-month{
  margin-top: pxTorem(88);
  height: pxTorem(90);
  background: #ffffff;
  padding: 0 pxTorem(25);
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1000;
  p{
    @include font-dpr(32);
    color: #333333;
    line-height: pxTorem(90);
    b{
      display: inline-block;
      font-weight: normal;
    }
    i{
      display: inline-block;
      font-style: normal;
      margin-left: pxTorem(10);
    }
  }
  span{
    display: inline-block;
    @include font-dpr(32);
    color: #333333;
    line-height: pxTorem(90);
    padding-right: pxTorem(45);
    background: url("../images/new-bill-bottom.png")no-repeat 90% center;
    background-size: pxTorem(26) auto;
  }
  .bill-city{
    border-top: 1px solid #dbe2ee;
    display: none;
    position: absolute;
    top: pxTorem(88);
    left: 0;
    width: 100%;
    padding:0 0 0 pxTorem(24);
    box-sizing: border-box;
    z-index: 100;
    background: #fff;
    ul{
      li{
        border-bottom: 1px solid #dbe2ee;
        &:last-child{
          border-bottom: none;
        }
        i{
          display: block;
          padding: pxTorem(30) 0;
          font-style: normal;
          @include font-dpr(30);
          color: #333;
          line-height: 1;
        }
      }
    }
  }
}

#wrapper {
  position: absolute;
  z-index: 1;
  top: pxTorem(88);
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  #scroller {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
  }
  #pullUp {
    margin-top: pxTorem(30);
    line-height: 1;
    @include font-dpr(28);
    color: #7e95c4;
    text-align: center;
    padding-bottom: pxTorem(30);
  }
}
#wrapper.new-bill-s{
  top: pxTorem(178);
}
.new-bill-income{
  height: pxTorem(75);
  padding: 0 pxTorem(25);
  display: flex;
  justify-content: space-between;
  p{
    @include font-dpr(28);
    color: #7e95c4;
    line-height: pxTorem(75);
    i{
      font-style: normal;
      @include font-dpr(28);
      color: #779afd;
      line-height: pxTorem(75);
    }
    b{
      display: inline-block;
      font-weight: normal;
      color: #4cd763;
      margin-left: pxTorem(24);
    }
  }
  span{
    @include font-dpr(28);
    color: #7e95c4;
    line-height: pxTorem(75);
  }
}
ul#billed-list-new {
  li {
    padding: pxTorem(42) pxTorem(24);
    background: #ffffff;
    margin-bottom: pxTorem(20);
    .bill-head {
      border-bottom: 1px solid #e4ebf6;
      padding-bottom: pxTorem(20);
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        @include font-dpr(28);
        line-height: 1;
        color: #999999;
      }
      a {
        display: inline-block;
        @include font-dpr(28);
        line-height: 1;
        color: #999999;
      }
    }
    .bill-text {
      margin-top: pxTorem(30);
      p {
        display: flex;
        justify-content: space-between;
        span {
          display: inline-block;
          img {
            display: inline-block;
            width: pxTorem(44);
            height: pxTorem(44);
            vertical-align: middle;
            margin-right: pxTorem(14);
          }
          @include font-dpr(32);
          line-height: 1;
          color: #333;
        }
        i {
          font-style: normal;
          @include font-dpr(34);
          line-height: 1;
          color: #333;
        }
      }
      p.jie {
        margin-top: pxTorem(28);
        span {
          color: #666;
        }
        i {
          @include font-dpr(36);
          color: #77a9fd;
        }
      }
    }
  }
}

.black-mask,.black-mask-more{
  display: none;
  background: rgba(0,0,0,.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
}
.black-mask-more{
  z-index: 9999;
}

//详情弹窗
.bill-regard{
  display: none;
  position: fixed;
  width: pxTorem(650);
  top: 50%;
  left: 50%;
  margin-left: pxTorem(-325);
  background: #ffffff;
  padding: pxTorem(30);
  box-sizing: border-box;
  z-index: 10000;
  border-radius: pxTorem(10);
  .regard-head{
    position: relative;
    p{
      margin-top: pxTorem(10);
      @include font-dpr(32);
      color: #333333;
      line-height: 1;
      text-align: center;
    }
    span{
      display: inline-block;
      position: absolute;
      top: pxTorem(-20);
      right: pxTorem(-10);
      img{
        display: inline-block;
        width: pxTorem(40);
        height: pxTorem(40);
      }
    }
  }
  ul{
    margin-top: pxTorem(20);
    border: 1px solid #b6c0cc;
    li{
      border-bottom: 1px solid #b6c0cc;
      min-height: pxTorem(84);
      display: flex;
      justify-content: space-between;
      &:last-child{
        border-bottom: none;
        background: #e4ebf6;
      }
      i{
        display: inline-block;
        font-style: normal;
        width: 40%;
        text-align: right;
        @include font-dpr(28);
        color: #666666;
        line-height: pxTorem(84);
      }
      b{
        display: inline-block;
        font-weight: normal;
        width: 60%;
        text-align: right;
        @include font-dpr(30);
        color: #333333;
        line-height: pxTorem(84);
        padding-right: pxTorem(24);
        box-sizing: border-box;
        &.bill-money{
          color: #77a9fd;
        }
      }
      &.fire{
        background: #f5f5f5;
        padding:pxTorem(15) 0;
        box-sizing: border-box;
        span{
          display: inline-block;
          width: 30%;
          text-align: right;
          color: #999999;
          padding-right: pxTorem(10);
          box-sizing: border-box;
          @include font-dpr(24);
          line-height: 1;
          margin-top: pxTorem(5);
        }
        em{
          display: inline-block;
          width: 70%;
          font-style: normal;
          color: #999999;
          @include font-dpr(24);
          line-height: pxTorem(34);
          padding-right: pxTorem(24);
          box-sizing: border-box;
        }
      }
    }
  }
}