🎨 文旅探世界页面

src/api/fusion/CalendarContent.ts

@@ -15,6 +15,7 @@ export class CalendarListItem extends GetContentListItem {
       this.dateObj = date;
       this.dateYear = date.getFullYear();
       this.dateMonth = date.getMonth() + 1;
+      this.dateDay = date.getDate();
     }
   }
   date = '';
@@ -22,6 +23,7 @@ export class CalendarListItem extends GetContentListItem {
   dateObj = new Date();
   dateYear = 0;
   dateMonth = 0;
+  dateDay = 0;
 }
 
 export class CalendarContentApi extends CommonContentApi {

src/components/display/TextEllipsis.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, popScopeId, ref } from 'vue';
+import { computed, ref } from 'vue';
 import type { TextProps } from '../basic/Text.vue';
 import Text from '../basic/Text.vue';
 import FlexCol from '../layout/FlexCol.vue';

src/pages.json

@@ -41,6 +41,18 @@
       }
     },
     {
+      "path": "pages/introduction/inhert",
+      "style": {
+        "navigationBarTitleText": "保护传承"
+      }
+    },
+    {
+      "path": "pages/introduction/travel",
+      "style": {
+        "navigationBarTitleText": "文旅探世界"
+      }
+    },
+    {
       "path": "pages/introduction/character/list",
       "style": {
         "navigationBarTitleText": "历史人物列表",
@@ -75,7 +87,7 @@
       }
     },
     {
-      "path": "pages/travel/calendar",
+      "path": "pages/travel/calendar/index",
       "style": {
         "navigationBarTitleText": "节庆日历",
         "navigationStyle": "custom"

src/pages/home.vue

@@ -43,17 +43,17 @@
           <HomeButton
             title="保护与传承"
             icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconIch.png"
-            @click="handleGoTab('/pages/inhert')"
+            @click="navTo('/pages/introduction/inhert')"
           />
           <HomeButton
             title="闽南走透透"
             icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconArtifact.png"
-            @click="handleGoTab('/pages/travel')"
+            @click="navTo('/pages/introduction/travel')"
           />
           <HomeButton
             title="文旅探世界"
             icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconDiscover.png"
-            @click="handleGoTab('/pages/travel')"
+            @click="navTo('/pages/introduction/travel')"
           />
         </view>
 

src/pages/inhert.vue

@@ -301,7 +301,6 @@ const inheritorData = useSimpleDataLoader(async () =>
     ] as string[],
   }))
 );
-
 const productsData = useSimpleDataLoader(async () => 
   (await ProductsContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
     id: p.id,
@@ -325,8 +324,6 @@ const villageData = useSimpleDataLoader(async () =>   {
   }))
 });
 
