Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
fwb
8 months ago
commit
6012514386
10 changed files with 455 additions and 24 deletions
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,9 @@ |
||||
export default { |
||||
mounted(el:any, binding:any) { |
||||
el.onerror = () => { |
||||
// 当图片加载失败时，设置默认图片
|
||||
el.src = binding.value ||'/src/assets/images/item.png'; // 默认图片
|
||||
}; |
||||
} |
||||
}; |
||||
|
||||
@ -0,0 +1,379 @@ |
||||
<template> |
||||
<div class="container-1420 container"> |
||||
<div class="top-image">Banner</div> |
||||
<!-- 年度比赛列表 --> |
||||
<div class="race-list"> |
||||
<div class="item" v-for="item in reacProjectList" :key="item.id" @click="goToCompetition(item.id)"> |
||||
<div class="image"> |
||||
<img |
||||
:src="setImageUrl(item.image)" |
||||
alt="" |
||||
v-default-image="defaultImageUrl" |
||||
/> |
||||
</div> |
||||
<div class="reac-info"> |
||||
<div class="reac-title">{{ item.name }}</div> |
||||
<div class="reac-project">{{ item.introduction }}</div> |
||||
<div class="time"> |
||||
报名时间:{{ item.starttime }}-{{ item.endtime }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-card v-if="reacProjectList.length === 0"> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
color: #aaa; |
||||
" |
||||
> |
||||
<svgIcon name="race-none" width="200px" height="200px" /> |
||||
<p>没有年度比赛~</p> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<!-- 年度比赛详细信息 --> |
||||
<div class="year-race-info"> |
||||
<div class="left-info"> |
||||
<el-card> |
||||
<template #header> |
||||
<el-breadcrumb> |
||||
<el-breadcrumb-item |
||||
v-for="item in Route.matched" |
||||
:key="item.path" |
||||
:to="{ path: item.path }" |
||||
> |
||||
{{ item.meta.title }} |
||||
</el-breadcrumb-item> |
||||
</el-breadcrumb> |
||||
</template> |
||||
<div> |
||||
<!-- {{ raceInfo }} --> |
||||
<div class="race-info"> |
||||
<div class="top"> |
||||
<div class="left"> |
||||
<el-image |
||||
src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" |
||||
style="width: 300px" |
||||
:preview-src-list="[ |
||||
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', |
||||
]" |
||||
></el-image> |
||||
</div> |
||||
<div class="right"> |
||||
<ul> |
||||
<li> |
||||
<div class="label">比赛名称:</div> |
||||
<div class="text">{{ raceInfo.compName }}</div> |
||||
</li> |
||||
<li> |
||||
<div class="label">负责人:</div> |
||||
<div class="text">{{ raceInfo.createBy }}</div> |
||||
</li> |
||||
<li> |
||||
<div class="label">负责部门:</div> |
||||
<div class="text">{{ raceInfo.dept }}</div> |
||||
</li> |
||||
<li style="width: 33%"> |
||||
<div class="label">比赛类型:</div> |
||||
<div class="text">A</div> |
||||
</li> |
||||
<li style="width: 33%"> |
||||
<div class="label">比赛权重:</div> |
||||
<div class="text">{{ raceInfo.compweight }}</div> |
||||
</li> |
||||
<li style="width: 33%"> |
||||
<div class="label">比赛内部排名:</div> |
||||
<div class="text">{{ raceInfo.compOrder }}</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="label">比赛简介:</div> |
||||
<div class="deaceiption"> |
||||
亲爱的同学们、老师们以及各位编程爱好者们： |
||||
在这个充满创新与挑战的时代，一场精彩纷呈的大学生编程大赛即将拉开帷幕。 |
||||
本次大学生编程大赛是智慧与技能的激烈碰撞，是创意与实践的完美结合。它为广大有才华、有梦想的大学生们提供了一个展现自我、超越自我的广阔舞台。 |
||||
在这里，你将与来自不同高校、不同专业的编程高手们同场竞技。大家将用代码编织梦想，用算法开拓未来。无论是擅长网页开发、移动应用编程，还是热衷于数据分析、人工智能算法设计，都能在这个舞台上找到属于自己的一片天地。 |
||||
大赛不仅考验选手们的编程技术水平，更注重创新思维和解决实际问题的能力。在比赛过程中，选手们将面临各种复杂的问题和挑战，需要运用所学知识，发挥创造力，提出独特而有效的解决方案。 |
||||
同时，本次大赛也为同学们提供了一个与行业专家、企业代表交流互动的机会。他们将带来最前沿的技术资讯和行业动态，为同学们的未来发展提供宝贵的建议和指导。 |
||||
来吧，亲爱的大学生们！加入这场编程的盛宴，释放你的无限潜力，用代码书写属于你们的辉煌篇章！让我们一起见证新一代编程之星的诞生！ |
||||
</div> |
||||
<div class="label">附件:</div> |
||||
<div class="file"> |
||||
<el-tag type="primary">fhsuihfiaosdufasiu.pdf</el-tag> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
<div class="right-history"> |
||||
<el-card style="padding: 0"> |
||||
<div class="title">历史比赛</div> |
||||
<div class="description">往年历史赛事</div> |
||||
<ul> |
||||
<li v-for="i in 4" :key="i"> |
||||
<div class="year">2024年度</div> |
||||
<div class="name">河南省大学生创新创业大赛</div> |
||||
<div class="time">报名时间:2023.06.01 - 2023.06.30</div> |
||||
<div class="go-to">前往查看</div> |
||||
<div class="icon"> |
||||
<img src="../../assets/images/编组.png" alt="" srcset="" /> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||
import { getYearRaceList, getRaceInfo } from '@/api/race' |
||||
import { useRouter, useRoute } from 'vue-router' |
||||
const Route = useRoute() |
||||
const Router = useRouter() |
||||
console.log(Route, 'Route') |
||||
|
||||
const defaultImageUrl = '/src/assets/images/item.png' |
||||
const reacProjectList = ref<any>([]) |
||||
const getRaceProjectListEvent = async () => { |
||||
let page = { |
||||
id: Route.query.id, |
||||
column: 'createTime', |
||||
order: 'desc', |
||||
pageNo: 1, |
||||
pageSize: 8, |
||||
} |
||||
const res: any = await getYearRaceList(page) |
||||
console.log(res) |
||||
reacProjectList.value = res.result.slice(0, 8) |
||||
console.log(reacProjectList.value, 'reacProjectList.value ') |
||||
} |
||||
getRaceProjectListEvent() |
||||
const setImageUrl = (url: string) => { |
||||
return import.meta.env.VITE_APP_BASE_API + url |
||||
} |
||||
// 获取比赛详情 |
||||
const raceInfo = ref<any>({}) |
||||
const getraceInfoEvent = async () => { |
||||
const res: any = await getRaceInfo({ id: Route.query.id }) |
||||
console.log(res) |
||||
raceInfo.value = res.result |
||||
} |
||||
getraceInfoEvent() |
||||
|
||||
// 前往年度比赛页面 |
||||
const goToCompetition = (id:any) => { |
||||
Router.push({ path: '/competition', query: { id } }) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container { |
||||
padding-top: 80px; |
||||
.top-image { |
||||
width: 100%; |
||||
height: 300px; |
||||
background-color: skyblue; |
||||
text-align: center; |
||||
color: #fff; |
||||
font-size: 32px; |
||||
font-weight: 700; |
||||
line-height: 300px; |
||||
} |
||||
.race-list { |
||||
width: 100%; |
||||
display: grid; |
||||
grid-template-columns: repeat(4, 1fr); |
||||
// grid-template-rows: repeat(2, 1fr); |
||||
// gap: 10px; |
||||
margin-top: 40px; |
||||
.item { |
||||
width: 340px; |
||||
height: 360px; |
||||
// background-color: pink; |
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06); |
||||
cursor: pointer; |
||||
border-radius: 10px; |
||||
transition: all 0.2s; |
||||
.image { |
||||
width: 100%; |
||||
height: 194px; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.reac-info { |
||||
padding: 0 8px; |
||||
.reac-title { |
||||
margin-top: 19px; |
||||
color: #c9c9c9; |
||||
font-size: 12px; |
||||
} |
||||
.reac-project { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
color: #333333; |
||||
margin-top: 10px; |
||||
} |
||||
.time { |
||||
font-size: 14px; |
||||
color: #8c8b8b; |
||||
margin-top: 40px; |
||||
} |
||||
} |
||||
} |
||||
.item:hover { |
||||
transform: translateY(-5px); |
||||
} |
||||
.item:nth-child(n) { |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
.year-race-info { |
||||
display: flex; |
||||
margin-top: 30px; |
||||
min-height: 750px; |
||||
.left-info { |
||||
flex: 1; |
||||
} |
||||
.right-history { |
||||
width: 300px; |
||||
margin-left: 40px; |
||||
.title { |
||||
color: #1e2033; |
||||
font-size: 28px; |
||||
font-weight: 600; |
||||
} |
||||
.description { |
||||
color: #1e2033; |
||||
font-size: 14px; |
||||
margin-top: 15px; |
||||
} |
||||
ul { |
||||
margin-top: 30px; |
||||
li { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 140px; |
||||
// background-color: pink; |
||||
color: #333333; |
||||
padding: 15px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
box-shadow: 0rem 0rem 0.05208rem rgba(0, 0, 0, 0.06); |
||||
margin-top: 10px; |
||||
cursor: pointer; |
||||
.year { |
||||
font-size: 12px; |
||||
} |
||||
.name { |
||||
width: 130px; |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
margin-top: 10px; |
||||
} |
||||
.time { |
||||
font-size: 12px; |
||||
} |
||||
.go-to { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 115px; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
color: #f6f5fb; |
||||
background: url('../../assets/images/left-top.png') no-repeat; |
||||
background-size: contain; |
||||
} |
||||
.icon { |
||||
position: absolute; |
||||
right: 25px; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
width: 34px; |
||||
height: 41px; |
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.race-info { |
||||
.top { |
||||
display: flex; |
||||
.right { |
||||
margin-left: 25px; |
||||
flex: 1; |
||||
ul { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
padding: 5px; |
||||
li { |
||||
width: 50%; |
||||
display: flex; |
||||
.label { |
||||
font-size: 16px; |
||||
color: #aaa; |
||||
width: 100px; |
||||
} |
||||
.text { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
li:first-child { |
||||
align-items: center; |
||||
width: 100%; |
||||
.text { |
||||
font-size: 26px; |
||||
} |
||||
} |
||||
li:nth-child(3n) { |
||||
width: 33%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.center { |
||||
margin-top: 25px; |
||||
.label { |
||||
font-size: 16px; |
||||
color: #aaa; |
||||
} |
||||
.deaceiption { |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
line-height: 26px; |
||||
margin-top: 15px; |
||||
height: 300px; |
||||
} |
||||
.file { |
||||
margin-top: 25px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep(.el-card) { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue