tf-business/order_module/searchOrder/index.scss

.searchOrder {
  width: 100vw;
  min-height: 100vh;
  background-color: rgb(247, 247, 247);
  .serch-box {
    width: 100%;
    height: 84rpx;
    background-color: #ffffff;
    padding: 8rpx 32rpx;
    box-sizing: border-box;
    .search-container {
      width: 100%;
      height: 100%;
      background-color: #f4f4f4;
      border-radius: 50rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      @include flex(flex-start, null, null);
      .box-left {
        width: 260rpx;
        height: 100%;
        @include flex(flex-start, null, null);
        .picker{
            font-size: 48rpx;
            color: #000;
        }
        .search-text {
          flex: 1;
          padding-right: 19rpx;
          position: relative;
          @include flex(flex-start,null,8rpx);
          .text {
            width: 140rpx;
            color: #a3a3a3;
            font-size: 27rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 8rpx;
          }
          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            width: 2rpx;
            height: 80%;
            background-color: #d8d8d8;
          }
        }
        .search-icon {
          width: 56rpx;
          height: 100%;
          padding-left: 16rpx;
          @include flex(center,null,0);
        }
      }
      .box-ipt {
        flex: 1;
        font-size: 24rpx;
        input{
            caret-color: #ea5c1e;
        }
      }
      .box-delete{
        width: 40rpx;
        height: 100%;
        @include flex(center,null,0);
      }
    }
  }
  .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;
        }
      }
    }
  }
  .empty{
    width: 100%;
    height: 100%;
    margin-top: 200rpx;
    position: relative;
  }
  .order-empty{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    @include flex(center,column,32rpx);
    font-size: 28rpx;
    image{
      width: 320rpx;
      height: 320rpx;
    }
    .empty-title{
      color: rgba(0, 0, 0, 0.4);
    }
  }
}