.page-shop-settlement {
  @mixin flex-row {
    display: flex;
    flex-direction: row;
  }

  @mixin flex-column {
    display: flex;
    flex-direction: column;
  }

  @mixin overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  &.container {
    padding-bottom: calc(140rpx + var(--mall4j-safe-area-inset-bottom));
    box-sizing: border-box;
    .mask {
      background-color: rgba(0, 0, 0, 0.39);
      position: absolute;
      top: 0;
      bottom: 0;
    }
    .modal {
      border-radius: 10px;
      // width:590rpx;
      // height:398rpx;
      background-color: rgb(255, 255, 255);
      position: fixed;
      top: 409rpx;
      left: 80rpx;
      right: 80rpx;
      padding: 30rpx;
      padding-bottom: 60rpx;
      .modal-top {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      .title {
        grid-column: 2/3;
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
      }
      .close {
        content: "";
        width: 36rpx;
        height: 36rpx;
        background: #f5f5f5;
        border-radius: 50%;
        float: right;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-self: end;
      }
      .close::after {
        content: "";
        display: block;
        width: 14rpx;
        height: 14rpx;
        background: url(../../static/images/close.png) no-repeat;
        background-size: 14rpx 14rpx;
      }
      .search-input-con {
        margin-top: 78rpx;
        display: flex;
        align-items: center;
        padding: 20rpx auto;
        width: 100%;
        height: 80rpx;
        background: #f7f8fa;
        border-radius: 4rpx;
        .search-input {
          margin-left: 12rpx;
          font-size: 28rpx;
          width: 70%;
        }
        .placeholder-class {
          color: #999999;
        }
        .all-withdraw {
          color: #082ba6;
          font-size: 28rpx;
          font-weight: 400;
        }
      }
      .button-withdraw {
        background-color: #082ba6;
        padding-top: 17rpx;
        padding-bottom: 16rpx;
        border-radius: 35rpx;
        margin-top: 40rpx;
        view {
          font-weight: 400;
          text-align: center;
          font-size: 26rpx;
        }
      }
    }
    .icon {
      width: 12rpx;
      height: 12rpx;
      border-top: 2rpx solid #969798;
      border-right: 2rpx solid #969798;
      transform: rotate(45deg);
      margin-left: 20rpx;
    }
    min-height: 100vh;
    font-family: PingFang SC;
    font-weight: 400;
    background-color: #eee;
    font-size: 24rpx;
    .summary {
      // background-image: url("../../static/images/home-bg.png");
      background-color: #0b32bb;
      padding-top: 60rpx;
      padding-bottom: 30rpx;
      min-height: 400rpx;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      // background-size: cover;
      @include flex-column;
      align-items: center;
      .big-number {
        font-size: 70rpx;
        font-weight: bold;
      }
      .summary-branch-top {
        :first-child {
          margin-right: 30rpx;
        }
        margin-top: 26rpx;
        @include flex-row();
        max-width: 80%;
        .item {
          @include overflow-ellipsis;
          max-width:600rpx;
        }
        flex-direction: column;
        align-items: center;
      }

      .summary-branch-bottom {
        border-radius: 10rpx;
        margin: {
          left: 30rpx;
          right: 30rpx;
          top: 50rpx;
        }
        background-color: #fff;
        padding: 33rpx 40rpx 35rpx 40rpx;
        .table-title {
          @include flex-row();
          min-width: 600rpx;
          font-size: 24rpx;
          text-align: center;
          justify-content: space-between;
          view {
            width: 168rpx;
          }
        }
        .table-item {
          :first-child {
            color: #082ba6;
          }
          font-size: 32rpx;
          font-weight: bold;
          margin-top: 20rpx;
          justify-content: space-between;
          text-align: center;
          @include flex-row();
          view {
            width: 180rpx;
            @include overflow-ellipsis;
          }
        }
      }
    }

    .withdraw-detail,
    .deal-detail {
      border-radius: 8px;
      padding: 20rpx 30rpx 0 30rpx;
      margin: 30rpx 30rpx 0 30rpx;
      background-color: white;
      // min-height:200px;
      hr {
        opacity: 30%;
      }
      .title {
        font: {
          size: 32rpx;
          weight: bold;
        }
        @include flex-row;
        justify-content: space-between;
        align-items: center;
        .link {
          font-family: "Courier New", Courier, monospace;
          color: #999999;
        }
      }
      .content {
        .item-bottom {
          margin-bottom: 30rpx;
          justify-content: space-between;
          .order {
            color: #979797;
            font: {
              size: 24rpx;
              weight: 400;
            }
          }
        }
        margin-top: 50rpx;
        font-size: 28rpx;
        padding-bottom: 20rpx;
        .date {
          color: #999999;
          font: {
            size: 24rpx;
            weight: 400;
          }
        }
        // .noData{
        //   font-weight: bold;
        //   width:100%;
        //   height:300px;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        // }
        .noData {
          margin-top: -60px;
        }
        .item {
          font-weight: bold;
          margin-top: 30rpx;
          margin-bottom: 10rpx;
          @include flex-row;
          justify-content: space-between;
          .income-in,
          .income-out {
            max-width: 250rpx;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .income-out {
            color: #999999;
          }
        }
      }
    }

    .withdraw-detail {
      .content {
        .item-bottom {
          @include flex-row;
          justify-content: space-between;
          .status-ing,
          .status-fail,
          .status-success {
            font: {
              size: 24rpx;
              weight: 400;
            }
          }
          .status-success {
            color: #082ba6;
          }
          .status-fail {
            color: #999999;
          }
        }
      }
    }

    .footer {
      padding: 20rpx 30rpx;
      position: fixed;
      bottom: 0;
      padding-bottom: calc(20rpx + var(--mall4j-safe-area-inset-bottom));
      box-sizing: border-box;
      width: 750rpx;
      background-color: #fff;
      .button-withdraw {
        padding-top: 12rpx;
        padding-bottom: 12rpx;
        width: 100%;
        margin: auto;
        background-color: #082ba6;
        border-radius: 70px;
        font-weight: bold;
        text-align: center;
        font-size: 26rpx;
      }
    }
  }

  .text-white {
    color: #fff;
  }

  .text-plain {
    color: #fff;
    opacity: 0.7;
  }
}
