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

src/router/module/constRouter/index.ts

@@ -61,12 +61,22 @@ export const constRouter: any =
       },
     },
     {
-      path: '/registration',
+      path: '/registrationGroup',
-      name: 'Registration',
+      name: 'RegistrationGroup',
-      component: () => import('@/views/registration/index.vue'),
+      component: () => import('@/views/registrationGroup/index.vue'),
       meta: {
         icon: '',
-        title: '报名信息',
+        title: '报名信息确认/团队',
+        hidden: false,
+      },
+    },
+    {
+      path: '/registrationPersonage',
+      name: 'RegistrationPersonage',
+      component: () => import('@/views/registrationPersonage/index.vue'),
+      meta: {
+        icon: '',
+        title: '报名信息确认/个人',
         hidden: false,
       },
     },

src/views/registrationGroup/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 报名信息页面 -->
+    <!-- 报名信息确认页面 团队 -->
     <div class="fill"></div>
     <div class="banner">
         <div class="box">
@@ -242,7 +242,7 @@ const tableData: User[] = [
 
 // 分页
 const pagInfo = reactive({
-    currentPage: 50,
+    currentPage: 1,
     pageSize: 10,
     total: 400
 })

src/views/registrationPersonage/index.vue

@@ -0,0 +1,441 @@
+<template>
+    <!-- 报名信息确认页面 个人 -->
+    <div class="fill"></div>
+    <div class="banner">
+        <div class="box">
+            <div class="title-box">
+                <div class="title">报名信息确认</div>
+                <div class="text">
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                    请仔细核对报名信息，报名成功后无法修改。请仔细核对报名信息，报名成功后无法修改。
+                </div>
+            </div>
+
+            <div class="img-box">
+                <img src="../../assets/images/applyImg.png" alt="">
+            </div>
+        </div>
+    </div>
+    <div class="registration-layout">
+        <div class="top">
+            <!-- 比赛信息 -->
+            <el-card class="com">
+                <div class="title">比赛信息</div>
+                <div class="content">
+                    <div class="card-annual">
+                        <div class="annual">2023年度</div>
+                        <div class="title-box">
+                            <div class="text">河南省大学生创新创业大赛</div>
+                            <img src="../../assets/images/编组.png" alt="">
+                        </div>
+                    </div>
+                    <div class="right">
+                        <div class="info-box">
+                            <div class="name">比赛年度</div>
+                            <div class="title">2024年度</div>
+                            <div class="name">比赛名称</div>
+                            <div class="title">河南省大学生创新创业大赛</div>
+                            <div class="date-box">
+                                <div class="label">开始报名时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                            <div class="date-box">
+                                <div class="label">开始截至时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+            <!-- 项目信息 -->
+            <el-card class="com">
+                <div class="title">项目信息</div>
+                <div class="content track">
+                    <div class="card-annual">
+                        <p>红色之旅赛道</p>
+                    </div>
+                    <div class="right">
+                        <div class="info-box">
+                            <div class="name">项目名称</div>
+                            <div class="title">红色之旅赛道</div>
+                            <div class="name">要求人数</div>
+                            <div class="title">1人</div>
+                            <div class="date-box">
+                                <div class="label">开始报名时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                            <div class="date-box">
+                                <div class="label">开始截至时间：</div>
+                                <div class="date">2323.6.1 18:00</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-card>
+        </div>
+        <el-card class="center">
+            <div class="personage-info">
+                <div class="head">
+                    <div class="title">个人信息</div>
+                    <div class="icon">
+                        <img src="../../assets/images/ellipsis.png" alt="">
+                    </div>
+                </div>
+                <div class="info-box">
+                    <div class="label">姓名</div>
+                    <div class="text">王不留行</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">姓别</div>
+                    <div class="text">男</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">学号</div>
+                    <div class="text">2023010236</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">手机号</div>
+                    <div class="text">17725633652</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">院系</div>
+                    <div class="text">国际教育学院</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">专业</div>
+                    <div class="text">软件工程</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">指导老师</div>
+                    <div class="text">令狐冲</div>
+                </div>
+
+                <div class="info-box">
+                    <div class="label">所属团队</div>
+                    <div class="text">王不留行的团队</div>
+                </div>
+
+                <div class="info-box remark">
+                    <div class="label">其它备注</div>
+                    <div class="text">无</div>
+                </div>
+            </div>
+        </el-card>
+
+        <div class="bottom">
+            <el-button class="btn">取消报名</el-button>
+            <el-button class="btn cyan">确认报名</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 289;
+    background: linear-gradient(90deg, #FFFFFF 0%, #F0F8FF 100%);
+    padding: 21px 0 37px 225px;
+
+    .box {
+        width: 1515px;
+        height: 231px;
+        display: flex;
+        gap: 104px;
+        justify-content: space-between;
+        align-items: center;
+
+        .title-box {
+            width: 1151px;
+
+            .title {
+                height: 59px;
+                font-family: Open Sans, Open Sans;
+                font-weight: bold;
+                font-size: 42px;
+                color: #333333;
+                line-height: 59px;
+            }
+
+            .text {
+                margin-top: 20px;
+                font-family: Open Sans, Open Sans;
+                font-weight: 400;
+                font-size: 20px;
+                color: #666666;
+                line-height: 23px;
+            }
+        }
+
+        .img-box {
+            img {
+                object-fit: cover;
+            }
+        }
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.registration-layout {
+    margin-top: 20px;
+    margin: 0 auto;
+    width: 1397px;
+
+    &>* {
+        background: #FFFFFF;
+    }
+
+    .top {
+        display: flex;
+        justify-content: space-between;
+        margin: 25px 0;
+        height: 300px;
+
+        .com {
+            width: 685px;
+            height: 300px;
+            border-radius: 6px 6px 6px 6px;
+            padding-top: 22px;
+            padding-left: 32px;
+
+            .title {
+                height: 28px;
+                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                font-weight: bold;
+                font-size: 20px;
+                color: rgba(0, 0, 0, 0.9);
+                line-height: 28px;
+                margin-bottom: 18px;
+            }
+
+            margin-right: 22px;
+
+            .content {
+                display: flex;
+                gap: 22px;
+
+                .card-annual {
+                    padding: 28px 0 0 28px;
+                    width: 340px;
+                    height: 182px;
+                    background: linear-gradient(90deg, #21ACA5 0%, #42D9AC99 100%);
+                    border-radius: 8px;
+                    overflow: hidden;
+
+                    .annual {
+                        height: 19px;
+                        font-family: Inter, Inter;
+                        font-weight: bold;
+                        font-size: 16px;
+                        color: rgba(255, 255, 255, 0.8);
+                        line-height: 19px;
+                    }
+
+                    .title-box {
+                        margin-top: 13px;
+                        display: flex;
+                        align-items: center;
+                        gap: 28px;
+
+                        .text {
+                            width: 202px;
+                            font-family: Inter, Inter;
+                            font-weight: normal;
+                            font-size: 32px;
+                            color: #FFFFFF;
+                            line-height: 39px;
+                        }
+                    }
+                }
+
+                .right {
+                    .info-box {
+                        .name {
+                            height: 20px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #ACACAC;
+                            line-height: 20px;
+                            margin-bottom: 8px;
+                        }
+
+                        .title {
+                            height: 20px;
+                            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                            font-weight: bold;
+                            font-size: 20px;
+                            color: #333333;
+                            line-height: 20px;
+                            margin-bottom: 12px;
+                        }
+
+                        .date-box {
+                            margin-bottom: 12px;
+                            display: flex;
+                            align-items: center;
+
+                            .label {
+                                height: 20px;
+                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                                font-weight: 400;
+                                font-size: 14px;
+                                color: #ACACAC;
+                                line-height: 20px;
+                            }
+
+                            .date {
+                                font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                                font-weight: bold;
+                                font-size: 18px;
+                                color: #333333;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .track {
+                .card-annual {
+                    background: url(../../assets/images/item.png) no-repeat;
+                    background-size: cover;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0;
+
+                    p {
+                        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                        font-weight: bold;
+                        font-size: 40px;
+                        color: #76DAE5;
+                    }
+                }
+            }
+        }
+    }
+
+    .center {
+        height: 388px;
+        border-radius: 6px 6px 6px 6px;
+        margin-bottom: 25px;
+        position: relative;
+
+        .personage-info {
+            margin: 30px 0 0 32px;
+            width: 780px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            row-gap: 32px;
+
+            .head {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .title {
+                    height: 28px;
+                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+                    font-weight: bold;
+                    font-size: 20px;
+                    color: rgba(0, 0, 0, 0.9);
+                    line-height: 28px;
+                }
+
+                .icon {
+                    padding: 5px;
+                    cursor: pointer;
+                    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;
+                }
+            }
+        }
+    }
+
+    .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>