From b378c7f5092f4083a6cedebd4ff0f6fe2e8b2202 Mon Sep 17 00:00:00 2001
From: JayChou <xxx@gmail.com>
Date: Wed, 16 Oct 2024 10:08:51 +0800
Subject: [PATCH] =?UTF-8?q?10.16=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/race.ts                           |    7 +
 src/views/competition/index.vue           |  668 +++++++------
 src/views/login/index.vue                 |    4 +-
 src/views/login/registered.vue            |    6 +-
 src/views/projectName/index.vue           |    1 +
 src/views/raceInfo/index.vue              |    6 +
 src/views/registrationGroup/index.vue     | 1095 +++++++++++----------
 src/views/registrationPersonage/index.vue |  904 ++++++++---------
 src/views/userInfo/index.vue              |   57 +-
 vite.config.ts                            |    1 +
 10 files changed, 1406 insertions(+), 1343 deletions(-)

diff --git a/src/api/race.ts b/src/api/race.ts
index c4bbf3d..822b537 100644
--- a/src/api/race.ts
+++ b/src/api/race.ts
@@ -21,6 +21,13 @@ export const getRaceList = (params: any) => {
     params,
   })
 }
+// 获取年度比赛详情
+export const getYearRaceInfo = (params: any) => {
+  return request({
+    url: '/annualcomp/annualComp/findndbswxq',
+    params,
+  })
+}
 // 获取比赛详细信息
 export const getRaceInfo = (params: any) => {
   return request({
diff --git a/src/views/competition/index.vue b/src/views/competition/index.vue
index c0b7aa7..b06b86a 100644
--- a/src/views/competition/index.vue
+++ b/src/views/competition/index.vue
@@ -1,368 +1,396 @@
 <!-- 年度赛事页面 -->
 <template>
-    <div class="fill"></div>
-    <div class="banner">
-        <img src="../../assets/images/banner2.png" alt="">
+  <div class="fill"></div>
+  <div class="banner">
+    <img src="../../assets/images/banner2.png" alt="" />
+  </div>
+  <div class="competition" v-loading="loading">
+    <!-- 简介 -->
+    <div class="synopsis">
+      <div class="name">{{ yearRaceInfo.name }}</div>
+      <div class="content">
+        {{ yearRaceInfo.introduction }}
+      </div>
+      <!-- <div class="date">报名时间：2023.08.23-2023.09.23</div> -->
     </div>
-    <div class="competition" v-loading="loading">
-        <!-- 简介 -->
-        <div class="synopsis">
-            <div class="name">年度比赛名称</div>
-            <div class="content">
-                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
-                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
-                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
-                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
-                比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介
-                比赛简介比赛简介比赛简介比赛简介比赛简介</div>
-            <div class="date">报名时间：2023.08.23-2023.09.23</div>
+
+    <!-- 选择项目 -->
+    <div class="select">
+      <div class="left">
+        <div class="text-box">
+          <div class="title">选择项目</div>
+          <div class="small">300+竞赛登陆后请报名</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="o, i in dataList" :key="o.id">
-                        <div v-if="(i + 5) % 4 == 1" class="card" type="yellow">
-                            <div class="top" :title="o.objName">{{ o.objName }}</div>
-                            <div class="bottom">
-                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
-                                <el-link :underline="false" class="link">详情</el-link>
-                            </div>
-                        </div>
-
-                        <div v-else-if="(i + 5) % 4 == 2" class="card" type="purple">
-                            <div class="top" :title="o.objName">{{ o.objName }}</div>
-                            <div class="bottom">
-                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
-                                <el-link :underline="false" class="link">详情</el-link>
-                            </div>
-                        </div>
-
-                        <div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00">
-                            <div class="top" :title="o.objName">{{ o.objName }}</div>
-                            <div class="bottom">
-                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
-                                <el-link :underline="false" class="link">详情</el-link>
-                            </div>
-                        </div>
-
-                        <div v-else-if="(i + 5) % 4 == 0" class="card" type="orange">
-                            <div class="top" :title="o.objName">{{ o.objName }}</div>
-                            <div class="bottom">
-                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
-                                <el-link :underline="false" class="link">详情</el-link>
-                            </div>
-                        </div>
-                    </template>
-                </div>
+        <div class="card-list">
+          <template v-for="(o, i) in dataList" :key="o.id">
+            <div v-if="(i + 5) % 4 == 1" class="card" type="yellow">
+              <div class="top" :title="o.objName">{{ o.objName }}</div>
+              <div class="bottom">
+                <el-button class="btn" @click="goProjectName(o.id)">
+                  立即报名
+                </el-button>
+                <el-link :underline="false" class="link">详情</el-link>
+              </div>
+            </div>
+
+            <div v-else-if="(i + 5) % 4 == 2" class="card" type="purple">
+              <div class="top" :title="o.objName">{{ o.objName }}</div>
+              <div class="bottom">
+                <el-button class="btn" @click="goProjectName(o.id)">
+                  立即报名
+                </el-button>
+                <el-link :underline="false" class="link">详情</el-link>
+              </div>
+            </div>
+
+            <div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00">
+              <div class="top" :title="o.objName">{{ o.objName }}</div>
+              <div class="bottom">
+                <el-button class="btn" @click="goProjectName(o.id)">
+                  立即报名
+                </el-button>
+                <el-link :underline="false" class="link">详情</el-link>
+              </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 v-else-if="(i + 5) % 4 == 0" class="card" type="orange">
+              <div class="top" :title="o.objName">{{ o.objName }}</div>
+              <div class="bottom">
+                <el-button class="btn" @click="goProjectName(o.id)">
+                  立即报名
+                </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 lang="ts" setup>
-import { getCompetitionApi } from '@/api/person';
-import { ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ElMessage, ElLoading } from 'element-plus';
-
-const route = useRoute();
-const router = useRouter();
+import { getCompetitionApi } from '@/api/person'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElLoading } from 'element-plus'
+import { getYearRaceInfo } from '@/api/race'
+const route = useRoute()
+const router = useRouter()
 
 // loading
-const loading = ref(false);
-let loadingInstance: any;
-watch(loading, newVal => {
-    if (newVal) loadingInstance = ElLoading.service({ fullscreen: true });
-    else if (loadingInstance) loadingInstance.close();
-});
+const loading = ref(false)
+let loadingInstance: any
+watch(loading, (newVal) => {
+  if (newVal) loadingInstance = ElLoading.service({ fullscreen: true })
+  else if (loadingInstance) loadingInstance.close()
+})
 
 // 数据列表
-const dataList = ref<any[]>([]);
+const dataList = ref<any[]>([])
 async function getList() {
-    try {
-        loading.value = true;
-        const res: any = await getCompetitionApi(route.query.id as string);
-        if (!res.result) return
-        dataList.value = res.result;
-    } catch (error) {
-        ElMessage.error('请求失败');
-    } finally {
-        loading.value = false;
-    }
+  try {
+    loading.value = true
+    const res: any = await getCompetitionApi(route.query.id as string)
+    if (!res.result) return
+    dataList.value = res.result
+  } catch (error) {
+    ElMessage.error('请求失败')
+  } finally {
+    loading.value = false
+  }
 }
 
-getList();
+getList()
 
 // 跳转项目名称
 function goProjectName(id: any) {
-    router.push(`/projectName?id=${id}&bcId=${route.query.id}`)
+  router.push(`/projectName?id=${id}&bcId=${route.query.id}`)
 }
+
+const yearRaceInfo = ref<any>({})
+const getYearRaceInfoEvent = async () => {
+  const res: any = await getYearRaceInfo({id:route.query.id})
+  yearRaceInfo.value = res.result
+  console.log(res, 'yearRaceInfo.value ')
+}
+getYearRaceInfoEvent()
 </script>
 
 <style lang="scss" scoped>
 .fill {
-    padding-top: 80px;
+  padding-top: 80px;
 }
 
 .banner {
-    width: 100%;
-    height: 367px;
-    border-radius: 0px 0px 0px 0px;
+  width: 100%;
+  height: 367px;
+  border-radius: 0px 0px 0px 0px;
 
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
+  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;
-        }
+  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;
-        }
+    .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;
-        }
+    .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;
+  .select {
+    margin-top: 125px;
+    margin-bottom: 500px;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      width: 1100px;
+
+      .card-list {
         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;
-                        text-wrap: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-                    }
-
-                    .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));
-                        }
-                    }
-                }
+        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;
+            text-wrap: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+
+          .bottom {
+            display: flex;
+            gap: 50px;
+
+            .top,
+            .link {
+              color: var(--color);
             }
-        }
 
