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

报名信息确认页面静态

Browse Source
main
significative 8 months ago
parent 941a69b4ed
commit 438c16be4a
6 changed files with 637 additions and 1 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. BIN
      src/assets/images/applyImg.png
  2. BIN
      src/assets/images/ellipsis.png
  3. BIN
      src/assets/images/ellipsis@2x.png
  4. 10
      src/router/module/constRouter/index.ts
  5. 2
      src/views/competition/index.vue
  6. 626
      src/views/registration/index.vue

BIN
src/assets/images/applyImg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/ellipsis.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 B

BIN
src/assets/images/ellipsis@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 B

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

@ -60,6 +60,16 @@ export const constRouter: any =
hidden: false,
},
},
{
path: '/registration',
name: 'Registration',
component: () => import('@/views/registration/index.vue'),
meta: {
icon: '',
title: '报名信息',
hidden: false,
},
},
],
}

2
src/views/competition/index.vue
Unescape View File

@ -1,4 +1,4 @@
<!-- 年度赛事 -->
<!-- 年度赛事页面 -->
<template>
<div class="fill"></div>
<div class="banner">

626
src/views/registration/index.vue
Unescape View File

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