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