Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
fwb
8 months ago
commit
cb22b32e92
12 changed files with 409 additions and 74 deletions
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 141 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
@ -1,82 +1,92 @@ |
||||
export const constRouter: any =
|
||||
{ |
||||
path: '/', |
||||
component: () => import('@/Layout/index.vue'), |
||||
name: 'Layout', |
||||
redirect: '/home', |
||||
meta: { |
||||
icon: '', |
||||
title: '', |
||||
hidden: false, |
||||
export const constRouter: any = |
||||
{ |
||||
path: '/', |
||||
component: () => import('@/Layout/index.vue'), |
||||
name: 'Layout', |
||||
redirect: '/home', |
||||
meta: { |
||||
icon: '', |
||||
title: '', |
||||
hidden: false, |
||||
}, |
||||
children: [ |
||||
{ |
||||
path: '/home', |
||||
name: 'Home', |
||||
component: () => import('@/views/home/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '首页', |
||||
hidden: false, |
||||
}, |
||||
}, |
||||
children: [ |
||||
{ |
||||
path: '/home', |
||||
name: 'Home', |
||||
component: () => import('@/views/home/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '首页', |
||||
hidden: false, |
||||
}, |
||||
{ |
||||
path: '/appraise', |
||||
name: 'Appraise', |
||||
component: () => import('@/views/appraise/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛评价', |
||||
hidden: false, |
||||
}, |
||||
{ |
||||
path: '/appraise', |
||||
name: 'Appraise', |
||||
component: () => import('@/views/appraise/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛评价', |
||||
hidden: false, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/navigation', |
||||
name: 'Navigation', |
||||
component: () => import('@/views/navigation/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛导航', |
||||
hidden: false, |
||||
}, |
||||
{ |
||||
path: '/navigation', |
||||
name: 'Navigation', |
||||
component: () => import('@/views/navigation/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛导航', |
||||
hidden: false, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/achievement', |
||||
name: 'Achievement', |
||||
component: () => import('@/views/achievement/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛成果', |
||||
hidden: false, |
||||
}, |
||||
{ |
||||
path: '/achievement', |
||||
name: 'Achievement', |
||||
component: () => import('@/views/achievement/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛成果', |
||||
hidden: false, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/competition', |
||||
name: 'Competition', |
||||
component: () => import('@/views/competition/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '年度赛事', |
||||
hidden: false, |
||||
}, |
||||
}, |
||||
{ |
||||
path: '/news', |
||||
name: 'news', |
||||
component: () => import('@/views/news/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛新闻', |
||||
hidden: false, |
||||
}, |
||||
{ |
||||
path:'/news', |
||||
name:'news', |
||||
component:()=>import('@/views/news/index.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '竞赛新闻', |
||||
hidden: false, |
||||
children: [ |
||||
{ |
||||
path: '', |
||||
name: 'newsList', |
||||
component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
|
||||
}, |
||||
children:[ |
||||
{ |
||||
path: '', |
||||
name: 'newsList', |
||||
component: () => import('@/views/news/components/newsList.vue'), // 新闻列表组件
|
||||
}, |
||||
{ |
||||
path:'/newsDetail', |
||||
name:'newsDetail', |
||||
component:()=>import('@/views/news/components/newsDetail.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '新闻内容详情', |
||||
hidden: true, |
||||
} |
||||
{ |
||||
path: '/newsDetail', |
||||
name: 'newsDetail', |
||||
component: () => import('@/views/news/components/newsDetail.vue'), |
||||
meta: { |
||||
icon: '', |
||||
title: '新闻内容详情', |
||||
hidden: true, |
||||
} |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
} |
||||
], |
||||
}, |
||||
], |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,325 @@ |
||||
<!-- 年度赛事 --> |
||||
<template> |
||||
<div class="fill"></div> |
||||
<div class="banner"> |
||||
<img src="../../assets/images/banner2.png" alt=""> |
||||
</div> |
||||
<div class="competition"> |
||||
<!-- 简介 --> |
||||
<div class="synopsis"> |
||||
<div class="name">年度比赛名称</div> |
||||
<div class="content"> |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介比赛简介 |
||||
比赛简介比赛简介比赛简介比赛简介比赛简介</div> |
||||
<div class="date">报名时间：2023.08.23-2023.09.23</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="i in 16" :key="i"> |
||||
<div v-if="(i + 4) % 4 == 1" class="card" type="yellow"> |
||||
<div class="top">红色之旅赛道</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
<div v-if="(i + 4) % 4 == 2" class="card" type="purple"> |
||||
<div class="top">红色之旅赛道</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
<div v-if="(i + 4) % 4 == 3" class="card" type="cyan00"> |
||||
<div class="top">红色之旅赛道</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn">立即报名</el-button> |
||||
<el-link :underline="false" class="link">详情</el-link> |
||||
</div> |
||||
</div> |
||||
<div v-if="(i + 4) % 4 == 0" class="card" type="orange"> |
||||
<div class="top">红色之旅赛道</div> |
||||
<div class="bottom"> |
||||
<el-button class="btn">立即报名</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 setup> |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.fill { |
||||
padding-top: 80px; |
||||
} |
||||
|
||||
.banner { |
||||
width: 100%; |
||||
height: 367px; |
||||
border-radius: 0px 0px 0px 0px; |
||||
|
||||
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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
|
||||
.select { |
||||
margin-top: 125px; |
||||
margin-bottom: 500px; |
||||
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; |
||||
} |
||||
|
||||
.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)); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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> |
||||
Loading…
Reference in new issue