gjjd-web/pages/index.vue

<template>
  <div class="container index">
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in banner?.data" :key="item.uid">
          <nuxt-link v-if="item.path" :to="item.path">
            <el-image :src="item.url" style="width: 100%" fit="cover" />
          </nuxt-link>
          <a v-else :href="item.path">
            <el-image :src="item.url" style="width: 100%" fit="cover" />
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row :gutter="20" class="mt-20" v-for="categoryItem in movieList">
      <el-col :sm="18">
        <div class="panel_hd between items-center">
          <div class="panel_hd__left">
            <h3 class="title items-center">
              <nuxt-link to="/">最新电影</nuxt-link>
            </h3>
          </div>
          <div class="panel_hd__right items-center">
            <ul class="items-center">
              <li class="hidden-sm-and-down"><nuxt-link :to="`/c`">动作片</nuxt-link></li>
              <li class="hidden-sm-and-down"><nuxt-link :to="`/c`">科幻片</nuxt-link></li>
              <li>
                <nuxt-link :to="`/c-`" class="items-center">
                  更多 <el-icon><ElIconArrowRight /></el-icon>
                </nuxt-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="video-list">
          <el-row :gutter="20">
            <el-col :sm="4" :xs="8" v-for="item in categoryItem.rows">
              <div class="video-list__block">
                <nuxt-link :to="`/c-`" class="img-box">
                  <el-image lazy class="video-list__block__img" :src="'/default.jpg'" fit="cover" />
                  <span>暂无评分</span>
                </nuxt-link>
                <div class="video-list__detail">
                  <h4 class="title text-overflow">封神</h4>
                  <p class="text-overflow">
                    <template>张三</template>
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6" class="hidden-sm-and-down">
        <div class="panel_hd items-center">
          <h3 class="title items-center">
            电影榜单
          </h3>
        </div>
        <ul class="col-pd">
          <li v-for="(item, index) in categoryItem.ranks">
            <nuxt-link :to="`/c-`" class="between">
              <div>
                <span class="badge">{{ index + 1 }}</span>
                封神
              </div>
              <span class="text-muted">更新至1集</span>
            </nuxt-link>
          </li>
        </ul>
      </el-col>
    </el-row>
    <div class="friendly-link flex items-center mt-20">
      <el-icon><ElIconLink/></el-icon>
      友情链接
    </div>
    <div class="friendly-link__content">
      <a v-for="item in linkList" :href="item.url" target="_blank">{{ item.text }}</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {ApiResult} from "~/api";
import type {AdItem} from "~/api/cms/ad/model";

// 获取数据
const getSlide = useServerRequest<ApiResult<AdItem[]>>('http://127.0.0.1:9001/api/cms/ad/side/281');
const getSlide2 = useServerRequest<ApiResult<AdItem[]>>('http://127.0.0.1:9001/api/cms/ad/side/282');
const [{ data: banner }, { data: banner2 }] = await Promise.all([getSlide, getSlide2]);

</script>

<style lang="scss">
.index {
  padding-top: 20px;

  .banner {
    .el-carousel__container {
      height: 380px;
    }

    .el-image {
      height: 380px;
    }

    @media (max-width: 768px){
      .el-carousel__container {
        height: 200px;
      }

      .el-image {
        height: 200px;
      }
    }
  }

  .friendly-link {
    border-bottom: #eee solid 1px;
    padding: 10px 0;
    font-size: 18px;
    > img {
      margin-right: 10px;
    }
    &__content {
      padding: 20px 0;
      a {
        padding-right: 15px;
      }
    }
  }
}

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

.col-pd {
  li {
    a {
      font-size: 14px;
      padding: 10px 0 10px;
      border-bottom: dotted 1px #eeeeee;

      .badge {
        display: inline-block;
        margin-right: 10px;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        border-radius: 2px;
        font-size: 12px;
        background-color: #eee;
        color: #333;
      }

      .text-muted {
        color: #999;
      }
    }

    &:nth-child(1) {
      .badge {
        background-color: #ff4a4a;
        color: #fff;
      }
    }

    &:nth-child(2) {
      .badge {
        background-color: #ff7701;
        color: #fff;
      }
    }

    &:nth-child(3) {
      .badge {
        background-color: #ffb400;
        color: #fff;
      }
    }
  }
}

.panel_hd {
  border-bottom: #eeeeee solid 1px;
  height: 46px;
  margin-bottom: 15px;
  .title {
    font-size: 18px;
    line-height: 24px;

    img {
      margin-right: 10px;
    }
  }
  &__right {
    li {
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 1px;
        height: 10px;
        background: #eee;
        position: absolute;
        top: 50%;
        transform: translateY(-30%);
        right: 0;
      }
      &:last-child::before {
        display: none;
      }
      a {
        padding: 0 10px;
        color: #999;
        font-size: 14px;
      }
    }
  }
}

.video-list {
  &__block {
    padding: 10px 0;
    &__img {
      width: 100%;
      height: 218px;
    }
    .img-box {
      position: relative;
      height: 218px;
      display: block;
      span {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        left: 0;
        display: inline-block;
        background-image: linear-gradient(transparent,rgba(0,0,0,.5));
        color: #fff;
        font-size: 12px;
        text-align: right;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }

  &__detail {
    .title {
      font-size: 14px;
      color: #333;
      padding-top: 10px;
    }

    p {
      min-height: 19px;
      font-size: 12px;
      margin-bottom: 0;
      margin-top: 5px;
      color: #999;
    }
  }
}

@media only screen and (max-width:991px){
  .video-list {
    &__block {
      &__img, .img-box {
        height: 170px;
      }
    }
  }
}
</style>