底部导航

src/Layout/footer/index.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="footer">
-    <h1>FOOTER</h1>
+    <div class="footer-nav">
+      <div class="item">关于我们</div>
+      <div class="item">联系我们</div>
+      <div class="item">服务协议</div>
+    </div>
+    <div class="copyright">
+      源码自然版权所有@2023 湘豫CP备 19005950号-1
+    </div>
+    <div class="report">
+      违法和不良信息举报 举报电话：0xxx-8xxxxxxx 举报邮箱：xxxxxxxxx@qq.com
+      
+    </div>
   </div>
 </template>
 
@@ -18,8 +29,32 @@ import {} from 'vue'
   background: url('../../assets//images/footer.png') no-repeat;
   background-size: cover;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  color: #000;
+  // justify-content: center;
+  color: #333333;
+  .footer-nav {
+    display: flex;
+    margin-top: 120px;
+    .item {
+      width: 180px;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+    }
+    .item:nth-child(2) {
+      border-left: 1px solid #333333;
+      border-right: 1px solid #333333;
+    }
+    .item:hover {
+      color: #0bd7c6;
+    }
+  }
+  .copyright{
+    margin-top: 80px;
+  }
+  .report{
+    margin-top: .1042rem;
+  }
 }
 </style>

src/views/home/index.vue

@@ -30,18 +30,18 @@
     <!-- 新闻列表 -->
     <div class="news-list">
       <div class="news-title">
-        <div class="top">竞赛导航</div>
+        <div class="top">新闻资讯</div>
         <div class="bottom">30+项目登陆后报名</div>
       </div>
       <div class="newa-panel">
         <div class="tab">
           <div
-            :class="active === i ? 'item active gradient' : 'item'"
-            v-for="i in 5"
-            :key="i"
-            @click="active = i"
+            :class="active === index ? 'item active gradient' : 'item'"
+            v-for="(item,index) in News"
+            :key="index"
+            @click="active = index"
           >
-            全部
+           {{ item }}
           </div>
         </div>
         <div class="newa-main">
@@ -76,6 +76,8 @@ import { ElLoading } from 'element-plus'
 const router = useRouter()
 const reacProjectList = ref<any>([])
 const isLoading = ref(false)
+
+const News =ref<any>(['全部','通知公告','赛事资讯','活动速递','政策文件'])
 const getRaceProjectListEvent = async () => {
   let page = {
     column: 'createTime',
@@ -97,7 +99,7 @@ const getRaceProjectListEvent = async () => {
   loading.close()
 }
 getRaceProjectListEvent()
-const active = ref(1)
+const active = ref(0)
 const setImageUrl = (url: string) => {
   return import.meta.env.VITE_APP_BASE_API + url
 }