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;
    @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;
        margin-top: 40rpx;
        .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;

    .summarize-left {
      font-size: 36rpx;
      color: #3d3d3d;
    }

    .summarize-right {
      @include flex(center, null);
      font-size: 28rpx;
      color: #999999;
    }
  }

  .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;
        }
      }
    }
  }
}