page {
  background-color: #f6f8f9;
}
.nav-tabs {
  view {
    --tab-font-size: 32rpx;
  }
}

.page1 {
  padding: 16rpx 30rpx 240rpx;
  .tabs {
    padding: 12rpx;
    background-color: #fff;
    border-radius: 58rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tab-item {
      flex: 1;
      font-size: 28rpx;
      color: #211d2e;
      border-radius: 98rpx;
      line-height: 64rpx;
      text-align: center;
      &.active {
        color: #fff;
        background: linear-gradient(344deg, #ffbcf9 0%, #b982ff 100%);
      }
    }
  }
  .container {
    padding: 32rpx 0 0;
    .title {
      font-size: 32rpx;
      color: #211d2e;
    }
    .table {
      margin: 24rpx 0 0;
      border-radius: 12rpx;
      overflow: hidden;
      border: 1px solid #fff;
      .thead {
        display: grid;
        grid-template-columns: auto 240rpx 240rpx;
        background-color: #f7f0ff;
        text-align: center;
        border-radius: 12rpx 12rpx 0 0;
        .item {
          padding: 20rpx;
          border-right: 1px solid #eee4ff;
          font-size: 28rpx;
          color: #b982ff;
          line-height: 36rpx;
          font-weight: bold;
          &:last-of-type {
            border: none;
          }
        }
      }
      .tbody {
        .tr {
          display: grid;
          grid-template-columns: auto 240rpx 240rpx;
          background-color: #ffffff;
          text-align: center;
          border-bottom: 1px solid #eee4ff;
          &:last-of-type {
            border: none;
          }
          &:nth-of-type(2n) {
            background-color: #fdfbff;
          }
          .td {
            padding: 20rpx;
            border-right: 1px solid #eee4ff;
            font-size: 28rpx;
            color: #211d2e;
            line-height: 36rpx;
            &:last-of-type {
              border: none;
            }
            &.red {
              color: #ef3939;
            }
            &.green {
              color: #1ec580;
            }
          }
        }
      }
    }
    .table-none {
      display: block;
      margin: 30rpx auto;
      width: 80%;
    }
  }
}

.page2 {
  padding: 16rpx 30rpx 240rpx;
  .title {
    font-size: 32rpx;
    color: #000;
    margin-bottom: 24rpx;
  }
  .scroll {
    position: relative;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 12rpx;
    border: 1px solid #fff;
    .table1 {
      flex-shrink: 0;
      position: sticky;
      left: 0;
      top: 0;
      .thead {
        display: grid;
        grid-template-columns: 70rpx 220rpx;
        text-align: center;
        height: 160rpx;
        .taside {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
          color: #b982ff;
          writing-mode: vertical-lr;
          background-color: #f7f0ff;
          border-right: 1px solid #eee4ff;
          font-weight: bold;
        }
        .tcontainer {
          background-color: #f7f0ff;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20rpx;
          border-right: 1px solid transparent;
          font-size: 28rpx;
          color: #b982ff;
          line-height: 36rpx;
          font-weight: bold;
        }
      }
      .tbody {
        display: grid;
        grid-template-columns: 70rpx 220rpx;
        .taside {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30rpx;
          color: #211d2e;
          writing-mode: vertical-lr;
          background-color: #fff;
          border-right: 1px solid #eee4ff;
        }
        .tcontainer {
          .tr {
            background-color: #ffffff;
            text-align: center;
            border-bottom: 1px solid #eee4ff;
            &:last-of-type {
              border: none;
            }
            &:nth-of-type(2n) {
              background-color: #fdfbff;
            }
            .td {
              height: 100rpx;
              box-sizing: border-box;
              padding: 22rpx;
              border-right: 1px solid #eee4ff;
              font-size: 30rpx;
              color: #211d2e;
              line-height: 40rpx;
              display: flex;
              align-items: center;
              text-align: left;
              &:last-of-type {
                border: none;
              }
            }
            .mtd {
              height: 300rpx;
              overflow: hidden;
            }
          }
        }
      }
    }
    .table2 {
      flex-shrink: 0;
      .thead {
        background-color: #f7f0ff;
        text-align: center;
        border-radius: 12rpx 12rpx 0 0;
        height: 160rpx;
        .col {
          text-align: center;
          width: 200rpx;
          padding: 22rpx;
          font-size: 30rpx;
          color: #b982ff;
          border-left: 1px solid #eee4ff;
          font-weight: bold;
        }
        .row {
          border-top: 1px solid #eee4ff;
          display: flex;
        }
        .col-sctck {
          position: sticky;
          left: 290rpx;
          width: 400rpx;
        }
      }
      .tbody {
        .tr {
          height: 100rpx;
          display: flex;
          background-color: #ffffff;
          text-align: center;
          border-bottom: 1px solid #eee4ff;
          &:last-of-type {
            border: none;
          }
          &:nth-of-type(2n) {
            background-color: #fdfbff;
          }
          .td {
            padding: 22rpx;
            width: 200rpx;
            border-left: 1px solid #eee4ff;
            font-size: 30rpx;
            color: #211d2e;
            line-height: 40rpx;
            display: flex;
            align-items: center;
            text-align: left;
            &.red {
              color: #ef3939;
            }
            &.green {
              color: #1ec580;
            }
            &:not(:first-of-type) {
              color: #211d2e !important;
            }
          }
        }
        .mtr {
          overflow: hidden;
          height: 300rpx;
        }
      }
    }
  }
  .table-none {
    display: block;
    margin: 30rpx auto;
    width: 80%;
  }
}

.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 20rpx 40rpx calc(env(safe-area-inset-bottom) + 20rpx);
  box-sizing: border-box;
  background-color: #fff;
  .pf-btn {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #ffffff;
    background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}