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

.home {
  width: 100vw;
  height: 100vh;
  background-color: rgb(247, 247, 247);
  position: relative;
  /* z-index: -1; */

  .bg-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    // height: 654rpx;
    z-index: 1;
    background: linear-gradient(
      136deg,
      rgba(239, 83, 14, 0.63) 13%,
      rgba(239, 83, 14, 0.27) 54%
    );
    // background: url('https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1720408189735-bg_index.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .header-top {
    margin-left: 32rpx;
    position: relative;
    z-index: 2;
    @include flex(flex-start, null, 12rpx);

    .shop-title {
      font-size: 36rpx;
      color: #000;
    }

    .shop-state {
      width: 148rpx;
      height: 48rpx;
      border-radius: 24rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 16rpx;
      @include flex(space-between, null, 6rpx);

      text {
        font-size: 24rpx;
      }
    }
  }
  .main {
    position: relative;
    z-index: 2;
    border-radius: 36rpx 36rpx 0 0;
    margin-top: 30rpx;
    padding: 28rpx 0;
    box-sizing: border-box;
    width: 100%;
    // height: 479rpx;
    height: 352rpx;
    @include flex(center, column,30rpx);
    background: rgba(255, 255, 255, 0.8);
    .main-tool {
      width: 100%;
      .tool-list {
        @include flex(center);
        .tool-item {
          flex: 1;
          @include flex(center,column,10rpx);
          .item-img{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            @include flex(center);
            image{
                width: 50rpx;
                height: 50rpx;
                display: block;
            }
          }
          .item-text{
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
      
    }
    .main-container{
      width: 100%;
      .tube-list{
        @include flex(center);
        flex-wrap: wrap;
        .tube-item{
            width: 25%;
            @include flex(center,column,10rpx);
            margin-top: 20rpx;
            image{
                width: 40rpx;
                height: 40rpx;
            }
            text{
                font-size: 24rpx;
                color: #666666;
            }
        }
      }
    }
  }

  // .header-content {
  // 	position: relative;
  // 	z-index: 2;
  // 	width: 694rpx;
  // 	height: 294rpx;
  // 	margin: 60rpx auto 40rpx;
  // 	background: rgba(255, 255, 255, 0.5);
  // 	border-radius: 32rpx;
  // }

  // .main-tool {
  // 	position: relative;
  // 	z-index: 2;

  // 	.tool-list {
  // 		padding: 40rpx 60rpx 50rpx;
  // 		background-color: #fff;
  // 		height: 208rpx;
  // 		width: 100%;
  // 		border-radius: 28px 28px 0px 0px;
  // 		box-sizing: border-box;
  // 		@include flex(space-between, null, 60rpx);

  // 		.tool-item {
  // 			@include flex(center, column, 10rpx);

  // 			image {
  // 				width: 48rpx;
  // 				height: 48rpx;
  // 			}

  // 			text {
  // 				color: #666666;
  // 				font-size: 28rpx;
  // 			}
  // 		}
  // 	}
  // }

  .summarize-box {
    padding: 0 32rpx;
    box-sizing: border-box;
    @include flex(space-between);
    margin: 32rpx 0;
    margin-bottom: 14rpx;

    .summarize-left {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
    }

    .summarize-right {
      @include flex(center, null);
      font-size: 28rpx;
      color: #999999;
    }
  }
  .data-list{
    width: 100%;
    padding: 0 12rpx;
    box-sizing: border-box;
    @include flex(space-between,null,null);
    flex-wrap: wrap;
    .data-box{
      margin-top: 18rpx;
      width: 354rpx;
      height: 248rpx;
      border-radius: 28rpx;
      background-color: #ffffff;
      // padding: 32rpx 0;
      // padding-left: 32rpx;
      padding: 32rpx 32rpx 100rpx 32rpx;
      box-sizing: border-box;
      @include flex(space-between,column,null);
      align-items: flex-start;
      text{
        &:nth-of-type(1){
          font-size: 28rpx;
          font-weight: 500;
          color: #666666;
        }
        &:nth-of-type(2){
          font-size: 36rpx;
          color: #FA6D30;
          font-weight: 600;
        }
      }
    }
  }

  // .statistics-list {
  //   @include flex(space-between, null, 18rpx);
  //   flex-wrap: wrap;
  //   padding: 0 12rpx;
  //   box-sizing: border-box;

  //   .statistics-item {
  //     width: 354rpx;
  //     height: 286rpx;
  //     padding: 32rpx;
  //     box-sizing: border-box;
  //     background-color: #fff;
  //     border-radius: 28rpx;

  //     .statistics-trans {
  //       color: #666666;
  //       font-size: 28rpx;
  //       margin-bottom: 24rpx;
  //     }

  //     .statistics-price {
  //       @include flex(space-between);

  //       .price {
  //         color: #333333;
  //         font-size: 36rpx;
  //       }

  //       .text {
  //         margin-right: 10rpx;
  //         color: #666666;
  //         font-size: 24rpx;
  //       }
  //     }

  //     .proportion {
        
  //       @include flex(flex-end);
  //       margin: 20rpx 0 12rpx;
  //       display: none;
  //       .proportion-box { 
  //         @include flex(center, null, 5rpx);

  //         text {
  //           font-size: 28rpx;
  //         }

  //         image {
  //           width: 20rpx;
  //           height: 28rpx;
  //           display: block;
  //         }
  //       }
  //     }

  //     .chart-img {
  //       width: 100%;
  //       height: 80rpx;
  //       margin-top: 30rpx;
  //       image {
  //         width: 100%;
  //         height: 100%;
  //       }
  //     }

  //     .empty {
  //       position: relative;
  //       width: 100%;
  //       height: 135rpx;

  //       .left {
  //         position: absolute;
  //         right: 25rpx;
  //         top: 20rpx;
  //         width: 28rpx;
  //         height: 5rpx;
  //         background-color: #666666;
  //       }

  //       .bottom {
  //         width: 100%;
  //         position: absolute;
  //         left: 0;
  //         bottom: 0;
  //         height: 5rpx;
  //         background-color: #666666;
  //       }
  //     }
  //   }
  // }
}