🎨 调整界面：首页

src/pages/discover.vue

@@ -164,7 +164,7 @@ import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import { useAuthStore } from '@/store/auth';
 import { useHomePageMiniCommonListGoMoreAndGoDetail } from './article/common/CommonContent';
 import { navTo } from '@/components/utils/PageAction';
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import Box2LineRightSlot from './parts/Box2LineRightSlot.vue';
 import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
 import HomeTitle from './parts/HomeTitle.vue';

src/pages/home.vue

@@ -11,7 +11,7 @@
       <!-- 分栏 -->
       <view class="shadow-l radius-l bg-base p-3">
         <view 
-          class="main-banner-box"
+          class="main-banner-box mb-25"
           @click="navTo('home/introduction')"
         >
           <text class="title">闽南文化生态保护区(厦门市)</text>
@@ -25,20 +25,41 @@
             mode="widthFix"
           />
         </view>
-        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
+        
+        <HomeButton
+          title="探索文化地图"
+          icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconMap.png"
+          bg="https://mncdn.wenlvti.net/app_static/minnan/images/home/ButtonMapBg.png"
+          large
+          @click="navTo('inhert/map/index', { tab: 0 })"
+        />
 
-          <view  
-            v-for="(tab, k) in subTabs" 
-            :key="k"
-            class="d-flex flex-column justify-center align-center width-1-4 mt-2 mb-2"
-            @click="tab.onClick"
-          >
-            <Image width="65%" :src="tab.icon" mode="widthFix" :innerStyle="{ maxHeight: '100rpx' }" />
-            <text class="color-second-text mt-2 size-base text-align-center">{{ tab.name }}</text>
-          </view>
+        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-25 row-gap-sss">
+          <HomeButton
+            title="热点新鲜事"
+            icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconDoc.png"
+            @click="handleGoTab('/pages/discover')"
+          />
+          <HomeButton
+            title="保护与传承"
+            icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconIch.png"
+            @click="handleGoTab('/pages/inhert')"
+          />
+          <HomeButton
+            title="闽南走透透"
+            icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconArtifact.png"
+            @click="handleGoTab('/pages/travel')"
+          />
+          <HomeButton
+            title="文旅探世界"
+            icon="https://mncdn.wenlvti.net/app_static/minnan/images/home/IconDiscover.png"
+            @click="handleGoTab('/pages/travel')"
+          />
+        </view>
 
+        <view class="position-relative d-flex flex-row flex-wrap justify-between mt-3">
           <Box1AudioPlay
-            class="w-100 mt-3" 
+            class="w-100" 
             :title="indexAudioPlayer.currentTitle.value"
             :image="indexAudioPlayer.currentItem?.value?.image"
             :playState="indexAudioPlayer.isPlaying.value"
@@ -53,35 +74,47 @@
 
       <!-- 数据统计 -->
       <SimplePageContentLoader :loader="statsLoader">
-        <view v-if="statsLoader.content.value" class="d-flex flex-col justify-center mt-3 pt-3 b-3">
-          <view class="d-flex flex-row align-center">
-            <view class="d-flex flex-col w-50">
-              <StatsText
-                :title="statsLoader.content.value[0].title" 
-                :data="statsLoader.content.value[0].datas" 
-                :type="statsLoader.content.value[0].type" 
-              />
-              <view class="p-2">
-                <HorizontalScrollText :text="statsText1" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
-              </view>
+        <view v-if="statsLoader.content.value" class="d-flex flex-col justify-center mt-3 pt-3 pb-3 bg-light-light-primary radius-s">
+          <view class="d-flex flex-col">
+            <StatsText
+              :title="statsLoader.content.value[0].title" 
+              :data="statsLoader.content.value[0].datas" 
+              :type="statsLoader.content.value[0].type" 
+            />
+            <view class="p-2">
+              <HorizontalScrollText :text="statsText1" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
             </view>
-            <view class="d-flex flex-col w-50">
-              <StatsText 
-                classNames="border-left-forth"
-                :title="statsLoader.content.value[1].title" 
-                :data="statsLoader.content.value[1].datas" 
-                :type="statsLoader.content.value[1].type" 
-              />
-              <view class="p-2">
-                <HorizontalScrollText :text="statsText2" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
-              </view>
+          </view>
+          <view class="border-top-light-primary pt-2 mt-3"></view>
+          <view class="d-flex flex-col">
+            <StatsText
+              :title="statsLoader.content.value[1].title" 
+              :data="statsLoader.content.value[1].datas" 
+              :type="statsLoader.content.value[1].type" 
+            />
+            <view class="p-2">
+              <HorizontalScrollText :text="statsText2" :fontSize="26" color="text.second" :outerStyle="{ height: '40rpx' }" />
             </view>
           </view>
