MoeNovaClient/pages/index/index.scss

@font-face {
  font-family: "CustomFont";
  src: url("@/static/fonts/alibaba.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
.page-top {
  background: url("/static/home/home-top.png") 518rpx
      calc(-10rpx + var(--status-bar-height)) / 212rpx 296rpx no-repeat,
    url("/static/home/home-t.png") top center/100% auto no-repeat,
    linear-gradient(to top, #d0ffa5, #acff5f);
}
.tab-nav {
  display: flex;
  justify-content: flex-start;
  padding: 20rpx 20rpx;
  box-sizing: border-box;
  background: #ffffff;

  .tab-item {
    padding: 10rpx 38rpx;
    color: #1f1f1f;
    font-size: 28rpx;
    background: #f2f6f2;
    margin-right: 20rpx;
    border-radius: 30rpx;
    position: relative;
    left: 0;
    top: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
    }

    .indicator-triangle {
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 10rpx solid transparent;
      border-right: 10rpx solid transparent;
      border-top: 10rpx solid #acf934;
      display: none;
      transition: all 0.3s ease;
    }
    &.active {
      background: #acf934;
      font-family: "CustomFont" !important;
      box-shadow: 0 4rpx 12rpx rgba(172, 249, 52, 0.3);

      .indicator-triangle {
        display: block;
        transform: translateX(-50%) scale(1.2);
      }
    }
  }
}

.hot-topics {
  padding: 20rpx;
  // background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  border: #000000 solid 2rpx;
  background: url("../../static/home/hot-topice-bg.png") center/100% 99%
    no-repeat;

  .hot-topics-header {
    margin-bottom: 20rpx;

    .hot-topics-title {
      width: 140rpx;
      height: 34rpx;
    }
  }

  .hot-topics-swiper {
    height: 220rpx;
    box-sizing: border-box;
  }

  .hot-topics-list {
    padding: 0 26rpx;
    padding-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 220rpx;
  }

  .topic-item {
    display: flex;
    align-items: center;
    padding: 10rpx 0;
    justify-content: space-between;
    width: 100%;
    min-height: 50rpx;
    margin-bottom: 10rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:active {
      transform: scale(0.98);
    }

    &:last-child {
      margin-bottom: 0;
    }
    .hot-topics-left {
      display: flex;
      transition: all 0.3s ease;
      .topic-index {
        width: 30rpx;
        height: 30rpx;
        font-weight: 700;
        font-size: 24rpx;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 5rpx;
        margin-right: 18rpx;
        background: #cecece;
        transition: all 0.3s ease;
        &.topic-index-img {
          background: transparent;
          color: transparent;
          width: 36rpx;
          height: 36rpx;
          position: relative;
          left: -2rpx;
          top: 0;
        }
      }
      .topic-content {
        font-size: 24rpx;
        max-width: 330rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: all 0.3s ease;
      }
    }
    .topic-participants {
      font-size: 20rpx;
      color: #999;
      transition: all 0.3s ease;
    }
    .hot-tag {
      width: 46rpx;
      height: 22rpx;
      margin: auto;
      margin-left: 10rpx;
      transition: all 0.3s ease;
    }
  }

  .indicator-dots {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;

    .dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background: #ffffff;
      margin: 0 6rpx;

      &.active {
        background: #808080;
      }
    }
  }
}

.follow-list {
  padding: 20rpx;
  background: #fff;
  margin: 0rpx;
  border-radius: 0rpx;

  .works-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx;

    .work-item {
      width: 48%;
      margin: 1%;
      margin-bottom: 20rpx;

      .work-image {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 12rpx;
      }

      .work-title {
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 10rpx;
        padding: 0 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    background-color: #fff;
    text {
      color: #808080;
      font-size: 28rpx;
    }
  }
}

.no-data {
  text-align: center;
  padding: 40rpx 0;
  color: #808080;
  font-size: 28rpx;
}

.news-list {
  padding: 20rpx;
  background: #fff;

  .news-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .news-item {
      width: 48%;
      margin-bottom: 30rpx;
      background: #28292d;
      border-radius: 12rpx;
      overflow: hidden;

      .news-image {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
        border-radius: 12rpx 12rpx 0 0;
      }

      .news-title {
        font-size: 28rpx;
        color: #ffffff;
        padding: 15rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 60rpx;
        line-height: 60rpx;
      }

      .news-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15rpx 15rpx;

        .news-author {
          font-size: 24rpx;
          color: #808080;
          max-width: 60%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .news-views {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #808080;

          .view-icon {
            width: 26rpx;
            height: 18rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}

.float-btn {
  position: fixed;
  right: 30rpx;
  bottom: 145rpx;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;

  .float-btn-icon {
    width: 100%;
    height: 100%;
  }
}

.blankHeight {
  // width: 500rpx;
  // height: 500rpx;
  width: 100%;
  height: 144rpx;
}
.benner-box {
  box-sizing: border-box;
  padding: 20rpx;
  background: #fff;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  ::v-deep.uv-swiper {
    border-radius: 20rpx !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:active {
      transform: scale(0.98);
    }
  }
  .classModel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    left: 0;
    right: 0;
    .benner-iconBom {
      height: 18rpx;
      width: 50rpx;
      position: absolute;
      top: calc(55% + 18rpx);
      left: 50%;
      transform: translateX(-50%);
      z-index: 99;
    }
    .benner-icontop {
      width: 45rpx;
      height: 20rpx;
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translateX(-50%);
    }
    .benner-box {
      height: 256rpx;
      width: 344rpx;
      position: relative;
    }

    .benner-left-box {
      background: url("../../static/home/benner-left.-bg.png") center/100% 99%
        no-repeat;
      .text1 {
        color: rgba(255, 255, 255, 0.8);
        color: 28rpx;
        position: absolute;
        left: 26rpx;
        top: 88rpx;
      }
      .btn {
        font-size: 24rpx;
        background: #1f1f1f;
        color: #acf934;
        display: inline-block;
        border-radius: 390rpx;
        padding: 8rpx 24rpx;
        padding-bottom: 10rpx;
        position: absolute;
        bottom: 38rpx;
        left: 26rpx;
      }
    }
    .benner-right-box {
      background: url("../../static/home/benner-right-bg.png") center/100% 99%
        no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 256rpx;
      .text {
        color: #999;
        font-size: 20rpx;
        position: absolute;
        top: 56rpx;
        left: 26rpx;
      }
      .guard {
        position: relative;
        left: 0;
        top: 0;
        width: 312rpx;
        height: 104rpx;
        background: url("../../static/home/benner-right-btnTop.png") center/100%
          no-repeat;
        margin-bottom: 10rpx;
      }
      .match {
        position: relative;
        left: 0;
        top: 0;
        width: 312rpx;
        height: 104rpx;
        background: url("../../static/home/benner-right-btnBom.png") center/100%
          no-repeat;
      }
    }
  }
}
.waterfall-list-container {
  background: #fff;
}
.navCenter {
  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}
.lhSelectCity {
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 0 25rpx;
  padding-top: var(--status-bar-height);
}
.homePage {
  ::v-deep.zp-scroll-view-super {
    // padding-top: 22rpx;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    background-color: #fff;
  }
}