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.
626 lines
19 KiB
626 lines
19 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>
|
||
|
|
<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({
|
||
|
9 months ago
|
currentPage: 1,
|
||
|
9 months ago
|
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>
|