.scroll-view {
  height: 100vh;
}
.page {
  background-color: #fafafa;
  min-height: 70vh;
  .banner {
    padding: 44rpx 30rpx 0;
    display: flex;
    align-items: center;
    .hosttipat-img {
      flex-shrink: 0;
      width: 180rpx;
      height: 180rpx;
      border-radius: 24rpx;
      border: 2rpx solid rgba(151, 151, 151, 0.21);
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .wrap {
      margin-left: 24rpx;
      flex: 1;
      .title {
        display: flex;
        align-items: center;
        .name {
          font-size: 36rpx;
          color: #211d2e;
          word-break: break-all;
          font-weight: bold;
        }
        .tag {
          flex-shrink: 0;
          margin-left: 12rpx;
          padding: 6rpx 12rpx;
          font-size: 22rpx;
          line-height: 1;
          color: #ffffff;
          background: #ffa300;
          border-radius: 8rpx;
        }
      }
      .content {
        margin-top: 18rpx;
        .inner {
          .site {
            margin-bottom: 16rpx;
            font-size: 32rpx;
            color: #211d2e;
            .icon {
              width: 36rpx;
              height: 36rpx;
              vertical-align: -8rpx;
            }
          }
          .site-num {
            font-size: 24rpx;
            color: #adacb2;
          }
        }
        .options {
          flex-shrink: 0;
          .icon {
            margin-left: 20rpx;
            width: 48rpx;
            height: 48rpx;
            background-color: #edeeef;
            border-radius: 50%;
            padding: 6rpx;
          }
        }
      }
    }
  }
  .options {
    margin: 60rpx 30rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30rpx;
    .phone {
      flex: 1;
      line-height: 70rpx;
      font-size: 32rpx;
      color: #b982ff;
      text-align: center;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      border: 1px solid #b982ff;
      .icon {
        margin-right: 8rpx;
        display: inline-block;
        width: 36rpx;
        height: 36rpx;
        vertical-align: middle;
      }
    }
    .site {
      flex: 1;
      line-height: 76rpx;
      font-size: 32rpx;
      color: #ffffff;
      border-radius: 60rpx;
      text-align: center;
      background: linear-gradient(197deg, #ffbcf9 0%, #b982ff 100%);
      .icon {
        margin-right: 8rpx;
        display: inline-block;
        width: 32rpx;
        height: 32rpx;
        vertical-align: middle;
      }
    }
  }
  .module {
    margin-top: 64rpx;
    padding: 0 30rpx;
    .module-container {
      background: #ffffff;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
      border: 1rpx solid #ebecee;
      border-radius: 24rpx;
      .m-title {
        position: relative;
        height: 88rpx;
        .m-title-img {
          position: absolute;
          top: -20rpx;
          left: 0;
          width: 100%;
          height: 108rpx;
        }
      }
    }
    .new-card {
      margin-bottom: 16rpx;
      padding: 32rpx;
      display: flex;
      .avatar {
        flex-shrink: 0;
        width: 172rpx;
        height: 172rpx;
        border-radius: 24rpx;
      }
      .content {
        flex: 1;
        padding-left: 20rpx;
        .name {
          font-size: 32rpx;
          color: #211d2e;
          font-weight: bold;
          .icon {
            margin-left: 8rpx;
            display: inline-block;
            width: 32rpx;
            height: 32rpx;
            vertical-align: middle;
          }
        }
        .p {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #adacb2;
          &.ellipsis {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .row {
          margin-top: 16rpx;
          display: flex;
          flex-wrap: wrap;
          .tag {
            margin-right: 16rpx;
            margin-bottom: 10rpx;
            width: 120rpx;
            height: 32rpx;
            background: #faf6ff;
            border-radius: 8rpx;
            display: flex;
            .week {
              flex: 1;
              font-size: 20rpx;
              line-height: 32rpx;
              color: #ffffff;
              background-color: #b982ff;
              text-align: center;
              border-radius: 8rpx 0 8rpx 8rpx;
            }
            .value {
              flex: 1;
              font-size: 20rpx;
              color: #b982ff;
              text-align: center;
              line-height: 32rpx;
            }
          }
          .week-name {
            flex: 1;
            padding: 20rpx 24rpx;
            background-color: rgba(253, 244, 247, 1);
            border-radius: 16rpx;
            font-size: 24rpx;
            color: rgba(157, 160, 168, 1);
            line-height: 40rpx;
            .label {
              margin-right: 12rpx;
              display: inline-block;
              font-size: 20rpx;
              color: rgba(255, 255, 255, 1);
              line-height: 32rpx;
              padding: 0 8rpx;
              background: #e04775;
              border-radius: 8rpx 8rpx 8rpx 8rpx;
            }
          }
        }
      }
    }
  }
}