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

.index {
  width: 100vw;
  min-height: 100vh;
  background-color: #F1F1F1;
  .detail-top {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    @include flex(center);
    .top-left{
        position: absolute;
        left: 28rpx;
        top: 50%;
        transform: translateY(-50%);
        image{
            width: 48rpx;
            height: 48rpx;
            display: block;
        }
    }
    .top-text{
        font-size: 32rpx;
        font-weight: 600;
        color: #000;
    }
  }
  .seat{
    width: 100%;
    height: 16rpx;
  }
  .box-bg{
    width: 100%;
    height: 393rpx;
    // background: linear-gradient(233deg, #8CCBFF 24%, #CDE9FF 71%);
    // background: ;
    background-image:linear-gradient(to bottom, #8CCBFF 0%, #CDE9FF 71%, #F1F1F1 100%);
    position: fixed;
    top: 0;
    left: 0;
  }
  .container{
    width: 100%;
    padding: 28rpx 32rpx 28rpx 28rpx;
    box-sizing: border-box;
    .card-list{
      position: relative;
      .card-item{
        position: absolute;
        left: 0;
      }
    }
    .empty-box{
        width: 100%;
        height: 649rpx;
        padding-top: 260rpx;
        box-sizing: border-box;
        @include flex(center,column,6rpx);
        image{
            width: 280rpx;
            height: 297rpx;
            display: block;
        }
        text{
            font-size: 28rpx;
            font-weight: 600;
            color: #3A495F;
        }
    }
    .card-btn{
        width: 100%;
        button{
            width: 100%;
            height: 98rpx;
            background: linear-gradient(98deg, #0E83FF 0%, #0E3EFF 100%);
            text-align: center;
            line-height: 98rpx;
            border-radius: 16rpx;
            margin-top: 24rpx;
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }
  }
  // .contant {
  // 	height: calc(100vh - env(safe-area-inset-bottom));
  // 	box-sizing: border-box;
  // 	background-color: #fff;

  // 	.header {
  // 		position: relative;
  // 		width: 100%;
  // 		height: 80rpx;

  // 		.header-icon {
  // 			position: absolute;
  // 			top: 50%;
  // 			transform: translateY(-50%);
  // 			left: 30rpx;

  // 			image {
  // 				width: 50rpx;
  // 				height: 50rpx;
  // 				display: block;
  // 			}
  // 		}

  // 		.header-title {
  // 			text-align: center;
  // 			line-height: 80rpx;
  // 			font-size: 32rpx;
  // 		}
  // 	}

  // 	.main {
  // 		padding: 20rpx 30rpx;

  // 		.add-card {
  // 			width: 100%;
  // 			height: 200rpx;
  // 			border: 1px solid #a3a3a3;
  // 			border-radius: 10rpx;
  // 			display: flex;
  // 			align-items: center;
  // 			justify-content: center;
  // 			gap: 20rpx;
  // 			color: rgb(58, 143, 255);
  // 			font-size: 30rpx;
  // 		}
  // 	}
  // }

  .d-container {
    @extend %securityTop;
    box-sizing: border-box;
    height: 100vh;
    width: 350rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .d-image {
      @include flex(center, column, 20rpx);
      padding: 35rpx 0;
      box-sizing: border-box;
      border-top: 1rpx solid #cccccc;
      border-bottom: 1rpx solid #cccccc;

      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
      }

      text {
        font-size: 28rpx;
      }
    }

    .quit {
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 26rpx;
      border-bottom: 1rpx solid #cccccc;
    }
  }
}

::v-deep .tui-drawer-container{
  border-radius:  0 16rpx 16rpx 0;
}