-          <view class="border-top-forth pt-2 mt-3"></view>
+        </view>
+        <view v-if="statsLoader.content.value" class="d-flex flex-col justify-center mt-3 pt-3 pb-3 bg-light-light-primary radius-s">
           <StatsText
+            :title="statsLoader.content.value[2].title" 
             :data="statsLoader.content.value[2].datas" 
             :type="statsLoader.content.value[2].type" 
           />
+          <view class="border-top-light-primary pt-2 mt-3"></view>
+          <StatsText
+            :title="statsLoader.content.value[3].title" 
+            :data="statsLoader.content.value[3].datas" 
+            :type="statsLoader.content.value[3].type" 
+          />
+          <view class="border-top-light-primary pt-2 mt-3"></view>
+          <StatsText
+            :title="statsLoader.content.value[4].title" 
+            :data="statsLoader.content.value[4].datas" 
+            :type="statsLoader.content.value[4].type" 
+          />
         </view>
       </SimplePageContentLoader>
 
@@ -150,7 +183,7 @@
       </SimplePageContentLoader>
     </view>
   </view>
-  <tabbar :current="0"></tabbar>
+  <Tabbar :current="0" />
 </template>
 
 <script setup lang="ts">
@@ -162,7 +195,6 @@ const MainBoxIcon5 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/Ma
 const MainBoxIcon6 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon6.png';
 const MainBoxIcon7 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon9.png';
 const MainBoxIcon8 = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/MainBoxIcon8.png';
-const ImageTest = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/ImageTest.jpg';
 
 import { ref, watch } from 'vue';
 import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
@@ -180,12 +212,13 @@ import ScenicSpotContent from '@/api/fusion/ScenicSpotContent';
 import IndexContent from '@/api/introduction/IndexContent';
 import StatsText, { type StatsTextItem } from './parts/StatsText.vue';
 import HomeTitle from '@/pages/parts/HomeTitle.vue'; 
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import Box1AudioPlay from '@/pages/parts/Box1AudioPlay.vue';
 import SimplePageContentLoader from "@/common/components/SimplePageContentLoader.vue";
 import HorizontalScrollText from '@/components/typography/HorizontalScrollText.vue';
 import { navHomePageMiniCommonListGo } from './article/common/CommonContent';
 import Image from '@/components/basic/Image.vue';
+import HomeButton from './parts/HomeButton.vue';
 
 const subTabs = [
   { 
@@ -350,9 +383,6 @@ const statsText2 = ref('');
 const statsLoader = useSimpleDataLoader(async () => {
   const data = (await IndexContent.getStats());
 
-  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 6)).total;
-  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 6)).total;
-  
   let sumInheritor = 0;
   let sumProject = 0;
   const topLevelProject = data.ichData.find((p: any) => p.level_text == '人类非遗')?.total || 0;
@@ -370,32 +400,27 @@ const statsLoader = useSimpleDataLoader(async () => {
     return {
       title: item.level_text,
       value: item.total,
+      titleSuffix: '项',
+      subText: '\u00a0',
+      type: 'normal',
       onClick: () => navTo('/pages/inhert/intangible/list', { tab: 0, level: item.level }),
     } as StatsTextItem
   });
+  projects.shift();
+  projects[0].subText = `人类非遗 ${topLevelProject}`;
   const inheritors = data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级' ].includes(p.title)).map((item: any) => {
     sumInheritor += item.total;
     return {
       title: item.title,
       value: item.total,
+      titleSuffix: '人',
+      type: 'normal',
       onClick: () => navTo('/pages/inhert/inheritor/list', { level: item.level }),
     }
-  }).concat([
-    {
-      title: '',
-      value: '',
-    }
-  ]);
+  });
 
   statsText1.value = `目前厦门市非遗项目市级以上共有 ${sumProject} 项，其中：国家级 ${secondLevelProject} 项（含 ${topLevelProject} 项为人类非遗）、省级 ${thirdLevelProject} 项、市级 ${forthLevelProject} 项。`;
   statsText2.value = `目前厦门市非遗传承人市级以上共有 ${sumInheritor} 人，其中：国家级 ${topLevelInheritor} 人、省级 ${secondLevelInheritor} 人、市级 ${thirdLevelInheritor} 人。`;
