gjjd-pc/pages/components/ImportantInformation.vue

<template>
  <div class="xl:w-screen-2xl m-auto text-xl">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover" class="bg-gray-50 w-full h-[150px]">
          <template #header>
            <div class="card-header">
              <span class="font-bold text-[#ff0000]">重大信息公开</span>
            </div>
          </template>
          <template v-for="(item,index) in list" :key="index">
            <li class="flex justify-between py-2">
              <a class="line-clamp-1 max-w-2xl" :class="`item-${index}`"
                 :href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}</a>
              <span class="text-gray-400 font-200">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
            </li>
          </template>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="bg-gray-50 w-full h-[150px]">
          <template #header>
            <div class="card-header">
              <span class="font-bold text-[#ff0000]">党建专题</span>
            </div>
          </template>
          <div class="flex justify-between">
            <div class="flex flex-col">
              <span class="text-[#ff0000]">【2023】关于2023年“三重一大”的启动通知</span>
              <span class="text-sm text-gray-500">2023-03-07</span>
            </div>
            <div class="flex flex-col items-end">
              <span class="text-[#ff0000]">【2023】关于2023年“三重一大”的启动通知</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {getSpmUrl, openSpmUrl} from "~/utils/common";
import dayjs from "dayjs";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult, PageResult} from "~/api";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import type {CompanyParam} from "~/api/system/company/model";
import {TENANT_ID} from "~/config";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";

const props = withDefaults(
  defineProps<{
    config?: any;
    scrollTop: number;
    parentId?: any;
    disabled?: boolean;
    title?: string;
    comments?: string;
  }>(),
  {
    title: '卡片标题',
    comments: '卡片描述'
  }
);

const emit = defineEmits<{
  (e: 'done'): void;
}>();

const category = ref<ApiResult<CmsNavigation[]>>();
const list = ref<CmsArticle[]>([]);
const hotList = ref<CmsArticle[]>([]);
const categoryId = ref();

// 搜索表单
const where = reactive<CompanyParam>({
  keywords: ''
});

const handleClick = () => {
  reload();
}

// 轮播图
const {data: hotResponse} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
  params: {
    recommend: 1,
    limit: 5
  }
})
if (hotResponse.value?.data) {
  hotList.value = hotResponse.value?.data.list
}

// 请求文章栏目
const getCategory = async () => {
  const {data: categoryInfo} = await useServerRequest<ApiResult<CmsNavigation[]>>('/cms/cms-navigation', {
    params: {
      parentId: props.parentId
    }
  })
  if (categoryInfo.value) {
    category.value = categoryInfo.value
    categoryId.value = categoryInfo.value?.data && categoryInfo.value?.data[0].navigationId
  }
  await reload();
}

// 请求数据
const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
    params: {
      categoryId: Number(categoryId.value),
      limit: 8
    }
  })
  if (response.value?.data) {
    list.value = response.value?.data.list
  }
}

const showNews = ref(false)

watch(
  () => [props.parentId, props.scrollTop],
  ([parentId, scrollTop]) => {
    getCategory();
    if (props.scrollTop > 70) showNews.value = true
  },
  {immediate: true}
);
</script>

<style lang="less" scoped>

.left-2-right {
  animation: left-2-right-ani;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes left-2-right-ani {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.right-to-left {
  animation: right-to-left-ani;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes right-to-left-ani {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
//.hidden-sm-and-down .carousel{display: none;}
</style>