修改首页样式

collect_information/src/pages/projectManager/index/index.scss

@@ -4,6 +4,7 @@
   display: flex;
   padding: 20px 0 0 50px;
   overflow: hidden;
+  height: 70rpx;
   .swiperDemoIndex{
     width: 15px;
     height: 45px;
@@ -13,4 +14,31 @@
     margin-right: 15px;
   }
 }
+.subModule {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-right: -3px;
+  margin-left: -1px;
+  .subModuleItem {
+    width: 33%;
+    height: 180rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 10rpx;
+    border: 1px solid #ccc;
+    border-left: 0;
+    margin-top: -1px;
+    .subModuleIndex {
+      width: 65rpx;
+      height: 65rpx;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
 

collect_information/src/pages/projectManager/index/index.vue

@@ -3,41 +3,65 @@
     <view class="swiperDemo">
       <nut-swiper ref="swiperRef" pagination-visible pagination-color="#e53e31" :auto-play="3000" :init-page="0">
         <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 180px">
-<!--          <image :src="item" alt="" style="height: 100%; width: 100%" draggable="false"/>-->
         <image src="@/assets/images/01.png" alt="" style="height: 100%; width: 100%" draggable="false"/>
         </nut-swiper-item>
       </nut-swiper>
     </view>
-
     <view class="swiperDemoItem">
       <view class="swiperDemoIndex"> </view>
       <view>请选择</view>
     </view>
-    <view class="margin-top">
-      <nut-grid :column-num="3">
-        <nut-grid-item
-            text="我的项目"
-            @click="Taro.navigateTo({url: '/subPages/pages/myProject/myProject'})">
-        </nut-grid-item>
-        <nut-grid-item
-            text="警保风采"
-            @click="Taro.navigateTo({url: '/pages/index/dataEntry/personnelInformationEntry/personnelInformationEntry'})">
-        </nut-grid-item>
-        <nut-grid-item text=".....">
-        </nut-grid-item>
-      </nut-grid>
+  <!--九宫格-->
+    <view>
+      <view class="subModule" >
+        <view class="subModuleItem"  v-for="item in subModuleList" :key="item.id" @click="subNavigation(item.id)">
+          <view class="subModuleIndex">
+            <image :src="item.icon"></image>
+          </view>
+          <view style=" font-size: 12px;color: #414141;margin-top: 9px">{{item.name}}</view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 <script setup lang="ts">
 import {ref} from 'vue'
 import Taro from "@tarojs/taro";
+import  icon from '@/assets/images/project.png'
 import  './index.scss'
 const list = ref([
   'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
 ])
-const swiperRef = ref()
+const swiperRef = ref() //轮播图
+const subModuleList = ref([
+  {
+    id:0,
+    icon:icon,
+    name:'我的项目'
+  },
+  {
+    id:1,
+    icon:icon,
+    name:'警保风采'
+  },
+  {
+    id:2,
+    icon:icon,
+    name:'待定'
+  }
+])
 
+const subNavigation = async (id:number)=>{
+     switch (id) {
+       case 0:
+       await Taro.navigateTo({url: '/subPages/pages/myProject/myProject'})
+       break;
+       case 1:
+         console.log("123132")
+         // Taro.navigateTo({url: '/pages/index/dataEntry/personnelInformationEntry/personnelInformationEntry'})
+       break;
+     }
+}
 </script>
 
 

collect_information/types/global.d.ts

@@ -76,3 +76,10 @@ interface BaseEnum<T, E = Record<string, any>> {
   label: string;
   extData: E;
 }
+
+
+ interface IconFontProps {
+  fontClass?: string,
+  size?: number,
+  type?: 'class' | 'svg'
+}