school-miniprogram/src/pages/index/index.scss

page {
  background: rgba(247, 248, 250, 1);
}
.page {
  position: relative;
  min-height: 100vh;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  .search {
    margin: 30rpx;
    padding: 10rpx 24rpx;
    display: flex;
    align-items: center;
    gap: 16rpx;
    background-color: #fff;
    border-radius: 40rpx;
    .icon {
      width: 38rpx;
      height: 38rpx;
    }
    .content {
      font-size: 28rpx;
      color: rgba(148, 163, 184, 0.7);
      line-height: 44rpx;
    }
  }
  .notice {
    margin: 353rpx 30rpx 0;
    padding: 12rpx 24rpx;
    background-color: #fff;
    border-radius: 59rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    .icon {
      flex-shrink: 0;
      width: 36rpx;
      height: 36rpx;
    }
    .content {
      flex: 1;
      font-size: 28rpx;
      color: rgba(71, 85, 105, 1);
      --notice-bar-padding: 0;
      --notice-bar-line-height: 40rpx;
      --notice-bar-height: 40rpx;
    }
    .more {
      color: rgba(148, 163, 184, 1);
    }
  }
  .kkd {
    margin: 32rpx 30rpx;
    padding: 36rpx;
    background-color: #fff;
    border-radius: 24rpx;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%/4), 1fr));
    gap: 24rpx 0;
    box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(34, 138, 251, 0.1);
    .k-item {
      text-align: center;
      flex: 1;
      .icon {
        width: 120rpx;
        height: 120rpx;
      }
      .name {
        margin-top: 13rpx;
        font-size: 28rpx;
        color: rgba(71, 85, 105, 1);
      }
    }
  }
  .module {
    margin: 35rpx 30rpx 0;
    .m-header {
      display: flex;
      align-content: inherit;
      justify-content: space-between;
      .title {
        font-size: 36rpx;
        color: rgba(15, 29, 63, 1);
        font-weight: bold;
      }
      .more {
        font-size: 28rpx;
        color: rgba(148, 163, 184, 1);
      }
    }
    .activity-list {
      margin: 20rpx -30rpx;
      padding-left: 30rpx;
      display: flex;
      flex-wrap: nowrap;
      gap: 24rpx;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .a-card {
        flex-shrink: 0;
        width: 653rpx;
        height: 218rpx;
        .a-img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 24rpx;
        }
      }
    }
    .agent-list {
      margin: 20rpx -30rpx;
      padding-left: 30rpx;
      display: flex;
      flex-wrap: nowrap;
      gap: 24rpx;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .a-card {
        flex-shrink: 0;
        padding-top: 44rpx;
        width: 200rpx;
        height: 264rpx;
        background-color: #fff;
        border-radius: 24rpx;
        box-sizing: border-box;
        .icon {
          display: block;
          margin: 0 auto;
          width: 112rpx;
          height: 112rpx;
          border-radius: 16rpx;
        }
        .name {
          margin-top: 32rpx;
          padding: 0 10rpx;
          font-size: 28rpx;
          color: rgba(71, 85, 105, 1);
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .recommend {
    margin: 42rpx 30rpx 0;
    --tabs-nav-background-color: transparent;
    --tab-font-size: 32rpx;
    .van-tab--active {
      --tab-font-size: 36rpx;
      font-weight: bold;
    }
    .van-tabs__line {
      display: none;
    }
    .van-tab {
      position: relative;
      flex: none;
    }
    .van-tab--active::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 42rpx;
      height: 8rpx;
      background: #4ab8fd;
      border-radius: 37rpx 37rpx 37rpx 37rpx;
    }
    .van-tabs__nav {
      gap: 70rpx;
    }
    .r-activity-list {
      margin-top: 32rpx;
      padding: 0 32rpx;
      border-radius: 16rpx;
      background-color: #fff;
      .card {
        padding: 24rpx 0;
        display: flex;
        gap: 24rpx;
        padding-bottom: 24rpx;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        &:last-of-type {
          border: none;
        }
        .photo {
          flex-shrink: 0;
          position: relative;
          width: 262rpx;
          height: 196rpx;
          .status {
            position: absolute;
            top: 0;
            left: 0;
            padding: 8rpx 16rpx;
            font-size: 22rpx;
            color: rgba(255, 255, 255, 1);
            background: #feb54a;
            border-radius: 16rpx 0rpx 16rpx 0rpx;
          }
          .p-img {
            border-radius: 16rpx;
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .wrap {
          .title {
            font-size: 32rpx;
            color: rgba(17, 24, 39, 1);
            line-height: 48rpx;
            font-weight: bold;
          }
          .user {
            margin-top: 18rpx;
            color: rgba(100, 116, 139, 1);
            font-size: 24rpx;
          }
          .date {
            margin-top: 20rpx;
            font-size: 24rpx;
            color: rgba(100, 116, 139, 1);
            display: flex;
            align-items: center;
            gap: 8rpx;
            .icon {
              width: 22rpx;
              height: 22rpx;
            }
          }
        }
      }
    }
  }
}