-        .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;
-                    }
-                }
+            .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)
+              );
             }
+          }
         }
+      }
+    }
 
-        .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;
-                }
+    .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>
\ No newline at end of file
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 9c774f4..f809b26 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -87,7 +87,9 @@ const submit = async () => {
 }
 onMounted(() => {
   window.addEventListener('keydown', keyDown)
-
+  // setTimeout(() => {
+  //   getcodeinfo()
+  // },6000)
 })
 const keyDown = (e: any) => {
   //如果是回车则执行登录方法
diff --git a/src/views/login/registered.vue b/src/views/login/registered.vue
index 3029f2d..d59837e 100644
--- a/src/views/login/registered.vue
+++ b/src/views/login/registered.vue
@@ -56,6 +56,7 @@
             placeholder="密码"
             v-model="form.password"
             :prefix-icon="Lock"
+            type="password"
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -63,6 +64,8 @@
             placeholder="确认密码"
             v-model="form.confirmPassword"
             :prefix-icon="Lock"
+            type="password"
+
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -159,7 +162,7 @@ const ragistered = async () => {
     }
   }
   if (!(form.password === form.confirmPassword)) {
-    ElMessage.warning(`两次密码不同`)
+   return ElMessage.warning(`两次密码不同`)
   }
   console.log(form)
   let data = {
@@ -179,6 +182,7 @@ const ragistered = async () => {
     $emits('backLogin')
   }else{
     ElMessage.warning(res.message)
+    getcodeinfo()
   }
   console.log(res)
 }
diff --git a/src/views/projectName/index.vue b/src/views/projectName/index.vue
index 312437e..8869e8a 100644
--- a/src/views/projectName/index.vue
+++ b/src/views/projectName/index.vue
@@ -122,6 +122,7 @@ getData();
             font-size: 18px;
             color: #666666;
             text-indent: 2em;
