feat：完善首页

src/pages/index.vue

@@ -1,7 +1,13 @@
 <script setup>
+import { menuList } from './menuData.js'
+
 defineOptions({
   name: 'IndexPage',
 })
+const menuListData = menuList
+function linkTo(path) {
+  alert(path)
+}
 </script>
 
 <template>
@@ -10,53 +16,17 @@ defineOptions({
       <p>校端办公管理系统</p>
     </div>
     <div class="bodyContainer">
-      <div class="card">
+      <div
+        v-for="(item, index) of menuListData" :key="item.title" class="card"
+        :style="index === 0 ? 'margin-top:0vh;' : ''"
+      >
         <div class="titleCard">
-          <p>公文收发管理</p>
+          <p>{{ item.title }}</p>
         </div>
         <div class="funcIconCard">
-          <div class="funcIcon">
-            <img src="/src/assets/index/wdfw.png">
-            <p>我的发文</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/dbfw.png">
-            <p>待办发文</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/dygw.png">
-            <p>待阅公文</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/gwk.png">
-            <p>公文库</p>
-          </div>
-        </div>
-      </div>
-      <div class="card" style="margin-top:1.2vh;">
-        <div class="titleCard">
-          <p>教师流动管理</p>
-        </div>
-        <div class="funcIconCard">
-          <div class="funcIcon">
-            <img src="/src/assets/index/bwrygl.png">
-            <p>编外人员管理</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/ndkhhz.png">
-            <p>年度考核汇总</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/myjsqkhz.png">
-            <p>名优教师情况汇总</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/txjstx.png">
-            <p>退休教师提醒</p>
-          </div>
-          <div class="funcIcon">
-            <img src="/src/assets/index/myjsjxkh.png">
-            <p>名优教师绩效考核</p>
+          <div v-for="child of item.list" :key="child.menuName" class="funcIcon" @click="linkTo(child.path)">
+            <img :src="child.icon">
+            <p>{{ child.menuName }}</p>
           </div>
         </div>
       </div>
@@ -71,7 +41,7 @@ defineOptions({
     position: fixed;
     font-weight: bold;
     font-size: 0.36rem;
-    height: 6.9vh;
+    height: 11vw;
     line-height: 6.9vh;
     padding-left: 2vw;
     background: white;
@@ -91,14 +61,13 @@ defineOptions({
 
     .funcIconCard {
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
       flex-wrap: wrap;
       padding-top: 2vh;
       padding-bottom: 2vh;
 
       .funcIcon {
-        flex-basis: 21%;
-        width: 13.3vw;
+        width: 25%;
         font-size: 0.20rem;
         text-align: center;
         display: flex;
@@ -122,6 +91,7 @@ defineOptions({
       background: white;
       border-radius: 10px;
       padding: 3vw;
+      margin-top: 1.2vh;
     }
   }
 }

src/pages/menuData.js

@@ -0,0 +1,73 @@
+import { getAssetsImages } from '../utils/getAssets'
+
+export const menuList = [
+  {
+    title: '公文管理系统',
+    list: [
+      { icon: getAssetsImages('index/wdfw.png'), menuName: '我的发文' },
+      { icon: getAssetsImages('index/dbfw.png'), menuName: '待办发文' },
+      { icon: getAssetsImages('index/dygw.png'), menuName: '待阅公文' },
+      { icon: getAssetsImages('index/gwk.png'), menuName: '公文库' },
+    ],
+  },
+  {
+    title: '三重一大申报',
+    list: [
+      { icon: getAssetsImages('index/xmsq.png'), menuName: '项目申请' },
+      { icon: getAssetsImages('index/xmhp.png'), menuName: '项目获批' },
+      { icon: getAssetsImages('index/xmds.png'), menuName: '项目待审' },
+    ],
+  },
+  {
+    title: '教师流动管理系统',
+    list: [
+      { icon: getAssetsImages('index/bwrygl.png'), menuName: '编外人员管理' },
+      { icon: getAssetsImages('index/ndkhhz.png'), menuName: '年度考核汇总' },
+      { icon: getAssetsImages('index/myjsqkhz.png'), menuName: '名优教师情况汇总' },
+      { icon: getAssetsImages('index/txjstx.png'), menuName: '退休教师提醒' },
+    ],
+  },
+  {
+    title: '加班餐费补贴',
+    list: [
+      { icon: getAssetsImages('index/gzt.png'), menuName: '工作台' },
+    ],
+  },
+  {
+    title: '设备采购申请',
+    list: [
+      { icon: getAssetsImages('index/sbys.png'), menuName: '设备预算' },
+      { icon: getAssetsImages('index/sbxmk.png'), menuName: '设备项目库' },
+    ],
+  },
+  {
+    title: '会议预定管理',
+    list: [
+      { icon: getAssetsImages('index/hysyd.png'), menuName: '会议室预定' },
+      { icon: getAssetsImages('index/hyjy.png'), menuName: '会议纪要' },
+      { icon: getAssetsImages('index/hyjyk.png'), menuName: '会议纪要库' },
+      { icon: getAssetsImages('index/hysgl.png'), menuName: '会议室管理' },
+    ],
+  },
+  {
+    title: '项目管理',
+    list: [
+      { icon: getAssetsImages('index/xmlcgl.png'), menuName: '项目流程管理' },
+      { icon: getAssetsImages('index/xmgkt.png'), menuName: '项目管控台' },
+      { icon: getAssetsImages('index/xmzlk.png'), menuName: '项目资料库' },
+    ],
+  },
+  {
+    title: '学生竞赛管理',
+    list: [
+      { icon: getAssetsImages('index/cjbs.png'), menuName: '创建比赛' },
+      { icon: getAssetsImages('index/zsdy.png'), menuName: '证书打印' },
+    ],
+  },
+  {
+    title: '学校工作检查',
+    list: [
+      { icon: getAssetsImages('index/tjtj.png'), menuName: '提交统计' },
+    ],
+  },
+]

src/utils/getAssets.js

@@ -0,0 +1,3 @@
+export function getAssetsImages(name) {
+  return new URL(`/src/assets/${name}`, import.meta.url).href
+}