yixiang-web/src/views/index/content.vue

<script setup>
import { ref } from "vue"
import IndexTitle from "~/components/IndexTitle/index.vue";
import IndexNews from "~/components/IndexNews/index.vue";
import IndexSection from "~/components/IndexSection/index.vue";
import YXFooter from "~/components/layouts/Footer.vue";
import TheCharts from "~/components/TheCharts/index.vue";

// mock data.
const chartsList = ref([
  {
    nickname: '爱思考的大毛',
    signature: '我这一生如履薄冰。。。',
    type: 'score'
  },
  {
    nickname: '爱思考的大毛',
    signature: '我这一生如履薄冰。。。',
    type: 'score'
  },
  {
    nickname: '爱思考的大毛',
    signature: '我这一生如履薄冰。。。',
    type: 'score'
  },
  {
    nickname: '爱思考的大毛',
    signature: '我这一生如履薄冰。。。',
    type: 'score'
  },
  {
    nickname: '爱思考的大毛',
    signature: '我这一生如履薄冰。。。',
    type: 'score'
  }
])


</script>

<template>
  <div class="index-container">
    <div class="banner">
      <el-carousel height="420px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small justify-center" text="2xl">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <IndexTitle title="精选咨询" />
    <div class="content-list flex-row flex-jc-sb">
      <template v-for="(item, idx) in 9" :key="idx">
        <IndexNews />
      </template>
    </div>
    <IndexTitle title="精选文章" />
    <div class="content-list content-list--c2 flex-row flex-jc-sb">
      <template v-for="(item, idx) in 9" :key="idx">
        <IndexSection :type="idx === 2 ? 'article' : 'common'" />
      </template>
    </div>
    <IndexTitle title="精选视频" />
    <div class="content-list content-list--c2 flex-row flex-jc-sb">
      <template v-for="(item, idx) in 9" :key="idx">
        <IndexSection />
      </template>
    </div>
    <IndexTitle title="大家在聊" />
    <div class="tags-container flex-row">
      <template v-for="(item, idx) in 9" :key="idx">
        <div class="tagbox">
          <span>
            精选视频 {{ item }}
          </span>
        </div>
      </template>
    </div>

    <!-- 排行榜只有登录才有 -->
    <template v-if="true">
      <IndexTitle title="排行榜" />
      <div class="sortlist-container flex-row flex-jc-sb">
        <TheCharts :list="chartsList" type="score" header-title="积分排行" />
        <TheCharts :list="chartsList" type="essence" header-title="精华帖排行" />
        <TheCharts :list="chartsList" type="like" header-title="点赞排行" />
      </div>
    </template>

    <YXFooter />
  </div>
</template>

<style lang="scss" scoped>
.index {
  &-container {
    .banner {
      margin-bottom: 30px;

      .demonstration {
        color: var(--el-text-color-secondary);
      }

      .el-carousel__item {
        border-radius: 6px;
      }

      .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 420px;
        margin: 0;
        text-align: center;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }
    }

    .index-title-container {
      margin-bottom: 20px;
    }

    .content-list {
      margin-bottom: 30px;
      column-gap: 20px;
      flex-wrap: wrap;
      height: 255px;
      overflow: hidden;

      &--c2 {
        height: 337px;
      }
    }
  }
}

.tags {
  &-container {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 30px 0 0;
    margin-bottom: 20px;
    height: 142px;
    overflow: hidden;

    .tagbox {
      width: 279px;
      height: 56px;
      text-align: center;
      line-height: 56px;
      background: #FFFFFF;
      border-radius: 6px;
      margin-right: 22px;
      margin-bottom: 16px;

      span::before {
        content: "#";
      }
    }
  }
}

.sortlist-container {
  column-gap: 26px;
}
</style>