minnan-website/src/views/HomeView.vue

<template>
  <!-- 首页 -->
  <div class="main-background">
    <!-- 轮播 -->
    <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>

        <SimplePageContentLoader :loader="statsData">
          <div class="d-flex row">
            <div 
              class="col-12 col-md-6 col-lg-4 col-xl-4" 
              v-for="(stat,key) in statsData.content.value" 
              :key="key"
            >
              <div :class="`main-card-box type${stat.type}`">
                <div class="content">
                  <h4>{{ stat.title || '\u200b' }}</h4>
                  <div class="descs">
                    <div 
                      v-for="(data, key2) in stat.datas"
                      :key="key2"
                      @click="data.onClick"
                    >
                      <h5>{{ data.title }}</h5>
                      <p>{{ data.value }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </SimplePageContentLoader>
      </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">
            <ImageTitleBlock 
              v-for="(item, index) in recommend2Data.content.value"
              :key="index"
              :image="item.image"
              :title="item.title"
              :desc="item.desc"
              @click="router.push({ name: 'intangible-detail', query: { id: item.id } })"
            />
          </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">
            <ImageTitleBlock 
              v-for="(item, index) in recommend1Data.content.value"
              :key="index"
              :image="item.image"
              :title="item.title"
              :desc="item.desc"
              @click="router.push({ name: 'artifact-detail', query: { id: item.id } })"
            />
          </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"
              @click="router.push({ name: 'news-detail', query: { id: item.id } })"
            >
              <ImageTitleBlock 
                :image="item.image"
                :title="item.title"
                :desc="item.desc"
              />
            </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" @click="router.push({ name: 'news' })">
            <span>更多动态信息</span>
            <img src="@/assets/images/index/ButtonMore.png" alt="更多" />
          </div>
        </div>

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

    <!-- 介绍 -->
    <section class="main-introd main-section">
      <div class="main-introd-bg">
        <img class="a" src="@/assets/images/index/IntrodLeft.png" />
        <img class="b" src="@/assets/images/index/IntrodRight.png" />
      </div>
      <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>
      </div>
    </section>

  </div>
</template>

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

const router = useRouter();

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



const bannerData = useSimpleDataLoader(async () => {
  return await IndexContent.getBanner()
});
const overviewData = useSimpleDataLoader(async () => {
  return (await IndexContent.getColumList(new GetColumListParams().setSelfValues({
    modelId: 17,
    mainBodyColumnId: 234,
  }))).list[0]?.overview || NO_CONTENT_STRING
});
const recommend1Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 9)).list;
});
const recommend2Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await ProjectsContent.getContentList(new GetContentListParams().setMainBodyColumnId([]), 1, 9)).list
});
const recommend3Data = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(273)
  , 1, 8)).list
});
const newsData = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await NewsIndexContent.getContentList(new GetContentListParams()
    .setMainBodyColumnId([ 228/* , 298, 299 */ ])
  , 1, 9)).list
});
const statsData = useSimpleDataLoader(async () => {
  const data = (await IndexContent.getStats());
  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 1)).total;
  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 1)).total;
  
  return [
    {
      title: '非遗代表性项目',
      type: '1',
      datas: data.ichData.filter((p: any) => [ '人类非遗', '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
        return {
          title: item.level_text,
          value: item.total,
          onClick: () => {
            router.push({ path: '/inheritor/projects', query: { level: item.level } });
          },
        }
      })
    },
    {
      title: '非遗代表性传承人',
      type: '2',
      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
        return {
          title: item.title,
          value: item.total,
          onClick: () => {
            router.push({ path: '/inheritor/inheritor', query: { level: item.level } });
          },
        }
      })
    },
    {
      title: '其他传承项目',
      type: '1',
      datas: [
        {
          title: '传习所',
          value: semiCount,
          onClick: () => router.push({ path: '/inheritor/seminar' }),
        },
        {
          title: '传统村落',
          value: data.villageData[0].total,
          onClick: () => router.push({ path: '/village/index' }),
        },
        {
          title: '文物古迹',
          value: unmoveableCount,
          onClick: () => router.push({ path: '/inheritor/unmoveable' }),
        },
      ],
    },
    /*{
      title: '不可移动文物',
      type: '3',
      datas: data.crData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '闽南文化重要相关文物古迹',
      type: '2',
      datas: data.minnanCr.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '重要相关历史风貌区',
      type: '1',
      datas: data.historyData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '传习中心',
      type: '3',
      datas: data.ichCenter.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },*/
  ];
});
const recordData = useSimpleDataLoader<GetContentListItem[]>(async () => {
  return (await CommonContent.getContentList(new GetContentListParams()
    .setSelfValues({
      order: 'publish_at',
    })
   .setModelId(18)
   .setMainBodyColumnId(316)
  , 1, 50)).list
});
</script>

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

.main-card-box {
  position: relative;
  min-height: 330px;
  color: #fff;
  margin-right: 24px;
  overflow: hidden;
  //transform: translateX(-50%);

  .content {
    position: absolute;
    inset: 24px;
    z-index: 10;
    display: flex;
    flex-direction: column;

    h4 {
      font-family: SourceHanSerifCNBold;
      font-size: 1.5rem;
      margin: 0;
      margin-bottom: 32px;
    }
    .descs {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      div {
        flex: 1 1 50%;
        margin-bottom: 32px;
        cursor: pointer;

        h5 {
          font-size: 1rem;
          font-weight: normal;
          margin: 0;
        }
        p {
          font-family: Impact;
          font-weight: normal;
          font-size: 2.8rem;
          margin: 0;
        }
      }
    }
  }

  $background-types: (
    type1: (url('@/assets/images/index/BoxPrinting2.png'), url('@/assets/images/index/Box3.png')),
    type2: (url('@/assets/images/index/BoxPrinting1.png'), url('@/assets/images/index/Box1.png')),
    type3: (url('@/assets/images/index/BoxPrinting4.png'), url('@/assets/images/index/Box2.png'))
  );

  @each $typeName, $type in $background-types {
    &.#{$typeName} {
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: list.nth($type, 2);
        z-index: 0;
      }
      &::before {
        content: '';
        position: absolute;
        bottom: -10px;
        right: -10px;
        width: 180px;
        height: 180px;
        background-size: 180px;
        background-image: list.nth($type, 1);
        z-index: 1;
      }
    }
  }

  &.type3 .descs div {
    flex-basis: 33%;
    margin-bottom: 22px;
  }
}
.main-introd {
  position: relative;
  height: 750px;
}
.main-introd-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;

  .a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
  }
  .b {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: -2;
  }
}

.main-grid9 {
  .ImageTitleBlock {
    flex-basis: 33%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

.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-time-line {
    .item {
      width: 100%;
    }
  }
  .main-card-box {
    width: auto;
    transform: translateX(20px);
  }
}
</style>