imengyu
/
minnan-website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
							<template>
  <!-- 首页 -->
  <div class="main-background">
    <!-- SEO -->
    <Head>
      <Title>闽南文化生态保护区(厦门市)</Title>
      <Meta name="description" content="闽南文化生态保护区(厦门市)是福建省厦门市的一个生态保护区，保护范围为厦门市内的闽南文化地区，包括福建、台湾、客家语等地区的历史文化遗产。" />
      <Meta name="keywords" content="厦门市, 闽南文化生态保护区, 福建闽南文化, 闽南文化, 闽南历史文化, 闽南历史文化, 闽南历史文化, 闽南历史文化" />
    </Head>
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide 
        v-for="(item, key) in bannerData.content.value"
        :key="key"
        class="main-header-box small"
      >
        <img :src="item.image" />
        <div class="d-flex flex-row main-center-text">
          <div class="d-flex flex-column">
            <img src="@/assets/images/LargeTitle1.png" alt="闽南文化" />
            <img src="@/assets/images/LargeTitle2.png" alt="Mingnan Cultural" />
          </div>
          <img src="@/assets/images/LargeTitle3.png" alt="厦门" />
        </div>
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 数据统计 -->
    <section class="main-section main-background main-background-type2">
      <div class="content">
        <div class="title">
          <h2>数据统计</h2>
        </div>
        <IndexStats />
      </div>
    </section>

    <!-- 保护区发展历程 -->
    <section class="main-section main-background main-background-type2">
      <div class="content">
        <div class="title">
          <h2>保护区发展历程</h2>
        </div>

        <SimplePageContentLoader :loader="recordData">
          <div class="main-time-line">
            <ScrollRect scroll="horizontal" containerClass="time-line-scroll">
              <div 
                v-for="(item, index) in recordData.content.value"
                :key="index"
                class="item"
                :class="index % 2 === 0 ? 'top' : 'bottom'"
              >
                <div class="time">
                  {{ DataDateUtils.formatDate(item.publishAt, 'YYYY-MM') }}
                </div>
                <div class="box">
                  <div class="title">{{ item.title }}</div>
                  <div class="content">{{ item.desc }}</div>
                </div>
              </div>
            </ScrollRect>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 精选推荐非遗 -->
    <section class="main-section main-background main-background-type1">
      <div class="content">
        <div class="title">
          <h2>精选非遗</h2>
        </div>

        <SimplePageContentLoader :loader="recommend2Data">
          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
            <NuxtLink 
              v-for="(item, index) in recommend2Data.content.value"
              :key="index"
              :to="{ path: '/details/intangible', query: { id: item.id } }"
            >
              <ImageTitleBlock 
                :image="item.thumbnail || item.image"
                :title="item.title"
                :desc="item.desc"
              />
            </NuxtLink>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 精选推荐文物 -->
    <section class="main-section main-background main-background-type1">
      <div class="content">
        <div class="title">
          <h2>文物古迹</h2>
        </div>

        <SimplePageContentLoader :loader="recommend1Data">
          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
            <NuxtLink 
              v-for="(item, index) in recommend1Data.content.value"
              :key="index"
              :to="{ path: '/details/artifact', query: { id: item.id } }"
            >
              <ImageTitleBlock 
                :image="item.thumbnail || item.image"
                :title="item.title"
                :desc="item.desc"
              />
            </NuxtLink>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 文旅推荐项目 -->
    <section class="main-section main-background main-background-type1">
      <div class="content">
        <div class="title">
          <h2>文旅推荐</h2>
        </div>

        <SimplePageContentLoader :loader="recommend3Data">
          <Carousel ref="carousel6Ref" v-bind="carousel2Config">
            <Slide 
              v-for="(item, index) in recommend3Data.content.value"
              :key="index"
            >
              <NuxtLink :to="{ path: '/news/detail', query: { id: item.id } }">
                <ImageTitleBlock 
                  :image="item.thumbnail || item.image"
                  :title="item.title"
                  :desc="item.desc"
                />
              </NuxtLink>
            </Slide>
          </Carousel>
        </SimplePageContentLoader>

        <div class="simple-carousel2-left-right">
          <div @click="carousel6Ref?.prev()">←</div>
          <div @click="carousel6Ref?.next()">→</div>
        </div>
      </div>
    </section>

    <!-- 最新资讯动态 -->
    <section class="main-section main-background main-background-type1">
      <div class="content">
        <div class="title left-right">
          <h2>最新资讯动态</h2>
          <div class="small-more">
            <NuxtLink :to="{ path: '/news' }">
              <span>更多动态信息</span>
              <img src="@/assets/images/index/ButtonMore.png" alt="更多" />
            </NuxtLink>
          </div>
        </div>

        <SimplePageContentLoader :loader="newsData">
          <div class="main-grid9 d-flex flex-row flex-wrap justify-content-between">
            <NuxtLink 
              v-for="(item, index) in newsData.content.value"
              :key="index"
              :to="{ path: '/news/detail', query: { id: item.id } }"
            >
              <ImageTitleBlock
                :image="item.thumbnail || item.image"
                :title="item.title"
                :desc="item.typeText"
              />
            </NuxtLink>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 介绍 -->
    <section class="main-introd main-section main-introd-bg">
      <div class="row h-100">
        <div class="col-lg-6 col-md-6 col-sm-12">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 p-5 d-flex flex-column justify-content-center">
          <h2>闽南文化生态保护区（厦门市）概况</h2>
          <p class="mt-4">
            <SimpleRemoveRichHtml :content="overviewData.content.value || ''" />
          </p>
          <div class="d-flex flex-row justify-content-end p-4">
            <NuxtLink class="simple-link" style="z-index:100" :to="{ path: '/about/' }">详情 →</NuxtLink>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { NO_CONTENT_STRING } from '@/common/ConstStrings';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import ImageTitleBlock from '@/components/parts/ImageTitleBlock.vue';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import IndexContent from '@/api/introduction/IndexContent';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import CommonContent, { GetColumListParams, GetContentListParams, type GetContentListItem } from '@/api/CommonContent';

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const carousel2Config = {
  itemsToShow: 'auto',
  mouseWheel: true,
  wrapAround: true
}
const carousel6Ref = ref<any>(null);

