chore: 开发大赛首页

src/components/layout/Footer.vue

@@ -13,6 +13,7 @@ export default { name: 'AppFooter' }
   padding: 10px 0;
   font-size: 14px;
   line-height: 30px;
+  color: #707070;
   text-align: center;
   background-color: #fff;
 }

src/modules/home/views/Game.vue

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useUserStore } from '@/stores/user'
+
+const studentMenus = [
+  {
+    title: '我的大赛',
+    href: '/student/contest',
+    icon: '/images/game_student_home_icon_1.png'
+  },
+  {
+    title: '理论知识学习',
+    href: 'https://saas-learn.ezijing.com',
+    icon: '/images/game_student_home_icon_2.png'
+  },
+  {
+    title: '1+X考试训练',
+    href: 'https://x-learning.ezijing.com',
+    icon: '/images/game_student_home_icon_3.png'
+  },
+  {
+    title: '大赛成绩查询',
+    href: '/student/contest/score',
+    icon: '/images/game_student_home_icon_4.png'
+  }
+]
+const adminMenus = [
+  {
+    title: '大赛答疑',
+    href: '/admin/contest/discuss',
+    icon: '/images/game_admin_home_icon_1.png'
+  },
+  {
+    title: '大赛评分',
+    href: '/admin/contest/check',
+    icon: '/images/game_admin_home_icon_2.png'
+  },
+  {
+    title: '大赛成绩发布',
+    href: '/admin/contest/score',
+    icon: '/images/game_admin_home_icon_3.png'
+  },
+  {
+    title: '大赛成绩分析',
+    href: '/admin/contest/analyze/score',
+    icon: '/images/game_admin_home_icon_4.png'
+  }
+]
+
+const userStore = useUserStore()
+const menus = computed(() => {
+  return userStore.role?.id === 1 ? studentMenus : adminMenus
+})
+</script>
 
 <template>
-  <div></div>
+  <div class="card-list">
+    <div class="card" v-for="(item, index) in menus" :key="index">
+      <div class="icon"><img :src="item.icon" /></div>
+      <div class="title">{{ item.title }}</div>
+      <div class="button"><a :href="item.href">点击进入</a></div>
+    </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.card-list {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+}
+.card {
+  width: 310px;
+  height: 520px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  .icon {
+    width: 246px;
+    height: 238px;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .title {
+    margin: 70px 0 30px;
+    font-size: 24px;
+    color: #578ef9;
+  }
+  .button {
+    width: 130px;
+    height: 40px;
+    font-size: 16px;
+    line-height: 40px;
+    color: #ffffff;
+    background: linear-gradient(297deg, #83f0eb 0%, #5584f9 100%);
+    text-align: center;
+    border-radius: 25px;
+    a {
+      display: block;
+    }
+  }
+}
+</style>