nankai-cms-website-gov/pages/index.vue

<template>
  <NuxtLayout name="default" :categories="categoryTree">
    <div class="content-wrap">
      <!-- 第一部分 -->
      <div class="block row row-wrap">
        <!-- 轮播图 -->
        <div>
          <Carousel :data="carouselList"/>
        </div>
        <div>
          <DataListTabs :data="dtData"/>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="block row">
        <div>
          <DataListTabs :data="ldzcData"/>
        </div>
        <div>
          <DataListTabs :data="dwgkData"/>
        </div>
      </div>
      <!-- 第三部分 -->
      <ul class="block row row-wrap col-3" style="padding-bottom: 0;">
        <li><DataListTabs :data="tzggData"/></li>
        <li><DataListTabs :data="pqgsTabs"/></li>
        <li><DataListTabs :data="phgsTabs"/></li>
        <li><DataListTabs :data="bdcdjznTabs"/></li>
        <li><DataListTabs :data="wlaqxcTabs"/></li>
        <li><DataListTabs :data="djgzTabs"/></li>
      </ul>
      <!-- 专题专栏 -->
      <div class="block">
        <SpecialColumn :icons="subjectData"/>
      </div>
      <!-- 网站导航 -->
      <div class="website-nav">
        <WebsiteNav :data="websiteNavData"/>
      </div>
    </div>
  </NuxtLayout>
</template>
<script>
import { definePageMeta } from '#imports'
import DataListTabs from '@/components/common/DataListTabs'
import SpecialColumn from '@/components/cms/SpecialColumn'
import Carousel from '@/components/home/Carousel'
import WebsiteNav from '@/components/home/WebsiteNav'
import CategoryUtil from '@/utils/category'
import { fetchTemplateData } from '@/api/cms/template'
import { strictPackage } from '@/utils/util'
export default {
  components: {
    WebsiteNav,
    Carousel,
    SpecialColumn,
    DataListTabs
  },
  async setup () {
    // 去掉默认布局
    definePageMeta({
      layout: false,
    })
    const pageData = strictPackage(await fetchTemplateData({
      path: '/index.vue',
      targetUid: 'sy',
      targetType: 'CATEGORY'
    }))
    const categoryTitleMap = {
      snyw: '区内要闻',
      gnyw: '国内要闻',
      ldzc: '领导之窗',
      dwgk: '单位概况',
      tzgg: '通知公告',
      pqgs: '批前公示',
      phgs: '批后公示',
      bdcdjzn: '不动产登记指南',
      wlaqxc: '网络安全宣传',
      djgz: '党建工作',
    }
    const categoryUtil = new CategoryUtil(pageData.CATEGORIES_TREE)
    const getTab = (categoryUid, data = []) => {
      const category = categoryUtil.getCategory(categoryUid)
      if (category == null) {1
        throw new Error(`找不到栏目，UID: ${categoryUid}`)
      }
      return {
        code: categoryUid,
        label: categoryTitleMap[categoryUid],
        moreLink: category.uri,
        items: data
      }
    }
    const dataListTabs = pageData.MULTIPLE_CATEGORY_ARTICLES
    // 资源数据
    const resources = pageData.MULTIPLE_RESOURCES
    return {
      // 栏目树
      categoryTree: pageData.CATEGORIES_TREE,
      // 走马灯
      carouselList: pageData.MULTIPLE_RESOURCES.HOME_CAROUSEL,
      // 动态数据
      dtData: [
        getTab('snyw', dataListTabs.snyw),
        getTab('gnyw', dataListTabs.gnyw),
      ],
      // 专题数据
      subjectData: resources.ZHUAN_LAN,
      // 网站导航数据
      websiteNavData: [
        resources.SITE_NAVIGAT_1,
        resources.SITE_NAVIGAT_2,
        resources.SITE_NAVIGAT_3,
        resources.FRIENDLY_LINKS
      ],
      ldzcData: [getTab('ldzc', dataListTabs.ldzc)],
      dwgkData: [getTab('dwgk', dataListTabs.dwgk)],
      tzggData: [getTab('tzgg', dataListTabs.tzgg)],
      pqgsTabs: [getTab('pqgs', dataListTabs.pqgs)],
      phgsTabs: [getTab('phgs', dataListTabs.phgs)],
      bdcdjznTabs: [getTab('bdcdjzn', dataListTabs.bdcdjzn)],
      wlaqxcTabs: [getTab('wlaqxc', dataListTabs.wlaqxc)],
      djgzTabs: [getTab('djgz', dataListTabs.djgz)],
    }
  }
}
</script>
<style scoped lang="scss">
.default-layout {
  .content-wrap {
    // 数据块的高度
    --data-block-height: 360px;
    // 网站导航
    .website-nav {
      padding: 15px 20px;
      background-color: #EAF1FB;
      margin: 10px 0;
    }
  }
  // 数据列表
  .data-list-tabs {
    :deep(ul.article-list) {
      height: var(--data-block-height);
      box-sizing: border-box;
      padding-bottom: 0;
      & > li {
        border-bottom: 0 !important;
        a {
          padding: 10px 10px 10px 25px;
        }
      }
    }
  }
  .block {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 12px;
  }
  .row {
    display: flex;
    justify-content: space-between;
    & > * {
      width: 49%;
      flex-shrink: 0;
      overflow: hidden;
    }
    // 自动换行
    &.row-wrap {
      flex-wrap: wrap;
    }
    &.col-3 {
      & > * {
        width: 32%;
        margin-bottom: 20px;
      }
    }
  }
}
</style>