JayChou
8 months ago
parent
b9600fd0bb
commit
b378c7f509
10 changed files with 1406 additions and 1343 deletions
@ -1,368 +1,396 @@ |
||||
<!-- 年度赛事页面 --> |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<img src="../../assets/images/banner2.png" alt=""> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<img src="../../assets/images/banner2.png" alt="" /> |
||||
</div> |
||||
<div class="competition" v-loading="loading"> |
||||
<!-- 简介 --> |
||||
<div class="synopsis"> |
||||
<div class="name">{{ yearRaceInfo.name }}</div> |
||||
<div class="content"> |
||||
{{ yearRaceInfo.introduction }} |
||||
</div> |
||||
<!-- <div class="date">报名时间：2023.08.23-2023.09.23</div> --> |
||||
</div> |
||||
<div class="competition" v-loading="loading"> |
||||
<!-- 简介 --> |
||||
<div class="synopsis"> |
||||
<div class="name">年度比赛名称</div> |
||||
<div class="content"> |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介</div> |
||||
<div class="date">报名时间：2023.08.23-2023.09.23</div> |
||||
|
||||
<!-- 选择项目 --> |
||||
<div class="select"> |
||||
<div class="left"> |
||||
<div class="text-box"> |
||||
<div class="title">选择项目</div> |
||||
<div class="small">300+竞赛登陆后请报名</div> |
||||
</div> |
||||
|
||||
<!-- 选择项目 --> |
||||
<div class="select"> |
||||
<div class="left"> |
||||
<div class="text-box"> |
||||
<div class="title">选择项目</div> |
||||
<div class="small">300+竞赛登陆后请报名</div> |
||||
</div> |
||||
|
||||
<div class="card-list"> |
||||
<template v-for="o, i in dataList" :key="o.id"> |
||||
<div v-if="(i + 5) % 4 == 1" class="card" type="yellow"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 2" class="card" type="purple"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 0" class="card" type="orange"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
<div class="card-list"> |
||||
<template v-for="(o, i) in dataList" :key="o.id"> |
||||
<div v-if="(i + 5) % 4 == 1" class="card" type="yellow"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)"> |
||||
立即报名 |
||||
</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 2" class="card" type="purple"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)"> |
||||
立即报名 |
||||
</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)"> |
||||
立即报名 |
||||
</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="text-box"> |
||||
<div class="title">历史比赛</div> |
||||
<div class="small">往年历史赛事</div> |
||||
</div> |
||||
|
||||
<div class="game-list"> |
||||
<div class="card-game" v-for="i in 5" :key="i"> |
||||
<div class="pos"> |
||||
前往查看 |
||||
</div> |
||||
<div class="top"> |
||||
2023年度 |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text">河南省大学生创新创业大赛</div> |
||||
<img src="../../assets/images/编组.png" alt=""> |
||||
</div> |
||||
<div class="bottom"> |
||||
报名时间：2023.08.23-2023.09.23 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-else-if="(i + 5) % 4 == 0" class="card" type="orange"> |
||||
<div class="top" :title="o.objName">{{ o.objName }}</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn" @click="goProjectName(o.id)"> |
||||
立即报名 |
||||
</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="text-box"> |
||||
<div class="title">历史比赛</div> |
||||
<div class="small">往年历史赛事</div> |
||||
</div> |
||||
|
||||
<div class="game-list"> |
||||
<div class="card-game" v-for="i in 5" :key="i"> |
||||
<div class="pos">前往查看</div> |
||||
<div class="top">2023年度</div> |
||||
<div class="center"> |
||||
<div class="text">河南省大学生创新创业大赛</div> |
||||
<img src="../../assets/images/编组.png" alt="" /> |
||||
</div> |
||||
<div class="bottom">报名时间：2023.08.23-2023.09.23</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { getCompetitionApi } from '@/api/person'; |
||||
import { ref, watch } from 'vue'; |
||||
import { useRoute, useRouter } from 'vue-router'; |
||||
import { ElMessage, ElLoading } from 'element-plus'; |
||||
|
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
import { getCompetitionApi } from '@/api/person' |
||||
import { ref, watch } from 'vue' |
||||
import { useRoute, useRouter } from 'vue-router' |
||||
import { ElMessage, ElLoading } from 'element-plus' |
||||
import { getYearRaceInfo } from '@/api/race' |
||||
const route = useRoute() |
||||
const router = useRouter() |
||||
|
||||
// loading |
||||
const loading = ref(false); |
||||
let loadingInstance: any; |
||||
watch(loading, newVal => { |
||||
if (newVal) loadingInstance = ElLoading.service({ fullscreen: true }); |
||||
else if (loadingInstance) loadingInstance.close(); |
||||
}); |
||||
const loading = ref(false) |
||||
let loadingInstance: any |
||||
watch(loading, (newVal) => { |
||||
if (newVal) loadingInstance = ElLoading.service({ fullscreen: true }) |
||||
else if (loadingInstance) loadingInstance.close() |
||||
}) |
||||
|
||||
// 数据列表 |
||||
const dataList = ref<any[]>([]); |
||||
const dataList = ref<any[]>([]) |
||||
async function getList() { |
||||
try { |
||||
loading.value = true; |
||||
const res: any = await getCompetitionApi(route.query.id as string); |
||||
if (!res.result) return |
||||
dataList.value = res.result; |
||||
} catch (error) { |
||||
ElMessage.error('请求失败'); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
try { |
||||
loading.value = true |
||||
const res: any = await getCompetitionApi(route.query.id as string) |
||||
if (!res.result) return |
||||
dataList.value = res.result |
||||
} catch (error) { |
||||
ElMessage.error('请求失败') |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
getList(); |
||||
getList() |
||||
|
||||
// 跳转项目名称 |
||||
function goProjectName(id: any) { |
||||
router.push(`/projectName?id=${id}&bcId=${route.query.id}`) |
||||
router.push(`/projectName?id=${id}&bcId=${route.query.id}`) |
||||
} |
||||
|
||||
const yearRaceInfo = ref<any>({}) |
||||
const getYearRaceInfoEvent = async () => { |
||||
const res: any = await getYearRaceInfo({id:route.query.id}) |
||||
yearRaceInfo.value = res.result |
||||
console.log(res, 'yearRaceInfo.value ') |
||||
} |
||||
getYearRaceInfoEvent() |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 367px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
width: 100%; |
||||
height: 367px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
} |
||||
|
||||
.competition { |
||||
margin: 0 auto; |
||||
width: $base-container-width; |
||||
|
||||
.synopsis { |
||||
.name { |
||||
height: 59px; |
||||
line-height: 59px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
} |
||||
margin: 0 auto; |
||||
width: $base-container-width; |
||||
|
||||
.synopsis { |
||||
.name { |
||||
height: 59px; |
||||
line-height: 59px; |
||||
font-family: |
||||
Open Sans, |
||||
Open Sans; |
||||
font-weight: bold; |
||||
font-size: 42px; |
||||
color: #333333; |
||||
} |
||||
|
||||
.content { |
||||
margin-top: 40px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #555555; |
||||
line-height: 23px; |
||||
} |
||||
.content { |
||||
margin-top: 40px; |
||||
font-family: |
||||
Open Sans, |
||||
Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #555555; |
||||
line-height: 23px; |
||||
} |
||||
|
||||
.date { |
||||
margin-top: 30px; |
||||
height: 23px; |
||||
line-height: 23px; |
||||
font-family: Open Sans, Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #858585; |
||||
} |
||||
.date { |
||||
margin-top: 30px; |
||||
height: 23px; |
||||
line-height: 23px; |
||||
font-family: |
||||
Open Sans, |
||||
Open Sans; |
||||
font-weight: 400; |
||||
font-size: 20px; |
||||
color: #858585; |
||||
} |
||||
} |
||||
|
||||
.select { |
||||
margin-top: 125px; |
||||
margin-bottom: 500px; |
||||
.select { |
||||
margin-top: 125px; |
||||
margin-bottom: 500px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.left { |
||||
width: 1100px; |
||||
|
||||
.card-list { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.left { |
||||
width: 1100px; |
||||
|
||||
.card-list { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
column-gap: 20px; |
||||
row-gap: 40px; |
||||
|
||||
.card { |
||||
width: 260px; |
||||
height: 160px; |
||||
padding: 40px 0 0 30px; |
||||
|
||||
&[type="yellow"] { |
||||
background: url(../../assets/images/yellow.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #FFC300; |
||||
--bg-color1: #FFCB9A; |
||||
--bg-color2: #FFC300; |
||||
} |
||||
|
||||
&[type="purple"] { |
||||
background: url(../../assets/images/purple.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #3F8BFF; |
||||
--bg-color1: #90BBFC; |
||||
--bg-color2: #C4CDFF; |
||||
} |
||||
|
||||
&[type="cyan00"] { |
||||
background: url(../../assets/images/item.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #76DAE5; |
||||
--bg-color1: #74D9E4; |
||||
--bg-color2: #74E4BC; |
||||
} |
||||
|
||||
&[type="orange"] { |
||||
background: url(../../assets/images/orange.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #FF907B; |
||||
--bg-color1: #FCA190; |
||||
--bg-color2: #FCD190; |
||||
} |
||||
|
||||
.top { |
||||
margin-bottom: 30px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
text-wrap: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.bottom { |
||||
display: flex; |
||||
gap: 50px; |
||||
|
||||
.top, |
||||
.link { |
||||
color: var(--color); |
||||
} |
||||
|
||||
.btn { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 14px; |
||||
width: 120px; |
||||
height: 30px; |
||||
border-radius: 15px; |
||||
color: #fff; |
||||
border: none; |
||||
background: linear-gradient(to right, var(--bg-color1), var(--bg-color2)); |
||||
} |
||||
} |
||||
} |
||||
flex-wrap: wrap; |
||||
column-gap: 20px; |
||||
row-gap: 40px; |
||||
|
||||
.card { |
||||
width: 260px; |
||||
height: 160px; |
||||
padding: 40px 0 0 30px; |
||||
|
||||
&[type='yellow'] { |
||||
background: url(../../assets/images/yellow.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #ffc300; |
||||
--bg-color1: #ffcb9a; |
||||
--bg-color2: #ffc300; |
||||
} |
||||
|
||||
&[type='purple'] { |
||||
background: url(../../assets/images/purple.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #3f8bff; |
||||
--bg-color1: #90bbfc; |
||||
--bg-color2: #c4cdff; |
||||
} |
||||
|
||||
&[type='cyan00'] { |
||||
background: url(../../assets/images/item.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #76dae5; |
||||
--bg-color1: #74d9e4; |
||||
--bg-color2: #74e4bc; |
||||
} |
||||
|
||||
&[type='orange'] { |
||||
background: url(../../assets/images/orange.png) no-repeat; |
||||
background-size: cover; |
||||
--color: #ff907b; |
||||
--bg-color1: #fca190; |
||||
--bg-color2: #fcd190; |
||||
} |
||||
|
||||
.top { |
||||
margin-bottom: 30px; |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 24px; |
||||
text-wrap: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.bottom { |
||||
display: flex; |
||||
gap: 50px; |
||||
|
||||
.top, |
||||
.link { |
||||
color: var(--color); |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
width: 260px; |
||||
|
||||
.game-list { |
||||
.card-game { |
||||
width: 260px; |
||||
height: 140px; |
||||
background: linear-gradient(90deg, #21ACA5 0%, #42D9AC 100%); |
||||
border-radius: 4px 4px 4px 4px; |
||||
margin-bottom: 18px; |
||||
background: url(../../assets/images/Rectangle284.png) no-repeat; |
||||
background-position: top right; |
||||
padding: 20px 22px; |
||||
position: relative; |
||||
|
||||
.pos { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 115px; |
||||
height: 28px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #F6F5FB; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.top { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: rgba(51, 51, 51, 0.8); |
||||
line-height: 14px; |
||||
} |
||||
|
||||
.center { |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.text { |
||||
width: 140px; |
||||
height: 40px; |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: rgba(51, 51, 51, 0.8); |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
.btn { |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 14px; |
||||
width: 120px; |
||||
height: 30px; |
||||
border-radius: 15px; |
||||
color: #fff; |
||||
border: none; |
||||
background: linear-gradient( |
||||
to right, |
||||
var(--bg-color1), |
||||
var(--bg-color2) |
||||
); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.left, |
||||
.right { |
||||
.text-box { |
||||
margin-bottom: 46px; |
||||
|
||||
.title { |
||||
height: 42px; |
||||
line-height: 42px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
font-size: 40px; |
||||
color: #1E2033; |
||||
} |
||||
|
||||
.small { |
||||
margin-top: 5px; |
||||
height: 24px; |
||||
line-height: 24px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #828282; |
||||
} |
||||
.right { |
||||
width: 260px; |
||||
|
||||
.game-list { |
||||
.card-game { |
||||
width: 260px; |
||||
height: 140px; |
||||
background: linear-gradient(90deg, #21aca5 0%, #42d9ac 100%); |
||||
border-radius: 4px 4px 4px 4px; |
||||
margin-bottom: 18px; |
||||
background: url(../../assets/images/Rectangle284.png) no-repeat; |
||||
background-position: top right; |
||||
padding: 20px 22px; |
||||
position: relative; |
||||
|
||||
.pos { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 115px; |
||||
height: 28px; |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: #f6f5fb; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.top { |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: rgba(51, 51, 51, 0.8); |
||||
line-height: 14px; |
||||
} |
||||
|
||||
.center { |
||||
margin: 10px 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.text { |
||||
width: 140px; |
||||
height: 40px; |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
color: #333333; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
|
||||
.bottom { |
||||
font-family: |
||||
Microsoft YaHei UI, |
||||
Microsoft YaHei UI; |
||||
font-weight: 400; |
||||
font-size: 12px; |
||||
color: rgba(51, 51, 51, 0.8); |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.left, |
||||
.right { |
||||
.text-box { |
||||
margin-bottom: 46px; |
||||
|
||||
.title { |
||||
height: 42px; |
||||
line-height: 42px; |
||||
font-family: Inter, Inter; |
||||
font-weight: bold; |
||||
font-size: 40px; |
||||
color: #1e2033; |
||||
} |
||||
|
||||
.small { |
||||
margin-top: 5px; |
||||
height: 24px; |
||||
line-height: 24px; |
||||
font-family: Inter, Inter; |
||||
font-weight: 400; |
||||
font-size: 16px; |
||||
color: #828282; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
</style> |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue