feat: 增加首页 预警监测 消息模块

src/components/Layout/Grid.vue

 <script setup lang="ts">
     import { liveModules } from '/@/utils/const/Navigation'
 
+    import type { navItemType } from '/@/utils/const/Navigation'
+
+    defineProps({
+        dataSouce: {
+            type: Array as PropType<navItemType[]>,
+            default: () => liveModules,
+        },
+    })
+
     const colors = {
         m: '#1890FF',
         f: '#FF9A03',
@@ -11,19 +20,17 @@
     const getColor = (type: string) => colors[type]
 
     const lastString = (string: string) => string.charAt(string.length - 1)
-
-    // defineProps({})
 </script>
 
 <template>
     <fui-grid :columns="4" class="mt-4">
-        <fui-grid-item v-for="(item, index) in liveModules" :key="index">
+        <fui-grid-item v-for="(item, index) in dataSouce" :key="index">
             <view class="fui-grid__cell flex flex-col flex-center">
                 <!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> -->
                 <FuiIcon
                     custom-prefix="font_family"
                     :name="`icon-${item.value}`"
-                    size="90"
+                    size="100"
                     :color="getColor(lastString(item.value))"
                 />
                 <text class="text-12 mt-2">{{ item.label }}</text>

src/components/Layout/Header.vue

+<script setup lang="ts">
+    defineProps({
+        title: {
+            type: String,
+            default: '监测预报',
+        },
+    })
+</script>
+
+<template>
+    <!-- 头部 -->
+    <view
+        class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
+    >
+        监测预报
+    </view>
+</template>

src/pages.json

@@ -15,6 +15,34 @@
                 "enableReachBottom": false
             }
         },
+        {
+            "path": "pages/business/index",
+            "style": {
+                "navigationBarTitleText": "监测预报",
+                "enablePullDownRefresh": false,
+                // #ifdef H5
+                "navigationStyle": "custom",
+                // #endif
+                "app-plus": {
+                    "titleNView": false
+                },
+                "enableReachBottom": false
+            }
+        },
+        {
+            "path": "pages/message/index",
+            "style": {
+                "navigationBarTitleText": "消息",
+                "enablePullDownRefresh": false,
+                // #ifdef H5
+                "navigationStyle": "custom",
+                // #endif
+                "app-plus": {
+                    "titleNView": false
+                },
+                "enableReachBottom": false
+            }
+        },
         // === PDF 文件预览 ===
         {
             "path": "pages/common/viewer/pdf",
@@ -86,9 +114,21 @@
         "list": [
             {
                 "pagePath": "pages/index/index",
-                "iconPath": "static/icons/home.png.png",
+                "iconPath": "static/icons/home.png",
                 "selectedIconPath": "static/icons/homeSelect.png",
                 "text": "首页"
+            },
+            {
+                "pagePath": "pages/business/index",
+                "iconPath": "static/icons/monitorforecast.png",
+                "selectedIconPath": "static/icons/monitorforecastSelect.png",
+                "text": "监测预报"
+            },
+            {
+                "pagePath": "pages/message/index",
+                "iconPath": "static/icons/message.png",
+                "selectedIconPath": "static/icons/messageSelect.png",
+                "text": "消息"
             }
         ]
     }

src/pages/business/index.vue

+<script setup lang="ts">
+    import { climateModules, forecastModules, liveModules, weatherModules } from '@/utils/const/Navigation'
+
+    const navs = [
+        { dataSouce: liveModules, title: '实况监测' },
+        { dataSouce: forecastModules, title: '预报信息' },
+        { dataSouce: climateModules, title: '气候' },
+        { dataSouce: weatherModules, title: '天气' },
+    ]
+
+    onMounted(() => {})
+</script>
+
+<template>
+    <view class="">
+        <!-- 头部 -->
+        <view
+            class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
+        >
+            监测预报
+        </view>
+        <!-- 内容 -->
+        <view class="p-2 pt-3 pb-18">
+            <view class="box-shadow-def p-2 pt-3 b-rd-2 mb-3" v-for="(item, index) in navs" :key="index">
+                <MenuHeader :title="item.title" otherTitle="展开更多" />
+                <Grid :dataSouce="item.dataSouce" />
+            </view>
+        </view>
+    </view>
+</template>

src/pages/index/index.vue

@@ -37,7 +37,7 @@
         <!-- 头部 -->
         <Header />
         <!-- 内容 -->
-        <view class="p-3">
+        <view class="p-2 pt-3">
             <Warning />
             <MeteService />
             <CommonFunction />

src/pages/index/modules/commonFunction.vue

 <script lang="ts"></script>
 
 <template>
-    <view class="p-3 b-rd-2 box-shadow-def mt-3 bg-#fff">
+    <view class="p-2 b-rd-2 box-shadow-def mt-3 bg-#fff">
         <MenuHeader title="常用功能" otherTitle="自定义" />
         <Grid />
     </view>

src/pages/message/index.vue

+<script setup lang="ts">
+    onMounted(() => {})
+</script>
+
+<template>
+    <view class="">
+        <!-- 头部 -->
+        <view
+            class="h-171 bg-[url(/static/warnforecast.png)] bg-no-repeat bg-cover text-c0 lh-32 text-center text-36 font-500"
+        >
+            消息
+        </view>
+        <!-- 内容 -->
+        <view class="p-2 pt-3 pb-18">
+            <view />
+        </view>
+    </view>
+</template>

src/utils/const/Navigation.ts

+export interface navItemType {
+    label: string
+    value: string
+    code?: string
+}
+
 // 实况监测
-export const liveModules = [
+export const liveModules: navItemType[] = [
     {
         label: '降水监测',
         value: 'rain-m',
@@ -67,7 +73,7 @@ export const liveModules = [
 ]
 
 // 预报信息
-export const forecastModules = [
+export const forecastModules: navItemType[] = [
     {
         label: '降水预报',
         value: 'rain-f',
@@ -107,7 +113,7 @@ export const forecastModules = [
 ]
 
 // 气候
-export const climateModules = [
+export const climateModules: navItemType[] = [
     {
         label: '降水统计',
         value: 'rain-c',
@@ -131,7 +137,7 @@ export const climateModules = [
 ]
 
 // 天气
-export const weatherModules = [
+export const weatherModules: navItemType[] = [
     {
         label: '会商材料',
         value: 'meeting-materials-w',

types/components.d.ts

@@ -131,6 +131,7 @@ declare module '@vue/runtime-core' {
     FuiWaterfall: typeof import('./../src/components/firstui/fui-waterfall/fui-waterfall.vue')['default']
     FuiWaterfallItem: typeof import('./../src/components/firstui/fui-waterfall-item/fui-waterfall-item.vue')['default']
     Grid: typeof import('./../src/components/Layout/Grid.vue')['default']
+    Header: typeof import('./../src/components/Layout/Header.vue')['default']
     Icon: typeof import('./../src/components/Icon/index.vue')['default']
     MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']