+            min-height: 500px;
         }
 
         .foot {
diff --git a/src/views/raceInfo/index.vue b/src/views/raceInfo/index.vue
index 50f8336..3b0edf7 100644
--- a/src/views/raceInfo/index.vue
+++ b/src/views/raceInfo/index.vue
@@ -241,6 +241,12 @@ getHistoryRaceListEvent()
           font-weight: 600;
           color: #333333;
           margin-top: 10px;
+          line-height: 20px;
+          height: 60px;
+          display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
         }
         .time {
           font-size: 14px;
diff --git a/src/views/registrationGroup/index.vue b/src/views/registrationGroup/index.vue
index 3f4c2ca..8e3357a 100644
--- a/src/views/registrationGroup/index.vue
+++ b/src/views/registrationGroup/index.vue
@@ -1,621 +1,662 @@
 <template>
-    <!-- 报名信息确认页面 团队 -->
-    <div class="fill"></div>
-    <div class="banner">
-        <div class="box">
+  <!-- 报名信息确认页面 团队 -->
+  <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 padding">
+            <div class="annual">{{ ndbs.annualid }}年度</div>
             <div class="title-box">
-                <div class="title">报名信息确认</div>
-                <div class="text">
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                </div>
+              <div class="text">{{ ndbs.name }}</div>
+              <img src="../../assets/images/编组.png" alt="" />
             </div>
-
-            <div class="img-box">
-                <img src="../../assets/images/applyImg.png" alt="">
+          </div>
+          <div class="right">
+            <div class="info-box">
+              <div class="name">比赛年度</div>
+              <div class="title">{{ ndbs.annualid }}年度</div>
+              <div class="name">比赛名称</div>
+              <div class="title">{{ ndbs.name }}</div>
+              <div class="date-box">
+                <div class="label">开始报名时间：</div>
+                <div class="date">{{ ndbs.starttime }}</div>
+              </div>
+              <div class="date-box">
+                <div class="label">开始截至时间：</div>
+                <div class="date">{{ ndbs.endtime }}</div>
+              </div>
             </div>
+          </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 padding">
-                        <div class="annual">{{ ndbs.annualid }}年度</div>
-                        <div class="title-box">
-                            <div class="text">{{ ndbs.name }}</div>
-                            <img src="../../assets/images/编组.png" alt="">
-                        </div>
-                    </div>
-                    <div class="right">
-                        <div class="info-box">
-                            <div class="name">比赛年度</div>
-                            <div class="title">{{ ndbs.annualid }}年度</div>
-                            <div class="name">比赛名称</div>
-                            <div class="title">{{ ndbs.name }}</div>
-                            <div class="date-box">
-                                <div class="label">开始报名时间：</div>
-                                <div class="date">{{ ndbs.starttime }}</div>
-                            </div>
-                            <div class="date-box">
-                                <div class="label">开始截至时间：</div>
-                                <div class="date">{{ ndbs.endtime }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </el-card>
-            <!-- 项目信息 -->
-            <el-card class="com">
-                <div class="title">项目信息</div>
-                <div class="content track">
-                    <div class="card-annual padding">
-                        <p>{{ ndbsXm.objName }}</p>
-                    </div>
-                    <div class="right">
-                        <div class="info-box">
-                            <div class="name">项目名称</div>
-                            <div class="title">{{ ndbsXm.objName }}</div>
-                            <div class="name">要求人数</div>
-                            <div class="title">{{ ndbsXm.workCount }}</div>
-                            <div class="date-box">
-                                <div class="label">开始报名时间：</div>
-                                <div class="date">{{ ndbsXm.starttime?.split(' ')[0] }}</div>
-                            </div>
-                            <div class="date-box">
-                                <div class="label">开始截至时间：</div>
-                                <div class="date">{{ ndbsXm.endtime?.split(' ')[0] }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </el-card>
-        </div>
-        <el-card class="center">
-            <div class="personage-info">
-                <div class="head">
-                    <div class="title">个人信息</div>
-                </div>
-                <div class="info-box">
-                    <div class="label">姓名</div>
-                    <div class="text">{{ info.realname }}</div>
-                </div>
-
-                <div class="info-box">
-                    <div class="label">姓别</div>
-                    <div class="text">{{ pasSex(info.sex) }}</div>
-                </div>
-
-                <div class="info-box">
-                    <div class="label">学号</div>
-                    <div class="text">{{ info.workNo }}</div>
-                </div>
-
-                <div class="info-box">
-                    <div class="label">手机号</div>
-                    <div class="text">{{ info.phone }}</div>
-                </div>
-
-                <div class="info-box">
-                    <div class="label">邮箱</div>
-                    <div class="text">{{ info.email }}</div>
-                </div>
-            </div>
-        </el-card>
-        <el-card class="list">
-            <div class="table-box">
-                <div>
-                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
-                        label-width="auto" class="demo-ruleForm">
-                        <el-form-item label="年度比赛项目">
-                            <el-input v-model="ruleForm.annualCompid" type="text" disabled />
-                        </el-form-item>
-                        <el-form-item label="参赛形式">
-                            <el-input v-model="ruleForm.entryFormat" type="text" disabled />
-                        </el-form-item>
-                        <el-form-item label="队伍名称" prop="teamName">
-                            <el-input v-model.number="ruleForm.teamName" />
-                        </el-form-item>
-                    </el-form>
-                </div>
-
-                <el-tabs v-model="activeName">
-                    <el-tab-pane label="团队成员表" name="members" />
-                    <el-tab-pane label="指导老师表" name="adviser" />
-                </el-tabs>
-                <!-- 动画区域 -->
-                <div class="animation-box" :class="{ translate: activeName === 'adviser' }">
-                    <stu-list ref="stuRef" />
-                    <tea-list ref="teaRef" />
-                </div>
+      </el-card>
+      <!-- 项目信息 -->
+      <el-card class="com">
+        <div class="title">项目信息</div>
+        <div class="content track">
+          <div class="card-annual padding">
+            <p>{{ ndbsXm.objName }}</p>
+          </div>
+          <div class="right">
+            <div class="info-box">
+              <div class="name">项目名称</div>
+              <div class="title">{{ ndbsXm.objName }}</div>
+              <div class="name">要求人数</div>
+              <div class="title">{{ ndbsXm.workCount }}</div>
+              <div class="date-box">
+                <div class="label">开始报名时间：</div>
+                <div class="date">{{ ndbsXm.starttime?.split(' ')[0] }}</div>
+              </div>
+              <div class="date-box">
+                <div class="label">开始截至时间：</div>
+                <div class="date">{{ ndbsXm.endtime?.split(' ')[0] }}</div>
+              </div>
             </div>
-        </el-card>
-        <div class="bottom">
-            <el-button class="btn" @click="$router.push('/')">取消报名</el-button>
-            <el-button class="btn cyan" @click="submit" :loading="loading">确认报名</el-button>
+          </div>
         </div>
+      </el-card>
     </div>
+    <el-card class="center">
+      <div class="personage-info">
+        <div class="head">
+          <div class="title">个人信息</div>
+        </div>
+        <div class="info-box">
+          <div class="label">姓名</div>
+          <div class="text">{{ info.realname }}</div>
+        </div>
+
+        <div class="info-box">
+          <div class="label">姓别</div>
+          <div class="text">{{ pasSex(info.sex) }}</div>
+        </div>
+
+        <div class="info-box">
+          <div class="label">学号</div>
+          <div class="text">{{ info.workNo }}</div>
+        </div>
+
+        <div class="info-box">
+          <div class="label">手机号</div>
+          <div class="text">{{ info.phone }}</div>
+        </div>
+
+        <div class="info-box">
+          <div class="label">邮箱</div>
+          <div class="text">{{ info.email }}</div>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="list">
+      <div class="table-box">
+        <div>
+          <el-form
+            ref="ruleFormRef"
+            style="max-width: 600px"
+            :model="ruleForm"
+            status-icon
+            :rules="rules"
+            label-width="auto"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="年度比赛项目">
+              <el-input v-model="ruleForm.annualCompid" type="text" disabled />
+            </el-form-item>
+            <el-form-item label="参赛形式">
+              <el-input v-model="ruleForm.entryFormat" type="text" disabled />
+            </el-form-item>
+            <el-form-item label="队伍名称" prop="teamName">
+              <el-input v-model.number="ruleForm.teamName" />
+            </el-form-item>
+          </el-form>
+        </div>
 
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="团队成员表" name="members" />
+          <el-tab-pane label="指导老师表" name="adviser" />
+        </el-tabs>
+        <!-- 动画区域 -->
+        <div
+          class="animation-box"
+          :class="{ translate: activeName === 'adviser' }"
+        >
+          <stu-list ref="stuRef" />
+          <tea-list ref="teaRef" />
+        </div>
+      </div>
+    </el-card>
+    <div class="bottom">
+      <el-button class="btn" @click="$router.push('/')">取消报名</el-button>
+      <el-button class="btn cyan" @click="submit" :loading="loading">
+        确认报名
+      </el-button>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref, toRefs } from 'vue';
-import { useRoute,useRouter } from 'vue-router';
-import userStore from '@/store/module/user';
-import type { FormInstance, FormRules } from 'element-plus';
-import { ElMessage } from 'element-plus';
-import { getSignUpApi } from '@/api/person';
-import stuList from './components/stuList.vue';
-import teaList from './components/teaList.vue';
-import { getNdbswxqList, getComppxqList } from '@/api/person';
-const user = userStore();
-const route = useRoute();
-const router = useRouter();
+import { reactive, ref, toRefs } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import userStore from '@/store/module/user'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import { getSignUpApi } from '@/api/person'
+import stuList from './components/stuList.vue'
+import teaList from './components/teaList.vue'
+import { getNdbswxqList, getComppxqList } from '@/api/person'
+const user = userStore()
+const route = useRoute()
+const router = useRouter()
 // 用户信息
-const { userInfo: info } = toRefs(user);
+const { userInfo: info } = toRefs(user)
 
 // 解析性别
 function pasSex(num: number) {
-    if (num == 1) return '男'
-    else if (num == 2) return '女'
-    else return '保密'
+  if (num == 1) return '男'
+  else if (num == 2) return '女'
+  else return '保密'
 }
 
 // 比赛信息、项目信息
 const ndbs = ref<any>({})
 const ndbsXm = ref<any>({})
 getNdbswxqList(route.query.bcId as string).then((res: any) => {
-    if (res.result) ndbs.value = res.result
+  if (res.result) ndbs.value = res.result
 })
 getComppxqList(route.query.id as string).then((res: any) => {
-    console.log(res.result, 'xm');
-    if (res.result) ndbsXm.value = res.result
+  console.log(res.result, 'xm')
+  if (res.result) ndbsXm.value = res.result
 })
 
-
 // members:学生 adviser:老师
-const activeName = ref('members');
+const activeName = ref('members')
 
 // form表单
-const ruleFormRef = ref<FormInstance>();
+const ruleFormRef = ref<FormInstance>()
 
 const ruleForm = reactive<any>({
-    annualCompid: route.query.objName,
-    entryFormat: '团队',
-    id: route.query.id,
-    teamName: '',            // 队伍名称
-    instructorSheetList: [], // 老师
-    teamManagementList: []   // 学生
+  annualCompid: route.query.objName,
+  entryFormat: '团队',
+  id: route.query.id,
+  teamName: '', // 队伍名称
+  instructorSheetList: [], // 老师
+  teamManagementList: [], // 学生
 })
 
-const rules = reactive<FormRules<typeof ruleForm>>({});
+const rules = reactive<FormRules<typeof ruleForm>>({})
 
-const stuRef = ref<any>(null);
-const teaRef = ref<any>(null);
-const loading = ref(false);
+const stuRef = ref<any>(null)
+const teaRef = ref<any>(null)
+const loading = ref(false)
 
 const submit = () => {
-    ruleForm.instructorSheetList = [...teaRef.value.submit()]
-    ruleForm.teamManagementList = [...stuRef.value.submit()]
-    loading.value = true;
-    getSignUpApi(ruleForm).then((res: any) => {
-        ElMessage({
-            message: res?.message || '报名成功',
-            type: 'success'
-        })
-        router.push('/')
-    }).catch(err => {
-        ElMessage({
-            message: err.message,
-            type: 'error'
-        })
-    }).finally(() => loading.value = false)
-
+  ruleForm.instructorSheetList = [...teaRef.value.submit()]
+  ruleForm.teamManagementList = [...stuRef.value.submit()]
+  loading.value = true
+  getSignUpApi(ruleForm)
+    .then((res: any) => {
+      ElMessage({
+        message: res?.message || '报名成功',
+        type: 'success',
+      })
+      router.push('/')
+    })
+    .catch((err) => {
+      ElMessage({
+        message: err.message,
+        type: 'error',
+      })
+    })
+    .finally(() => (loading.value = false))
+
+   
 }
+
 </script>
 
 <style lang="scss" scoped>
 .animation-box {
-    display: flex;
-    transition: all 0.3s;
-    gap: 20px;
+  display: flex;
+  transition: all 0.3s;
+  gap: 20px;
 
-    &.translate {
-        translate: calc(-100% - 20px);
-    }
+  &.translate {
+    translate: calc(-100% - 20px);
+  }
 
-    &>* {
-        width: 100%;
-        flex-shrink: 0;
-    }
+  & > * {
+    width: 100%;
+    flex-shrink: 0;
+  }
 }
 
-
 .el-tabs--top {
-    flex-direction: column;
+  flex-direction: column;
 }
 
-
 .fill {
-    padding-top: 80px;
+  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;
-            }
-        }
+  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 {
-        width: 100%;
-        height: 100%;
+    .img-box {
+      img {
         object-fit: cover;
+      }
     }
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 
 .registration-layout {
-    margin-top: 20px;
-    margin: 0 auto;
-    width: 1397px;
+  margin-top: 20px;
+  margin: 0 auto;
+  width: 1397px;
 
-    &>* {
-        background: #FFFFFF;
-    }
+  & > * {
+    background: #ffffff;
+  }
 
-    .top {
+  .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;
-        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;
-            }
+        gap: 22px;
+
+        .card-annual {
+          &.padding {
+            padding: 20px;
+          }
+
+          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;
+          }
 
-            margin-right: 22px;
-
-            .content {
-                display: flex;
-                gap: 22px;
-
-                .card-annual {
-                    &.padding {
-                        padding: 20px;
-                    }
-
-                    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 {
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                text-wrap: nowrap;
-                                height: 20px;
-                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
-                                font-weight: 400;
-                                font-size: 14px;
-                                color: #ACACAC;
-                                line-height: 20px;
-                            }
-
-                            .date {
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                text-wrap: nowrap;
-                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
-                                font-weight: bold;
-                                font-size: 18px;
-                                color: #333333;
-                            }
-                        }
-                    }
-                }
-            }
+          .title-box {
+            margin-top: 13px;
+            display: flex;
+            align-items: center;
+            gap: 28px;
 
-            .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;
-                    }
-                }
+            .text {
+              width: 202px;
+              font-family: Inter, Inter;
+              font-weight: normal;
+              font-size: 32px;
+              color: #ffffff;
+              line-height: 39px;
             }