const bannerData = await useSSrSimpleDataLoader('banner', async () => {
  return (await IndexContent.getBanner()).map(p => p.toJSON());
});
const overviewData = await useSSrSimpleDataLoader('overview', async () => {
  return (await IndexContent.getColumList(new GetColumListParams().setSelfValues({
    modelId: 17,
    mainBodyColumnId: 234,
  }))).list[0]?.overview || NO_CONTENT_STRING
});
const recommend1Data = await useSSrSimpleDataLoader('recommend1', async () => {
  return (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 9)).list.map(p => p.toJSON());
});
const recommend2Data = await useSSrSimpleDataLoader('recommend2', async () => {
  return (await ProjectsContent.getContentList(new GetContentListParams().setMainBodyColumnId([]), 1, 9)).list.map(p => p.toJSON());
});
const recommend3Data = await useSSrSimpleDataLoader('recommend3', async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(273)
  , 1, 8)).list.map(p => p.toJSON());
});
const newsData = await useSSrSimpleDataLoader('news', async () => {
  return (await NewsIndexContent.getContentList(new GetContentListParams()
    .setMainBodyColumnId([ 228/* , 298, 299 */ ])
  , 1, 9)).list.map(p => p.toJSON());
});
const recordData = await useSSrSimpleDataLoader('record', async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setSelfValues({
      order: 'publish_at',
    })
   .setModelId(18)
   .setMainBodyColumnId(316)
  , 1, 50)).list.map(p => p.toJSON());
});
</script>

<style lang="scss">
@use "sass:list";
@use "sass:math";
@use '@/assets/scss/colors.scss' as *;

.main-introd {
  position: relative;
  height: 750px;
}
.main-introd-bg {
  background-image: url('@/assets/images/index/Introd.jpg');
  background-size: cover;
  background-position: center top;
}

.main-grid9 {
  gap: 10px;

  a {
    display: flex;
    max-width: 100%;
    flex: 1 1 31%;
  }
  .ImageTitleBlock {
    flex-basis: 100%;
    margin-right: 0;
  }
}

.main-time-line {

  $height: 500px;

  position: relative;
  height: $height;

  &::before {
    content: '';
    position: absolute;
    top: calc(50% + 30px);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: $primary-color;
  }
  .time-line-scroll {
    position: relative;
    margin-top: 32px;
    margin-bottom: 32px; 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: nowrap;
    height: $height;
    overflow: hidden;
  }

  .item {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    width: 25%;
    height: $height; 
    flex-shrink: 0;

    &.top {
      transform: translateY(math.div($height, -2));
  
      .time {
        &::before {
          content: '▲';
        }
      }
    }
    &.bottom {
      transform: translateY(math.div($height, 2) - 50px);
      flex-direction: column;

      .time {
        margin-bottom: 30px;

        &::before {
          content: '▼';
        }
      }
    }

    .time {
      position: relative;
      margin: 15px 0;
      color: $primary-color;

      &::before {
        position: absolute;
        font-size: 2rem;
        top: calc(50% - 1rem + 15px);
        left: calc(50% - 1rem);
      }
    }
    .box {
      background-color: $box-color;
      padding: 10px;
      border-radius: 5px;

      .title {
        font-size: 1.1rem;
        color: $text-content-color;
        margin-bottom: 8px;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .content {
        font-size: 0.8rem;
        color: $text-content-color;
      }
    }
  }
}

@media (max-width: 750px) {
  .main-grid9 {
    .ImageTitleBlock {
      flex-basis: calc(50% - 10px);
    }
  }
  .main-time-line {
    .item {
      width: 50%;
    }
  }
}
@media (max-width: 425px) {
  .main-grid9 {
    .ImageTitleBlock {
      flex-basis: 100%;
    }
  }
  .main-introd-bg {
    .a {
      display: none;
    }
    .b {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -2;
    }
  }
  .main-time-line {
    .item {
      width: 100%;
    }
  }
}
</style>