imengyu
/
wenbao-website


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
							<template>
  <!-- 首页 -->
  <div class="main-background">
    <!-- SEO -->
    <Head>
      <Title>厦门市文化遗产保护中心</Title>
      <Meta name="description" content="厦门市文化遗产保护中心是厦门市文化遗产保护的重要机构，致力于保护和传承厦门的历史文化遗产，包括历史建筑、传统手工艺、非物质文化遗产等。" />
      <Meta name="keywords" content="厦门市,厦门市文化遗产保护,厦门历史建筑保护,鼓浪屿文化遗产,南音艺术传承,厦门传统手工艺,厦门非物质文化遗产,海沧民俗文化保护,厦门古迹游览,文化遗产教育推广,厦门历史文化研究,闽南文化保护中心,厦门文物保护项目,文化遗产修复技术,厦门民间艺术展示,厦门文化节庆活动" />
      <Meta name="author" content="厦门市文化遗产保护中心" />
      <Meta name="robots" content="index, follow" />
    </Head>
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig">
      <Slide 
        v-for="(item, key) in carouselData.content.value"
        :key="key"
      >
        <a
          :href="item.url || item.image"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img class="main-header-image" :src="item.image" />
        </a>
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="container">
        <!-- 通知公告和热点新闻 -->
        <div class="row">

          <div class="col col-sm-12 col-md-6 col-lg-6">
            <Carousel v-bind="carouselConfig">
              <Slide 
                v-for="(item, key) in recommendArticles.content.value"
                :key="key"
                class="featured-image bg-secondary"
                :style="{ 'background-image': `url(${item.image})`, 'background-size': 'cover' }"
              >
                <router-link :to="'/page/' + item.id">
                  <img :src="item.image" :alt="item.desc || item.title" style="width: 100%; height: 100%; object-fit: contain;">
                  <div class="caption">
                    <h3>{{ item.title }}</h3>
                    <p>{{ item.desc || '' }}</p>
                  </div>
                </router-link>
              </Slide>
              <template #addons>
                <Navigation />
                <Pagination />
              </template>
            </Carousel>

            <!-- 学习强国 -->
            <div class="d-flex flex-row justify-content-between">
              <a href="http://cpc.people.com.cn/GB/67481/448544/index.html" class="w-50">
                <img src="https://wlj.xm.gov.cn/ztzl/202211/W020221213510920336898.jpg" class="mt-3" style="width: 100%; height:130px;object-fit:cover;" /> 
              </a>
              <a href="https://www.12371.cn/special/xxzd/" class="w-50">
                <img src="@/assets/images/xuexi.png" class="mt-3" style="width: 100%; height:130px;object-fit:cover;" /> 
              </a>
            </div>
          </div>

          <div class="d-flex flex-column col col-sm-12 col-md-6 col-lg-6 notices-list">
            <div class="section-title">
              <div class="d-flex flex-row align-items-center">
                <h2 id="notices-button" @click="currentTab = 'notices'" :class="{'active': currentTab === 'notices'}" class="button icon">通知公告</h2>
                <!-- <h2 id="hot-news-button" @click="currentTab = 'hot'" :class="{'active': currentTab === 'hot'}" class="button icon">热点新闻</h2> -->
              </div>
              <router-link :to="currentTab === 'notices' ? 
                `/channel/${notices.content.value?.channel_id}` : 
                `/channel/${hot.content.value?.channel_id}`" 
                class="section-more">
                查看更多 <Icon name="material-symbols-light:chevron-right" />
              </router-link>
            </div>

            <div v-if="currentTab === 'notices'" id="notices-list" class="notices-content flex-one flex-grow-1">
              <SimplePageContentLoader :loader="notices" :showEmpty="!notices.content.value?.items?.length">
                <div v-for="notice in notices.content.value?.items" :key="notice.id" class="notice-item">
                  <div>
                    <router-link :to="'/page/' + notice.id" class="notice-title">{{ notice.title }}</router-link>
                    <p>{{ notice.description }}</p>
                  </div>
                  <span class="notice-publishtime">{{ DataDateUtils.formatDate(new Date((notice.createtime || notice.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
                </div>
              </SimplePageContentLoader>
            </div>
            <div v-if="currentTab === 'hot'" id="hot-news-list" class="news-content flex-one flex-grow-1">
              <SimplePageContentLoader :loader="hot" :showEmpty="!hot.content.value?.items?.length">
                <div v-for="item in hot.content.value?.items" :key="item.id" class="news-item">
                  <router-link :to="'/page/' + item.id" class="title">{{ item.title }}</router-link>
                  <span class="publishtime">{{ DataDateUtils.formatDate(new Date((item.createtime ||item.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
                </div>
              </SimplePageContentLoader>
            </div>
          </div>
        </div>

        <!-- 工作动态和党建工作 -->
        <div class="row mt-lg-3 mt-md-2 mt-sm-2">


          <div class="col col-sm-12 col-md-4 col-lg-3 d-flex flex-column">
            
            <Carousel v-bind="carouselConfig">
              <Slide 
                v-for="(item, key) in carousel2Data.content.value"
                :key="key"
                class="featured-image bg-secondary"
                :style="{ 'background-image': `url(${item.image})`, 'background-size': 'cover' }"
              >
                <img 
                  :src="item.image" style="width: 100%; height: 100%; object-fit: contain;"
                  @click="handleImageClick(item)"
                >
              </Slide>
              <template #addons>
                <Navigation />
                <Pagination />
              </template>
            </Carousel>

            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2 flex-fill">

            </div>
          </div>
          <div class="col col-sm-12 col-md-8 col-lg-9">
            <!-- 工作动态 -->
            <div class="main-box">
              <div class="section-title">
                <h2>
                  <Icon name="material-symbols-light:flag" />
                  党建工作
                </h2>
                <router-link :to="`/channel/${partyBuilding.content.value?.channel_id}`" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></router-link>
              </div>
              <div class="news-content">
                <SimplePageContentLoader :loader="partyBuilding" :showEmpty="!partyBuilding.content.value?.items?.length">
                  <div v-for="item in partyBuilding.content.value?.items" :key="item.id" class="news-item">
                    <router-link :to="'/page/' + item.id" class="title">{{ item.title }}</router-link>
                    <span class="publishtime">{{ DataDateUtils.formatDate(new Date((item.publishtime || item.createtime) * 1000), 'yyyy-MM-dd') }}</span>
                  </div>
                </SimplePageContentLoader>
              </div>
            </div>
            <!-- 党建工作 -->
            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
              <div class="section-title">
                <h2>
                  <Icon name="famicons:logo-designernews" />
                  工作动态
                </h2>
                <router-link :to="`/channel/${workUppublishtimes.content.value?.channel_id}`" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></router-link>
              </div>
              <div class="news-content">
                <SimplePageContentLoader :loader="workUppublishtimes" :showEmpty="!workUppublishtimes.content.value?.items?.length">
                  <div v-for="uppublishtime in workUppublishtimes.content.value?.items" :key="uppublishtime.id" class="news-item">
                    <router-link :to="'/page/' + uppublishtime.id" class="title">{{ uppublishtime.title }}</router-link>
                    <span class="publishtime">{{ DataDateUtils.formatDate(new Date(uppublishtime.publishtime * 1000), 'yyyy-MM-dd') }}</span>
                  </div>
                </SimplePageContentLoader>
              </div>
            </div>
          </div>
        </div>

        <!-- 精彩推荐 -->
        <div class="row mt-lg-3 mt-md-2 mt-sm-2">
          <div class="col col-12">
            <!-- 精彩推荐 -->
            <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
              <div class="section-title">
                <h2 class="icon">精彩推荐</h2>
                <!-- <a href="#" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></a> -->
              </div>
              <div class="featured-grid">
                <SimplePageContentLoader :loader="featured" :showEmpty="!featured.content.value?.items?.length">
                  <div v-for="item in featured.content.value?.items" :key="item.id" class="featured-card">
                    <router-link :to="'/page/' + item.id">
                      <img :src="item.image" :alt="item.desc || item.title">
                      <p>{{ item.title }}</p>
                    </router-link>
                  </div>
                </SimplePageContentLoader>
              </div>
            </div>
          </div>
        </div>

        <hr class="main-hr" />

        <!-- 公共服务 -->
        <div class="services-section">
          <img class="title" src="@/assets/images/box-service.png" alt="公共服务">
          <div class="services-grid">

            <a class="service-card" href="https://mp.weixin.qq.com/s/r6Tgsp068VNo4tVIA2sEHA" target="_blank">
              <img class="icon" src="@/assets/images/icon-explore.png">
              <h3>志愿者招募</h3>
              <div class="service-link">
                <Icon name="material-symbols-light:chevron-right" />
              </div>
            </a>

            <div class="service-card" @click="handleServiceClick('activity')">
              <img class="icon" src="@/assets/images/icon-join.png">
              <h3>活动报名</h3>
              <a href="#" class="service-link">
                <Icon name="material-symbols-light:chevron-right" />
              </a>
            </div>

            <div class="service-card" @click="router.push('/about/')">
              <img class="icon" src="@/assets/images/icon-contract.png">
              <h3>联系咨询通道</h3>
              <RouterLink to="/about/" class="service-link">
                <Icon name="material-symbols-light:chevron-right" />
              </RouterLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { ref } from 'vue';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { MemoryTimeOut } from '@imengyu/imengyu-utils';
import CarouselItem1 from '@/assets/images/board1/1.jpg';
import CarouselItem2 from '@/assets/images/board1/2.jpg';
import CarouselItem3 from '@/assets/images/board1/3.jpg';
import CarouselItem4 from '@/assets/images/board1/4.jpg';
import CarouselItem5 from '@/assets/images/board1/5.jpg';
import type { ICarousel } from '~~/server/api/ecms/carousel';
import { useRouter } from 'vue-router';

const router = useRouter();
const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoplay: 5000,
}
const carouselData = await useSSrSimpleDataLoader('carousel', async () => {
  const res = await $fetch(`/api/ecms/carousel?name=banner`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
const carousel2Data = await useSSrSimpleDataLoader('carousel2', async () => {
  const res = await $fetch(`/api/ecms/carousel?name=banner2`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});

const currentTab = ref('notices');

const recommendArticles = await useSSrSimpleDataLoader('recommendArticles', async () => {
  const res = await $fetch(`/api/ecms/article/recommend`, { query: { page: 1, pageSize: 6 } });
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
const notices = await useSSrSimpleDataLoader('notices', async () => {
  const res = await $fetch(`/api/ecms/article/byChannelName?channelName=新闻公告`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
// 工作动态数据
const workUppublishtimes = await useSSrSimpleDataLoader('workUppublishtimes', async () => {
  const res = await $fetch(`/api/ecms/article/byChannelName?channelName=工作动态`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
// 党建工作数据
const partyBuilding = await useSSrSimpleDataLoader('partyBuilding', async () => {
  const res = await $fetch(`/api/ecms/article/byChannelName?channelName=党建工作`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
// 热点新闻数据
const hot = await useSSrSimpleDataLoader('hot', async () => {
  const res = await $fetch(`/api/ecms/article/byChannelName?channelName=热门新闻`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});
// 精彩推荐数据
const featured = await useSSrSimpleDataLoader('featured', async () => {
  const res = await $fetch(`/api/ecms/article/byChannelName?channelName=鹭岛文脉&pageSize=12`);
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});

function handleImageClick(image: ICarousel) {
  window.open(image.url || image.image, '_blank');
}
function handleServiceClick(service: string) {
  if (service === 'activity') {
    Modal.info({
      title: '提示',
      content: '暂无最新活动',
    });
  } else {
    Modal.info({
      title: '提示',
      content: '网站正在进行内部测试，暂未对外开放功能，敬请期待。',
    });
  }
}


const tipCounter = new MemoryTimeOut('devtip', 1000 * 3600);

onMounted(() => {
  if (tipCounter.isTimeout()) {
    tipCounter.recordTime();
    Modal.info({
      title: '提示',
      content: '网站正在进行内部测试，暂未对外开放。',
    })
  }
});
</script>

<style lang="scss">
@use "sass:list";
@use "sass:math";
</style>