You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
14 KiB
441 lines
14 KiB
9 months ago
|
<template>
|
||
|
9 months ago
|
<!-- 报名信息确认页面 个人 -->
|
||
|
9 months ago
|
<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;
|
||
|
9 months ago
|
position: relative;
|
||
|
9 months ago
|
|
||
|
|
.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;
|
||
|
9 months ago
|
position: absolute;
|
||
|
|
right: 30px;
|
||
|
9 months ago
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|