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.
359 lines
8.6 KiB
359 lines
8.6 KiB
<template> |
|
<div class="container-1420" v-if="isLoading"> |
|
<div class="banner"> |
|
<div class="title">{{ reacProjectList[0].compName }}火热报名中</div> |
|
<div class="description"> |
|
<div v-html="reacProjectList[0].compName"></div> |
|
</div> |
|
<div class="application gradient" @click="toDetail(reacProjectList[0].id)">立即报名</div> |
|
<div class="nav-title"> |
|
<div class="top">竞赛导航</div> |
|
<div class="bottom">30+项目登陆后报名</div> |
|
</div> |
|
</div> |
|
<!-- 比赛列表 --> |
|
<div class="race-list"> |
|
<div class="item" v-for="item in reacProjectList" :key="item.id" @click="toDetail(item.id)"> |
|
<div class="image"> |
|
<img :src="setImageUrl(item.compImg)" alt="" v-default-image/> |
|
</div> |
|
<div class="reac-info"> |
|
<div class="reac-title">{{ item.compName }}</div> |
|
<div class="reac-project"><div v-html="item.compName"></div></div> |
|
<!-- <div class="time"> |
|
报名时间:{{ item.starttime }}-{{ item.endtime }} |
|
</div> --> |
|
</div> |
|
</div> |
|
<div class="more" @click="router.push('/raceList')">更多</div> |
|
</div> |
|
<!-- 新闻列表 --> |
|
<div class="news-list"> |
|
<div class="news-title"> |
|
<div class="top">新闻资讯</div> |
|
<div class="bottom">30+项目登陆后报名</div> |
|
</div> |
|
<div class="newa-panel"> |
|
<div class="tab"> |
|
<div |
|
:class="active === index ? 'item active gradient' : 'item'" |
|
v-for="(item,index) in News" |
|
:key="index" |
|
@click="active = index" |
|
> |
|
{{ item }} |
|
</div> |
|
</div> |
|
<div class="newa-main"> |
|
<div class="left"></div> |
|
<div class="right"> |
|
<div class="title">新闻标题</div> |
|
<div class="description"> |
|
我是新闻描述,我是新闻描述,我是新闻描述 |
|
</div> |
|
<div class="newa-main-list"> |
|
<ul> |
|
<li v-for="i in 6" :key="i"> |
|
<div class="time">2024-09-12</div> |
|
<div class="info"> |
|
我是一段新闻描述,我是一段新闻描述,我是一段新闻描述 |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref } from 'vue' |
|
import { getRaceList } from '@/api/race' |
|
import { useRouter } from 'vue-router'; |
|
import { ElLoading } from 'element-plus' |
|
const router = useRouter() |
|
const reacProjectList = ref<any>([]) |
|
const isLoading = ref(false) |
|
|
|
const News =ref<any>(['全部','通知公告','赛事资讯','活动速递','政策文件']) |
|
const getRaceProjectListEvent = async () => { |
|
let page = { |
|
column: 'createTime', |
|
order: 'desc', |
|
pageNo: 1, |
|
pageSize: 8, |
|
} |
|
const loading = ElLoading.service({ |
|
lock: true, |
|
text: 'Loading', |
|
background: 'rgba(255, 255, 255, 0.7)', |
|
}) |
|
const res: any = await getRaceList(page) |
|
console.log(res) |
|
reacProjectList.value = res.result.slice(0, 8) |
|
console.log(reacProjectList.value, 'reacProjectList.value ') |
|
|
|
isLoading.value = true |
|
loading.close() |
|
} |
|
getRaceProjectListEvent() |
|
const active = ref(0) |
|
const setImageUrl = (url: string) => { |
|
return import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" + url |
|
} |
|
|
|
// 前往比赛综述 |
|
const toDetail = (id: number) => { |
|
router.push({ |
|
path:'/race-info', |
|
query: { |
|
id |
|
} |
|
}) |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.banner { |
|
position: relative; |
|
width: 100%; |
|
height: 692px; |
|
// background: radial-gradient( |
|
// circle, |
|
// rgba(131, 255, 197, 1) 0%, |
|
// rgba(255, 255, 255, 1) 50% |
|
// ); |
|
background: url('../../assets/images/banner1.png') no-repeat; |
|
background-size: cover; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
.title { |
|
font-size: 50px; |
|
font-weight: 600; |
|
color: #333333; |
|
} |
|
.description { |
|
width: 1074px; |
|
text-align: center; |
|
font-size: 20px; |
|
color: #666; |
|
margin-top: 37px; |
|
} |
|
.application { |
|
width: 272px; |
|
height: 64px; |
|
text-align: center; |
|
line-height: 64px; |
|
border-radius: 10px; |
|
font-size: 24px; |
|
color: #fff; |
|
cursor: pointer; |
|
margin-top: 50px; |
|
} |
|
.nav-title { |
|
position: absolute; |
|
bottom: 0; |
|
color: #1e2033; |
|
.top { |
|
font-size: 40px; |
|
font-weight: 600; |
|
text-align: center; |
|
} |
|
.bottom { |
|
font-size: 16px; |
|
text-align: center; |
|
margin-top: 10px; |
|
} |
|
} |
|
} |
|
.race-list { |
|
position: relative; |
|
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; |
|
} |
|
.more{ |
|
position: absolute; |
|
right: 20px; |
|
top: -20px; |
|
color: #0bd7c6; |
|
cursor: pointer; |
|
font-size: 14px; |
|
} |
|
} |
|
.news-list { |
|
margin-top: 170px; |
|
background: url('../../assets/images/bg2.png') no-repeat; |
|
background-size: cover; |
|
.news-title { |
|
.top { |
|
font-size: 40px; |
|
font-weight: 600; |
|
text-align: center; |
|
} |
|
.bottom { |
|
font-size: 16px; |
|
text-align: center; |
|
margin-top: 10px; |
|
} |
|
} |
|
.newa-panel { |
|
width: 100%; |
|
height: 630px; |
|
background: rgba(255, 255, 255, 0.1); |
|
backdrop-filter: blur(10px); |
|
box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.25); |
|
margin-top: 25px; |
|
// padding: 46px 180px 70px 180px; |
|
padding-top: 46px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.tab { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.item { |
|
width: 152px; |
|
height: 70px; |
|
border-radius: 10px; |
|
text-align: center; |
|
line-height: 70px; |
|
color: #1e2033; |
|
font-size: 18px; |
|
box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22); |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
margin-right: 48px; |
|
} |
|
.item:hover { |
|
transform: scale(1.1); |
|
} |
|
.item:last-child { |
|
margin: 0; |
|
} |
|
.active { |
|
color: #fff; |
|
} |
|
} |
|
.newa-main { |
|
width: 1200px; |
|
height: 465px; |
|
padding: 58px 54px 19px 25px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
.left { |
|
width: 546px; |
|
height: 388px; |
|
background-color: #d9d9d9; |
|
border-radius: 15px; |
|
} |
|
.right { |
|
flex: 1; |
|
height: 388px; |
|
margin-left: 89px; |
|
padding: 15px 0; |
|
.title { |
|
font-size: 24px; |
|
font-weight: 600; |
|
color: #1e2033; |
|
} |
|
.description { |
|
font-size: 14px; |
|
margin-top: 10px; |
|
color: #1e2033; |
|
} |
|
.newa-main-list { |
|
width: 100%; |
|
height: 270px; |
|
// background-color: pink; |
|
margin-top: 38px; |
|
ul { |
|
width: 100%; |
|
height: 100%; |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
align-items: center; |
|
li { |
|
width: 227px; |
|
height: 65px; |
|
.time { |
|
position: relative; |
|
font-size: 14px; |
|
color: #1e2033; |
|
padding-left: 13px; |
|
} |
|
.time::before { |
|
content: ' '; |
|
display: block; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 6px; |
|
height: 13px; |
|
background-color: #319245; |
|
} |
|
.info { |
|
margin-top: 12px; |
|
font-size: 12px; |
|
color: #1e2033; |
|
line-height: 18px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|