websoft-cms/pages/index.vue

<template>
  <!-- 首页幻灯片 -->
  <div class="banner sm:pt-[60px] pt-[46px]" v-if="banner">
    <el-carousel :interval="5000" arrow="always" :height="screenWidth <= 768 ? `170px` : `750px`">
      <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>

  <!-- 首页新闻栏目 -->
  <div class="category md:w-3/4 m-auto my-3 p-3 flex flex-col gap-xl">
    <div class="category-item bg-white rounded-lg p-3 hover:shadow">
      <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2">
        <el-icon>
          <ElIconLink/>
        </el-icon>
        <text class="ml-2">栏目名称</text>
      </div>
      <div class="flex flex-wrap px-2 py-4">
        <div v-for="(item,index) in links" class="flex items-center">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
          <el-divider v-if="index + 1 != links.length" direction="vertical" />
        </div>
      </div>
    </div>
    <div class="category-item bg-white rounded-lg p-3 hover:shadow">
      <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2 flex items-center">
        <el-icon>
          <ElIconLink/>
        </el-icon>
        <text class="ml-2">友情链接</text>
      </div>
      <div class="flex flex-wrap px-2 py-4">
        <div v-for="(item,index) in links" class="flex items-center">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
          <el-divider v-if="index + 1 != links.length" direction="vertical" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {ApiResult} from "~/api";
import type {AdItem} from "~/api/cms/ad/model";
import type {Link} from "~/api/cms/link/model";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import {getPath} from "~/utils/common";

const website = useWebsite();
const banner = ref<any>();
const links = ref<any>();
const movieList = ref<any>();
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;

// 获取数据
const reload = async () => {
  await nextTick()
  const form = useServerRequest('/cms/navigation/getNavigationByPath',{query: {path: getPath()}})
  const getSlide = useServerRequest<ApiResult<AdItem[]>>('/cms/ad/side');
  const getLink = useServerRequest<ApiResult<Link[]>>('/oa/link?linkType=友情链接');
  const [{data: slide}, {data: link}] = await Promise.all([getSlide, getLink]);
  console.log(slide.value)
  banner.value = slide.value?.data;
  links.value = link.value?.data;
}
reload();
</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;
    font-size: 18px;

    > img {
      margin-right: 10px;
    }

    &__content {
      padding: 20px;

      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>