dlsx
/
ContestPortal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

报名信息确认页面(个人) 静态

Browse Source
main
significative 8 months ago
parent 7b6eeb880a
commit 0e6c4eba47
3 changed files with 457 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/router/module/constRouter/index.ts
  2. 4
      src/views/registrationGroup/index.vue
  3. 441
      src/views/registrationPersonage/index.vue

18
src/router/module/constRouter/index.ts
Unescape View File

@ -61,12 +61,22 @@ export const constRouter: any =
},
},
{
path: '/registration',
name: 'Registration',
component: () => import('@/views/registration/index.vue'),
path: '/registrationGroup',
name: 'RegistrationGroup',
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,
},
},

4
src/views/registration/index.vue → src/views/registrationGroup/index.vue
Unescape View File

@ -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
})

441
src/views/registrationPersonage/index.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save