huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

赛事详情优化

Browse Source
dev_2020-03-03
yujialong 3 years ago
parent 595115160c
commit 37dfdd7b9d
3 changed files with 225 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/rocket.png
  2. 308
      src/pages/match/details/index.vue
  3. 4
      src/pages/match/list/index.vue

BIN
src/assets/img/rocket.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

308
src/pages/match/details/index.vue
Unescape View File

@ -8,18 +8,24 @@
<el-tabs v-model="curType"> <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-tab-pane v-for="(item, index) in typeList" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
</el-tabs> </el-tabs>
<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 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> </div>
<h6 class="title">{{title}}</h6> <h6 class="title">{{title}}</h6>
<div class="meta">最近编辑时间：{{gmtModified}}</div> <div class="meta">最近编辑时间：{{gmtModified}}</div>
<div class="texts ql-editor" v-html="description" v-if="curType == 1"></div> <div class="texts ql-editor" v-html="description" v-if="curType == 1"></div>
<div v-else> <div v-else>
<ul class="progress" v-if="progress.length"> <ul class="progress" v-if="progress.length">
<li v-for="(item,index) in progress" :key="index"> <li v-for="(item,index) in progress" :key="index" :class="item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done')">
<i class="dot" :class="[item.status == 0 ? 'not' : (item.status == 1 ? 'ing' : 'done el-icon-circle-check')]"></i> <i class="dot"></i>
<p class="name">{{item.title}}</p> <p class="name">{{item.title}}</p>
<p class="desc">{{item.description}}</p> <p class="desc">{{item.description}}</p>
</li> </li>
<img class="rocket" src="@/assets/img/rocket.png" alt="">
</ul> </ul>
</div> </div>
</div> </div>
@ -35,6 +41,9 @@ export default {
return { return {
id: this.$store.state.match.matchId, id: this.$store.state.match.matchId,
showSignup: this.$store.state.match.matchSignupStatus, showSignup: this.$store.state.match.matchSignupStatus,
end: this.$route.query.end,
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""],
coverUrl: '', coverUrl: '',
title: '', title: '',
curType: '1', curType: '1',
@ -52,14 +61,88 @@ export default {
], ],
description: '', description: '',
gmtModified: '', gmtModified: '',
signUpStartTime: '',
signUpEndTime: '',
playStartTime: '',
playEndTime: '',
progress: [], progress: [],
status: this.$route.query.status, status: this.$route.query.status,
statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"],
timer: null
}; };
}, },
components: { components: {
breadcrumb 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: { computed: {
coverUrlComputed() { coverUrlComputed() {
return this.coverUrl? 'url(' + this.coverUrl + ')' : "url('../../../assets/img/info-banner.png')" return this.coverUrl? 'url(' + this.coverUrl + ')' : "url('../../../assets/img/info-banner.png')"
@ -77,6 +160,11 @@ export default {
this.description = data.description this.description = data.description
this.title = data.name this.title = data.name
this.gmtModified = data.gmtModified 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) this.$refs.breadcrumb.update('全部赛事/' + data.name)
}).catch(err => {}) }).catch(err => {})
}, },
@ -128,8 +216,13 @@ export default {
color: #999; color: #999;
text-align: center; text-align: center;
} }
.action {
display: inline-flex;
align-items: center;
}
.status { .status {
padding: 0 23px; padding: 0 16px;
margin-left: 20px;
line-height: 34px; line-height: 34px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
@ -140,7 +233,7 @@ export default {
background-color: #FAAD14; background-color: #FAAD14;
} }
&.signing { &.signing {
background-color: #9076FF; background-color: $main-color;
} }
&.signed { &.signed {
background-color: #52C41A; background-color: #52C41A;
@ -149,6 +242,14 @@ export default {
background-color: #ccc; background-color: #ccc;
} }
} }
.end-text {
font-size: 12px;
color: #666;
em {
font-style: normal;
color: #cb221c;
}
}
.texts{ .texts{
margin: 20px 0 50px; margin: 20px 0 50px;
font-size: 16px; font-size: 16px;
@ -161,120 +262,157 @@ export default {
} }
.progress{ .progress{
position: relative; position: relative;
display: flex; width: 95%;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 50px 0; padding: 50px 0;
margin: 40px 0 20px; margin: 40px auto 60px;
text-align: left;
&:before{ &:before{
content: ''; content: '';
position: absolute; position: absolute;
left: 413px; top: 0;
width: 1px; left: 50%;
width: 2px;
height: 100%; height: 100%;
background-color: #E6E6E6; background-color: #E1E6F2;
@media(max-width: 1300px){ @media(max-width: 1300px){
left: 289px; left: 289px;
} }
} }
&:after {
content: '';
position: absolute;
top: -10px;
left: 430px;
border: 8px solid transparent;
border-bottom-color: #E1E6F2;
}
.rocket {
position: absolute;
bottom: -50px;
left: 425px;
}
li{ li{
position: relative; position: relative;
display: inline-flex; width: 400px;
align-items: center; margin-bottom: 42px;
width: 90%;
margin-bottom: 40px;
.dot{ .dot{
position: absolute; position: absolute;
left: 366px; top: 12px;
width: 13px; left: 431px;
height: 13px; width: 15px;
background-color: #fff; height: 15px;
background-color: #DCDCDC;
&.not{ border-radius: 50%;
border-radius: 50%;
background-color: #fff;
border: 1px solid #cb221c;
}
&.ing{
width: 13px;
height: 13px;
padding: 1px;
border: 1px solid #cb221c;
border-radius: 50%;
background-color: #cb221c;
background-clip: content-box;
}
&.done{
left: 365px;
color: #cb221c;
font-size: 16px;
}
@media(max-width: 1300px){
left: 254px;
&.done{
left: 253px;
}
}
} }
.name{ .name{
width: 43%; display: inline-block;
font-size: 24px; padding: 0 19px;
color: rgba(0, 0, 0, 0.85); margin-bottom: 16px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #fff;
border-radius: 20px;
background-color: #C4C4C4;
} }
.desc{ .desc{
position: relative; position: relative;
padding: 24px 30px; color: #333;
text-align: center; font-size: 14px;
color: rgba(0, 0, 0, 0.85); }
font-size: 16px; &.ing, &.done {
background-color: #fff; .dot {
border: 1px solid #E6E6E6; top: 8px;
border-radius: 8px; background-color: #007EFF;
&:before{ }
content: ''; .name {
z-index: 2; background-color: #007EFF;
position: absolute; }
top: 28px; }
left: -16px; &.ing {
border: 8px solid transparent; .dot {
border-right-color: #fff; 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;
} }
&:after{ &.ing, &.done {
content: ''; .name {
z-index: 1; &:before {
position: absolute; border-left-color: #007EFF;
top: 27px; }
left: -18px; }
border: 9px solid transparent;
border-right-color: #E6E6E6;
} }
} }
&:nth-child(even){ &:nth-child(even) {
flex-direction: row-reverse; margin-left: 482px;
.name{ .dot {
margin-left: 16%; left: -51px;
}
&.ing {
.dot {
left: -57px;
}
}
.name {
text-align: left; 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{ .desc {
&:before{ &:before {
left: auto; left: auto;
right: -16px; right: -16px;
border: 8px solid transparent; border: 8px solid transparent;
border-left-color: #fff; border-left-color: #fff;
} }
&:after{ &:after {
left: auto; left: auto;
right: -18px; right: -18px;
border: 9px solid transparent; border: 9px solid transparent;
border-left-color: #E6E6E6; border-left-color: #E6E6E6;
} }
} }
}
&:nth-child(odd){ &.ing, &.done {
.name{ .name {
margin-right: 16%; &:after {
text-align: right; border-right-color: #007EFF;
}
}
} }
} }
&:last-child{ &:last-child{

4
src/pages/match/list/index.vue
Unescape View File

@ -61,7 +61,7 @@
@click.stop="signup(item)">{{ statusList[item.status] }}</p> @click.stop="signup(item)">{{ statusList[item.status] }}</p>
<p class="end-text" v-if="item.status != 5"> <p class="end-text" v-if="item.status != 5">
距离{{ endList[item.status] }}还有 距离{{ endList[item.status] }}还有
<template v-if="item.end > 0">{{ item.end }}天</template> <template v-if="item.end > 0">{{ item.end }} 天</template>
<em v-else v-countdown="index">{{ item.end }}</em> <em v-else v-countdown="index">{{ item.end }}</em>
</p> </p>
</div> </div>
@ -304,7 +304,7 @@ export default {
let status = item.status == 1 ? (item.signup ? true : false) : "hide"; let status = item.status == 1 ? (item.signup ? true : false) : "hide";
this.setMatchId(item.id); this.setMatchId(item.id);
this.setMatchSignupStatus(status); this.setMatchSignupStatus(status);
this.$router.push(`/match/details?status=${item.status}`); this.$router.push(`/match/details?status=${item.status}&end=${item.end}`);
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNo = val; this.pageNo = val;

Write Preview
Loading…
Cancel
Save