Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal

src/Layout/tabbar/index.vue

@@ -12,6 +12,11 @@
               {{ 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>-->
         </div>
       </div>
       <div class="right" v-if="!useUserStore.token">

src/router/module/constRouter/index.ts

@@ -1,55 +1,102 @@
 export const constRouter: any =
-  {
+{
-    path: '/',
+  path: '/',
-    component: () => import('@/Layout/index.vue'),
+  component: () => import('@/Layout/index.vue'),
-    name: 'Layout',
+  name: 'Layout',
-    redirect: '/home',
+  redirect: '/home',
-    meta: {
+  meta: {
-      icon: '',
+    icon: '',
-      title: '',
+    title: '',
-      hidden: false,
+    hidden: false,
+  },
+  children: [
+    {
+      path: '/home',
+      name: 'Home',
+      component: () => import('@/views/home/index.vue'),
+      meta: {
+        icon: '',
+        title: '首页',
+        hidden: false,
+      },
     },
-    children: [
+    {
-      {
+      path: '/appraise',
-        path: '/home',
+      name: 'Appraise',
-        name: 'Home',
+      component: () => import('@/views/appraise/index.vue'),
-        component: () => import('@/views/home/index.vue'),
+      meta: {
-        meta: {
+        icon: '',
-          icon: '',
+        title: '竞赛评价',
-          title: '首页',
+        hidden: false,
-          hidden: false,
-        },
       },
-      {
+    },
-        path: '/appraise',
+    {
-        name: 'Appraise',
+      path: '/navigation',
-        component: () => import('@/views/appraise/index.vue'),
+      name: 'Navigation',
-        meta: {
+      component: () => import('@/views/navigation/index.vue'),
-          icon: '',
+      meta: {
-          title: '竞赛评价',
+        icon: '',
-          hidden: false,
+        title: '竞赛导航',
-        },
+        hidden: false,
       },
-      {
+    },
-        path: '/navigation',
+    {
-        name: 'Navigation',
+      path: '/achievement',
-        component: () => import('@/views/navigation/index.vue'),
+      name: 'Achievement',
-        meta: {
+      component: () => import('@/views/achievement/index.vue'),
-          icon: '',
+      meta: {
-          title: '竞赛导航',
+        icon: '',
-          hidden: false,
+        title: '竞赛成果',
-        },
+        hidden: false,
       },
-      {
+    },
-        path: '/achievement',
+    {
-        name: 'Achievement',
+      path: '/competition',
-        component: () => import('@/views/achievement/index.vue'),
+      name: 'Competition',
-        meta: {
+      component: () => import('@/views/competition/index.vue'),
-          icon: '',
+      meta: {
-          title: '竞赛成果',
+        icon: '',
-          hidden: false,
+        title: '年度赛事',
-        },
+        hidden: false,
+      },
+    },
+    {
+      path: '/registration',
+      name: 'Registration',
+      component: () => import('@/views/registration/index.vue'),
+      meta: {
+        icon: '',
+        title: '报名信息',
+        hidden: false,
       },
-    ],
+    },
-  }
+    {
+      path: '/news',
+      name: 'news',
+      component: () => import('@/views/news/index.vue'),
+      meta: {
+        icon: '',
+        title: '竞赛新闻',
+        hidden: false,
+      },
+      children: [
+        {
+          path: '',
+          name: 'newsList',
+          component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
+        },
+        {
+          path: '/newsDetail',
+          name: 'newsDetail',
+          component: () => import('@/views/news/components/newsDetail.vue'),
+          meta: {
+            icon: '',
+            title: '新闻内容详情',
+            hidden: true,
+          }
+        }
+      ],
+    },
+  ],
+}
 

src/views/competition/index.vue

@@ -0,0 +1,325 @@
+<!-- 年度赛事页面 -->
+<template>
+    <div class="fill"></div>
+    <div class="banner">
+        <img src="../../assets/images/banner2.png" alt="">
+    </div>
+    <div class="competition">
+        <!-- 简介 -->
+        <div class="synopsis">
+            <div class="name">年度比赛名称</div>
+            <div class="content">
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
+                比赛简介比赛简介比赛简介比赛简介比赛简介</div>
+            <div class="date">报名时间：2023.08.23-2023.09.23</div>
+        </div>
+
+        <!-- 选择项目 -->
+        <div class="select">
+            <div class="left">
+                <div class="text-box">
+                    <div class="title">选择项目</div>
+                    <div class="small">300+竞赛登陆后请报名</div>
+                </div>
+
+                <div class="card-list">
+                    <template v-for="i in 16" :key="i">
+                        <div v-if="(i + 4) % 4 == 1" class="card" type="yellow">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 2" class="card" type="purple">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 3" class="card" type="cyan00">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                        <div v-if="(i + 4) % 4 == 0" class="card" type="orange">
+                            <div class="top">红色之旅赛道</div>
+                            <div class="bottom">
+                                <el-button class="btn">立即报名</el-button>
+                                <el-link :underline="false" class="link">详情</el-link>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="right">
+                <div class="text-box">
+                    <div class="title">历史比赛</div>
+                    <div class="small">往年历史赛事</div>
+                </div>
+
+                <div class="game-list">
+                    <div class="card-game" v-for="i in 5" :key="i">
+                        <div class="pos">
+                            前往查看
+                        </div>
+                        <div class="top">
+                            2023年度
+                        </div>
+                        <div class="center">
+                            <div class="text">河南省大学生创新创业大赛</div>
+                            <img src="../../assets/images/编组.png" alt="">
+                        </div>
+                        <div class="bottom">
+                            报名时间：2023.08.23-2023.09.23
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 367px;
+    border-radius: 0px 0px 0px 0px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.competition {
+    margin: 0 auto;
+    width: $base-container-width;
+
+    .synopsis {
+        .name {
+            height: 59px;
+            line-height: 59px;
+            font-family: Open Sans, Open Sans;
+            font-weight: bold;
+            font-size: 42px;
+            color: #333333;
+        }
+
+        .content {
+            margin-top: 40px;
+            font-family: Open Sans, Open Sans;
+            font-weight: 400;
+            font-size: 20px;
+            color: #555555;
+            line-height: 23px;
+        }
+
+        .date {
+            margin-top: 30px;
+            height: 23px;
+            line-height: 23px;
+            font-family: Open Sans, Open Sans;
+            font-weight: 400;
+            font-size: 20px;
+            color: #858585;
+        }
+    }
+
+    .select {
+        margin-top: 125px;
+        margin-bottom: 500px;
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+            width: 1100px;
+
+            .card-list {
+                display: flex;
+                flex-wrap: wrap;
+                column-gap: 20px;
+                row-gap: 40px;
+
+                .card {
+                    width: 260px;
+                    height: 160px;
+                    padding: 40px 0 0 30px;
+
+                    &[type="yellow"] {
+                        background: url(../../assets/images/yellow.png) no-repeat;
+                        background-size: cover;
+                        --color: #FFC300;
+                        --bg-color1: #FFCB9A;
+                        --bg-color2: #FFC300;
+                    }
+
+                    &[type="purple"] {
+                        background: url(../../assets/images/purple.png) no-repeat;
+                        background-size: cover;
+                        --color: #3F8BFF;
+                        --bg-color1: #90BBFC;
+                        --bg-color2: #C4CDFF;
+                    }
+
+                    &[type="cyan00"] {
+                        background: url(../../assets/images/item.png) no-repeat;
+                        background-size: cover;
+                        --color: #76DAE5;
+                        --bg-color1: #74D9E4;
+                        --bg-color2: #74E4BC;
+                    }
+
+                    &[type="orange"] {
+                        background: url(../../assets/images/orange.png) no-repeat;
+                        background-size: cover;
+                        --color: #FF907B;
+                        --bg-color1: #FCA190;
+                        --bg-color2: #FCD190;
+                    }
+
+                    .top {
+                        margin-bottom: 30px;
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: bold;
+                        font-size: 24px;
+                    }
+
+                    .bottom {
+                        display: flex;
+                        gap: 50px;
+
+                        .top,
+                        .link {
+                            color: var(--color);
+                        }
+
+                        .btn {
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 14px;
+                            width: 120px;
+                            height: 30px;
+                            border-radius: 15px;
+                            color: #fff;
+                            border: none;
+                            background: linear-gradient(to right, var(--bg-color1), var(--bg-color2));
+                        }
+                    }
+                }
+            }
+        }
+
+        .right {
+            width: 260px;
+
+            .game-list {
+                .card-game {
+                    width: 260px;
+                    height: 140px;
+                    background: linear-gradient(90deg, #21ACA5 0%, #42D9AC 100%);
+                    border-radius: 4px 4px 4px 4px;
+                    margin-bottom: 18px;
+                    background: url(../../assets/images/Rectangle284.png) no-repeat;
+                    background-position: top right;
+                    padding: 20px 22px;
+                    position: relative;
+
+                    .pos {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        width: 115px;
+                        height: 28px;
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: #F6F5FB;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                    }
+
+                    .top {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: rgba(51, 51, 51, 0.8);
+                        line-height: 14px;
+                    }
+
+                    .center {
+                        margin: 10px 0;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .text {
+                            width: 140px;
+                            height: 40px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 16px;
+                            color: #333333;
+                            line-height: 20px;
+                        }
+                    }
+
+                    .bottom {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: 400;
+                        font-size: 12px;
+                        color: rgba(51, 51, 51, 0.8);
+                    }
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        .left,
+        .right {
+            .text-box {
+                margin-bottom: 46px;
+
+                .title {
+                    height: 42px;
+                    line-height: 42px;
+                    font-family: Inter, Inter;
+                    font-weight: bold;
+                    font-size: 40px;
+                    color: #1E2033;
+                }
+
+                .small {
+                    margin-top: 5px;
+                    height: 24px;
+                    line-height: 24px;
+                    font-family: Inter, Inter;
+                    font-weight: 400;
+                    font-size: 16px;
+                    color: #828282;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/news/components/newsDetail.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-button @click="backHandle" type="success">返回</el-button>
+  <div style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
+    <p class="list-title">{{ data.title }}</p>
+    <p class="list-summary">{{ data.summary }}</p>
+    <div class="center-image">
+      <img class="list-image" :src="data.imageUrl" alt="News Image">
+    </div>
+    <p class="list-time">{{ data.date }}</p>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue';
+import {useRoute, useRouter} from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const backHandle = ()=>{
+  router.go(-1);
+}
+const data = ref(route.query)
+</script>
+
+<style scoped>
+.list-title{
+  font-size: 25px;
+  font-weight: 600;
+}
+.list-summary{
+  font-size: 20px;
+  color: #8c8b8b;
+  margin-top: 10px;
+}
+.list-time{
+  font-size: 16px;
+  color: #999999;
+  margin-top: 10px;
+}
+.center-image{
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+.list-image{
+  width: 500px;
+  margin-top: 20px;
+}
+</style>

src/views/news/components/newsList.vue

@@ -0,0 +1,147 @@
+<template>
+  <ul>
+    <li v-for="newsItems in newsData" :key="newsItems.id">
+      <div class="box-list" @click="handleClick(newsItems)">
+        <div class="left-box-list">
+          <p class="list-title">{{ newsItems.title }}</p>
+          <p class="list-summary">{{ newsItems.summary }}</p>
+          <p class="list-time">{{ newsItems.date }}</p>
+        </div>
+        <img class="news-image" :src="newsItems.imageUrl" alt="News Image">
+      </div>
+      <el-divider/>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import {useRouter} from "vue-router";
+const router = useRouter()
+// 假新闻数据
+const newsData = ref([
+  {
+    id:1,
+    title: '科技新闻1',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img1.xcarimg.com/exp/7971/8041/8084/8581/20130421003812814631.jpg'
+  },
+  {
+    id:2,
+    title: '体育新闻2',
+    date: '2024年9月22日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://pic.rmb.bdstatic.com/50252becb3b391b2cb68ddde4a9c5d9b.jpeg'
+  },
+  {
+    id:3,
+    title: '科技新闻3',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641'
+  },
+  {
+    id:4,
+    title: '科技新闻4',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img1.baidu.com/it/u=655643694,820713725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=729'
+  },
+  {
+    id:5,
+    title: '科技新闻5',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/00/00/ChMlWV0v7jyIHLj_AAgsbG2bHDcAAL5lQE1rfYACCyE751.jpg'
+  },
+  {
+    id:6,
+    title: '科技新闻6',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/1601bcb82e9858e21149cf64086a21db.jpg'
+  },
+  {
+    id:7,
+    title: '体育新闻7',
+    date: '2024年9月22日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/6280b93c7eb748a24466bd0d3021e3a9.jpg'
+  },
+  {
+    id:8,
+    title: '科技新闻8',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img2.woyaogexing.com/2023/05/05/113da83a57b3661c3170c2571007f8e5.jpg'
+  },
+  {
+    id:9,
+    title: '科技新闻9',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://img1.baidu.com/it/u=515359320,1010066691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=810'
+  },
+  {
+    id:10,
+    title: '科技新闻10',
+    date: '2024年9月23日',
+    summary: '你有没有想过，是否能用更轻量的方式开发出与Electron相同功能的桌面应用？毕竟，虽然Electron确实强大，但它那几百MB的安装包和资源消耗对许多小型项目来说太过头了。',
+    imageUrl: 'https://q6.itc.cn/images01/20240613/84d2e170b23b47be86f17ec5009febf9.jpeg'
+  },
+]);
+const handleClick = (newsItems)=>{
+  // router.push(`/news/${newsItems.id}`);
+  router.push({path:'/newsDetail',query:newsItems})
+}
+</script>
+
+<style scoped>
+.box-list{
+  display: flex;
+  /*background: cornsilk;*/
+  width: 95%;
+  height: 100px;
+  margin-left: 30px;
+  margin-bottom: 10px;
+  align-items: center;
+  cursor: pointer; /* 默认鼠标指针形状 */
+}
+.box-list:hover {
+  background-color: lightgrey; /* 鼠标悬停时改变背景颜色 */
+}
+.left-box-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  padding-right: 10px;
+}
+.list-title{
+  font-size: 22px;
+  margin-left: 60px;
+}
+.list-summary{
+  font-size: 16px;
+  margin-left: 60px;
+  margin-top: 15px;
+  color: #999999;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1 ;
+  overflow: hidden;
+  text-overflow: ellipsis; /* 溢出部分显示为省略号 */
+  max-width: calc(100% - 130px); /* 减去右侧图片宽度和内边距 */
+}
+.list-time{
+  margin-left: 60px;
+  margin-top: 20px;
+  color: #999999;
+}
+.news-image {
+  width: 100px;
+  height: 80px;
+  margin-right: 30px;
+}
+</style>

src/views/news/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <el-card style="max-width: 70%;margin: auto">
+      <template #header>
+        <div class="card-header">
+          <span>新闻推荐</span>
+        </div>
+      </template>
+      <div class="content">
+        <router-view></router-view>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+.container{
+  margin-top:100px;
+}
+.card-header{
+  font-size: 20px;
+  font-weight: 600;
+  margin-left: 100px;
+}
+.content {
+  height: 89vh;
+  overflow-y: scroll;
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+.content::-webkit-scrollbar {
+  width: 0;
+}
+</style>

src/views/registration/index.vue

@@ -0,0 +1,626 @@
+<template>
+    <!-- 报名信息页面 -->
+    <div class="fill"></div>
+    <div class="banner">
+        <div class="box">
+            <div class="title-box">
+                <div class="title">报名信息确认</div>
+                <div class="text">
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                </div>
+            </div>
+
+            <div class="img-box">
+                <img src="../../assets/images/applyImg.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="registration-layout">
+        <div class="top">
+            <!-- 比赛信息 -->
+            <el-card class="com">
+                <div class="title">比赛信息</div>
+                <div class="content">
+                    <div class="card-annual">
+                        <div class="annual">2023年度</div>
+                        <div class="title-box">
+                            <div class="text">河南省大学生创新创业大赛</div>
+                            <img src="../../assets/images/编组.png" alt="">
+                        </div>
+                    </div>
+                    <div class="right">
+                        <div class="info-box">
+                            <div class="name">比赛年度</div>
+                            <div class="title">2024年度</div>
+                            <div class="name">比赛名称</div>
+                            <div class="title">河南省大学生创新创业大赛</div>
+                            <div class="date-box">
+                                <div class="label">开始报名时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                            <div class="date-box">
+                                <div class="label">开始截至时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+            <!-- 项目信息 -->
+            <el-card class="com">
+                <div class="title">项目信息</div>
+                <div class="content track">
+                    <div class="card-annual">
+                        <p>红色之旅赛道</p>
+                    </div>
+                    <div class="right">
+                        <div class="info-box">
+                            <div class="name">项目名称</div>
+                            <div class="title">红色之旅赛道</div>
+                            <div class="name">要求人数</div>
+                            <div class="title">1人</div>
+                            <div class="date-box">
+                                <div class="label">开始报名时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                            <div class="date-box">
+                                <div class="label">开始截至时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+        </div>
+        <el-card class="center">
+            <div class="personage-info">
+                <div class="head">
+                    <div class="title">个人信息</div>
+                    <div class="icon">
+                        <img src="../../assets/images/ellipsis.png" alt="">
+                    </div>
+                </div>
+                <div class="info-box">
+                    <div class="label">姓名</div>
+                    <div class="text">王不留行</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">姓别</div>
+                    <div class="text">男</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">学号</div>
+                    <div class="text">2023010236</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">手机号</div>
+                    <div class="text">17725633652</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">院系</div>
+                    <div class="text">国际教育学院</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">专业</div>
+                    <div class="text">软件工程</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">指导老师</div>
+                    <div class="text">令狐冲</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">所属团队</div>
+                    <div class="text">王不留行的团队</div>
+                </div>
+
+                <div class="info-box remark">
+                    <div class="label">其它备注</div>
+                    <div class="text">无</div>
+                </div>
+            </div>
+        </el-card>
+        <el-card class="list" :body-style="{ padding: 0 }">
+            <div class="head">
+                <div class="left">
+                    <el-button class="btn" type="primary">添加队员</el-button>
+                    <div class="text">已选2位</div>
+                </div>
+
+                <div class="right">
+                    <el-input v-model="input" style="width: 280px" placeholder="请输入学号进行搜索" suffix-icon="Search" />
+                </div>
+            </div>
+
+            <div class="table-box">
+                <el-table ref="multipleTableRef" border :data="tableData" class="table">
+                    <el-table-column type="selection" width="55" />
+                    <el-table-column property="stuNum" label="学号" sortable />
+                    <el-table-column property="name" label="姓名" sortable />
+                    <el-table-column property="department" label="院系" sortable />
+                    <el-table-column property="phone" label="手机号" sortable />
+                </el-table>
+                <div class="pagin-box">
+                    <el-pagination class="pagination" style="width: 100%;" v-model:current-page="pagInfo.currentPage"
+                        v-model:page-size="pagInfo.pageSize" :page-sizes="[10, 20, 30, 40]"
+                        layout="slo, total,slot,  sizes, prev, pager, next, jumper" :total="pagInfo.total"
+                        @change="handleChange" />
+                </div>
+            </div>
+        </el-card>
+        <div class="bottom">
+            <el-button class="btn">取消报名</el-button>
+            <el-button class="btn cyan">确认报名</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+const input = ref('');
+interface User {
+    id: number          // id
+    stuNum: string      // 学号
+    name: string         // 姓名
+    department: string  // 院系
+    phone: string      // 手机号
+}
+const tableData: User[] = [
+    {
+        id: 1,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 2,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 3,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+    {
+        id: 4,
+        stuNum: '20230101',
+        name: '张三',
+        department: '软件工程',
+        phone: '13598664456',
+    },
+]
+
+// 分页
+const pagInfo = reactive({
+    currentPage: 50,
+    pageSize: 10,
+    total: 400
+})
+function handleChange(currentPage: number, pageSize: number) {
+    console.log(currentPage, pageSize);
+}
+</script>
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 289;
+    background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%);
+    padding: 21px 0 37px 225px;
+
+    .box {
+        width: 1515px;
+        height: 231px;
+        display: flex;
+        gap: 104px;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-box {
+            width: 1151px;
+
+            .title {
+                height: 59px;
+                font-family: Open Sans, Open Sans;
+                font-weight: bold;
+                font-size: 42px;
+                color: #333333;
+                line-height: 59px;
+            }
+
+            .text {
+                margin-top: 20px;
+                font-family: Open Sans, Open Sans;
+                font-weight: 400;
+                font-size: 20px;
+                color: #666666;
+                line-height: 23px;
+            }
+        }
+
+        .img-box {
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.registration-layout {
+    margin-top: 20px;
+    margin: 0 auto;
+    width: 1397px;
+
+    &>* {
+        background: #FFFFFF;
+    }
+
+    .top {
+        display: flex;
+        justify-content: space-between;
+        margin: 25px 0;
+        height: 300px;
+
+        .com {
+            width: 685px;
+            height: 300px;
+            border-radius: 6px 6px 6px 6px;
+            padding-top: 22px;
+            padding-left: 32px;
+
+            .title {
+                height: 28px;
+                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                font-weight: bold;
+                font-size: 20px;
+                color: rgba(0, 0, 0, 0.9);
+                line-height: 28px;
+                margin-bottom: 18px;
+            }
+
+            margin-right: 22px;
+
+            .content {
+                display: flex;
+                gap: 22px;
+
+                .card-annual {
+                    padding: 28px 0 0 28px;
+                    width: 340px;
+                    height: 182px;
+                    background: linear-gradient(90deg, #21ACA5 0%, #42D9AC99 100%);
+                    border-radius: 8px;
+                    overflow: hidden;
+
+                    .annual {
+                        height: 19px;
+                        font-family: Inter, Inter;
+                        font-weight: bold;
+                        font-size: 16px;
+                        color: rgba(255, 255, 255, 0.8);
+                        line-height: 19px;
+                    }
+
+                    .title-box {
+                        margin-top: 13px;
+                        display: flex;
+                        align-items: center;
+                        gap: 28px;
+
+                        .text {
+                            width: 202px;
+                            font-family: Inter, Inter;
+                            font-weight: normal;
+                            font-size: 32px;
+                            color: #FFFFFF;
+                            line-height: 39px;
+                        }
+                    }
+                }
+
+                .right {
+                    .info-box {
+                        .name {
+                            height: 20px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #ACACAC;
+                            line-height: 20px;
+                            margin-bottom: 8px;
+                        }
+
+                        .title {
+                            height: 20px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 20px;
+                            color: #333333;
+                            line-height: 20px;
+                            margin-bottom: 12px;
+                        }
+
+                        .date-box {
+                            margin-bottom: 12px;
+                            display: flex;
+                            align-items: center;
+
+                            .label {
+                                height: 20px;
+                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                                font-weight: 400;
+                                font-size: 14px;
+                                color: #ACACAC;
+                                line-height: 20px;
+                            }
+
+                            .date {
+                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                                font-weight: bold;
+                                font-size: 18px;
+                                color: #333333;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .track {
+                .card-annual {
+                    background: url(../../assets/images/item.png) no-repeat;
+                    background-size: cover;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0;
+
+                    p {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: bold;
+                        font-size: 40px;
+                        color: #76DAE5;
+                    }
+                }
+            }
+        }
+    }
+
+    .center {
+        height: 388px;
+        border-radius: 6px 6px 6px 6px;
+        margin-bottom: 25px;
+
+        .personage-info {
+            margin: 30px 0 0 32px;
+            width: 780px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            row-gap: 32px;
+
+            .head {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .title {
+                    height: 28px;
+                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: rgba(0, 0, 0, 0.9);
+                    line-height: 28px;
+                }
+
+                .icon {
+                    padding: 5px;
+                    cursor: pointer;
+                }
+            }
+
+            .info-box {
+                &.remark {
+                    width: 377.333px;
+                }
+
+                width: 176px;
+                height: 60px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .label {
+                    height: 22px;
+                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: rgba(0, 0, 0, 0.4);
+                    line-height: 22px;
+                }
+
+                .text {
+                    height: 22px;
+                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: rgba(0, 0, 0, 0.9);
+                    line-height: 22px;
+                }
+            }
+        }
+    }
+
+    .list {
+        .head {
+            padding: 32px;
+            height: 96px;
+            background: #FFFFFF;
+            box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 6px 6px 0px 0px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            &>* {
+                height: 32px;
+            }
+
+            .left {
+                display: flex;
+                gap: 12px;
+                align-items: center;
+
+                .btn {
+                    height: 32px;
+                    width: 88px;
+                    background: #42D9AC;
+                    border-radius: 3px 3px 3px 3px;
+                    border: none;
+                }
+
+                .text {
+                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: rgba(0, 0, 0, 0.4);
+                }
+            }
+
+        }
+
+        .table-box {
+            .table {
+                width: 100%;
+                height: 276px;
+            }
+
+            .pagin-box {
+                width: 100%;
+                height: 64px;
+                display: flex;
+                align-items: center;
+
+                .pagination {
+                    padding: 0 24px;
+
+                    :deep() {
+                        .el-pagination__total {
+                            margin-right: auto;
+                        }
+
+                        li.number.is-active {
+                            background-color: #42D9AC;
+                            color: rgba(255, 255, 255, 0.9);
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        }
+
+                        span.el-pagination__jump {
+                            background-color: #F3F3F3;
+                            padding: 2px 8px;
+                        }
+                    }
+                }
+
+            }
+
+        }
+    }
+
+    .bottom {
+        margin: 46px 0;
+        height: 70px;
+        display: flex;
+        gap: 106px;
+        justify-content: center;
+        align-items: center;
+
+        .btn {
+            --color1: #FFF4CE;
+            --color2: #FF6B6B;
+            width: 387px;
+            height: 69px;
+            border-radius: 69px;
+            border: none;
+            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+            font-weight: bold;
+            font-size: 24px;
+            color: #FFFFFF;
+            background: linear-gradient(to right, var(--color1), var(--color2));
+            box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
+            transition: all 0.2s;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+
+            &.cyan {
+                --color1: #00D0D0;
+                --color2: #42D9AC;
+            }
+        }
+
+    }
+
+}
+</style>