tf-business/pages/tabbar/order/index.scss

.order {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);

  .order-box {
    width: 100%;
    height: 100%;
    @include flex(center);
  }

  .order-top {
    width: 100%;
    padding: 28rpx 32rpx 0rpx;
    box-sizing: border-box;
    background-color: #ffffff;

    .search-box {
      width: auto;
      height: 80rpx;
      border-radius: 300rpx;
      background-color: #f1f1f1;
      line-height: 80rpx;
      padding-left: 84rpx;
      box-sizing: border-box;
      color: #999999;
      position: relative;
      font-size: 28rpx;

      .search-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 36rpx;
      }
    }

    .order-state {
      margin-top: 54rpx;

      .scroll-X {
        white-space: nowrap;

        .scroll-item {
          display: inline-block;
          padding-bottom: 16rpx;
          margin-left: 36rpx;
          font-size: 28rpx;
          color: #999999;

          &:first-of-type {
            margin-left: 0;
          }
        }

        .act {
          color: $primary-color;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 4rpx;
            background-color: $primary-color;
            border-radius: 20rpx;
          }
        }
      }
    }
  }

  .order-container {
    padding: 0 32rpx 32rpx;

    .order-list {
      .order-item {
        width: auto;
        margin-top: 32rpx;
        padding: 32rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        gap: 24rpx;
        flex-direction: column;
        .order-number {
          width: 100%;
          @include flex(space-between);

          .number {
            font-size: 32rpx;
            font-weight: 700;
          }

          .number-icon {
            color: #999999;
            @include flex(center);
            font-size: 28rpx;
            text {
              padding-bottom: 2rpx;
            }
          }
        }
        .text-info {
          font-size: 28rpx;
          color: #999999;
        }
        .commodity-list {
          width: 100%;
          display: flex;
          justify-content: center;
          gap: 12rpx;
          flex-direction: column;
          .commodity-item {
            display: flex;
            justify-content: space-between;
            .item-left {
              display: flex;
              gap: 12rpx;
              .left-image {
                width: 124rpx;
                height: 124rpx;
                image {
                  width: 100%;
                  height: 100%;
                  border-radius: 12rpx;
                }
              }
              .left-text {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 6rpx;
                .text-title {
                  color: #333333;
                  font-size: 28rpx;
                }
                .text-price {
                  font-size: 24rpx;
                  color: #999999;
                }
              }
            }
            .item-right {
              color: #333333;
              font-size: 28rpx;
            }
          }
        }
        .gifts {
          @include flex(space-between);
          font-size: 28rpx;
          color: #333333;
          .gifs-right {
            color: #ea1717;
          }
        }
        .all-price {
          color: #333333;
          font-size: 28rpx;
        }
        .border-box {
          width: 100%;
          height: 2rpx;
          background-color: #d8d8d8;
        }
        .order-state {
          text-align: end;
          color: #999999;
          font-size: 28rpx;
          margin-top: 3rpx;
        }
      }
    }
  }
  .order-empty{
    position: fixed;
    top: 41%;
    left: 50%;
    transform: translate(-50%);
    @include flex(center,column,32rpx);
    font-size: 32rpx;
    image{
      width: 460rpx;
      height: 460rpx;
    }
    .empty-title{
      color: #666666;
    }
    .empty-info{
      color: #999999;
    }
  }
}