顶部导航修改

src/Layout/footer/index.vue

@@ -14,10 +14,12 @@ import {} from 'vue'
   // bottom: 0;
   height: 300px;
   width: 100%;
-  background-color: #252527;
+  // background-color: #252527;
+  background: url('../../assets//images/footer.png') no-repeat;
+  background-size: cover;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
+  color: #000;
 }
 </style>

src/Layout/tabbar/components/item.vue

@@ -0,0 +1,67 @@
+<template>
+    <!-- 根据路由动态生成菜单 -->
+    <template v-for="item in menuList" :key="item.path">
+      <!-- 没有子路由 -->
+      <template v-if="!item.children">
+        <el-menu-item
+          v-if="!item.meta.hidden"
+          :index="item.path"
+          @click="goToRoute"
+        >
+          <!-- <el-icon>
+            <component :is="item.meta.icon"></component>
+          </el-icon> -->
+          <template #title>
+            <!-- <el-icon>
+              <component :is="item.meta.icon"></component>
+            </el-icon> -->
+            <span>{{ item.meta.title }}</span>
+          </template>
+        </el-menu-item>
+      </template>
+      <!-- 有子路由但是只有一个子路由 -->
+      <template v-if="item.children && item.children.length === 1">
+        <el-menu-item
+          v-if="!item.children[0].meta.hidden"
+          :index="item.children[0].path"
+          @click="goToRoute"
+        >
+          <el-icon>
+            <component :is="item.children[0].meta.icon"></component>
+          </el-icon>
+          <template #title>
+            <span>{{ item.children[0].meta.title }}</span>
+          </template>
+        </el-menu-item>
+      </template>
+      <!-- 有子路由且有多个 -->
+      <el-sub-menu
+        :index="item.path"
+        v-if="item.children && item.children.length > 1"
+      >
+        <template #title>
+          <el-icon>
+            <component :is="item.meta.icon"></component>
+          </el-icon>
+          <span>{{ item.meta.title }}</span>
+        </template>
+        <Item :menuList="item.children" />
+      </el-sub-menu>
+    </template>
+  </template>
+  <script lang="ts" setup>
+  import { useRouter } from 'vue-router'
+  // import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+  // 获取父组件传递的全部的路由的数据
+  defineProps(['menuList'])
+  const $router = useRouter()
+  const goToRoute = (vc: any) => {
+    $router.push(vc.index)
+  }
+  </script>
+  <script lang="ts">
+  export default {
+    name: 'app-Menu',
+  }
+  </script>
+  <style lang="scss" scoped></style>

src/Layout/tabbar/index.vue

@@ -7,16 +7,19 @@
         </div>
 
         <div class="menu">
-          <ul>
+          <el-menu
+            :default-active="$route.path"
+            class="el-menu-demo"
+            mode="horizontal"
+            :ellipsis="false"
+          >
+            <Item :menu-list="constRouter.children"/>
+        </el-menu>
+          <!-- <ul>
             <li v-for="(item, index) in constRouter.children" :key="index">
               {{ item.meta.title }}
             </li>
-          </ul>
-<!--          <ul>-->
-<!--            <router-link v-for="(item, index) in constRouter.children" :key="index" :to="item.path">-->
-<!--              {{ item.meta.title }}-->
-<!--            </router-link>-->
-<!--          </ul>-->
+          </ul> -->
         </div>
       </div>
       <div class="right" v-if="!useUserStore.token">
@@ -29,13 +32,14 @@
         </div>
         <el-dropdown>
           <span class="el-dropdown-link">
-          {{ useUserStore.userInfo.username }}
+            {{ useUserStore.userInfo.username }}
             <el-icon class="el-icon--right">
               <arrow-down />
             </el-icon>
           </span>
           <template #dropdown>
             <el-dropdown-menu>
+              <el-dropdown-item @click="$router.push('/user-info')">个人中心</el-dropdown-item>
               <el-dropdown-item @click="layout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -47,11 +51,13 @@
 
 <script lang="ts" setup>
 import { constRouter } from '@/router/module/constRouter'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { onMounted, ref } from 'vue'
 import userStore from '@/store/module/user'
+import Item from './components/item.vue'
 const useUserStore = userStore()
 const $router = useRouter()
+const $route = useRoute()
 const flog = ref(false)
 onMounted(() => {
   window.addEventListener('scroll', () => {
@@ -63,9 +69,7 @@ onMounted(() => {
   })
 })
 const layout = async () => {
-   useUserStore.layOut()
-
-  
+  useUserStore.layOut()
 }
 </script>
 
@@ -245,4 +249,12 @@ const layout = async () => {
     align-items: center;
   }
 }
+:deep(.el-menu){
+  background-color: transparent;
+  border-bottom: none;
+}
+:deep(.el-menu-item){
+  background-color: transparent;
+  border-bottom: none;
+}
 </style>

src/api/race.ts

@@ -0,0 +1,16 @@
+import request from '@/utils/requset'
+
+// 获取年度比赛项目列表
+export const getRaceProjectList = (params:any) => {
+    return request({
+        url:'/AnnualCompPoint/annualCompPoint/listStudent',
+        params
+    })
+}
+// 获取年度比赛列表
+export const getRaceList = (params:any) => {
+    return request({
+        url:'/annualcomp/annualComp/schoollist',
+        params
+    })
+}

src/router/module/constRouter/index.ts

@@ -84,6 +84,11 @@ export const constRouter: any =
           path: '',
           name: 'newsList',
           component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
+          meta: {
+            icon: '',
+            title: '新闻列表',
+            hidden: false,
+          },
         },
         {
           path: '/newsDetail',
@@ -92,11 +97,21 @@ export const constRouter: any =
           meta: {
             icon: '',
             title: '新闻内容详情',
-            hidden: true,
+            hidden: false,
           }
         }
       ],
     },
