From 37dfdd7b9da8f71c61502de2eca43514647bba1e Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Mon, 28 Feb 2022 17:56:23 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=9B=E4=BA=8B=E8=AF=A6=E6=83=85=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/rocket.png | Bin 0 -> 1271 bytes src/pages/match/details/index.vue | 308 +++++++++++++++++++++--------- src/pages/match/list/index.vue | 4 +- 3 files changed, 225 insertions(+), 87 deletions(-) create mode 100644 src/assets/img/rocket.png diff --git a/src/assets/img/rocket.png b/src/assets/img/rocket.png new file mode 100644 index 0000000000000000000000000000000000000000..41c28602ed947ee79eddf086da090ab9d7cb17bf GIT binary patch literal 1271 zcmVP001Qj1^@s6w^2g100001b5ch_0Itp) z=>Px(u}MThR7gv$mv4wvWfaDL&)wbGT$4)BOjdF;{Fhd0r9#R=m_;QNX{%f62eUGx zFN&GYy)$VXDAeNYOhG?SF|Bw{a+Kny3XV+2-FAj=0c69L}=cM~y;CE8yM zsB0#HwO}*=KLdvg1nCdlfoLVIsaFrO$of&iA)umEVu5zrsbi^*7V<65Bxyb(4LnJx zjYWY1djex4MnIFo@<9T78p9>|93D55(!WJPQdUXCZ$J$&i%{z>_wCGNvQ;pI6~J>j z$9D+ze122P5`dGIt7GI-%Z=ztc9AcHRPd z0;j29E`eI&HQ$~A)^^y}NewQ6_%A&qlja`SUl#F(sBo!1xeXpB7Oi);4z8_r?72=>JhI8wgO`g#u%Ekjiil6 ze2aLSv|h}y`3tDRqc0IVfIfJPAfyC{s5{8)$Q`eD){}9RdW+=N}eRt zEgjf7S&{>BSJQ^EGruUt0NwDoos?X@x;Eb)20jJOVz}I7O^kHc>p(8a_vN9C7if~} z=B_QUWf-p%b1E#5NxKWN3-Kmty<7?d-&|h|z@v93xychM7{P=e%X|WlT2hLN0xdQd z{1-$EX*Cw|D=zhcEyZ{>Zmf&FP$)uRJ{FIJNrZ9@c!d=Qaidr4btOosNref=BluUK zJ13}Rm0bT^1&DJEY!eZWAU?+^R3J5odc<x}Nb)eZ{uCkQR>7j>o{RO1<=x zC>Pio5|87>cRvs~fZ?kp^HIslD{;d7ervq$0iwtWp_7|~7`Md_49}aOb?3K~0xFA% zO-r~w7)E5{)!Mer8mdO)>1$xOnlo9Y?!w9iIiCyYCS+_jE#V$^!_}NAsc+?i902P> zWm}!ra>^c~h8|T%K!2(^GvL}VnOZdm$&KI-Y0gZcG2#A3xOow1U8dk$t0QoEOzNqm zZ}k?i@$oQo?_b!?nautAj0@L - {{ statusList[status] }} +
+

+ 距离{{ endList[status] }}还有{{ end }}天 +

+ {{ statusList[status] }} +
{{title}}
最近编辑时间：{{gmtModified}}
    -
  • - +
  • +

    {{item.title}}

    {{item.description}}

    • +
@@ -35,6 +41,9 @@ export default { return { id: this.$store.state.match.matchId, showSignup: this.$store.state.match.matchSignupStatus, + end: this.$route.query.end, + statusList: ["等待报名", "已报名", "立即报名", "报名截止", "比赛中", "已结束"], + endList: ["报名开始", "报名截止", "报名截止", "竞赛开始", "竞赛结束", ""], coverUrl: '', title: '', curType: '1', @@ -52,14 +61,88 @@ export default { ], 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')" @@ -77,6 +160,11 @@ export default { 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 => {}) }, @@ -128,8 +216,13 @@ export default { color: #999; text-align: center; } + .action { + display: inline-flex; + align-items: center; + } .status { - padding: 0 23px; + padding: 0 16px; + margin-left: 20px; line-height: 34px; font-size: 14px; color: #fff; @@ -140,7 +233,7 @@ export default { background-color: #FAAD14; } &.signing { - background-color: #9076FF; + background-color: $main-color; } &.signed { background-color: #52C41A; @@ -149,6 +242,14 @@ export default { background-color: #ccc; } } + .end-text { + font-size: 12px; + color: #666; + em { + font-style: normal; + color: #cb221c; + } + } .texts{ margin: 20px 0 50px; font-size: 16px; @@ -161,120 +262,157 @@ export default { } .progress{ position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + width: 95%; padding: 50px 0; - margin: 40px 0 20px; + margin: 40px auto 60px; + text-align: left; &:before{ content: ''; position: absolute; - left: 413px; - width: 1px; + top: 0; + left: 50%; + width: 2px; height: 100%; - background-color: #E6E6E6; + background-color: #E1E6F2; @media(max-width: 1300px){ 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{ position: relative; - display: inline-flex; - align-items: center; - width: 90%; - margin-bottom: 40px; + width: 400px; + margin-bottom: 42px; .dot{ position: absolute; - left: 366px; - width: 13px; - height: 13px; - background-color: #fff; - - &.not{ - 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; - } - } + top: 12px; + left: 431px; + width: 15px; + height: 15px; + background-color: #DCDCDC; + border-radius: 50%; } .name{ - width: 43%; - font-size: 24px; - color: rgba(0, 0, 0, 0.85); + 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; - padding: 24px 30px; - text-align: center; - color: rgba(0, 0, 0, 0.85); - font-size: 16px; - background-color: #fff; - border: 1px solid #E6E6E6; - border-radius: 8px; - &:before{ - content: ''; - z-index: 2; - position: absolute; - top: 28px; - left: -16px; - border: 8px solid transparent; - border-right-color: #fff; + color: #333; + font-size: 14px; + } + &.ing, &.done { + .dot { + top: 8px; + background-color: #007EFF; + } + .name { + background-color: #007EFF; } - &:after{ - content: ''; - z-index: 1; - position: absolute; - top: 27px; - left: -18px; - border: 9px solid transparent; - border-right-color: #E6E6E6; + } + &.ing { + .dot { + width: 27px; + height: 27px; + border: 6px solid #E2F1FB; } } - &:nth-child(even){ - flex-direction: row-reverse; - .name{ - margin-left: 16%; + &: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{ + .desc { + &:before { left: auto; right: -16px; border: 8px solid transparent; border-left-color: #fff; } - &:after{ + &:after { left: auto; right: -18px; border: 9px solid transparent; border-left-color: #E6E6E6; } } - } - &:nth-child(odd){ - .name{ - margin-right: 16%; - text-align: right; + + &.ing, &.done { + .name { + &:after { + border-right-color: #007EFF; + } + } } } &:last-child{ diff --git a/src/pages/match/list/index.vue b/src/pages/match/list/index.vue index a631e17..9036f4e 100644 --- a/src/pages/match/list/index.vue +++ b/src/pages/match/list/index.vue @@ -61,7 +61,7 @@ @click.stop="signup(item)">{{ statusList[item.status] }}

距离{{ endList[item.status] }}还有 - + {{ item.end }}

@@ -304,7 +304,7 @@ export default { let status = item.status == 1 ? (item.signup ? true : false) : "hide"; this.setMatchId(item.id); this.setMatchSignupStatus(status); - this.$router.push(`/match/details?status=${item.status}`); + this.$router.push(`/match/details?status=${item.status}&end=${item.end}`); }, handleCurrentChange(val) { this.pageNo = val;