|
|
|
|
@ -5,7 +5,12 @@ |
|
|
|
|
<div class="description"> |
|
|
|
|
<div v-html="reacProjectList[0].compName"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="application gradient" @click="toDetail(reacProjectList[0].id)">立即报名</div> |
|
|
|
|
<div |
|
|
|
|
class="application gradient" |
|
|
|
|
@click="toDetail(reacProjectList[0].id)" |
|
|
|
|
> |
|
|
|
|
立即报名 |
|
|
|
|
</div> |
|
|
|
|
<div class="nav-title"> |
|
|
|
|
<div class="top">竞赛导航</div> |
|
|
|
|
<div class="bottom">30+项目登陆后报名</div> |
|
|
|
|
@ -13,9 +18,14 @@ |
|
|
|
|
</div> |
|
|
|
|
<!-- 比赛列表 --> |
|
|
|
|
<div class="race-list"> |
|
|
|
|
<div class="item" v-for="item in reacProjectList" :key="item.id" @click="toDetail(item.id)"> |
|
|
|
|
<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/> |
|
|
|
|
<img :src="setImageUrl(item.compImg)" alt="" v-default-image /> |
|
|
|
|
</div> |
|
|
|
|
<div class="reac-info"> |
|
|
|
|
<div class="reac-title">{{ item.compName }}</div> |
|
|
|
|
@ -37,26 +47,28 @@ |
|
|
|
|
<div class="tab"> |
|
|
|
|
<div |
|
|
|
|
:class="active === index ? 'item active gradient' : 'item'" |
|
|
|
|
v-for="(item,index) in News" |
|
|
|
|
v-for="(item, index) in newList" |
|
|
|
|
:key="index" |
|
|
|
|
@click="active = index" |
|
|
|
|
@click="toggleTab(item,index)" |
|
|
|
|
> |
|
|
|
|
{{ item }} |
|
|
|
|
{{ item.name }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="newa-main"> |
|
|
|
|
<div class="left"></div> |
|
|
|
|
<div class="left"> |
|
|
|
|
<img src="" alt="" v-default-image style="width: 100%;height: 100%;"> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<div class="title">新闻标题</div> |
|
|
|
|
<div class="title">{{ newInfo.name }}</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> |
|
|
|
|
<li v-for="item in childrenNewList" :key="item.id"> |
|
|
|
|
<div class="time">{{ item.createTime }}</div> |
|
|
|
|
<div class="info"> |
|
|
|
|
我是一段新闻描述,我是一段新闻描述,我是一段新闻描述 |
|
|
|
|
{{ item.info }} |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
@ -71,13 +83,14 @@ |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { getRaceList } from '@/api/race' |
|
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
import { ElLoading } from 'element-plus' |
|
|
|
|
import { getColumnListApi ,queryEssayListApi} from '@/api/news' |
|
|
|
|
const router = useRouter() |
|
|
|
|
const reacProjectList = ref<any>([]) |
|
|
|
|
const isLoading = ref(false) |
|
|
|
|
|
|
|
|
|
const News =ref<any>(['全部','通知公告','赛事资讯','活动速递','政策文件']) |
|
|
|
|
const News = ref<any>(['全部', '通知公告', '赛事资讯', '活动速递', '政策文件']) |
|
|
|
|
const getRaceProjectListEvent = async () => { |
|
|
|
|
let page = { |
|
|
|
|
column: 'createTime', |
|
|
|
|
@ -101,18 +114,48 @@ const getRaceProjectListEvent = async () => { |
|
|
|
|
getRaceProjectListEvent() |
|
|
|
|
const active = ref(0) |
|
|
|
|
const setImageUrl = (url: string) => { |
|
|
|
|
return import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" + url |
|
|
|
|
return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 前往比赛综述 |
|
|
|
|
const toDetail = (id: number) => { |
|
|
|
|
router.push({ |
|
|
|
|
path:'/race-info', |
|
|
|
|
path: '/race-info', |
|
|
|
|
query: { |
|
|
|
|
id |
|
|
|
|
} |
|
|
|
|
id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 获取新闻栏目 |
|
|
|
|
const newList = ref<any>([]) |
|
|
|
|
const getNewsList = async () => { |
|
|
|
|
const res: any = await getColumnListApi() |
|
|
|
|
console.log(res) |
|
|
|
|
newList.value = res.result |
|
|
|
|
console.log(newList.value, 'newList.value') |
|
|
|
|
newInfo.value = newList.value[0] |
|
|
|
|
getNewInfo( newList.value[0].id) |
|
|
|
|
} |
|
|
|
|
getNewsList() |
|
|
|
|
|
|
|
|
|
// 新闻详情 |
|
|
|
|
const newInfo = ref<any>({}) |
|
|
|
|
// 栏目下的新闻 |
|
|
|
|
const childrenNewList = ref<any>([]) |
|
|
|
|
const getNewInfo = async (id:any) => { |
|
|
|
|
const res: any = await queryEssayListApi(id) |
|
|
|
|
childrenNewList.value = res.result.records |
|
|
|
|
console.log(childrenNewList,'childrenNewList'); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 切换tab |
|
|
|
|
const toggleTab = (item: any, index: number) => { |
|
|
|
|
active.value = index |
|
|
|
|
newInfo.value = item |
|
|
|
|
getNewInfo( newInfo.value.id) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -171,7 +214,7 @@ const toDetail = (id: number) => { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.race-list { |
|
|
|
|
position: relative; |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
|
@ -214,13 +257,13 @@ position: relative; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.item:hover{ |
|
|
|
|
.item:hover { |
|
|
|
|
transform: translateY(-5px); |
|
|
|
|
} |
|
|
|
|
.item:nth-child(n) { |
|
|
|
|
margin-top: 20px; |
|
|
|
|
} |
|
|
|
|
.more{ |
|
|
|
|
.more { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 20px; |
|
|
|
|
top: -20px; |
|
|
|
|
@ -296,6 +339,7 @@ position: relative; |
|
|
|
|
height: 388px; |
|
|
|
|
background-color: #d9d9d9; |
|
|
|
|
border-radius: 15px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
flex: 1; |
|
|
|
|
@ -323,7 +367,7 @@ position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
// align-items: center; |
|
|
|
|
li { |
|
|
|
|
width: 227px; |
|
|
|
|
height: 65px; |
|
|
|
|
|
JayChou
8 months ago