+    {
+      path: '/user-info',
+      name: 'UserInfo',
+      component: () => import('@/views/userInfo/index.vue'),
+      meta: {
+        icon: '',
+        title: '个人中心',
+        hidden: true,
+      },
+    },
   ],
 }
 

src/views/home/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="container-1420">
+  <div class="container-1420" v-if="isLoading">
     <div class="banner">
-      <div class="title">2024年度全国电子科技大赛火热报名中</div>
+      <div class="title">{{ reacProjectList[0].objName}}火热报名中</div>
       <div class="description">
-        我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介我是一段比赛简介
+       {{ reacProjectList[0].annualCompId_dictText }}
       </div>
       <div class="application gradient">立即报名</div>
       <div class="nav-title">
@@ -13,14 +13,14 @@
     </div>
     <!-- 比赛列表 -->
     <div class="race-list">
-      <div class="item" v-for="i in 8" :key="i">
+      <div class="item" v-for="item in reacProjectList" :key="item.id">
         <div class="image">
-          <img src="../../assets/images/item.png" alt="" />
+          <img :src="setImageUrl(item.image)" alt="" />
         </div>
         <div class="reac-info">
-          <div class="reac-title">全国计算机等级大赛</div>
-          <div class="reac-project">全国计算机等级大赛项目</div>
-          <div class="time">报名时间:2022-01-01 18:00-2022-01-01:18:00</div>
+          <div class="reac-title">{{ item.compname }}</div>
+          <div class="reac-project"><div v-html="item.introduce"></div></div>
+          <div class="time">报名时间:{{item.starttime}}-{{ item.endtime }}</div>
         </div>
       </div>
     </div>
@@ -50,9 +50,11 @@
             </div>
             <div class="newa-main-list">
               <ul>
-                <li v-for="i in 6" :key="i ">
-                    <div class="time">2024-09-12</div>
-                    <div class="info">我是一段新闻描述,我是一段新闻描述,我是一段新闻描述</div>
+                <li v-for="i in 6" :key="i">
+                  <div class="time">2024-09-12</div>
+                  <div class="info">
+                    我是一段新闻描述,我是一段新闻描述,我是一段新闻描述
+                  </div>
                 </li>
               </ul>
             </div>
@@ -65,7 +67,29 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { getRaceList } from '@/api/race'
+
+const reacProjectList = ref<any>([])
+const isLoading = ref(false)
+const getRaceProjectListEvent = async () => {
+  let page = {
+    column: 'createTime',
+    order: 'desc',
+    pageNo: 1,
+    pageSize: 8,
+  }
+  const res:any = await getRaceList(page)
+  console.log(res)
+  reacProjectList.value = res.result.records
+  console.log(reacProjectList.value ,'reacProjectList.value ');
+  
+  isLoading.value = true
+}
+getRaceProjectListEvent()
 const active = ref(1)
+const setImageUrl = (url:string) => {
+  return   import.meta.env.VITE_APP_BASE_API +url 
+}
 </script>
 
 <style lang="scss" scoped>
@@ -73,11 +97,13 @@ const active = ref(1)
   position: relative;
   width: 100%;
   height: 692px;
-  background: radial-gradient(
-    circle,
-    rgba(131, 255, 197, 1) 0%,
-    rgba(255, 255, 255, 1) 50%
-  );
+  // background: radial-gradient(
+  //   circle,
+  //   rgba(131, 255, 197, 1) 0%,
+  //   rgba(255, 255, 255, 1) 50%
+  // );
+  background: url('../../assets/images/banner1.png') no-repeat;
+  background-size: contain;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -123,9 +149,10 @@ const active = ref(1)
 }
 .race-list {
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  // gap: 10px;
   margin-top: 40px;
   .item {
     width: 340px;
@@ -164,6 +191,8 @@ const active = ref(1)
 }
 .news-list {
   margin-top: 170px;
+  background: url('../../assets/images/bg2.png') no-repeat;
+  background-size: cover;
   .news-title {
     .top {
       font-size: 40px;
@@ -243,28 +272,28 @@ const active = ref(1)
           margin-top: 10px;
           color: #1e2033;
         }
-        .newa-main-list{
+        .newa-main-list {
           width: 100%;
           height: 270px;
           // background-color: pink;
           margin-top: 38px;
-          ul{
+          ul {
             width: 100%;
             height: 100%;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
             align-items: center;
-            li{
+            li {
               width: 227px;
               height: 65px;
-              .time{
+              .time {
                 position: relative;
                 font-size: 14px;
                 color: #1e2033;
                 padding-left: 13px;
               }
-              .time::before{
+              .time::before {
                 content: ' ';
                 display: block;
                 position: absolute;
@@ -274,7 +303,7 @@ const active = ref(1)
                 height: 13px;
                 background-color: #319245;
               }
-              .info{
+              .info {
                 margin-top: 12px;
                 font-size: 12px;
                 color: #1e2033;

src/views/userInfo/index.vue

@@ -0,0 +1,12 @@
+<template>
+   <div class="container-1420">1</div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>