|
|
<template>
|
|
|
<div>
|
|
|
<div>
|
|
|
<b-navbar toggleable="lg" type="dark" variant="info" class="tz-index-nav" >
|
|
|
<b-navbar-brand href="#">
|
|
|
<b-img fluid class="tz-logo" src="/static/image/logo_white.png"/>
|
|
|
<b-img fluid class="tz-logo-name d-none d-sm-inline" src="/static/image/logo_name.png" />
|
|
|
</b-navbar-brand>
|
|
|
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
|
|
<b-collapse id="nav-collapse" is-nav>
|
|
|
|
|
|
<!-- Right aligned nav items -->
|
|
|
<b-navbar-nav class="ml-auto">
|
|
|
<b-nav-item-dropdown right>
|
|
|
<template v-slot:button-content>
|
|
|
<em class="tz-user-info" @click="goUserCenter">用户中心</em>
|
|
|
</template>
|
|
|
<b-dropdown-item href="#">个人中心</b-dropdown-item>
|
|
|
<b-dropdown-item href="#">退出</b-dropdown-item>
|
|
|
</b-nav-item-dropdown>
|
|
|
</b-navbar-nav>
|
|
|
</b-collapse>
|
|
|
</b-navbar>
|
|
|
<b-img fluid src="/static/image/banner1920x600.jpg" alt="Responsive image"></b-img>
|
|
|
</div>
|
|
|
<div class="tz-title">
|
|
|
<b-img fluid src="/static/image/title_1_500x102.png" />
|
|
|
</div>
|
|
|
<b-container class="d-none d-xl-block">
|
|
|
<b-row v-for="item in list1" :key="item.id" class="tz-box" @click="goCompetition(item.id)">
|
|
|
<b-col sm="3"> <b-img fluid :src="item.thumbnail" /></b-col>
|
|
|
<b-col sm="9">
|
|
|
<b-container>
|
|
|
<b-row>
|
|
|
<b-col>
|
|
|
<div class="tz-box2-content">
|
|
|
<div>
|
|
|
<div class="">
|
|
|
<b-img fluid src="/static/image/icon_home1_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span class="tz-team-title">{{ item.name}}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b-img fluid src="/static/image/icon_home2_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span>主办方：{{ item.sponsor}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b-img fluid src="/static/image/going.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
<hr />
|
|
|
<b-row>
|
|
|
<b-col>
|
|
|
<div class="tz-box2-content">
|
|
|
<div class="tz-time-container">
|
|
|
<div class="d-none d-sm-inline" >
|
|
|
<b-img fluid src="/static/image/icon_home3_30x30.png" class="tz-icon" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>比赛时间：<span class="tz-yellow-time">{{ new Date(item.startTime).Format('yyyy-MM-dd') }}</span> 至 <span class="tz-red-time">{{ new Date(item.endTime).Format('yyyy-MM-dd')}}</span></div>
|
|
|
<div v-if="item.enableSignup">报名时间：<span class="tz-yellow-time">{{ new Date(item.signupStartTime).Format('yyyy-MM-dd')}}</span> 至 <span class="tz-red-time">{{ new Date(item.signupStartTime).Format('yyyy-MM-dd')}}</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-button-container">
|
|
|
<b-container :class="item.type == 2 ?'tz-button tz-button-yellow':'tz-button tz-button-blue'">
|
|
|
<b-row align-h="center" align-v="center">
|
|
|
<b-col sm="3" align="center">
|
|
|
<b-img :src="item.type==2?'/static/image/icon_home5_40x40.png':'/static/image/icon_home4_40x40.png'" />
|
|
|
</b-col>
|
|
|
<b-col sm="9" align="center">
|
|
|
<span class="d-none d-sm-inline" >{{ item.type == 2?'个人赛':'团队赛' }}</span>{{getStatus(item)}}
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
</b-container>
|
|
|
</div>
|
|
|
</div>
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
</b-container>
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
</b-container>
|
|
|
<b-container class="d-block d-sm-none">
|
|
|
<div class="tz-box2" @click="goCompetition(1)">
|
|
|
<div class="tz-box2-header">
|
|
|
<div class="tz-bg-blue">
|
|
|
<b-img fluid src="/static/image/icon_home4_40x40.png"/>
|
|
|
<span>团体赛</span>
|
|
|
</div>
|
|
|
<div class="tz-bg-black">
|
|
|
进行中
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-box2-container">
|
|
|
<b-img src="/static/image/pic_1_340x190.png" />
|
|
|
</div>
|
|
|
<div class="tz-box2-footer">
|
|
|
<div class="tz-footer-content">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home1_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span class="tz-footer-title" >2021年全国高职金融模拟交易大赛</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home2_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span>主办方：全国金融职业教育教学指导委员会</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-flex">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home3_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>比赛时间：05/20 16:00 至 05/20 17:00</div>
|
|
|
<div>报名时间：05/20 16:00 至 05/20 17:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-box2" @click="goCompetition(1)">
|
|
|
<div class="tz-box2-header">
|
|
|
<div class="tz-bg-yellow">
|
|
|
<b-img fluid src="/static/image/icon_home5_40x40.png"/>
|
|
|
<span>个人赛</span>
|
|
|
</div>
|
|
|
<div class="tz-bg-black">
|
|
|
报名中
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-box2-container">
|
|
|
<b-img src="/static/image/pic_1_340x190.png" />
|
|
|
</div>
|
|
|
<div class="tz-box2-footer">
|
|
|
<div class="tz-footer-content">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home1_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span class="tz-footer-title" >2021年全国高职金融模拟交易大赛</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home2_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span>主办方：全国金融职业教育教学指导委员会</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-flex">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home3_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>比赛时间：05/20 16:00 至 05/20 17:00</div>
|
|
|
<div>报名时间：05/20 16:00 至 05/20 17:00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</b-container>
|
|
|
<div class="tz-title">
|
|
|
<b-img fluid src="/static/image/title_2_500x102.png" />
|
|
|
</div>
|
|
|
<b-container>
|
|
|
<b-row v-for="(subList,$index) in list2" :key="$index">
|
|
|
<b-col sm v-for="item in subList" :key="item.id" >
|
|
|
<div class="tz-box2" @click="goCompetition(item.id)">
|
|
|
<div class="tz-box2-header">
|
|
|
<div :class="item.type==1 ?'tz-bg-blue':'tz-bg-yellow' ">
|
|
|
<b-img fluid :src="item.type == 1?'/static/image/icon_home4_40x40.png':'/static/image/icon_home5_40x40.png'"/>
|
|
|
<span>{{ item.type == 1?'团体赛':'个人赛'}}</span>
|
|
|
</div>
|
|
|
<div class="tz-bg-black">
|
|
|
已结束
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-box2-container">
|
|
|
<b-img src="/static/image/pic_1_340x190.png" />
|
|
|
</div>
|
|
|
<div class="tz-box2-footer">
|
|
|
<div class="tz-footer-content">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home1_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span class="tz-footer-title" >{{ item.name}}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home2_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
<span>主办方：{{ item.sponsor}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tz-flex">
|
|
|
<div>
|
|
|
<b-img src="/static/image/icon_home3_30x30.png" class="d-none d-sm-inline tz-icon" />
|
|
|
</div>
|
|
|
<div>
|
|
|
<div>比赛时间：{{new Date(item.startTime).Format('yyyy-MM-dd')}} 至 {{ new Date(item.endTime).Format('yyyy-MM-dd')}}</div>
|
|
|
<div v-if="item.enableSignup" >报名时间：{{ new Date(item.signupStartTime).Format('yyyy-MM-dd') }} 至 {{ new Date(item.singnupEndTime).Format('yyyy-MM-dd')}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</b-col>
|
|
|
</b-row>
|
|
|
</b-container>
|
|
|
<tz-footer />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Footer from '@/components/footer.vue'
|
|
|
import * as competitionApi from '@/api/competition'
|
|
|
export default {
|
|
|
components:{
|
|
|
"tz-footer": Footer
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
list1: [],
|
|
|
list2: [],
|
|
|
page1: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 20,
|
|
|
type:1
|
|
|
},
|
|
|
page2: {
|
|
|
pageNo: 1,
|
|
|
pageSize: 20,
|
|
|
type: 2
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
this.listGoing()
|
|
|
this.listDone()
|
|
|
},
|
|
|
created(){
|
|
|
|
|
|
},
|
|
|
methods:{
|
|
|
goCompetition(id){
|
|
|
this.$router.push({
|
|
|
path: '/competition',
|
|
|
query: {id: id}
|
|
|
})
|
|
|
},
|
|
|
goUserCenter(){
|
|
|
this.$router.push({
|
|
|
path: '/member'
|
|
|
})
|
|
|
},
|
|
|
listGoing(){
|
|
|
competitionApi.getList(this.page1.pageNo,this.page1.type).then(res=>{
|
|
|
if(res.code == 200){
|
|
|
this.list1 = res.data.list
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
listDone(){
|
|
|
competitionApi.getList(this.page2.pageNo,this.page2.type).then(res=>{
|
|
|
if(res.code == 200){
|
|
|
for(var i= 0;i<res.data.list.length;i+=3) {
|
|
|
let index = i/3
|
|
|
this.list2[index] = res.data.list.slice(i,i+3)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getStatus(item){
|
|
|
let now = new Date().getTime()
|
|
|
if(item.enableSignup) {
|
|
|
let singnupStartTime = new Date(item.singnupStartTime).getTime()
|
|
|
let singnupEndTime = new Date(item.singnupEndTime).getTime()
|
|
|
if(now>= singnupStartTime &&now<=singnupEndTime){
|
|
|
return "报名中";
|
|
|
}
|
|
|
}
|
|
|
return "进行中";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.tz-box2-content{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.tz-icon{
|
|
|
margin-right: 0.2rem;
|
|
|
margin-left: 0.2rem;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.tz-index-nav {
|
|
|
background: rgba(0,0,0,.5) !important;
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
max-width: 1920px;
|
|
|
padding:0;
|
|
|
/* padding-left: 20%;
|
|
|
padding-right: 20%; */
|
|
|
}
|
|
|
.tz-logo{
|
|
|
width: 2rem;
|
|
|
height: 2rem;
|
|
|
margin-left: 1.5rem;
|
|
|
/* margin-top: -5px; */
|
|
|
}
|
|
|
.tz-logo-name{
|
|
|
width: 7rem;
|
|
|
height: auto;
|
|
|
}
|
|
|
.ml-auto {
|
|
|
margin-left: auto!important;
|
|
|
}
|
|
|
.tz-button-container{
|
|
|
display: flex;
|
|
|
/* justify-content: center; */
|
|
|
align-items: end;
|
|
|
}
|
|
|
.tz-time-container{
|
|
|
display: flex;
|
|
|
|
|
|
}
|
|
|
.tz-user-info{
|
|
|
color: white;
|
|
|
font-style:normal
|
|
|
/* padding: 2px;
|
|
|
border: 1px solid;
|
|
|
border-radius: 5px; */
|
|
|
}
|
|
|
.tz-content{
|
|
|
margin-top: 2rem;
|
|
|
flex-direction: row;
|
|
|
justify-content: center;
|
|
|
max-width: 1200px;
|
|
|
margin: auto;
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
.tz-img{
|
|
|
/* width: 4rem;
|
|
|
height: auto; */
|
|
|
padding: 5px;;
|
|
|
}
|
|
|
.tz-title{
|
|
|
margin-top: 2rem;
|
|
|
margin-bottom: 2rem;
|
|
|
}
|
|
|
.tz-team-title{
|
|
|
font-weight: bolder;
|
|
|
font-size: 200%;
|
|
|
}
|
|
|
|
|
|
.tz-main{
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.tz-box{
|
|
|
box-shadow: -1px -1px 20px 1px #c4c4c4 ;
|
|
|
border-radius: 10px;
|
|
|
display: flex;
|
|
|
padding: 1rem;
|
|
|
flex-wrap: wrap;
|
|
|
text-align: left;
|
|
|
justify-content: space-around;
|
|
|
margin-bottom: 2rem;
|
|
|
|
|
|
}
|
|
|
.tz-box-header{
|
|
|
/* width: 20%; */
|
|
|
margin-right: 2rem;
|
|
|
}
|
|
|
.tz-box-title{
|
|
|
color: black;
|
|
|
font-weight: bold;
|
|
|
font-size: 2rem;
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
|
|
}
|
|
|
.tz-box-content{
|
|
|
width: auto;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
text-align: left;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.tz-box-sponsor{
|
|
|
color: black;
|
|
|
font-size: 1rem;
|
|
|
margin-top: 1rem;
|
|
|
}
|
|
|
.tz-box-lable{
|
|
|
margin-top: 0.5rem;
|
|
|
}
|
|
|
.tz-box-time{
|
|
|
color: black;
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
.tz-button{
|
|
|
border-radius: 5px;
|
|
|
padding: 3px;
|
|
|
font-weight: bolder;
|
|
|
}
|
|
|
.tz-button-blue{
|
|
|
background-color: #2d6dcc;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.tz-button-yellow{
|
|
|
background-color: #f47419;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.tz-yellow-time{
|
|
|
color:#f47419;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
.tz-red-time{
|
|
|
margin-left: 10px;
|
|
|
color: #ff0000;
|
|
|
}
|
|
|
.tz-box2{
|
|
|
box-shadow: -1px -1px 10px 1px #c4c4c4 ;
|
|
|
border-radius: 8px;
|
|
|
margin-bottom: 1rem;
|
|
|
padding-bottom: 1rem;
|
|
|
}
|
|
|
.tz-flex {
|
|
|
display: flex;
|
|
|
line-height: 1.5;
|
|
|
}
|
|
|
.tz-box2-header{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
}
|
|
|
.tz-bg-blue{
|
|
|
background-color: #2d6dcc;
|
|
|
color: white;
|
|
|
font-weight: bolder;
|
|
|
text-align: left;
|
|
|
border-top-left-radius: 8px;
|
|
|
width: 80%;
|
|
|
}
|
|
|
.tz-bg-yellow{
|
|
|
background-color: #f47419;
|
|
|
color: white;
|
|
|
font-weight: bolder;
|
|
|
text-align: left;
|
|
|
border-top-left-radius: 8px;
|
|
|
width: 80%;
|
|
|
}
|
|
|
.tz-bg-black{
|
|
|
background-color: #2b2b2b;
|
|
|
color: white;
|
|
|
font-weight: bolder;
|
|
|
text-align: center;
|
|
|
border-top-right-radius: 8px;
|
|
|
width: 20%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.tz-box2-container{
|
|
|
margin-top: 1rem;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
.tz-box2-footer{
|
|
|
/* text-align: left; */
|
|
|
padding-left: 1rem;
|
|
|
}
|
|
|
.tz-footer-content{
|
|
|
text-align: left;
|
|
|
line-height: 2.2;
|
|
|
margin-bottom: 1rem;
|
|
|
}
|
|
|
.tz-footer-title{
|
|
|
font-weight: bolder;
|
|
|
font-size: 120%;
|
|
|
}
|
|
|
</style> |