|
@@ -29,17 +29,99 @@
|
|
|
</template>
|
|
</template>
|
|
|
</Carousel>
|
|
</Carousel>
|
|
|
|
|
|
|
|
|
|
+ <h2 class="text-center banner-title">
|
|
|
|
|
+ </h2>
|
|
|
|
|
+
|
|
|
<!-- 主要内容 -->
|
|
<!-- 主要内容 -->
|
|
|
<div class="main-content">
|
|
<div class="main-content">
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
- <!-- 通知公告和热点新闻 -->
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 学习强国 -->
|
|
|
<div class="row">
|
|
<div class="row">
|
|
|
|
|
+ <div class="col col-12">
|
|
|
|
|
+
|
|
|
|
|
+ <Carousel v-bind="carouselConfig2" class="main-box p-0">
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://www.12371.cn/special/xxzd/" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/7.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://cpc.people.com.cn/GB/67481/448544/index.html" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/1.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://wlj.xm.gov.cn/ztzl/dsxxjy/" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/2.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://wlj.xm.gov.cn/ztzl/ggcx/" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/8.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://wlj.xm.gov.cn/ztzl/ggcx/" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/3.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <!-- <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="https://liuyan.www.gov.cn/2021wxzlsjh/bmdf.html?q=fj" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/4.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="https://wlj.xm.gov.cn/ztzl/202003/t20200326_2434593.htm" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/5.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide>
|
|
|
|
|
+ <Slide class="d-flex flex-row w-100">
|
|
|
|
|
+ <a href="http://xm.zwfw.fujian.gov.cn/person-todo/detail?userType=3&curStatus=dept&deptId=A8E0954E119F2E6342C87F48AC54EE31&bsfwCount=93&xzjgCount=609" target="_blank">
|
|
|
|
|
+ <img src="@/assets/images/bars/6.jpg" class="bars-image" />
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </Slide> -->
|
|
|
|
|
+ <template #addons>
|
|
|
|
|
+ <Navigation />
|
|
|
|
|
+ <Pagination />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </Carousel>
|
|
|
|
|
|
|
|
- <div class="col col-sm-12 col-md-6 col-lg-6 notices-list">
|
|
|
|
|
- <div class="section-title">
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 通知公告和热点新闻 -->
|
|
|
|
|
+ <div class="row mt-3">
|
|
|
|
|
+
|
|
|
|
|
+ <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>
|
|
|
|
|
+
|
|
|
|
|
+ <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">
|
|
<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="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> -->
|
|
|
|
|
|
|
+ <h2 id="hot-news-button" @click="currentTab = 'hot'" :class="{'active': currentTab === 'hot'}" class="button icon">热点新闻</h2>
|
|
|
</div>
|
|
</div>
|
|
|
<router-link :to="currentTab === 'notices' ?
|
|
<router-link :to="currentTab === 'notices' ?
|
|
|
`/channel/${notices.content.value?.channel_id}` :
|
|
`/channel/${notices.content.value?.channel_id}` :
|
|
@@ -47,68 +129,72 @@
|
|
|
class="section-more">
|
|
class="section-more">
|
|
|
查看更多 <Icon name="material-symbols-light:chevron-right" />
|
|
查看更多 <Icon name="material-symbols-light:chevron-right" />
|
|
|
</router-link>
|
|
</router-link>
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div v-if="currentTab === 'notices'" id="notices-list" class="notices-content">
|
|
|
|
|
|
|
+ </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">
|
|
<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 v-for="notice in notices.content.value?.items" :key="notice.id" class="notice-item">
|
|
|
<div>
|
|
<div>
|
|
|
- <router-link :to="'/page/' + notice.id" class="notice-title">{{ notice.title }}</router-link>
|
|
|
|
|
|
|
+ <PageLink :article="notice" class="notice-title" />
|
|
|
<p>{{ notice.description }}</p>
|
|
<p>{{ notice.description }}</p>
|
|
|
</div>
|
|
</div>
|
|
|
<span class="notice-publishtime">{{ DataDateUtils.formatDate(new Date((notice.createtime || notice.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
|
|
<span class="notice-publishtime">{{ DataDateUtils.formatDate(new Date((notice.createtime || notice.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</SimplePageContentLoader>
|
|
</SimplePageContentLoader>
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-if="currentTab === 'hot'" id="hot-news-list" class="news-content">
|
|
|
|
|
|
|
+ <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">
|
|
<SimplePageContentLoader :loader="hot" :showEmpty="!hot.content.value?.items?.length">
|
|
|
<div v-for="item in hot.content.value?.items" :key="item.id" class="news-item">
|
|
<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>
|
|
|
|
|
|
|
+ <PageLink :article="item" class="title" />
|
|
|
<span class="publishtime">{{ DataDateUtils.formatDate(new Date((item.createtime ||item.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
|
|
<span class="publishtime">{{ DataDateUtils.formatDate(new Date((item.createtime ||item.publishtime) * 1000), 'yyyy-MM-dd') }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</SimplePageContentLoader>
|
|
</SimplePageContentLoader>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+
|
|
|
|
|
+ <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">
|
|
|
|
|
+ <PageLink :article="uppublishtime" class="title" />
|
|
|
|
|
+ <span class="publishtime">{{ DataDateUtils.formatDate(new Date(uppublishtime.publishtime * 1000), 'yyyy-MM-dd') }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </SimplePageContentLoader>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="col col-sm-12 col-md-6 col-lg-6">
|
|
|
|
|
|
|
+ <!-- 工作动态和党建工作 -->
|
|
|
|
|
+ <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">
|
|
<Carousel v-bind="carouselConfig">
|
|
|
<Slide
|
|
<Slide
|
|
|
- v-for="(item, key) in recommendArticles.content.value"
|
|
|
|
|
|
|
+ v-for="(item, key) in carousel2Data.content.value"
|
|
|
:key="key"
|
|
:key="key"
|
|
|
class="featured-image bg-secondary"
|
|
class="featured-image bg-secondary"
|
|
|
:style="{ 'background-image': `url(${item.image})`, 'background-size': 'cover' }"
|
|
: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>
|
|
|
|
|
|
|
+ <img
|
|
|
|
|
+ :src="item.image" style="width: 100%; height: 100%; object-fit: contain;"
|
|
|
|
|
+ @click="handleImageClick(item)"
|
|
|
|
|
+ >
|
|
|
</Slide>
|
|
</Slide>
|
|
|
<template #addons>
|
|
<template #addons>
|
|
|
<Navigation />
|
|
<Navigation />
|
|
|
<Pagination />
|
|
<Pagination />
|
|
|
</template>
|
|
</template>
|
|
|
</Carousel>
|
|
</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>
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 工作动态和党建工作 -->
|
|
|
|
|
- <div class="row mt-lg-3 mt-md-2 mt-sm-2">
|
|
|
|
|
-
|
|
|
|
|
- <div class="col col-sm-12 col-md-8 col-lg-9">
|
|
|
|
|
|
|
+ <div class="col col-sm-12 col-md-8 col-lg-9 d-flex flex-column">
|
|
|
<!-- 工作动态 -->
|
|
<!-- 工作动态 -->
|
|
|
- <div class="main-box">
|
|
|
|
|
|
|
+ <!-- <div class="main-box">
|
|
|
<div class="section-title">
|
|
<div class="section-title">
|
|
|
<h2>
|
|
<h2>
|
|
|
<Icon name="material-symbols-light:flag" />
|
|
<Icon name="material-symbols-light:flag" />
|
|
@@ -124,9 +210,9 @@
|
|
|
</div>
|
|
</div>
|
|
|
</SimplePageContentLoader>
|
|
</SimplePageContentLoader>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div> -->
|
|
|
<!-- 党建工作 -->
|
|
<!-- 党建工作 -->
|
|
|
- <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
|
|
|
|
|
|
|
+ <!-- <div class="main-box mt-lg-3 mt-md-2 mt-sm-2">
|
|
|
<div class="section-title">
|
|
<div class="section-title">
|
|
|
<h2>
|
|
<h2>
|
|
|
<Icon name="famicons:logo-designernews" />
|
|
<Icon name="famicons:logo-designernews" />
|
|
@@ -137,12 +223,40 @@
|
|
|
<div class="news-content">
|
|
<div class="news-content">
|
|
|
<SimplePageContentLoader :loader="workUppublishtimes" :showEmpty="!workUppublishtimes.content.value?.items?.length">
|
|
<SimplePageContentLoader :loader="workUppublishtimes" :showEmpty="!workUppublishtimes.content.value?.items?.length">
|
|
|
<div v-for="uppublishtime in workUppublishtimes.content.value?.items" :key="uppublishtime.id" class="news-item">
|
|
<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>
|
|
|
|
|
|
|
+ <PageLink :article="uppublishtime" class="title" />
|
|
|
<span class="publishtime">{{ DataDateUtils.formatDate(new Date(uppublishtime.publishtime * 1000), 'yyyy-MM-dd') }}</span>
|
|
<span class="publishtime">{{ DataDateUtils.formatDate(new Date(uppublishtime.publishtime * 1000), 'yyyy-MM-dd') }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</SimplePageContentLoader>
|
|
</SimplePageContentLoader>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 通知公告 -->
|
|
|
|
|
+ <div class="main-box flex-fill">
|
|
|
|
|
+ <div class="section-title">
|
|
|
|
|
+ <h2>
|
|
|
|
|
+ <Icon name="famicons:logo-designernews" />
|
|
|
|
|
+ 通知公告
|
|
|
|
|
+ </h2>
|
|
|
|
|
+ <router-link :to="`/channel/${notices.content.value?.channel_id}`" class="section-more">查看更多 <Icon name="material-symbols-light:chevron-right" /></router-link>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div 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>
|
|
|
|
|
+ <PageLink :article="notice" class="notice-title" />
|
|
|
|
|
+ <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>
|
|
</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="main-box mt-lg-3 mt-md-2 mt-sm-2">
|
|
|
<div class="section-title">
|
|
<div class="section-title">
|
|
@@ -161,31 +275,6 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <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>
|
|
</div>
|
|
|
|
|
|
|
|
<hr class="main-hr" />
|
|
<hr class="main-hr" />
|
|
@@ -198,51 +287,77 @@
|
|
|
<div class="service-card" @click="handleServiceClick('volunteer')">
|
|
<div class="service-card" @click="handleServiceClick('volunteer')">
|
|
|
<img class="icon" src="@/assets/images/icon-explore.png">
|
|
<img class="icon" src="@/assets/images/icon-explore.png">
|
|
|
<h3>志愿者招募</h3>
|
|
<h3>志愿者招募</h3>
|
|
|
- <a href="#" class="service-link">
|
|
|
|
|
|
|
+ <div class="service-link">
|
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
|
- </a>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="service-card" @click="handleServiceClick('activity')">
|
|
<div class="service-card" @click="handleServiceClick('activity')">
|
|
|
<img class="icon" src="@/assets/images/icon-join.png">
|
|
<img class="icon" src="@/assets/images/icon-join.png">
|
|
|
<h3>活动报名</h3>
|
|
<h3>活动报名</h3>
|
|
|
- <a href="#" class="service-link">
|
|
|
|
|
|
|
+ <div class="service-link">
|
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
|
- </a>
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <div class="service-card" @click="handleServiceClick('contact')">
|
|
|
|
|
|
|
+ <div class="service-card" @click="router.push('/about/')">
|
|
|
<img class="icon" src="@/assets/images/icon-contract.png">
|
|
<img class="icon" src="@/assets/images/icon-contract.png">
|
|
|
<h3>联系咨询通道</h3>
|
|
<h3>联系咨询通道</h3>
|
|
|
- <a href="#" class="service-link">
|
|
|
|
|
|
|
+ <RouterLink to="/about/" class="service-link">
|
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
<Icon name="material-symbols-light:chevron-right" />
|
|
|
- </a>
|
|
|
|
|
|
|
+ </RouterLink>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 友情链接 -->
|
|
|
|
|
+ <LinkInfos showType="list" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 扫码进入小程序对话框 -->
|
|
|
|
|
+ <AModal
|
|
|
|
|
+ v-model:open="qrModalVisible"
|
|
|
|
|
+ :title="qrModalTitle"
|
|
|
|
|
+ :footer="null"
|
|
|
|
|
+ centered
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="qr-modal-content">
|
|
|
|
|
+ <p class="qr-modal-tip">请扫码进入小程序</p>
|
|
|
|
|
+ <img v-if="qrImageSrc" :src="qrImageSrc" alt="小程序二维码" class="qr-modal-img">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </AModal>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
|
|
|
-import { ref } from 'vue';
|
|
|
|
|
|
|
+import { ref, computed } from 'vue';
|
|
|
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
|
|
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
|
|
|
import { DataDateUtils } from '@imengyu/js-request-transform';
|
|
import { DataDateUtils } from '@imengyu/js-request-transform';
|
|
|
import { MemoryTimeOut } from '@imengyu/imengyu-utils';
|
|
import { MemoryTimeOut } from '@imengyu/imengyu-utils';
|
|
|
|
|
+import volunteerQr from '@/assets/images/qr1/volunteer.png';
|
|
|
|
|
+import activityQr from '@/assets/images/qr1/activity.png';
|
|
|
import CarouselItem1 from '@/assets/images/board1/1.jpg';
|
|
import CarouselItem1 from '@/assets/images/board1/1.jpg';
|
|
|
import CarouselItem2 from '@/assets/images/board1/2.jpg';
|
|
import CarouselItem2 from '@/assets/images/board1/2.jpg';
|
|
|
import CarouselItem3 from '@/assets/images/board1/3.jpg';
|
|
import CarouselItem3 from '@/assets/images/board1/3.jpg';
|
|
|
import CarouselItem4 from '@/assets/images/board1/4.jpg';
|
|
import CarouselItem4 from '@/assets/images/board1/4.jpg';
|
|
|
import CarouselItem5 from '@/assets/images/board1/5.jpg';
|
|
import CarouselItem5 from '@/assets/images/board1/5.jpg';
|
|
|
import type { ICarousel } from '~~/server/api/ecms/carousel';
|
|
import type { ICarousel } from '~~/server/api/ecms/carousel';
|
|
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
|
|
|
|
|
|
|
+const router = useRouter();
|
|
|
const carouselConfig = {
|
|
const carouselConfig = {
|
|
|
itemsToShow: 1,
|
|
itemsToShow: 1,
|
|
|
wrapAround: true,
|
|
wrapAround: true,
|
|
|
autoplay: 5000,
|
|
autoplay: 5000,
|
|
|
}
|
|
}
|
|
|
|
|
+const carouselConfig2 = {
|
|
|
|
|
+ itemsToShow: 1,
|
|
|
|
|
+ wrapAround: true,
|
|
|
|
|
+ autoplay: 5000,
|
|
|
|
|
+ mouseDrag: false,
|
|
|
|
|
+} as typeof Carousel['props'];
|
|
|
const carouselData = await useSSrSimpleDataLoader('carousel', async () => {
|
|
const carouselData = await useSSrSimpleDataLoader('carousel', async () => {
|
|
|
const res = await $fetch(`/api/ecms/carousel?name=banner`);
|
|
const res = await $fetch(`/api/ecms/carousel?name=banner`);
|
|
|
if (!res.status)
|
|
if (!res.status)
|
|
@@ -272,7 +387,7 @@ const notices = await useSSrSimpleDataLoader('notices', async () => {
|
|
|
});
|
|
});
|
|
|
// 工作动态数据
|
|
// 工作动态数据
|
|
|
const workUppublishtimes = await useSSrSimpleDataLoader('workUppublishtimes', async () => {
|
|
const workUppublishtimes = await useSSrSimpleDataLoader('workUppublishtimes', async () => {
|
|
|
- const res = await $fetch(`/api/ecms/article/byChannelName?channelName=工作动态`);
|
|
|
|
|
|
|
+ const res = await $fetch(`/api/ecms/article/byChannelName?channelName=工作动态&bannedChannels=新闻公告`);
|
|
|
if (!res.status)
|
|
if (!res.status)
|
|
|
throw new Error(res.message);
|
|
throw new Error(res.message);
|
|
|
return res.data;
|
|
return res.data;
|
|
@@ -293,39 +408,84 @@ const hot = await useSSrSimpleDataLoader('hot', async () => {
|
|
|
});
|
|
});
|
|
|
// 精彩推荐数据
|
|
// 精彩推荐数据
|
|
|
const featured = await useSSrSimpleDataLoader('featured', async () => {
|
|
const featured = await useSSrSimpleDataLoader('featured', async () => {
|
|
|
- const res = await $fetch(`/api/ecms/article/byChannelName?channelName=鹭岛文脉&pageSize=9`);
|
|
|
|
|
|
|
+ const res = await $fetch(`/api/ecms/article/byChannelName?channelName=非遗流韵,文保家园&pageSize=12`);
|
|
|
if (!res.status)
|
|
if (!res.status)
|
|
|
throw new Error(res.message);
|
|
throw new Error(res.message);
|
|
|
return res.data;
|
|
return res.data;
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+const qrModalVisible = ref(false);
|
|
|
|
|
+const qrModalType = ref<'volunteer' | 'activity'>('volunteer');
|
|
|
|
|
+const qrModalTitle = computed(() => qrModalType.value === 'volunteer' ? '志愿者招募' : '活动报名');
|
|
|
|
|
+const qrImageSrc = computed(() => qrModalType.value === 'volunteer' ? volunteerQr : activityQr);
|
|
|
|
|
+
|
|
|
function handleImageClick(image: ICarousel) {
|
|
function handleImageClick(image: ICarousel) {
|
|
|
window.open(image.url || image.image, '_blank');
|
|
window.open(image.url || image.image, '_blank');
|
|
|
}
|
|
}
|
|
|
-function handleServiceClick(service: string) {
|
|
|
|
|
- Modal.info({
|
|
|
|
|
- title: '提示',
|
|
|
|
|
- content: '网站正在进行内部测试,暂未对外开放功能,敬请期待。',
|
|
|
|
|
- });
|
|
|
|
|
|
|
+function handleServiceClick(service: 'volunteer' | 'activity') {
|
|
|
|
|
+ qrModalType.value = service;
|
|
|
|
|
+ qrModalVisible.value = true;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-const tipCounter = new MemoryTimeOut('devtip', 1000 * 3600);
|
|
|
|
|
-
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- if (tipCounter.isTimeout()) {
|
|
|
|
|
- tipCounter.recordTime();
|
|
|
|
|
|
|
+ if (new Date().getTime() < new Date('2026-04-22 04:00:00').getTime())
|
|
|
Modal.info({
|
|
Modal.info({
|
|
|
title: '提示',
|
|
title: '提示',
|
|
|
content: '网站正在进行内部测试,暂未对外开放。',
|
|
content: '网站正在进行内部测试,暂未对外开放。',
|
|
|
})
|
|
})
|
|
|
- }
|
|
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style lang="scss">
|
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
@use "sass:list";
|
|
@use "sass:list";
|
|
|
@use "sass:math";
|
|
@use "sass:math";
|
|
|
|
|
+
|
|
|
|
|
+.banner-title {
|
|
|
|
|
+
|
|
|
|
|
+ $height: 65px;
|
|
|
|
|
+
|
|
|
|
|
+ font-family: "STSongtiSC", "Microsoft YaHei", sans-serif;
|
|
|
|
|
+ font-size: $height;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ letter-spacing: 10px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
|
|
+ margin-top: 35px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 80px;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ min-height: $height;
|
|
|
|
|
+ background-image: url('@/assets/images/index-title.png');
|
|
|
|
|
+ background-size: auto $height;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-position: center center;
|
|
|
|
|
+}
|
|
|
|
|
+.bars-image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 130px;
|
|
|
|
|
+ object-fit: contain;
|
|
|
|
|
+}
|
|
|
|
|
+.qr-modal-content {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 8px 0;
|
|
|
|
|
+ .qr-modal-tip {
|
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .qr-modal-img {
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ width: 240px;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|