+          }
         }
-    }
 
-    .center {
-        // height: 388px;
-        border-radius: 6px 6px 6px 6px;
-        margin-bottom: 25px;
+        .right {
+          .info-box {
+            width: 210px;
+            .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;
+            }
 
-        .personage-info {
-            margin: 30px;
-            // 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;
-                }
+            .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;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
             }
 
-            .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;
-                }
+            .date-box {
+              margin-bottom: 12px;
+              display: flex;
+              align-items: center;
+
+              .label {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-wrap: nowrap;
+                height: 20px;
+                font-family:
+                  Microsoft YaHei UI,
+                  Microsoft YaHei UI;
+                font-weight: 400;
+                font-size: 14px;
+                color: #acacac;
+                line-height: 20px;
+              }
+
+              .date {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-wrap: nowrap;
+                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;
+      // 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;
 
-    .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;
-            }
+        .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;
+        }
 
-            .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);
-                }
-            }
+        .icon {
+          padding: 5px;
+          cursor: pointer;
+        }
+      }
 
+      .info-box {
+        &.remark {
+          width: 377.333px;
         }
 
-        .table-box {
-            .table {
-                width: 100%;
-            }
+        width: 176px;
+        height: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
 
-            .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;
-                        }
-                    }
-                }
+        .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);
+        }
+      }
     }
 
