tf-business/pages_module/financial/index.scss

.financial {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);
  padding: 32rpx;
  padding-bottom: 50rpx;
  box-sizing: border-box;
  .financial-box {
    width: 100%;
    background: linear-gradient(108deg, #fe4b1e 0%, #fb8857 100%);
    padding: 32rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    @include flex(space-between, null);
    .drawable-price {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      text {
        &:nth-of-type(1) {
          color: rgba(255, 255, 255, 0.8);
          font-size: 32rpx;
          font-weight: 500;
        }
        &:nth-of-type(2) {
          color: #ffffff;
          font-size: 64rpx;
          font-weight: 900;
        }
      }
    }
    .detailed {
      width: 152rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
      font-size: 24rpx;
      border-radius: 30rpx;
    }
  }
  .financial-price {
    width: 100%;
    margin-top: 32rpx;
    padding: 16rpx 32rpx 32rpx 32rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #ffffff;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 26rpx;
      width: 8rpx;
      height: 24rpx;
      background-color: #ea5c1e;
    }
    .price-title {
      color: #000000;
      font-size: 28rpx;
      font-weight: 600;
      margin-top: 3rpx;
    }
    .price-list {
      width: 100%;
      @include flex(space-between, null, null);
      flex-wrap: wrap;
      .price-item {
        width: 202rpx;
        height: 124rpx;
        margin-top: 16rpx;
        background-color: #fff3ee;
        padding: 16rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 8rpx;
        text {
          &:nth-of-type(1) {
            color: rgba(77, 51, 39, 0.41);
            font-size: 24rpx;
            line-height: 40rpx;
            font-weight: 600;
          }
          &:nth-of-type(2) {
            color: #ea5c1e;
            font-size: 28rpx;
            line-height: 44rpx;
            font-weight: 900;
          }
        }
        &.hide {
          visibility: hidden;
        }
      }
    }
  }
  .water {
    width: 100%;
    margin-top: 32rpx;

    .water-title {
      margin-bottom: 16rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
    }
    .water-box {
      background-color: #ffffff;
      border-radius: 16rpx;
      padding-bottom: 32rpx;
      .water-header {
        width: 100%;
        height: 92rpx;
        line-height: 92rpx;
        @include flex(space-between, null);
        border-bottom: 2rpx solid #e7e7e7;
        .header-item {
          flex: 1;
          text-align: center;
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.4);
          &:nth-of-type(1) {
            position: relative;
            &::after {
              content: "";
              width: 2rpx;
              height: 50%;
              background-color: #e7e7e7;
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          &.active {
            color: rgba(0, 0, 0, 0.9);
            position: relative;
            &::before {
              content: "";
              width: 32rpx;
              height: 4rpx;
              background-color: #ea5c1e;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              bottom: 0;
            }
          }
        }
      }
      .water-container {
        padding: 0 32rpx;
        box-sizing: border-box;
        .water-date {
          margin: 32rpx 0;
          font-size: 28rpx;
          color: #3d3d3d;
          font-weight: 400;
          @include flex(flex-start, null, 13rpx);
        }
        .water-all {
          @include flex(space-between, null);
          .all-item {
            width: 304rpx;
            height: 104rpx;
            border-radius: 8rpx;
            background-color: #fff3ee;
            padding: 16rpx;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text {
              &:nth-of-type(1) {
                font-size: 24rpx;
                color: rgba(77, 51, 39, 0.41);
                font-weight: 500;
              }
              &:nth-of-type(2) {
                font-size: 28rpx;
                color: #ea5c1e;
                font-weight: 900;
              }
            }
          }
        }
        .water-order {
          width: 100%;
          margin-top: 32rpx;
          .order-title {
            position: relative;
            color: rgba(0, 0, 0, 0.9);
            font-size: 28rpx;
            font-weight: 600;
            &::after {
              content: "";
              position: absolute;
              left: -32rpx;
              top: 50%;
              transform: translateY(-50%);
              width: 8rpx;
              height: 24rpx;
              background-color: #ea5c1e;
            }
          }
          .order-list {
            width: 100%;
            margin-top: 32rpx;
            .order-item {
              margin-top: 16rpx;
              padding: 0 16rpx 16rpx;
              box-sizing: border-box;
              width: 100%;
              background-color: #F5F4F3;
              border-radius: 16rpx;
              .item-text {
                width: 100%;
                @include flex(flex-start);
                height: 44rpx;
                line-height: 44rpx;
                padding-top: 16rpx;
                text {
                  font-size: 28rpx;
                  &:nth-of-type(1) {
                    width: 208rpx;
                    color: rgba(0, 0, 0, 0.4);
                  }
                  &:nth-of-type(2) {
                    color: #000000;
                    //  单行溢出
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
            }
          }
          .no-data{
            height: 736rpx;
            @include flex(center, column,32rpx);
            image{
              width: 320rpx;
              height: 320rpx;
              display: block;
            }
            text{
              color: rgba(0, 0, 0, 0.4);
              font-size: 28rpx;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}