parent
35e94fcad8
commit
2ef4dc9f36
13 changed files with 571 additions and 704 deletions
|
After Width: | Height: | Size: 334 B |
@ -0,0 +1,172 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="breadcrumb"> |
||||
<el-breadcrumb separator=">"> |
||||
<template v-for="(item, i) in breadPath"> |
||||
<el-breadcrumb-item |
||||
v-if="!i" |
||||
:key="i" |
||||
:to="{ path: 'list' }"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item |
||||
v-else-if="breadPath.length > 2 && i === 1" |
||||
:to="{ path: 'details', query: { end, status } }" |
||||
:key="i"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
<el-breadcrumb-item |
||||
v-else |
||||
:key="i"> |
||||
{{item}} |
||||
</el-breadcrumb-item> |
||||
</template> |
||||
</el-breadcrumb> |
||||
</div> |
||||
<div class="page"> |
||||
<h6 class="title">{{ form.announcementTitle }}</h6> |
||||
<div class="metas"> |
||||
<span>{{ form.updateTime }}</span> |
||||
</div> |
||||
<div class="content ql-editor" v-html="form.announcementText"></div> |
||||
|
||||
<template v-if="form.announcementAnnexList"> |
||||
<h6 class="p-title">附件下载</h6> |
||||
<ul class="files"> |
||||
<li v-for="(item, i) in form.announcementAnnexList" :key="i"> |
||||
<el-link class="m-r-10" type="primary" @click="preview(item)">{{ item.fileName }}</el-link> |
||||
<el-link type="primary" :underline="false" @click="download(item)">下载</el-link> |
||||
</li> |
||||
</ul> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { Loading } from 'element-ui'; |
||||
import 'quill/dist/quill.core.css'; |
||||
import 'quill/dist/quill.snow.css'; |
||||
import 'quill/dist/quill.bubble.css'; |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
end: this.$route.query.end, |
||||
status: this.$route.query.status, |
||||
breadPath: ['全部赛事', this.$route.query.name], |
||||
form: { |
||||
id: this.$route.query.id, |
||||
announcementText: '', |
||||
announcementTitle: '', |
||||
announcementAnnexList: [] |
||||
}, |
||||
loadIns: null |
||||
} |
||||
}, |
||||
components: { |
||||
breadcrumb |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
}, |
||||
methods: { |
||||
// 公告详情 |
||||
getData() { |
||||
this.loadIns = Loading.service() |
||||
this.$post(`${this.api.queryAnnouncementDetails}?id=${this.form.id}`).then(({ data }) => { |
||||
this.form = data |
||||
this.breadPath.push(data.announcementTitle) |
||||
this.loadIns.close() |
||||
}).catch(err => { |
||||
this.loadIns.close() |
||||
}) |
||||
}, |
||||
// 预览附件 |
||||
preview(item) { |
||||
const { filePath } = item |
||||
const suffix = filePath.substr(filePath.lastIndexOf('.') + 1) |
||||
window.open((util.isDoc(suffix) || suffix === 'pdf' ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + item.filePath) |
||||
}, |
||||
// 下载附件 |
||||
download(item) { |
||||
util.downloadFile(item.fileName, item.filePath) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.breadcrumb { |
||||
margin: 4px 0 16px; |
||||
/deep/.el-breadcrumb__item { |
||||
.is-link, .el-breadcrumb__separator { |
||||
font-weight: 400; |
||||
color: $main-color; |
||||
} |
||||
&:last-child { |
||||
.is-link { |
||||
color: #0B1D30; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.wrap { |
||||
padding-bottom: 20px; |
||||
.title{ |
||||
margin-top: 30px; |
||||
text-align: center; |
||||
font-size: 28px; |
||||
font-weight: 500; |
||||
color: #0B1D30; |
||||
} |
||||
.metas{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding-bottom: 32px; |
||||
margin: 16px 0 32px; |
||||
span{ |
||||
display: inline-flex; |
||||
align-items: center; |
||||
color: #999; |
||||
font-size: 12px; |
||||
img{ |
||||
width: 18px; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
.el-divider { |
||||
margin: 0 16px; |
||||
} |
||||
} |
||||
.cover{ |
||||
margin: 20px 0; |
||||
text-align: center; |
||||
img{ |
||||
width: 800px; |
||||
} |
||||
} |
||||
.content{ |
||||
margin-bottom: 20px; |
||||
line-height: 1.8; |
||||
font-size: 16px; |
||||
text-indent: 2em; |
||||
/deep/img{ |
||||
display: block; |
||||
width: 600px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
} |
||||
.files { |
||||
margin-bottom: 30px; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -1,433 +0,0 @@ |
||||
<template> |
||||
<div class="wrap index"> |
||||
<div class="banner" :style="{backgroundImage: coverUrlComputed}"></div> |
||||
<div class="center-wrap"> |
||||
<breadcrumb ref="breadcrumb" :data="'全部赛事/' + title"></breadcrumb> |
||||
<div class="content"> |
||||
<div class="flex-between"> |
||||
<el-tabs v-model="curType"> |
||||
<el-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane> |
||||
</el-tabs> |
||||
<div class="action"> |
||||
<p class="end-text" v-if="status != 5"> |
||||
距离{{ endList[status] }}还有<em>{{ end }}</em>天 |
||||
</p> |
||||
<a class="status" :class="{wait: status == 0 || status == 4,signing: status == 2,signed: status == 1,finish: status == 3 || status == 5}" @click.stop="signup">{{ statusList[status] }}</a> |
||||
</div> |
||||
</div> |
||||
<h6 class="title">{{title}}</h6> |
||||
<div class="meta">最近编辑时间：{{gmtModified}}</div> |
||||
<div class="texts ql-editor" v-html="description" v-if="curType == 1"></div> |
||||
<div v-else> |
||||
<ul class="progress" v-if="progress.length"> |
||||
<li v-for="(item,index) in progress" :key="index" :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')"> |
||||
<i class="dot"></i> |
||||
<p class="name">{{item.title}}</p> |
||||
<p class="desc">{{item.description}}</p> |
||||
</li> |
||||
<img class="rocket" src="@/assets/img/rocket.png" alt=""> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
export default { |
||||
name: 'matchdetail', |
||||
data() { |
||||
return { |
||||
id: this.$store.state.match.matchId, |
||||
showSignup: this.$store.state.match.matchSignupStatus, |
||||
end: this.$route.query.end, |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], |
||||
coverUrl: '', |
||||
title: '', |
||||
curType: '1', |
||||
typeList: [ |
||||
{ |
||||
id: '1', |
||||
name: '竞赛信息' |
||||
}, |
||||
{ |
||||
id: '2', |
||||
name: '竞赛进展' |
||||
}, |
||||
{ |
||||
id: '3', |
||||
name: '通知公告' |
||||
} |
||||
], |
||||
description: '', |
||||
gmtModified: '', |
||||
signUpStartTime: '', |
||||
signUpEndTime: '', |
||||
playStartTime: '', |
||||
playEndTime: '', |
||||
progress: [], |
||||
status: this.$route.query.status, |
||||
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], |
||||
timer: null |
||||
}; |
||||
}, |
||||
components: { |
||||
breadcrumb |
||||
}, |
||||
directives: { |
||||
countdown: { |
||||
bind: function(el, binding, vnode) { |
||||
let that = vnode.context; |
||||
let time = '' |
||||
let second = 1000; |
||||
let minute = second * 60; |
||||
let hour = minute * 60; |
||||
let now = new Date().getTime(); |
||||
let signUpStartTime = new Date(that.core.dateCompatible(that.signUpStartTime)).getTime(); // 报名开始时间 |
||||
let signUpEndTime = new Date(that.core.dateCompatible(that.signUpEndTime)).getTime(); // 报名结束时间 |
||||
let playStartTime = new Date(that.core.dateCompatible(that.playStartTime)).getTime(); // 比赛开始时间 |
||||
let playEndTime = new Date(that.core.dateCompatible(that.playEndTime)).getTime(); // 比赛结束时间 |
||||
switch (that.status) { |
||||
// status每个值的解释请看getData方法 |
||||
case 0: |
||||
if (now > signUpStartTime) { |
||||
that.status = 1; |
||||
} else { |
||||
time = signUpStartTime - now; |
||||
} |
||||
break; |
||||
case 1: |
||||
if (now > signUpEndTime) { |
||||
that.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 2: |
||||
if (now > signUpEndTime) { |
||||
that.status = 3; |
||||
} else { |
||||
time = signUpEndTime - now; |
||||
} |
||||
break; |
||||
case 3: |
||||
if (now > playStartTime) { |
||||
that.status = 4; |
||||
} else { |
||||
time = playStartTime - now; |
||||
} |
||||
break; |
||||
case 4: |
||||
if (now > playEndTime) { |
||||
that.status = 5; |
||||
} else { |
||||
time = playEndTime - now; |
||||
} |
||||
break; |
||||
} |
||||
time = `${Math.floor(time / hour)}:${Math.floor(time % hour / minute)}:${Math.floor(time % hour % minute / second)}`; |
||||
that.timer = setInterval(() => { |
||||
let timeList = time.split(":"); |
||||
let total = Number.parseInt(timeList[0] * 60 * 60) + Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]); |
||||
if (total > 0) { |
||||
--total; |
||||
let hours = Math.floor(total / (60 * 60)); |
||||
let minutes = Math.floor(total % (60 * 60) / 60); |
||||
let seconds = Math.floor(total % (60 * 60) % 60); |
||||
time = `${that.core.formateTime(hours)}:${that.core.formateTime(minutes)}:${that.core.formateTime(seconds)}`; |
||||
} else { |
||||
clearInterval(that.timer); |
||||
} |
||||
el.innerHTML = time; |
||||
}, 1000) |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
coverUrlComputed() { |
||||
return this.coverUrl? 'url(' + this.coverUrl + ')' : "url('../../../assets/img/info-banner.png')" |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
this.getProgress() |
||||
}, |
||||
methods: { |
||||
getData() { // 获取竞赛信息 |
||||
this.$get(this.api.getContest + '/' + this.id).then(res => { |
||||
let data = res.contest |
||||
this.coverUrl = data.carouselUrl |
||||
this.description = data.description |
||||
this.title = data.name |
||||
this.gmtModified = data.gmtModified |
||||
this.signUpStartTime = data.signUpStartTime |
||||
this.signUpEndTime = data.signUpEndTime |
||||
this.playStartTime = data.playStartTime |
||||
this.playEndTime = data.playEndTime |
||||
this.$forceUpdate() |
||||
this.$refs.breadcrumb.update('全部赛事/' + data.name) |
||||
}).catch(err => {}) |
||||
}, |
||||
getProgress() { // 获取竞赛进展 |
||||
this.$get(this.api.getContestProgress + '/' + this.id).then(res => { |
||||
this.progress = res.contestProgressList.reverse() |
||||
}).catch(err => {}); |
||||
}, |
||||
signup(){ // 立即报名 |
||||
if (this.status == 2) { |
||||
let data = { |
||||
contestId: this.id |
||||
} |
||||
this.$post(this.api.addApplicant,data).then(res => { |
||||
this.$message.success('报名成功') |
||||
this.status = 1; |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.banner{ |
||||
width: 100%; |
||||
height: 350px; |
||||
padding: 120px 0 0 20%; |
||||
color: #fff; |
||||
background-size: 100% 350px; |
||||
background-repeat: no-repeat; |
||||
h6 { |
||||
margin-bottom: 30px; |
||||
font-size: 42px; |
||||
} |
||||
.text { |
||||
font-size: 20px; |
||||
line-height: 30px; |
||||
} |
||||
} |
||||
.main .center-wrap { |
||||
margin-top: 30px; |
||||
} |
||||
.content{ |
||||
position: relative; |
||||
padding: 20px 40px; |
||||
margin-top: 30px; |
||||
background-color: #fff; |
||||
.title{ |
||||
width: 67%; |
||||
margin: 0 auto; |
||||
font-size: 28px; |
||||
text-align: center; |
||||
color: #0B1D30; |
||||
} |
||||
.meta{ |
||||
padding: 16px 0; |
||||
font-size: 12px; |
||||
color: #999; |
||||
text-align: center; |
||||
} |
||||
.action { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
.status { |
||||
padding: 0 16px; |
||||
margin-left: 20px; |
||||
line-height: 34px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
background-color: #52C41A; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
&.wait { |
||||
background-color: #FAAD14; |
||||
} |
||||
&.signing { |
||||
background-color: $main-color; |
||||
} |
||||
&.signed { |
||||
background-color: #52C41A; |
||||
} |
||||
&.finish { |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
.end-text { |
||||
font-size: 12px; |
||||
color: #666; |
||||
em { |
||||
font-style: normal; |
||||
color: #f00; |
||||
} |
||||
} |
||||
.texts{ |
||||
margin: 20px 0 50px; |
||||
font-size: 16px; |
||||
line-height: 1.6; |
||||
text-indent: 2em; |
||||
overflow: hidden; |
||||
/deep/img{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
.progress{ |
||||
position: relative; |
||||
width: 95%; |
||||
padding: 50px 0; |
||||
margin: 40px auto 60px; |
||||
text-align: left; |
||||
&:before{ |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
width: 2px; |
||||
height: 100%; |
||||
background-color: #E1E6F2; |
||||
} |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: -10px; |
||||
left: 430px; |
||||
border: 8px solid transparent; |
||||
border-bottom-color: #E1E6F2; |
||||
} |
||||
.rocket { |
||||
position: absolute; |
||||
bottom: -50px; |
||||
left: 425px; |
||||
} |
||||
li{ |
||||
position: relative; |
||||
width: 400px; |
||||
margin-bottom: 42px; |
||||
.dot{ |
||||
position: absolute; |
||||
top: 12px; |
||||
left: 431px; |
||||
width: 15px; |
||||
height: 15px; |
||||
background-color: #DCDCDC; |
||||
border-radius: 50%; |
||||
} |
||||
.name{ |
||||
display: inline-block; |
||||
padding: 0 19px; |
||||
margin-bottom: 16px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
border-radius: 20px; |
||||
background-color: #C4C4C4; |
||||
} |
||||
.desc{ |
||||
position: relative; |
||||
color: #333; |
||||
font-size: 14px; |
||||
} |
||||
&.ing, &.done { |
||||
.dot { |
||||
top: 8px; |
||||
background-color: #007EFF; |
||||
} |
||||
.name { |
||||
background-color: #007EFF; |
||||
} |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
width: 27px; |
||||
height: 27px; |
||||
border: 6px solid #E2F1FB; |
||||
} |
||||
} |
||||
&:nth-child(odd) { |
||||
text-align: right; |
||||
&.ing { |
||||
.dot { |
||||
left: auto; |
||||
right: -51px; |
||||
} |
||||
} |
||||
.name { |
||||
&:before { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
right: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-left-color: #C4C4C4; |
||||
} |
||||
} |
||||
.desc { |
||||
text-align: right; |
||||
} |
||||
&.ing, &.done { |
||||
.name { |
||||
&:before { |
||||
border-left-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:nth-child(even) { |
||||
margin-left: 482px; |
||||
.dot { |
||||
left: -51px; |
||||
} |
||||
&.ing { |
||||
.dot { |
||||
left: -57px; |
||||
} |
||||
} |
||||
.name { |
||||
text-align: left; |
||||
&:after { |
||||
content: ''; |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 14px; |
||||
left: -35px; |
||||
border: 18px solid transparent; |
||||
border-top-width: 6px; |
||||
border-bottom-width: 6px; |
||||
border-right-color: #C4C4C4; |
||||
} |
||||
} |
||||
.desc { |
||||
&:before { |
||||
left: auto; |
||||
right: -16px; |
||||
border: 8px solid transparent; |
||||
border-left-color: #fff; |
||||
} |
||||
&:after { |
||||
left: auto; |
||||
right: -18px; |
||||
border: 9px solid transparent; |
||||
border-left-color: #E6E6E6; |
||||
} |
||||
} |
||||
|
||||
&.ing, &.done { |
||||
.name { |
||||
&:after { |
||||
border-right-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&:last-child{ |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue