feat: 增加menuHeader组件，增加grid组件

src/common/public.less

@@ -5,7 +5,7 @@
     justify-content: center;
 }
 
-.box-shadow-yellow {
+.box-shadow-def {
     box-shadow: 0rpx 0rpx 12rpx 0rpx rgb(3 21 37 / 15%);
 }
 
@@ -21,7 +21,7 @@
         border-radius: 3rpx;
         position: absolute;
         left: 0;
-        top: 10rpx;
+        top: 8rpx;
         z-index: 10;
     }
 }

src/components/Layout/Grid.vue

+<script setup lang="ts">
+    import { liveModules } from '/@/utils/const/Navigation'
+
+    const colors = {
+        m: '#1890FF',
+        f: '#FF9A03',
+        c: '#63C56D',
+        w: '#1890FF',
+    }
+
+    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">
+            <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"
+                    :color="getColor(lastString(item.value))"
+                />
+                <text class="text-12 mt-2">{{ item.label }}</text>
+            </view>
+        </fui-grid-item>
+    </fui-grid>
+</template>

src/components/Layout/MenuHeader.vue

+<script lang="ts" setup>
+    defineProps({
+        title: {
+            type: String,
+            default: '气象服务',
+        },
+        otherTitle: {
+            type: String,
+            default: '查看全部',
+        },
+    })
+</script>
+
+<template>
+    <!-- 头部 -->
+    <view class="flex lh-7 justify-between pb-3 b-#EEEEEE b-b-2 b-b-solid">
+        <view class="text-black text-35 font-600 line-blue">{{ title }}</view>
+        <view class="b-2 b-#3E8FFD b-solid b-rd-4 pl-3 pr-1 text-#3E8FFD flex align-center">
+            <text class="text-28 font-500">{{ otherTitle }}</text>
+            <fui-icon name="arrowright" size="36" color="#3E8FFD" />
+        </view>
+    </view>
+</template>

src/pages/index/index.vue

@@ -2,6 +2,7 @@
     import Header from './modules/header.vue'
     import Warning from './modules/warning.vue'
     import MeteService from './modules/meteService.vue'
+    import CommonFunction from './modules/commonFunction.vue'
 
     // const title = ref('Hello World')
 
@@ -36,9 +37,10 @@
         <!-- 头部 -->
         <Header />
         <!-- 内容 -->
-        <view class="p-3 pt-4 pb-5">
+        <view class="p-3">
             <Warning />
             <MeteService />
+            <CommonFunction />
         </view>
         <!-- <Weather /> -->
         <!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> -->

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">
+        <MenuHeader title="常用功能" otherTitle="自定义" />
+        <Grid />
+    </view>
+</template>

src/pages/index/modules/header.vue

@@ -53,14 +53,14 @@
         <fui-row>
             <fui-col :span="12">
                 <view>
-                    <text class="mr-4 text-32"> 18° ~ 29° </text>
-                    <FuiIcon class="mt-1" custom-prefix="font_family" name="icon-bianzu" color="#fff" size="42" />
-                    <text> 20 优</text>
+                    <text class="mr-4 text-32">18° ~ 29°</text>
+                    <FuiIcon class="mt-1" custom-prefix="font_family" name="icon-bianzu" color="#fff" size="36" />
+                    <text>20 优</text>
                 </view>
             </fui-col>
             <fui-col :span="12">
                 <view class="flex-1 flex flex-justify-end">
-                    <text class="bg-[rgba(0,7,17,0.3)] text-28 pt-1.5 pb-1.5 pl-3 pr-1 b-rd-4">
+                    <text class="bg-[rgba(0,7,17,0.3)] text-28 pt-1 pb-1 pl-3 pr-1 b-rd-4">
                         城市预报
                         <fui-icon name="arrowright" :size="28" color="#fff" />
                     </text>

src/pages/index/modules/meteService.vue

 <script setup lang="ts"></script>
 
 <template>
-    <view class="box-shadow-yellow bg-#fff b-rd-2 mt-3 p-3 pb-0">
+    <view class="box-shadow-def bg-#fff b-rd-2 mt-3 p-3 pb-0">
         <!-- 头部 -->
-        <view class="flex lh-8 justify-between">
-            <view class="text-black text-34 font-600 line-blue">气象服务</view>
-            <view class="b-2 b-#3E8FFD b-solid b-rd-4 pl-3 pr-1 text-#3E8FFD flex align-center">
-                <text class="text-28 font-500">查看全部</text>
-                <fui-icon name="arrowright" size="36" color="#3E8FFD" />
-            </view>
-        </view>
+        <MenuHeader />
         <!-- 内容 -->
-        <view class="b-0 b-t-2 b-solid b-#EEEEEE pt-3" v-for="item in 3" :key="item">
+        <view
+            class="b-0 b-t-2 b-solid pt-3"
+            :style="`border-color:${index !== 0 ? '#EEEEEE' : 'transparent'};`"
+            v-for="(item, index) in 3"
+            :key="item"
+        >
             <view class="text-#333333 font-550 text-30"> 湖南省未来三天天气预报 </view>
             <view class="pt-4 pb-4">
                 <text class="text-28 font-500 w-132 b-2 b-#1890FF b-solid b-rd-4 p-1 pl-2 pr-1 text-#3E8FFD">

src/pages/index/modules/warning.vue

 <script setup lang="ts"></script>
 
 <template>
-    <view class="h-80 bg-[#FFFBE6] b-rd-5 pl-3 lh-10 flex box-shadow-yellow">
+    <view class="h-80 bg-[#FFFBE6] b-rd-5 pl-3 lh-10 flex box-shadow-def">
         <view>
             <img src="/static/images/earlyWarningIcon/by-1.svg" alt="by" class="h-50 mt-2 shadow-yellow" />
         </view>

src/static/iconfont.css

 @font-face {
   font-family: "font_family"; /* Project id 4105118 */
-  src: url('iconfont.woff2?t=1686122265823') format('woff2'),
-       url('iconfont.woff?t=1686122265823') format('woff'),
-       url('iconfont.ttf?t=1686122265823') format('truetype');
+  src: url('iconfont.woff2?t=1686818547722') format('woff2'),
+       url('iconfont.woff?t=1686818547722') format('woff'),
+       url('iconfont.ttf?t=1686818547722') format('truetype');
 }
 
 .font_family {
@@ -13,6 +13,142 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-areal-rainfall-m:before {
+  content: "\e616";
+}
+
+.icon-radar-m:before {
+  content: "\e617";
+}
+
+.icon-geology-disaster-m:before {
+  content: "\e618";
+}
+
+.icon-rain-m:before {
+  content: "\e619";
+}
+
+.icon-envir-m:before {
+  content: "\e61a";
+}
+
+.icon-iceSnow-m:before {
+  content: "\e61b";
+}
+
+.icon-humidness-m:before {
+  content: "\e61c";
+}
+
+.icon-tem-m:before {
+  content: "\e61d";
+}
+
+.icon-satellite-m:before {
+  content: "\e61e";
+}
+
+.icon-forest-m:before {
+  content: "\e61f";
+}
+
+.icon-torrents-m:before {
+  content: "\e620";
+}
+
+.icon-typhoon-m:before {
+  content: "\e621";
+}
+
+.icon-light-m:before {
+  content: "\e622";
+}
+
+.icon-water-m:before {
+  content: "\e623";
+}
+
+.icon-wind-m:before {
+  content: "\e624";
+}
+
+.icon-situation-field-m:before {
+  content: "\e625";
+}
+
+.icon-important-process-w:before {
+  content: "\e626";
+}
+
+.icon-meeting-materials-w:before {
+  content: "\e627";
+}
+
+.icon-pattern-product-w:before {
+  content: "\e628";
+}
+
+.icon-be-onduty-w:before {
+  content: "\e629";
+}
+
+.icon-tem-f:before {
+  content: "\e62a";
+}
+
+.icon-torrents-f:before {
+  content: "\e62b";
+}
+
+.icon-rain-f:before {
+  content: "\e62c";
+}
+
+.icon-fog-f:before {
+  content: "\e62d";
+}
+
+.icon-envir-f:before {
+  content: "\e62e";
+}
+
+.icon-geology-disaster-f:before {
+  content: "\e62f";
+}
+
+.icon-grid-f:before {
+  content: "\e630";
+}
+
+.icon-areal-rainfall-f:before {
+  content: "\e631";
+}
+
+.icon-forest-fire-f:before {
+  content: "\e632";
+}
+
+.icon-drought-c:before {
+  content: "\e633";
+}
+
+.icon-metaphase-climate-c:before {
+  content: "\e634";
+}
+
+.icon-rain-c:before {
+  content: "\e635";
+}
+
+.icon-service-product-c:before {
+  content: "\e636";
+}
+
+.icon-tem-c:before {
+  content: "\e637";
+}
+
 .icon-gw:before {
   content: "\e615";
 }

src/utils/const/Navigation.ts

+// 实况监测
+export const liveModules = [
+    {
+        label: '降水监测',
+        value: 'rain-m',
+    },
+    {
+        label: '气温监测',
+        value: 'tem-m',
+    },
+    {
+        label: '大风监测',
+        value: 'wind-m',
+    },
+    {
+        label: '相对湿度',
+        value: 'humidness-m',
+    },
+    {
+        label: '雷达拼图',
+        value: 'radar-m',
+    },
+    {
+        label: '强对流',
+        value: 'light-m',
+    },
+    {
+        label: '冰雪天气',
+        value: 'iceSnow-m',
+    },
+    {
+        label: '形势场',
+        value: 'situation-field-m',
+    },
+    {
+        label: '台风监测',
+        value: 'typhoon-m',
+    },
+    {
+        label: '卫星云图',
+        value: 'satellite-m',
+    },
+    {
+        label: '环境监测',
+        value: 'envir-m',
+    },
+    {
+        label: '水情监测',
+        value: 'water-m',
+    },
+    {
+        label: '山洪风险',
+        value: 'torrents-m',
+    },
+    {
+        label: '面雨量/流域风险',
+        value: 'areal-rainfall-m',
+    },
+    {
+        label: '地质灾害',
+        value: 'geology-disaster-m',
+    },
+    {
+        label: '森林火险',
+        value: 'forest-m',
+    },
+]
+
+// 预报信息
+export const forecastModules = [
+    {
+        label: '降水预报',
+        value: 'rain-f',
+    },
+    {
+        label: '气温预报',
+        value: 'tem-f',
+    },
+    {
+        label: '网格预报',
+        value: 'grid-f',
+    },
+    {
+        label: '环境预报',
+        value: 'envir-f',
+    },
+    {
+        label: '大雾预报',
+        value: 'fog-f',
+    },
+    {
+        label: '面雨量/流域风险',
+        value: 'areal-rainfall-f',
+    },
+    {
+        label: '山洪风险',
+        value: 'torrents-f',
+    },
+    {
+        label: '地质灾害',
+        value: 'geology-disaster-f',
+    },
+    {
+        label: '森林火险',
+        value: 'forest-fire-f',
+    },
+]
+
+// 气候
+export const climateModules = [
+    {
+        label: '降水统计',
+        value: 'rain-c',
+    },
+    {
+        label: '气温统计',
+        value: 'tem-c',
+    },
+    {
+        label: '气候服务产品',
+        value: 'service-product-c',
+    },
+    {
+        label: '中期气候',
+        value: 'metaphase-climate-c',
+    },
+    {
+        label: '气象干旱',
+        value: 'drought-c',
+    },
+]
+
+// 天气
+export const weatherModules = [
+    {
+        label: '会商材料',
+        value: 'meeting-materials-w',
+    },
+    {
+        label: '模式产品',
+        value: 'pattern-product-w',
+    },
+    {
+        label: '重要过程',
+        value: 'important-process-w',
+    },
+    {
+        label: '值排班',
+        value: 'be-onduty-w',
+    },
+]

types/components.d.ts

@@ -130,7 +130,9 @@ declare module '@vue/runtime-core' {
     FuiVtabsContent: typeof import('./../src/components/firstui/fui-vtabs-content/fui-vtabs-content.vue')['default']
     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']
     Icon: typeof import('./../src/components/Icon/index.vue')['default']
+    MenuHeader: typeof import('./../src/components/Layout/MenuHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./../src/components/Icon/svgIcon.vue')['default']