-
-
 const indexAudioPlayer = useSimpleListAudioPlayer(async () => {
   return (await CommonContent.getContentList(new GetContentListParams()
     .setModelId(5)

src/pages/introduction/inhert.vue

@@ -0,0 +1,228 @@
+<template>
+  <FlexCol :padding="30" backgroundColor="background.page">
+    
+    <!-- 非遗项目 -->
+    <HomeTitle title="非遗项目" showMore @clickMore="navTo('/pages/inhert/intangible/list')" />
+    <SimplePageContentLoader :loader="intangibleData" >
+      <scroll-view scroll-x>
+        <FlexRow>
+          <Box2LineLargeImageUserShadow
+            v-for="(item, i) in intangibleData.content.value"
+            classNames="width-2-3 mr-2"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            :tags="item.bottomTags"
+            @click="navTo('/pages/inhert/intangible/details', { id: item.id })"
+          />
+        </FlexRow>
+      </scroll-view>
+    </SimplePageContentLoader>
+    
+    <!-- 非遗传承人 -->
+    <HomeTitle title="非遗传承人" showMore @clickMore="navTo('/pages/inhert/inheritor/list')" />
+    <SimplePageContentLoader :loader="inheritorData">
+      <scroll-view scroll-x>
+        <FlexCol>
+          <Box2LineImageRightShadow
+            v-for="(item, i) in inheritorData.content.value"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            :tags="item.bottomTags"
+            @click="navTo('/pages/inhert/inheritor/details', { id: item.id })"
+          />
+        </FlexCol>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 保护单位 -->
+    <HomeTitle title="保护单位" showMore @clickMore="navTo('/pages/inhert/unit/list')" />
+    <SimplePageContentLoader :loader="unitData">
+      <scroll-view scroll-x>
+        <FlexCol>
+          <Box2LineImageRightShadow
+            v-for="(item, i) in unitData.content.value"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            :tags="item.bottomTags"
+            @click="navTo('inhert/intangible/details', { id: item.id })"
+          />
+        </FlexCol>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 非遗传习所 -->
+    <HomeTitle title="非遗传习所" showMore @clickMore="navHomePageMiniCommonListGo({
+      title: '非遗传习所',
+      modelId: SeminarContent.modelId,
+      mainBodyColumnId: SeminarContent.mainBodyColumnId,
+      detailsPage: '/pages/inhert/seminar/details',
+    })" />
+    <SimplePageContentLoader :loader="seminarData">
+      <scroll-view scroll-x>
+        <FlexCol overflow="visible">
+          <Box2LineImageRightShadow
+            v-for="(item, i) in seminarData.content.value"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            :tags="item.bottomTags"
+            @click="navTo('inhert/seminar/details', { id: item.id })"
+          />
+        </FlexCol>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 非遗活动 -->
+    <HomeTitle title="非遗活动" showMore @clickMore="goActivityList" />
+    <SimplePageContentLoader :loader="activityData">
+      <scroll-view scroll-x>
+        <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
+          <Box2LineLargeImageUserShadow
+            v-for="(item, i) in activityData.content.value"
+            titleColor="title-text"
+            width="calc(50% - 10rpx)"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            @click="goActivityDetail(item.id)"
+          />
+        </FlexRow>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 重点区域 -->
+    <HomeTitle title="重点区域" showMore @clickMore="goAreaList" />
+    <SimplePageContentLoader :loader="areaData">
+      <scroll-view scroll-x>
+        <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
+          <Box2LineLargeImageUserShadow
+            v-for="(item, i) in areaData.content.value"
+            titleColor="title-text"
+            width="calc(50% - 10rpx)"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            @click="goActivityDetail(item.id)"
+          />
+        </FlexRow>
+      </scroll-view>
+    </SimplePageContentLoader>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import { navTo } from '@/components/utils/PageAction';
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import { GetContentListParams } from '@/api/CommonContent';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import HomeTitle from '../parts/HomeTitle.vue';
+import Box2LineLargeImageUserShadow from '../parts/Box2LineLargeImageUserShadow.vue';
+import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
+import InheritorContent from '@/api/inheritor/InheritorContent';
+import ProjectsContent from '@/api/inheritor/ProjectsContent';
+import UnitContent from '@/api/inheritor/UnitContent';
+import SeminarContent from '@/api/inheritor/SeminarContent';
+import { navHomePageMiniCommonListGo, useHomePageMiniCommonListGoMoreAndGoDetail } from '../article/common/CommonContent';
+import FlexRow from '@/components/layout/FlexRow.vue';
+
+const intangibleData = useSimpleDataLoader(async () => 
+  (await ProjectsContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+const inheritorData = useSimpleDataLoader(async () => 
+  (await InheritorContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    titleBox: Boolean(p.deathBirth),
+    bottomTags: [
+      p.levelText, 
+      p.nation,
+      p.ichName
+    ] as string[],
+  }))
+);
+const unitData = useSimpleDataLoader(async () => 
+  (await UnitContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+const seminarData = useSimpleDataLoader(async () => 
+  (await SeminarContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+
+const {
+  loader: activityData,
+  goList: goActivityList,
+  goDetail: goActivityDetail,
+} = useHomePageMiniCommonListGoMoreAndGoDetail({
+  title: '非遗活动',
+  mainBodyColumnId: 290,
+  modelId: 18,
+  itemType: 'article-common',
+  detailsPage: '/pages/article/details',
+});
+
+const {
+  loader: areaData,
+  goList: goAreaList,
+  goDetail: goAreaDetail,
+} = useHomePageMiniCommonListGoMoreAndGoDetail({
+  title: '重点区域',
+  mainBodyColumnId: 283,
+  modelId: 17,
+  itemType: 'article-common',
+  detailsPage: '/pages/article/details',
+});
+</script>

src/pages/introduction/travel.vue

@@ -0,0 +1,178 @@
+<template>
+  <FlexCol :padding="30" backgroundColor="background.page">
+    
+    <!-- 闽南节庆日历 -->
+    <HomeTitle title="闽南节庆日历" showMore @clickMore="navTo('/pages/travel/calendar/index')" />
+    <CalendarBlock />
+
+    <!-- 闽南文化景区、景点 -->
+    <HomeTitle title="闽南文化景区、景点" showMore @clickMore="navTo('/pages/travel/scenic-spot/list')" />
+    <SimplePageContentLoader :loader="spotData">
+      <scroll-view scroll-x>
+        <FlexCol>
+          <Box2LineImageRightShadow
+            v-for="(item, i) in spotData.content.value"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.image"
+            :tags="item.bottomTags"
+            @click="navTo('inhert/intangible/details', { id: item.id })"
+          />
+        </FlexCol>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 文化旅游路线 -->
+    <HomeTitle title="文化旅游路线" showMore @clickMore="goRouteList" />
+    <SimplePageContentLoader :loader="routeData">
+      <scroll-view scroll-x>
+        <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
+          <Box2LineLargeImageUserShadow
+            v-for="(item, i) in routeData.content.value"
+            classNames="width-2-3 mr-2"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :desc="item.desc"
+            :image="item.thumbnail || item.image"
+            @click="goRouteDetail(item.id)"
+          />
+        </view>
+      </scroll-view>
+    </SimplePageContentLoader>
+
+    <!-- 文化产品 -->
+    <HomeTitle title="文化产品" showMore @clickMore="goCreativeList" />
+    <SimplePageContentLoader :loader="creativeData">
+      <scroll-view scroll-x>
+        <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
+          <Box2LineLargeImageUserShadow
+            v-for="(item, i) in creativeData.content.value"
+            classNames="width-2-3 mr-2"
+            titleColor="title-text"
+            fixSize
+            :key="i"
+            :title="item.title"
+            :image="item.thumbnail || item.image"
+            @click="goCreativeDetail(item.id)"
+          />
+        </view>
+      </scroll-view>
+    </SimplePageContentLoader>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import { navTo } from '@/components/utils/PageAction';
+import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
+import { useHomePageMiniCommonListGoMoreAndGoDetail } from '../article/common/CommonContent';
+import { GetContentListParams } from '@/api/CommonContent';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import HomeTitle from '../parts/HomeTitle.vue';
+import Box2LineLargeImageUserShadow from '../parts/Box2LineLargeImageUserShadow.vue';
+import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
+import InheritorContent from '@/api/inheritor/InheritorContent';
+import ProjectsContent from '@/api/inheritor/ProjectsContent';
+import CalendarBlock from '../travel/calendar/block.vue';
+import SeminarContent from '@/api/inheritor/SeminarContent';
+import ScenicSpotContent from '@/api/fusion/ScenicSpotContent';
+
+const intangibleData = useSimpleDataLoader(async () => 
+  (await ProjectsContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+const inheritorData = useSimpleDataLoader(async () => 
+  (await InheritorContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    titleBox: Boolean(p.deathBirth),
+    bottomTags: [
+      p.levelText, 
+      p.nation,
+      p.ichName
+    ] as string[],
+  }))
+);
+const spotData = useSimpleDataLoader(async () => 
+  (await ScenicSpotContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+const seminarData = useSimpleDataLoader(async () => 
+  (await SeminarContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
+    id: p.id,
+    title: p.title, 
+    desc: p.desc, 
+    image: p.thumbnail || p.image,
+    bottomTags: [
+      p.levelText, 
+      p.ichTypeText, 
+      p.batchText,
+      p.regionText,
+    ] as string[],
+  }))
+);
+
+
+const {
+  loader: routeData,
+  goList: goRouteList,
+  goDetail: goRouteDetail,
+} = useHomePageMiniCommonListGoMoreAndGoDetail({
+  title: '旅游路线',
+  mainBodyColumnId: [274,275,276,277],
+  modelId: 17,
+  itemType: 'article-common',
+  detailsPage: '/pages/article/details',
+});
+
+const {
+  loader: recommendData,
+  goList: goRecommendList,
+  goDetail: goRecommendDetail,
+} = useHomePageMiniCommonListGoMoreAndGoDetail({
+  title: '文化景区',
+  mainBodyColumnId: 273,
+  modelId: 17,
+  itemType: 'article-common',
+  detailsPage: '/pages/article/details',
+});
+
+const {
+  loader: creativeData,
+  goList: goCreativeList,
+  goDetail: goCreativeDetail,
+} = useHomePageMiniCommonListGoMoreAndGoDetail({
+  title: '文化产品',
+  mainBodyColumnId: 48,
+  modelId: 9,
+  itemType: 'article-common',
+  detailsPage: '/pages/article/details',
+});
+</script>

src/pages/parts/Box2LineImageRightShadow.vue

@@ -10,15 +10,17 @@
     @click="$emit('click')"
   >
     <view class="d-flex flex-row w-100">
-      <Image 
-        v-if="showImage"
-        innerClass="flex-shrink-0"
-        :width="wideImage ? '250' : '150'"
-        :height="150"
-        :radius="15"
-        :src="image"
-        mode="aspectFit"
-      />
+      <slot name="image">
+        <Image 
+          v-if="showImage"
+          innerClass="flex-shrink-0"
+          :width="wideImage ? '250' : '150'"
+          :height="150"
+          :radius="15"
+          :src="image"
+          mode="aspectFit"
+        />
+      </slot>
       <view class="d-flex flex-col ml-3 flex-one width-500">
         <text v-if="titlePrefix" :class="'size-ss color-primary text-lines-3'">{{ titlePrefix }}</text>
         <view class="d-flex flex-row">

src/pages/parts/Box2LineLargeImageUserShadow.vue

@@ -10,7 +10,7 @@
     
     :style="{ 
       height: 'calc(100% - 20rpx)',
-      width: fixSize ? undefined : 'calc(100% - 10rpx)',
+      width: fixSize ? width : 'calc(100% - 10rpx)',
     }"
     @click="$emit('click')"
   >
@@ -109,6 +109,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  width: {
+    type: String,
+    default: '',
+  },
   badge: {
     type: String,
     default: '',
@@ -149,6 +153,13 @@ defineProps({
     type: String,
   },
 })
+
+defineOptions({
+  options: {
+    inheritAttrs: false,
+    virtualHost: true,
+  }
+})
 </script>
 
 <style scoped>

src/pages/travel/calendar/block.vue

@@ -0,0 +1,293 @@
+<template>
+  <FlexCol :gap="20">
+    <FlexRow align="center" justify="center" :gap="10">
+      <IconButton icon="arrow-left-bold" @click="prevMonth" />
+      <Text class="text-center" :text="`${currentYear}年${currentMonth}月`" />
+      <IconButton icon="arrow-right-bold" @click="nextMonth" />
+    </FlexRow>
+    <SimplePageContentLoader :loader="listLoader">
+      <FlexCol>
+        <Box2LineImageRightShadow
+          v-for="(item, i) in listLoader.content.value"
+          titleColor="title-text"
+          fixSize
+          :key="i"
+          :title="item.title"
+          :desc="item.desc"
+          @click="goDetail(item.id)"
+        >
+          <template #image>
+            <FlexCol backgroundColor="background.primary" :radius="14" center :width="150" :height="150">
+              <Text color="primary" :fontSize="42" bold :text="item.dateDay" />
+              <Text color="primary" :fontSize="30" :text="`${item.dateMonth}月`" />
+            </FlexCol>
+          </template>
+        </Box2LineImageRightShadow>
+      </FlexCol>
+    </SimplePageContentLoader>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { GetContentListParams } from '@/api/CommonContent';
+import { useSimplePageContentLoader } from '@/common/composeabe/SimplePageContentLoader';
+import { navTo } from '@/components/utils/PageAction';
+import type { ListItem } from './index.vue';
+import CalendarContent from '@/api/fusion/CalendarContent';
+import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import IconButton from '@/components/basic/IconButton.vue';
+import Text from '@/components/basic/Text.vue';
+import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';
+
+const currentMonth = ref(1);
+const currentYear = ref(new Date().getFullYear());
+ 
+const listLoader = useSimplePageContentLoader(async () => {
+  const res = (await CalendarContent.getCalendarList(new GetContentListParams(), 1, 100));
+  const list : ListItem['data'] = [];
+  for (const item of res.list) {
+    if (item.dateYear != currentYear.value) 
+      continue;
+    if (item.dateMonth != currentMonth.value)
+      continue;
+    console.log(item);
+    list.push({
+      id: item.id,
+      title: item.title,
+      desc: item.dateString + (item.desc || ''), 
+      place: item.district + (item.regionText || ''),
+      time: item.dateString ?? item.date,
+      dateYear: item.dateYear,
+      dateMonth: item.dateMonth,
+      dateDay: item.dateDay,
+      status: item.dateObj > new Date() ? 0 : 1,
+    })
+  }
+  return list;
+});
+
+function goDetail(id: number) {
+  navTo('/pages/article/details', { id })
+}
+function prevMonth() {
+  if (currentMonth.value == 1) {
+    currentMonth.value = 12;
+    currentYear.value--;
+  } else {
+    currentMonth.value--;
+  }
+  listLoader.loadData(undefined, true);
+}
+function nextMonth() {
+  if (currentMonth.value == 12) {
+    currentMonth.value = 1;
+    currentYear.value++;
+  } else {
+    currentMonth.value++;
+  }
+  listLoader.loadData(undefined, true);
+}
+onMounted(() => {
+  listLoader.loadData(undefined, true);
+});
+</script>
+
+<style lang="scss">
+@use "sass:map";
+@use "@/common/scss/define/colors.scss" as *;
+
+$color-primary: map.get($colors, "primary");
+
+.travel_calendar {
+  .banner {
+    height: 400rpx;
+    margin-top: 0;
+
+    .swiper {
+      height: 400rpx;
+      border-radius: 0 0 28rpx 28rpx;
+
+      .item {
+        image {
+          border-radius: 0 0 28rpx 28rpx;
+        }
+      }
+    }
+  }
+
+  .main {
+    margin: 30rpx;
+    height: calc(100vh - 400rpx - 120rpx);
+  }
+  .activity-wrap {
+    display: flex;
+
+    .activity-list {
+      .head {
+        background: #FFFFFF;
+        border-radius: 28rpx;
+        margin-bottom: 18rpx;
+        color: #111111;
+        padding: 12rpx 42rpx 12rpx 50rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 24rpx;
+
+        .year-month {
+          font-weight: 600;
+          font-size: 30rpx;
+          flex: 1;
+        }
+
+        text {
+          font-weight: 600;
+          display: inline-block;
+          margin-left: 12rpx;
+        }
+      }
+
+      .activity {
+        padding: 36rpx 32rpx 38rpx 48rpx;
+        background: #FFFFFF;
+        box-shadow: 0rpx 12rpx 28rpx 0rpx rgba(215, 215, 215, 0.35);
+        border-radius: 24rpx;
+        position: relative;
+        font-size: 24rpx;
+        overflow: hidden;
+        margin-bottom: 46rpx;
+
+        .desc {
+          text-align: justify;
+          margin-bottom: 36rpx;
+        }
+
+        .dot {
+          width: 12rpx;
+          height: 12rpx;
+          background: #E0E0E0;
+          border-radius: 50%;
+          position: absolute;
+          left: 20rpx;
+          top: 50rpx;
+
+          &.ing {
+            background: $color-primary;
+          }
+        }
+
+        .title {
+          font-weight: 600;
+          font-size: 30rpx;
+          color: #111111;
+          margin-bottom: 25rpx;
+        }
+
+        .place {
+          margin-bottom: 18rpx;
+          align-items: center;
+          display: flex;
+          font-size: 28rpx;
+
+        }
+
+        .iconfont {
+          display: inline-block;
+          margin-right: 6rpx;
+          font-size: 36rpx;
+        }
+
+        .time {
+          display: flex;
+          align-items: center;
+          font-size: 28rpx;
+        }
+
+        .status {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          background: $color-primary;
+          padding: 14rpx 26rpx;
+          border-radius: 31rpx 0rpx 0rpx 0rpx;
+          color: #fff;
+
+          view {
+            font-size: 24rpx;
+          }
+
+          &.ing {
+            background: #24515D;
+          }
+
+          &.end {
+            background: #C9C9C9;
+          }
+        }
+      }
+    }
+
+    .month-list {
+      text-align: center;
+      flex-shrink: 0;
+      margin-right: 28rpx;
+
+      .month {
+        border-radius: 10rpx;
+        margin-bottom: 10rpx;
+        padding: 10rpx 20rpx;
+
+        &.active {
+          border: 1px solid $color-primary;
+          background: #FFFFFF;
+        }
+      }
+    }
+  }
+
+  scroll-view {
+    height: calc(100vh - 620rpx);
+  }
+
+  .change-year {
+    padding: 0 34rpx 34rpx 34rpx;
+    text-align: center;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .year {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .current-year {
+      font-size: 36rpx;
+      color: #333333;
+    }
+
+    text.icon-arrow-left {
+      display: inline-block;
+      margin-right: 100rpx;
+      font-size: 32rpx;
+    }
+
+    text.icon-arrow-right {
+      display: inline-block;
+      margin-left: 100rpx;
+      font-size: 32rpx;
+    }
+
+    text.icon-calendar {
+      position: absolute;
+      right: 0;
+      top: 8rpx;
+    }
+  }
+}
+</style>

src/pages/travel/calendar.vue

@@ -105,32 +105,24 @@ import { CalendarUtils, DateUtils } from '@imengyu/imengyu-utils';
 import NavBar from '@/components/nav/NavBar.vue';
 import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
 
-const tabs = [
-  {
-    id: 1,
-    name: '全部'
-  },
-  {
-    id: 2,
-    name: '节庆民俗'
-  },
-  {
-    id: 3,
-    name: '信俗祭祀'
-  },
-  {
-    id: 4,
-    name: '游艺竞技'
-  },
-  {
-    id: 5,
-    name: '民间艺术'
-  },
-  {
-    id: 7,
-    name: '其他'
-  }
-];
+export interface ListItem {
+  id: number;
+  month: number,
+  year: number,
+  lunar: string,
+  data: {
+    id: number,
+    title: string,
+    desc: string,
+    place: string,
+    time: string,
+    dateYear: number,
+    dateMonth: number,
+    dateDay: number,
+    status: number,
+  }[]
+}
+
 const activeTab = ref(0);
 const bannerData = ref<{ id: number, image: string }[]>([])
 
@@ -176,20 +168,6 @@ const monthList = [
   }
 ];
 
-interface ListItem {
-  id: number;
-  month: number,
-  year: number,
-  lunar: string,
-  data: {
-    id: number,
-    title: string,
-    desc: string,
-    place: string,
-    time: string,
-    status: number,
-  }[]
-}
  
 const listLoader = useSimplePageContentLoader<ListItem[]>(async () => {
   const res = (await CalendarContent.getCalendarList(new GetContentListParams(), 1, 100));
@@ -216,6 +194,9 @@ const listLoader = useSimplePageContentLoader<ListItem[]>(async () => {
       desc: item.desc, 
       place: item.district + (item.regionText || ''),
       time: item.dateString ?? item.date,
+      dateYear: item.dateYear,
+      dateMonth: item.dateMonth,
+      dateDay: item.dateDay,
       status: item.dateObj > new Date() ? 0 : 1,
     })
     if (bannerData.value.length < 3)
@@ -224,10 +205,7 @@ const listLoader = useSimplePageContentLoader<ListItem[]>(async () => {
         image: item.thumbnail || item.image,  
       })
   }
-  const a =  res2.filter(p => p);
-  console.log(a);
-  
-  return a
+  return res2.filter(p => p);
 });
 
 function tabClick(e: { index: number }) {