-  
-  /* projects.splice(1, 0, {
-    title: `(其中${topLevelProject}项为人类非遗)`,
-    value: ' ',
-    longTitle: true,
-    onClick: () => navTo('/pages/inhert/intangible/list', { tab: 0, level: 0 }),
-  }) */
 
   return [
     {
@@ -407,63 +432,50 @@ const statsLoader = useSimpleDataLoader(async () => {
       datas: inheritors
     },
     {
-      datas: [
-        {
-          title: '非遗传习所',
-          value: semiCount,
-          onClick: () => navTo('/pages/inhert/map/index', { tab: 2 }),
-        },
-        {
-          title: '传统村落',
-          value: data.villageData[0].total,
-          onClick: () => navTo('/pages/inhert/village/list'),
-        },
-        {
-          title: '文物古迹',
-          value: unmoveableCount,
-          onClick: () => navTo('/pages/inhert/artifact/list'),
-        },
-      ],
-    },
-    {
-      title: '不可移动文物',
-      type: 'none',
-      datas: data.crData.map((item: any) => {
-        return {
-          title: item.title,
-          value: item.total
-        }
-      })
-    },
-    {
-      title: '闽南文化重要相关文物古迹',
-      type: 'none',
-      datas: data.minnanCr.map((item: any) => {
+      title: '非遗传习所',
+      datas: data.ichCenter.map((item: any) => {
         return {
           title: item.title,
-          value: item.total
+          value: item.total,
+          titleSuffix: '处',
+          type: 'normal',
+          onClick: () => navTo('/pages/inhert/map/index', { tab: 2 }),
         }
-      })
+      }),
     },
     {
       title: '重要相关历史风貌区',
-      type: 'none',
       datas: data.historyData.map((item: any) => {
         return {
           title: item.title,
-          value: item.total
+          value: item.total,
+          titleSuffix: '处',
+          onClick: () => {
+            console.log(item.title);
+            
+            switch (item.title) {
+              case '世界文化遗产':
+                //TODO
+                break;
+              case '传统村落':
+                navTo('/pages/inhert/village/list');
+                break;
+            }
+          },
         }
-      })
+      }),
     },
     {
-      title: '传习中心',
+      title: '闽南文化重要相关文物古迹',
       type: 'none',
-      datas: data.ichCenter.map((item: any) => {
+      datas: data.minnanCr.map((item: any) => {
         return {
           title: item.title,
-          value: item.total
+          value: item.total,
+          titleSuffix: '处',
+          onClick: () => navTo('/pages/inhert/artifact/list'),
         }
-      })
+      }),
     },
   ]
 
@@ -485,6 +497,11 @@ function handleGoDetails(item: any) {
       break;
   }
 }
+function handleGoTab(url: string) {
+  uni.switchTab({
+    url: url,
+  })
+}
 
 onShareTimeline(() => {
   return {}; 

src/pages/home/introduction.vue

@@ -65,7 +65,7 @@ import CommonContent, { GetColumListParams, GetContentListParams } from '@/api/C
 import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
 import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';
 import NewsIndexContent from '@/api/news/NewsIndexContent';
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import commonParserStyle from '@/common/style/commonParserStyle';
 import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
 import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';

src/pages/inhert.vue

@@ -239,14 +239,14 @@
 
     </view>
   </view>
-  <tabbar :current="2"></tabbar>
+  <Tabbar :current="2" />
 </template>
 
 <script setup lang="ts">
 import { navTo } from '@/components/utils/PageAction';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import CommonContent, { GetContentListParams } from '@/api/CommonContent';
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import HomeTitle from './parts/HomeTitle.vue';
 import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
 import Box2LinePlayRightArrow from './parts/Box2LinePlayRightArrow.vue';

src/pages/parts/HomeButton.vue

@@ -0,0 +1,57 @@
+<template>
+  <view 
+    class="position-relative d-flex flex-row justify-center align-center radius-base bg-light-light-primary p-3 gap-sss"
+    :style="{
+      width: large ? '' : 'calc(50% - 15rpx)'
+    }"
+    @click="onClick"
+  >
+    <Image :src="icon" width="40rpx" height="40rpx" />
+    <text class="title color-primary">{{ title }}</text>
+    <Image 
+      v-if="bg" :src="bg" 
+      :width="160" 
+      :height="90" 
+      :innerStyle="{
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+      }"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import Image from '@/components/basic/Image.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '探索文化地图'
+  },
+  bg: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: 'https://mncdn.wenlvti.net/app_static/minnan/images/home/IconMap.png'
+  },
+  large: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const onClick = () => {
+  emit('click')
+}
+
+defineOptions({
+  options: {
+    virtualHost: true
+  }
+})
+</script>

