🎨 按要求修改统计文字

src/assets/scss/main.scss

@@ -293,7 +293,7 @@ $small-banner-height: 445px;
 
 .main-card-box {
   position: relative;
-  min-height: 330px;
+  min-height: 360px;
   color: #fff;
   margin-right: 24px;
   overflow: hidden;
@@ -324,6 +324,10 @@ $small-banner-height: 445px;
         color: #fff;
         text-decoration: none;
 
+        &.long {
+          flex-basis: 100%;
+        }
+
         h5 {
           font-size: 1rem;
           font-weight: normal;
@@ -334,6 +338,10 @@ $small-banner-height: 445px;
           font-weight: normal;
           font-size: 2.8rem;
           margin: 0;
+
+          span {
+            font-size: 1rem;
+          }
         }
       }
     }

src/components/parts/IndexStats.vue

@@ -0,0 +1,157 @@
+<template>
+  <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">
+              <a 
+                v-for="(data, key2) in stat.datas"
+                :class="['box', {'long': data.long}]"
+                :key="key2"
+                :href="data.link"
+              >
+                <h5>{{ data.title }}</h5>
+                <p>{{ data.value }}
+                  <span v-if="data.valueExtra">{{ data.valueExtra }}</span>
+                </p>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </SimplePageContentLoader>
+</template>
+
+<script setup lang="ts">
+import { GetContentListParams } from '~/api/CommonContent';
+import SeminarContent from '~/api/inheritor/SeminarContent';
+import UnmoveableContent from '~/api/inheritor/UnmoveableContent';
+import IndexContent from '~/api/introduction/IndexContent';
+import { useSSrSimpleDataLoader } from '~/composeable/SimpleDataLoader';
+
+const router = useRouter();
+const statsData = await useSSrSimpleDataLoader('stats', 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;
+  
+  let sumInheritor = 0;
+  let sumProject = 0;
+  const topLevelProject = data.ichData.find((p: any) => p.level_text == '人类非遗')?.total || 0;
+  
+  return [
+    {
+      title: '非遗代表性项目',
+      type: '1',
+      datas: data.ichData.filter((p: any) => [ '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
+        sumProject += item.total;
+        return {
+          title: item.level_text,
+          value: item.total + ' 项',
+          valueExtra: (item.level_text == '国家级' ? ` (其中${topLevelProject}项为人类非遗)` : ''),
+          long: item.level_text == '国家级',
+          link: router.resolve({ path: '/inheritor/projects', query: { level: item.level } }).href,
+        }
+      }).concat([
+        {
+          title: `目前厦门市非遗项目市级以上共有${sumProject}项`,
+          value: '',
+          long: true,
+        }
+      ])
+    },
+    {
+      title: '非遗代表性传承人',
+      type: '2',
+      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
+        sumInheritor += item.total;
+        return {
+          title: item.title,
+          value: item.total,
+          link: router.resolve({ path: '/inheritor/inheritor', query: { level: item.level } }).href
+        }
+      }).concat([
+        {
+          title: '',
+          value: '',
+        }
+      ], [
+        {
+          title:  `目前厦门市非遗传承人市级以上共有${sumInheritor}人`,
+          value: '',
+          long: true,
+        }
+      ]),
+    },
+    {
+      title: '其他传承项目',
+      type: '1',
+      datas: [
+        {
+          title: '传习所',
+          value: semiCount,
+          link: router.resolve({ path: '/inheritor/seminar' }).href,
+        },
+        {
+          title: '传统村落',
+          value: data.villageData[0]?.total ?? 0,
+          link: router.resolve({ path: '/village/' }).href,
+        },
+        {
+          title: '文物古迹',
+          value: unmoveableCount,
+          link: router.resolve({ path: '/inheritor/unmoveable' }).href,
+        },
+      ],
+    },
+    /*{
+      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
+        }
+      })
+    },*/
+  ];
+});
+
+</script>

src/pages/index.vue

@@ -35,33 +35,7 @@
         <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">
-                    <a 
-                      v-for="(data, key2) in stat.datas"
-                      class="box"
-                      :key="key2"
-                      :href="data.link"
-                    >
-                      <h5>{{ data.title }}</h5>
-                      <p>{{ data.value }}</p>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </SimplePageContentLoader>
+        <IndexStats />
       </div>
     </section>
 
@@ -240,16 +214,9 @@ import SimplePageContentLoader from '@/components/content/SimplePageContentLoade
 import IndexContent from '@/api/introduction/IndexContent';
 import NewsIndexContent from '@/api/news/NewsIndexContent';
 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 SeminarContent from '@/api/inheritor/SeminarContent';
 import CommonContent, { GetColumListParams, GetContentListParams, type GetContentListItem } from '@/api/CommonContent';
 
-const router = useRouter();
-
 const carouselConfig = {
   itemsToShow: 1,
   wrapAround: true,
@@ -288,97 +255,6 @@ const newsData = await useSSrSimpleDataLoader('news', async () => {
     .setMainBodyColumnId([ 228/* , 298, 299 */ ])
   , 1, 9)).list.map(p => p.toJSON());
 });
-const statsData = await useSSrSimpleDataLoader('stats', 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,
-          link: router.resolve({ path: '/inheritor/projects', query: { level: item.level } }).href,
-        }
-      })
-    },
-    {
-      title: '非遗代表性传承人',
-      type: '2',
-      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
-        return {
-          title: item.title,
-          value: item.total,
-          link: router.resolve({ path: '/inheritor/inheritor', query: { level: item.level } }).href
-        }
-      })
-    },
-    {
-      title: '其他传承项目',
-      type: '1',
-      datas: [
-        {
-          title: '传习所',
-          value: semiCount,
-          link: router.resolve({ path: '/inheritor/seminar' }).href,
-        },
-        {
-          title: '传统村落',
-          value: data.villageData[0]?.total ?? 0,
-          link: router.resolve({ path: '/village/' }).href,
-        },
-        {
-          title: '文物古迹',
-          value: unmoveableCount,
-          link: router.resolve({ path: '/inheritor/unmoveable' }).href,
-        },
-      ],
-    },
-    /*{
-      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 = await useSSrSimpleDataLoader('record', async () => {
   return (await CommonContent.getContentList(new GetContentListParams()
     .setSelfValues({

src/pages/inheritor/index.vue

@@ -18,33 +18,7 @@
         <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">
-                    <a 
-                      v-for="(data, key2) in stat.datas"
-                      class="box"
-                      :key="key2"
-                      :href="data.link"
-                    >
-                      <h5>{{ data.title }}</h5>
-                      <p>{{ data.value }}</p>
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </SimplePageContentLoader>
+        <IndexStats />
       </div>
     </section>