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.
572 lines
17 KiB
572 lines
17 KiB
<template> |
|
<div class="container-1420 container"> |
|
<!-- 年度比赛详细信息 --> |
|
<div class="year-race-info"> |
|
<div class="left-info"> |
|
<el-card> |
|
<template #header> |
|
<div style="display: flex; justify-content: space-between"> |
|
<el-breadcrumb style="display: flex; align-items: center"> |
|
<el-breadcrumb-item |
|
v-for="item in Route.matched" |
|
:key="item.path" |
|
:to="{ path: item.path }" |
|
> |
|
{{ item.meta.title }} |
|
</el-breadcrumb-item> |
|
</el-breadcrumb> |
|
<div> |
|
<el-button @click="Router.back()">返回</el-button> |
|
<el-button @click="scrollToPosition">查看详情</el-button> |
|
</div> |
|
</div> |
|
</template> |
|
<div> |
|
<!-- {{ raceInfo }} --> |
|
<div class="race-info"> |
|
<div class="top"> |
|
<div class="left"> |
|
<el-image |
|
:src="setImageUrl(raceInfo.compLogo)" |
|
style="width:1.8667rem; height: 1.8667rem" |
|
:preview-src-list="[ |
|
setImageUrl(raceInfo.compLogo), |
|
setImageUrl(raceInfo.compImg), |
|
]" |
|
></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.comporderc }}</div> |
|
</li> |
|
<!-- <li style="width: 33%"> |
|
<div class="label">比赛类型:</div> |
|
<div class="text">{{ raceInfo.compTypeId }}</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 v-html="raceInfo.compDetail"></div> --> |
|
{{ raceInfo.compInfo }} |
|
<!-- 亲爱的同学们、老师们以及各位编程爱好者们： |
|
在这个充满创新与挑战的时代，一场精彩纷呈的大学生编程大赛即将拉开帷幕。 |
|
本次大学生编程大赛是智慧与技能的激烈碰撞，是创意与实践的完美结合。它为广大有才华、有梦想的大学生们提供了一个展现自我、超越自我的广阔舞台。 |
|
在这里，你将与来自不同高校、不同专业的编程高手们同场竞技。大家将用代码编织梦想，用算法开拓未来。无论是擅长网页开发、移动应用编程，还是热衷于数据分析、人工智能算法设计，都能在这个舞台上找到属于自己的一片天地。 |
|
大赛不仅考验选手们的编程技术水平，更注重创新思维和解决实际问题的能力。在比赛过程中，选手们将面临各种复杂的问题和挑战，需要运用所学知识，发挥创造力，提出独特而有效的解决方案。 |
|
同时，本次大赛也为同学们提供了一个与行业专家、企业代表交流互动的机会。他们将带来最前沿的技术资讯和行业动态，为同学们的未来发展提供宝贵的建议和指导。 |
|
来吧，亲爱的大学生们！加入这场编程的盛宴，释放你的无限潜力，用代码书写属于你们的辉煌篇章！让我们一起见证新一代编程之星的诞生！ --> |
|
</div> |
|
<div class="label">附件:</div> |
|
<div class="file"> |
|
<el-tag |
|
v-for="item in fileList" |
|
:key="item" |
|
type="primary" |
|
@click="doLoadFile(item)" |
|
style="margin-right: 15px" |
|
> |
|
{{ item }} |
|
</el-tag> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-card> |
|
</div> |
|
</div> |
|
<!-- 年度比赛列表 --> |
|
<div |
|
style=" |
|
margin-top: 0.8rem; |
|
font-size: 0.64rem; |
|
font-weight: 600; |
|
margin-left: 0.5333rem; |
|
" |
|
> |
|
年度比赛列表: |
|
</div> |
|
<el-card v-if="reacProjectList.length === 0" style="margin-top: 20px"> |
|
<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> |
|
<el-card style="margin-top: 20px" v-else> |
|
<div class="race-list" v-loading="loading"> |
|
<div |
|
class="item" |
|
v-for="item in reacProjectList" |
|
:key="item.id" |
|
@click="goToCompetition(item.id, item.endtime, item.isopen)" |
|
:style="{ |
|
'background-color': isTimePassed(item.endtime) |
|
? 'rgb(232 232 232)' |
|
: '#fff', |
|
}" |
|
> |
|
<div class="image"> |
|
<img :src="setImageUrl(item.image)" alt="" v-default-image /> |
|
</div> |
|
<div class="reac-info"> |
|
<div class="niandu"> |
|
<div>{{ item.annualname }}年度</div> |
|
<el-button type="primary" size="small">报名</el-button> |
|
</div> |
|
<div |
|
class="reac-title" |
|
style=" |
|
font-weight: 600; |
|
color: #000; |
|
font-size: 16px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
" |
|
> |
|
{{ item.name }} |
|
</div> |
|
<div class="reac-title">负责部门：{{ item.compOrgan }}</div> |
|
<!-- <div class="reac-project">{{ item.introduction }}</div> --> |
|
<div |
|
class="time" |
|
style="display: flex; justify-content: space-between" |
|
> |
|
<div>开始时间:{{ item.starttime }}</div> |
|
结束时间:{{ item.endtime }} |
|
<div></div> |
|
</div> |
|
<!-- <div class="time"> |
|
|
|
</div> --> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="margin-top: 20px; display: flex; justify-content: center"> |
|
<el-pagination |
|
background |
|
layout="prev, pager, next" |
|
:total="page.total" |
|
:page-size="page.pageSize" |
|
@change="pageChange" |
|
/> |
|
</div> |
|
</el-card> |
|
|
|
<h3 |
|
style="margin-top: 20px; font-size: 24px; font-weight: 700" |
|
id="introduction" |
|
> |
|
比赛详情 |
|
</h3> |
|
<div class="race-description" v-html="raceInfo.compDetail"></div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
import { |
|
getYearRaceList, |
|
getRaceInfo, |
|
getHistoryRaceList, |
|
getProjectId, |
|
} from '@/api/race' |
|
import { useRouter, useRoute } from 'vue-router' |
|
import { ElMessage } from 'element-plus' |
|
import { pa } from 'element-plus/es/locales.mjs' |
|
const Route = useRoute() |
|
const Router = useRouter() |
|
console.log(Route, 'Route') |
|
|
|
const loading = ref(false) |
|
const reacProjectList = ref<any>([]) |
|
let page = ref<any>({ |
|
id: Route.query.id, |
|
column: 'createTime', |
|
order: 'desc', |
|
pageNo: 1, |
|
pageSize: 8, |
|
total: 0, |
|
}) |
|
const getRaceProjectListEvent = async () => { |
|
loading.value = true |
|
const res: any = await getYearRaceList({ ...page.value, individual: true }) |
|
console.log(res) |
|
reacProjectList.value = res.result.records |
|
page.value.total = res.result.total |
|
console.log(reacProjectList.value, 'reacProjectList.value ') |
|
|
|
loading.value = false |
|
} |
|
getRaceProjectListEvent() |
|
const pageChange = (e: any) => { |
|
page.value.pageNo = e |
|
getRaceProjectListEvent() |
|
} |
|
const setImageUrl = (url: string) => { |
|
return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url |
|
} |
|
// 获取比赛详情 |
|
const raceInfo = ref<any>({}) |
|
const getraceInfoEvent = async () => { |
|
const res: any = await getRaceInfo({ id: Route.query.id }) |
|
console.log(res) |
|
createfileLink(res.result.compFile) |
|
raceInfo.value = res.result |
|
} |
|
getraceInfoEvent() |
|
|
|
// 前往年度比赛页面 |
|
const goToCompetition = async (id: any, endTime: string, isOpen: string) => { |
|
// if(isOpen == '0') return ElMessage.error('比赛未开启') |
|
// if (isTimePassed(endTime)) { |
|
// return ElMessage.error('比赛已结束') |
|
// } |
|
const projectId: any = await getProjectId({ anncmopid: id }) |
|
console.log(projectId.result) |
|
|
|
// return |
|
Router.push(`/projectName?id=${projectId.result}&bcId=${id}`) |
|
|
|
// Router.push({ path: '/competition', query: { id, raceId: Route.query.id } }) |
|
} |
|
function isTimePassed(targetTime) { |
|
// 获取当前时间 |
|
const now = new Date() |
|
|
|
// 将传入的时间字符串转换为 Date 对象 |
|
const target = new Date(targetTime) |
|
|
|
// 比较当前时间和目标时间 |
|
return now > target |
|
} |
|
const doLoadFile = (url: any) => { |
|
// console.log( import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" + url) |
|
window.open(import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url) |
|
} |
|
|
|
// 获取年度历史比赛 |
|
const historyRaceList = ref<any>([]) |
|
const getHistoryRaceListEvent = async () => { |
|
const res: any = await getHistoryRaceList({ id: Route.query.id }) |
|
console.log(res) |
|
historyRaceList.value = res.result |
|
} |
|
getHistoryRaceListEvent() |
|
|
|
const fileList = ref<any>([]) |
|
const createfileLink = (url: any) => { |
|
console.log(url) |
|
|
|
const list = url.split(',') |
|
console.log(list) |
|
|
|
fileList.value = list |
|
} |
|
const scrollToPosition = () => { |
|
const targetPosition = |
|
(document.getElementById('introduction') as HTMLElement).offsetTop - 100 |
|
window.scrollTo({ |
|
top: targetPosition, |
|
behavior: 'smooth', // 平滑滚动 |
|
}) |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.container { |
|
padding-top: 80px; |
|
.top-image { |
|
width: 100%; |
|
height: 300px; |
|
background: var(--background-color); |
|
text-align: center; |
|
color: var(--text-color); |
|
font-size: 32px; |
|
font-weight: 700; |
|
line-height: 300px; |
|
} |
|
.race-list { |
|
width: 100%; |
|
// display: grid; |
|
// grid-template-columns: repeat(4, 1fr); |
|
.item { |
|
width: 340px; |
|
height: 360px; |
|
background-color: var(--card-bg-color); |
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06); |
|
cursor: pointer; |
|
border-radius: 10px; |
|
border: 1px solid var(--border-color); |
|
transition: all 0.2s; |
|
.image { |
|
width: 100%; |
|
height: 194px; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 4px; |
|
} |
|
} |
|
.reac-info { |
|
padding: 0 8px; |
|
.reac-title { |
|
margin-top: 19px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
font-size: 12px; |
|
} |
|
.reac-project { |
|
font-size: 16px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-top: 10px; |
|
line-height: 20px; |
|
height: 60px; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 3; |
|
-webkit-box-orient: vertical; |
|
overflow: hidden; |
|
} |
|
.time { |
|
font-size: 14px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
margin-top: 30px; |
|
} |
|
.niandu { |
|
color: var(--text-color); |
|
font-size: 18px; |
|
margin-top: 20px; |
|
font-weight: 600; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
} |
|
} |
|
.item:hover { |
|
transform: translateY(-5px); |
|
border-color: var(--primary-color); |
|
} |
|
.item:nth-child(n) { |
|
margin-top: 20px; |
|
} |
|
} |
|
.year-race-info { |
|
display: flex; |
|
margin-top: 30px; |
|
min-height: 750px; |
|
.left-info { |
|
width: 100%; |
|
} |
|
.right-history { |
|
// width: 300px; |
|
margin-left: 40px; |
|
.title { |
|
color: var(--text-color); |
|
font-size: 28px; |
|
font-weight: 600; |
|
} |
|
.description { |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
font-size: 14px; |
|
margin-top: 15px; |
|
} |
|
ul { |
|
margin-top: 30px; |
|
li { |
|
position: relative; |
|
width: 100%; |
|
height: 140px; |
|
color: var(--text-color); |
|
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; |
|
background: var(--card-bg-color); |
|
border: 1px solid var(--border-color); |
|
border-radius: 4px; |
|
transition: all 0.3s; |
|
.year { |
|
font-size: 12px; |
|
opacity: 0.65; |
|
} |
|
.name { |
|
width: 130px; |
|
font-size: 16px; |
|
font-weight: 600; |
|
margin-top: 10px; |
|
} |
|
.time { |
|
font-size: 12px; |
|
opacity: 0.45; |
|
} |
|
.go-to { |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
width: 115px; |
|
height: 28px; |
|
line-height: 28px; |
|
text-align: center; |
|
font-size: 14px; |
|
color: #ffffff; |
|
background: var(--primary-color); |
|
border-radius: 0 4px 0 4px; |
|
} |
|
.icon { |
|
position: absolute; |
|
right: 25px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
width: 34px; |
|
height: 41px; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
opacity: 0.8; |
|
} |
|
} |
|
&:hover { |
|
transform: translateY(-2px); |
|
border-color: var(--primary-color); |
|
.name { |
|
color: var(--primary-color); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.race-info { |
|
.top { |
|
display: flex; |
|
// flex-direction: column; |
|
align-items: center; |
|
// height: 200px; |
|
justify-content: center; |
|
.right { |
|
display: flex; |
|
felx-direction: column; |
|
// margin-top: 20px; |
|
margin-left: 25px; |
|
// flex: 1; |
|
ul { |
|
width: 100%; |
|
height: 100%; |
|
// display: flex; |
|
// flex-wrap: wrap; |
|
align-items: center; |
|
padding: 5px; |
|
li { |
|
width: 100%; |
|
display: flex; |
|
margin: 10px 0; |
|
.label { |
|
font-size: 14px; |
|
color: var(--text-color); |
|
opacity: 0.45; |
|
width: 100px; |
|
} |
|
.text { |
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
color: var(--text-color); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.center { |
|
margin-top: 25px; |
|
.label { |
|
font-size: 16px; |
|
color: var(--text-color); |
|
opacity: 0.45; |
|
} |
|
.deaceiption { |
|
font-size: 16px; |
|
text-indent: 2em; |
|
line-height: 26px; |
|
margin-top: 15px; |
|
// height: 300px; |
|
color: var(--text-color); |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 5; |
|
-webkit-box-orient: vertical; |
|
|
|
} |
|
.file { |
|
margin-top: 25px; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
} |
|
.race-description { |
|
width: 100%; |
|
font-size: 14px; |
|
line-height: 22px; |
|
border: 1px solid var(--border-color); |
|
background-color: var(--card-bg-color); |
|
padding: 20px; |
|
margin-top: 20px; |
|
color: var(--text-color); |
|
p { |
|
img { |
|
width: 100%; |
|
border-radius: 4px; |
|
border: 1px solid var(--border-color); |
|
} |
|
} |
|
} |
|
} |
|
:deep(.el-card) { |
|
width: 100%; |
|
height: 100%; |
|
background-color: var(--card-bg-color); |
|
border-color: var(--border-color); |
|
color: var(--text-color); |
|
.el-card__header { |
|
border-bottom: 1px solid var(--border-color); |
|
} |
|
} |
|
img { |
|
width: 100%; |
|
} |
|
</style>
|
|
|