-    .bottom {
-        margin: 46px 0;
-        height: 70px;
+    .table-box {
+      .table {
+        width: 100%;
+      }
+
+      .pagin-box {
+        width: 100%;
+        height: 64px;
         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);
+        .pagination {
+          padding: 0 24px;
+
+          :deep() {
+            .el-pagination__total {
+              margin-right: auto;
             }
 
-            &.cyan {
-                --color1: #00D0D0;
-                --color2: #42D9AC;
+            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>
\ No newline at end of file
+</style>
diff --git a/src/views/registrationPersonage/index.vue b/src/views/registrationPersonage/index.vue
index 159fc55..c243928 100644
--- a/src/views/registrationPersonage/index.vue
+++ b/src/views/registrationPersonage/index.vue
@@ -1,118 +1,116 @@
 <template>
-    <!-- 报名信息确认页面 个人 -->
-    <div class="fill"></div>
-    <div class="banner">
-        <div class="box">
+  <!-- 报名信息确认页面 个人 -->
+  <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 padding">
+            <div class="annual">{{ ndbs.annualid }}年度</div>
             <div class="title-box">
-                <div class="title">报名信息确认</div>
-                <div class="text">
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
-                </div>
+              <div class="text">{{ ndbs.name }}</div>
+              <img src="../../assets/images/编组.png" alt="" />
             </div>
-
-            <div class="img-box">
-                <img src="../../assets/images/applyImg.png" alt="">
+          </div>
+          <div class="right">
+            <div class="info-box">
+              <div class="name">比赛年度</div>
+              <div class="title">{{ ndbs.annualid }}年度</div>
+              <div class="name">比赛名称</div>
+              <div class="title">{{ ndbs.name }}</div>
+              <div class="date-box">
+                <div class="label">开始报名时间：</div>
+                <div class="date">{{ ndbs.starttime }}</div>
+              </div>
+              <div class="date-box">
+                <div class="label">开始截至时间：</div>
+                <div class="date">{{ ndbs.endtime }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- 项目信息 -->
+      <el-card class="com">
+        <div class="title">项目信息</div>
+        <div class="content track">
+          <div class="card-annual padding">
+            <p>{{ ndbsXm.objName }}</p>
+          </div>
+          <div class="right">
+            <div class="info-box">
+              <div class="name">项目名称</div>
+              <div class="title">{{ ndbsXm.objName }}</div>
+              <div class="name">要求人数</div>
+              <div class="title">{{ ndbsXm.workCount }}</div>
+              <div class="date-box">
+                <div class="label">开始报名时间：</div>
+                <div class="date">{{ ndbsXm.starttime?.split(' ')[0] }}</div>
+              </div>
+              <div class="date-box">
+                <div class="label">开始截至时间：</div>
+                <div class="date">{{ ndbsXm.endtime?.split(' ')[0] }}</div>
+              </div>
             </div>
+          </div>
         </div>
+      </el-card>
     </div>
-    <div class="registration-layout">
-        <div class="top">
-            <!-- 比赛信息 -->
-            <el-card class="com">
-                <div class="title">比赛信息</div>
-                <div class="content">
-                    <div class="card-annual padding">
-                        <div class="annual">{{ ndbs.annualid }}年度</div>
-                        <div class="title-box">
-                            <div class="text">{{ ndbs.name }}</div>
-                            <img src="../../assets/images/编组.png" alt="">
-                        </div>
-                    </div>
-                    <div class="right">
-                        <div class="info-box">
-                            <div class="name">比赛年度</div>
-                            <div class="title">{{ ndbs.annualid }}年度</div>
-                            <div class="name">比赛名称</div>
-                            <div class="title">{{ ndbs.name }}</div>
-                            <div class="date-box">
-                                <div class="label">开始报名时间：</div>
-                                <div class="date">{{ ndbs.starttime }}</div>
-                            </div>
-                            <div class="date-box">
-                                <div class="label">开始截至时间：</div>
-                                <div class="date">{{ ndbs.endtime }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </el-card>
-            <!-- 项目信息 -->
-            <el-card class="com">
-                <div class="title">项目信息</div>
-                <div class="content track">
-                    <div class="card-annual padding">
-                        <p>{{ ndbsXm.objName }}</p>
-                    </div>
-                    <div class="right">
-                        <div class="info-box">
-                            <div class="name">项目名称</div>
-                            <div class="title">{{ ndbsXm.objName }}</div>
-                            <div class="name">要求人数</div>
-                            <div class="title">{{ ndbsXm.workCount }}</div>
-                            <div class="date-box">
-                                <div class="label">开始报名时间：</div>
-                                <div class="date">{{ ndbsXm.starttime?.split(' ')[0] }}</div>
-                            </div>
-                            <div class="date-box">
-                                <div class="label">开始截至时间：</div>
-                                <div class="date">{{ ndbsXm.endtime?.split(' ')[0] }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </el-card>
+    <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">{{ info.realname }}</div>
         </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">{{ info.realname }}</div>
-                </div>
 
-                <div class="info-box">
-                    <div class="label">姓别</div>
-                    <div class="text">{{ pasSex(info.sex) }}</div>
-                </div>
+        <div class="info-box">
+          <div class="label">姓别</div>
+          <div class="text">{{ pasSex(info.sex) }}</div>
+        </div>
 
-                <div class="info-box">
-                    <div class="label">学号</div>
-                    <div class="text">{{ info.workNo }}</div>
-                </div>
+        <div class="info-box">
+          <div class="label">学号</div>
+          <div class="text">{{ info.workNo }}</div>
+        </div>
 
-                <div class="info-box">
-                    <div class="label">手机号</div>
-                    <div class="text">{{ info.phone }}</div>
-                </div>
+        <div class="info-box">
+          <div class="label">手机号</div>
+          <div class="text">{{ info.phone }}</div>
+        </div>
 
-                <div class="info-box">
-                    <div class="label">邮箱</div>
-                    <div class="text">{{ info.email }}</div>
-                </div>
-                <div class="info-box">
-                    <div class="label">队伍名称</div>
-                    <div class="text">
-                        <el-input v-model="upData.teamName"></el-input>
-                    </div>
-                </div>
-                <!-- <div class="info-box">
+        <div class="info-box">
+          <div class="label">邮箱</div>
+          <div class="text">{{ info.email }}</div>
+        </div>
+        <div class="info-box">
+          <div class="label">队伍名称</div>
+          <div class="text">
+            <el-input v-model="upData.teamName"></el-input>
+          </div>
+        </div>
+        <!-- <div class="info-box">
                     <div class="label">院系</div>
                     <div class="text">国际教育学院</div>
                 </div>
@@ -136,396 +134,426 @@
                     <div class="label">其它备注</div>
                     <div class="text">无</div>
                 </div> -->
-            </div>
-        </el-card>
-
-        <div class="bottom">
-            <el-button class="btn" @click="() => router.push('/')">取消报名</el-button>
-            <el-button class="btn cyan" :loading="subLoading" @click="submit">确认报名</el-button>
-        </div>
+      </div>
+    </el-card>
+
+    <div class="bottom">
+      <el-button class="btn" @click="() => router.push('/')">
+        取消报名
+      </el-button>
+      <el-button class="btn cyan" :loading="subLoading" @click="submit">
+        确认报名
+      </el-button>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, toRefs } from 'vue';
-import { getSignUpApi } from '@/api/person';
-import { ElMessage } from 'element-plus';
-import { useRoute, useRouter } from 'vue-router';
-import userStore from '@/store/module/user';
-import { getNdbswxqList, getComppxqList } from '@/api/person';
+import { ref, toRefs } from 'vue'
+import { getSignUpApi } from '@/api/person'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router'
+import userStore from '@/store/module/user'
+import { getNdbswxqList, getComppxqList } from '@/api/person'
 
-const user = userStore();
-const route = useRoute();
-const router = useRouter();
+const user = userStore()
+const route = useRoute()
+const router = useRouter()
 
-const { userInfo: info } = toRefs(user);
+const { userInfo: info } = toRefs(user)
 
 // 解析性别
 function pasSex(num: number) {
-    if (num == 1) return '男'
-    else if (num == 2) return '女'
-    else return '保密'
+  if (num == 1) return '男'
+  else if (num == 2) return '女'
+  else return '保密'
 }
 
 // 确认报名数据及逻辑
 const upData = ref<Parameters<typeof getSignUpApi>[0]>({
-    annualCompid: route.query.objName as string,
-    entryFormat: '个人',
-    id: route.query.id,
-    instructorSheetList: [],
-    teamManagementList: [{ realname: "", captain: "", teamSeq: "", userId: "" }],
-    teamName: ""
-});
+  annualCompid: route.query.objName as string,
+  entryFormat: '个人',
+  id: route.query.id,
+  instructorSheetList: [],
+  teamManagementList: [{ realname: '', captain: '', teamSeq: '', userId: '' }],
+  teamName: '',
+})
 
 // 比赛信息、项目信息
 const ndbs = ref<any>({})
 const ndbsXm = ref<any>({})
 getNdbswxqList(route.query.bcId as string).then((res: any) => {
-    if (res.result) ndbs.value = res.result
+  if (res.result) ndbs.value = res.result
 })
 getComppxqList(route.query.id as string).then((res: any) => {
-    console.log(res.result, 'xm');
-    if (res.result) ndbsXm.value = res.result
+  console.log(res.result, 'xm')
+  if (res.result) ndbsXm.value = res.result
 })
 
-
-const subLoading = ref(false);
+const subLoading = ref(false)
 async function submit() {
-    upData.value.teamManagementList[0].realname = info.value.realname
-    upData.value.teamManagementList[0].userId = info.value.id
-    if (!upData.value.teamName) {
-        ElMessage({
-            message: '队伍名称不能为空',
-            type: 'warning'
-        })
-        return
-    }
-    try {
-        subLoading.value = true;
-        const res: any = await getSignUpApi(upData.value);
-
-        ElMessage({
-            message: res?.message || res?.result || '报名成功',
-            type: 'success'
-        })
-    } catch (error) {
-        ElMessage({
-            // @ts-ignore
-            message: error?.message,
-            type: 'error'
-        })
-    } finally {
-        subLoading.value = false
-    }
+  upData.value.teamManagementList[0].realname = info.value.realname
+  upData.value.teamManagementList[0].userId = info.value.id
+  if (!upData.value.teamName) {
+    ElMessage({
+      message: '队伍名称不能为空',
+      type: 'warning',
+    })
+    return
+  }
+  try {
+    subLoading.value = true
+    const res: any = await getSignUpApi(upData.value)
+
+    ElMessage({
+      message: res?.message || res?.result || '报名成功',
+      type: 'success',
+    })
+  } catch (error) {
+    ElMessage({
+      // @ts-ignore
+      message: error?.message,
+      type: 'error',
+    })
+  } finally {
+    subLoading.value = false
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .fill {
-    padding-top: 80px;
+  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;
-            }
-        }
+  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 {
-        width: 100%;
-        height: 100%;
+    .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 {
+  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;
-        justify-content: space-between;
-        margin: 25px 0;
-        height: 300px;
+        gap: 22px;
+
+        .card-annual {
+          &.padding {
+            padding: 20px;
+          }
+
+          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;
+          }
 
-        .com {
-            width: 685px;
-            height: 300px;
-            border-radius: 6px 6px 6px 6px;
-            padding-top: 22px;
-            padding-left: 32px;
+          .title-box {
+            margin-top: 13px;
+            display: flex;
+            align-items: center;
+            gap: 28px;
 
-            .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;
+            .text {
+              width: 202px;
+              font-family: Inter, Inter;
+              font-weight: normal;
+              font-size: 32px;
+              color: #ffffff;
+              line-height: 39px;
             }
+          }
+        }
 
-            margin-right: 22px;
-
-            .content {
-                display: flex;
-                gap: 22px;
-
-                .card-annual {
-                    &.padding {
-                        padding: 20px;
-                    }
-
-                    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 {
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                text-wrap: nowrap;
-                                height: 20px;
-                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
-                                font-weight: 400;
-                                font-size: 14px;
-                                color: #ACACAC;
-                                line-height: 20px;
-                            }
-
-                            .date {
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                text-wrap: nowrap;
-                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
-                                font-weight: bold;
-                                font-size: 18px;
-                                color: #333333;
-                            }
-                        }
-                    }
-                }
+        .right {
+          .info-box {
+            width: 210px;
+            .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;
             }
 
-            .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;
-                    }
-                }
+            .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;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
             }
+
+            .date-box {
+              margin-bottom: 12px;
+              display: flex;
+              align-items: center;
+
+              .label {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-wrap: nowrap;
+                height: 20px;
+                font-family:
+                  Microsoft YaHei UI,
+                  Microsoft YaHei UI;
+                font-weight: 400;
+                font-size: 14px;
+                color: #acacac;
+                line-height: 20px;
+              }
+
+              .date {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                text-wrap: nowrap;
+                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;
+    position: relative;
+
+    .personage-info {
+      margin: 30px;
+      // 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;
 
-    .center {
-        // height: 388px;
-        border-radius: 6px 6px 6px 6px;
-        margin-bottom: 25px;
-        position: relative;
+        .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;
+        }
 
-        .personage-info {
-            margin: 30px;
-            // 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;
-                    position: absolute;
-                    right: 30px;
-                }
-            }
+        .icon {
+          padding: 5px;
+          cursor: pointer;
+          position: absolute;
+          right: 30px;
+        }
+      }
 
-            .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;
-                }
-            }
+      .info-box {
+        &.remark {
+          width: 377.333px;
         }
-    }
 
-    .bottom {
-        margin: 46px 0;
-        height: 70px;
+        width: 176px;
+        height: 60px;
         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);
-            }
+        flex-direction: column;
+        justify-content: space-between;
 
-            &.cyan {
-                --color1: #00D0D0;
-                --color2: #42D9AC;
-            }
+        .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;
+        }
+      }
     }
-
+  }
+
+  .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>
\ No newline at end of file
+</style>
diff --git a/src/views/userInfo/index.vue b/src/views/userInfo/index.vue
index 0df0370..e26e9b1 100644
--- a/src/views/userInfo/index.vue
+++ b/src/views/userInfo/index.vue
@@ -7,62 +7,7 @@
     </div>
   </div>
   <div class="container-1420">
-    <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>
       <div class="user-info-main">
         <div class="left">
diff --git a/vite.config.ts b/vite.config.ts
index df6e9db..695e1cf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,6 +33,7 @@ export default defineConfig({
   server:{
     host: '0.0.0.0',
     port: 8866,
+
   },
   resolve: {
     alias: {