src/pages/parts/StatsText.vue

@@ -17,15 +17,20 @@
         :key="i"
         :class="[
           'item',
-          item.long ? 'long' : ''
+          item.type,
+          item.value ? '' : 'no-value'
         ]"
         @click="item.onClick"
       >
-        <text class="number">{{ item.value == ' ' ? '&nbsp;' : item.value }}</text>
         <view class="d-flex flex-row align-center justify-center">
           <text v-if="item.titlePrefix" class="title-prefix mr-2">{{ item.titlePrefix }}</text>
           <text :class="'sub-title' + (item.longTitle ? ' long' : '')">{{ item.title }}</text>
         </view>
+        <view class="d-flex flex-row align-end justify-center">
+          <text class="number">{{ item.value }}</text>
+          <text v-if="item.titleSuffix" class="title-suffix ml-2">{{ item.titleSuffix }}</text>
+        </view>
+        <text v-if="item.subText" class="sub-text">{{ item.subText }}</text>
       </view>
     </view>
   </view>
@@ -37,10 +42,12 @@ import type { PropType } from 'vue';
 export interface StatsTextItem {
   title: string,
   titlePrefix?: string,
+  titleSuffix?: string,
   value: string,
   suffix?: string,
-  long?: boolean,
+  subText?: string,
   longTitle?: boolean,
+  type?: 'long'|'normal'|''|undefined,
   onClick?: () => void
 }
 
@@ -89,11 +96,11 @@ $color-second: map.get($colors, "second");
   flex-direction: column;
 
   .title {
-    font-size: 30rpx;
+    font-size: 32rpx;
     margin: 10rpx 0;
+    font-family: "SongtiSCBlack";
     color: $color-primary;
     text-align: center;
-    letter-spacing: 0.2em;
   }
   .stats {
     display: flex;
@@ -108,18 +115,36 @@ $color-second: map.get($colors, "second");
       flex-direction: column;
       text-align: center;
       margin: 10rpx 0;
-      width: calc(50%);
+      flex: 1 0 auto;
+      width: auto;
+
+      &.no-value {
+        display: none;
+      }
 
       &.long {
         width: calc(100%);
       }
+      &.half {
+        width: calc(50%);
+      }
+      &.normal {
+        width: calc(33%);
+      }
+
       .title-prefix {
         font-size: 26rpx;
-        color: $color-second;
+        color: $color-primary;
+      }
+      .title-suffix {
+        font-size: 22rpx;
+        color: $color-primary;
+        margin-bottom: 12rpx;
+        margin-left: -6rpx;
       }
       .sub-title {
         font-size: 22rpx;
-        color: $color-second;
+        color: $color-primary;
 
         &.long {
           white-space: nowrap;
@@ -128,9 +153,14 @@ $color-second: map.get($colors, "second");
       }
       .number {
         margin: 25rpx 0 5rpx 0;
-        font-size: 60rpx;
+        font-size: 46rpx;
         font-weight: bold;
         font-family: HUNdin1451;
+        color: $color-primary;
+      }
+      .sub-text {
+        font-size: 22rpx;
+        color: $color-primary;
       }
     }
   }

src/pages/travel.vue

@@ -117,7 +117,7 @@
 
 
   </view>
-  <tabbar :current="3"></tabbar>
+  <Tabbar :current="3" />
 </template>
 
 <script setup lang="ts">
@@ -125,7 +125,7 @@ import { useHomePageMiniCommonListGoMoreAndGoDetail } from './article/common/Com
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import { navTo } from '@/components/utils/PageAction';
 import { onShareTimeline, onShareAppMessage } from '@dcloudio/uni-app';
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import Box2LineLargeImageUserShadow from './parts/Box2LineLargeImageUserShadow.vue';
 import HomeTitle from './parts/HomeTitle.vue';
 import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';

src/pages/user/index.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import Tabbar from '@/common/components/tabs/tabbar.vue';
+import Tabbar from '@/common/components/tabs/Tabbar.vue';
 import { confirm } from '@/components/utils/DialogAction';
 import { navTo } from '@/components/utils/PageAction';
 import { useAuthStore } from '@/store/auth';