Skip to content

N
NEWYEARPARTY
Commit f3b879d5 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

新增投票

parent d2fb3282
Hide whitespace changes
Inline Side-by-side
Showing with 690 additions and 42 deletions
src/assets/css/GameRanking.css
View file @ f3b879d5
......@@ -19,7 +19,7 @@
font-size: 4rem;
color: white;
position: relative;
top: -20px;
top: -30px;
}
.Ranking .rank-box{
width: 80%;
......@@ -32,8 +32,8 @@
}
.Ranking .rank-box .item .head{
position: relative;
width: 7rem;
height: 7rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
background:linear-gradient(0deg,rgba(247,213,23,1),rgba(255,171,2,1));
padding: .4rem;
......@@ -41,21 +41,25 @@
}
.Ranking .rank-box .item .head .maozi{
position: absolute;
left: -12px;
top: -20px;
left: -23px;
top: -21px;
box-sizing: border-box;
}
.Ranking .rank-box .item .head .maozi1,.Ranking .rank-box .item .head .maozi2{
left: -18px;
top: -16px;
}
.Ranking .rank-box .item .head .user-img{
width: 7rem;
height: 7rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
}
.Ranking .rank-box .item .body{
background: url(/static/image/gamerank/tiao.png);
/* background: url(/static/image/gamerank/tiao.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100% 100%; */
width: 60px;
margin: 0 auto;
margin: 2rem auto;
height: 292px;
position: relative;
}
......@@ -64,14 +68,16 @@
left: 5%;
bottom: 0;
width: 89%;
background:linear-gradient(90deg,rgba(186,76,11,1),rgba(233,154,53,1),rgba(253,244,139,1),rgba(209,151,25,1));
border-radius:0px 0px 30px 30px;
background: url(/static/image/gamerank/tiao2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Ranking .rank-box .item .name{
text-align: center;
font-family: 'PingFangR';
font-size: 2.4rem;
color: white;
font-weight: 600;
}
.Ranking .rank-box .item .name p:nth-child(1) {
padding: .4rem;
......
src/assets/css/PerformRanking.css
View file @ f3b879d5
......@@ -13,9 +13,13 @@
}
.PerformRanking .tit{
text-align: center;
font-size: 7rem;
font-size: 5rem;
color: white;
}
.PerformRanking .tit-box{
position: relative;
top: -2rem;
}
.PerformRanking .tit span{
-webkit-background-clip: text;
-webkit-background-clip: text;
......@@ -25,7 +29,6 @@
background-repeat: repeat;
}
.rank-box{
background-color: wheat;
height: 65%;
box-sizing: border-box;
}
src/assets/css/pillar.css 0 → 100644
View file @ f3b879d5
.Apillar{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.Apillar .item{
position: absolute;
left: 50%;
transform: translate(-50%);
height: 100%;
}
.item .top{
width: 4.5rem;
height: 70%;
position: absolute;
bottom: 10%;
}
.body{
background: url(/static/image/jiemu/zhuzi.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80%;
position: relative;
top: 2px;
}
.dibu{
background: url(/static/image/jiemu/dibu.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 4.5rem;
height: 4.5rem;
text-align: center;
position: relative;
z-index: 2;
}
.miao img{
width: 114px;
position: absolute;
z-index: 3;
left: -55%;
top: -29%;
animation: huohua 2s infinite ease;
-webkit-animation: huohua 2s infinite ease;
}
@keyframes huohua {
0% {
opacity: 1;
}
50% {
opacity: .8;
}
100% {
opacity: 1;
}
}
.dibu img{
width: 60%;
}
.fire{
position: absolute;
width: 26px;
top: 44%;
}
.fire.fire0{
animation: xingxing 3s infinite ease 1.2s;
-webkit-animation: xingxing 3s infinite ease 1.2s;
}
.fire.fire1{
animation: xingxing 3s infinite ease 2s;
-webkit-animation: xingxing 3s infinite ease 2s;
}
.fire.fire2{
animation: xingxing 3s infinite ease 2.3s;
-webkit-animation: xingxing 3s infinite ease 2.3s;
}
.fire.fire3{
animation: xingxing 3s infinite ease 1.7s;
-webkit-animation: xingxing 3s infinite ease 1.7s;
}
.fire.fire4{
animation: xingxing 3s infinite ease 2.8s;
-webkit-animation: xingxing 3s infinite ease 2.8s;
}
@keyframes xingxing {
0% {
opacity: 1;
transform: scale(1.5);
top: 44%;
}
2% {
opacity: 0.9;
transform: scale(1.4);
top: 43%;
}
4% {
opacity: 0.8;
transform: scale(1.3);
top: 42%;
}
6% {
opacity: 0.8;
transform: scale(1.3);
top: 41%;
}
8% {
opacity: 0.8;
transform: scale(1.3);
top: 40%;
}
10% {
opacity: 0.8;
transform: scale(1.3);
top: 39%;
}
12% {
opacity: 0.8;
transform: scale(1.3);
top: 38%;
}
14% {
opacity: 0.6;
transform: scale(1.2);
top: 37%;
}
16% {
opacity: 0.6;
transform: scale(1.2);
top: 36%;
}
18% {
opacity: 0.6;
transform: scale(1.2);
top: 35%;
}
20% {
opacity: 0.8;
transform: scale(1.2);
top: 34%;
}
22% {
opacity: 0.8;
transform: scale(1.1);
top: 33%;
}
24% {
opacity: 0.8;
transform: scale(1.1);
top: 32%;
}
26% {
opacity: 0.8;
transform: scale(1.2);
top: 31%;
}
28% {
opacity: 1;
transform: scale(1.2);
top: 30%;
}
30% {
opacity: 0.8;
transform: scale(1.2);
top: 29%;
}
32% {
opacity: 0.8;
transform: scale(1.2);
top: 28%;
}
34% {
opacity: 0.8;
transform: scale(1.2);
top: 27%;
}
36% {
opacity: 0.8;
transform: scale(1.2);
top: 26%;
}
38% {
opacity: 0.8;
transform: scale(1.4);
top: 25%;
}
40% {
opacity: 0.8;
transform: scale(1.4);
top: 24%;
}
42% {
opacity: 0.9;
transform: scale(1);
top: 23%;
}
44% {
opacity: 0.8;
transform: scale(1);
top: 22%;
}
46% {
opacity: 0.8;
transform: scale(1.1);
top: 21%;
}
48% {
opacity: 0.8;
transform: scale(1);
top: 20%;
}
50% {
opacity: 0.8;
transform: scale(1.2);
top: 19%;
}
52% {
opacity: 0.8;
transform: scale(1.2);
top: 18%;
}
55% {
opacity: 0.8;
transform: scale(1.2);
top: 17%;
}
58% {
opacity: 0.8;
transform: scale(1.2);
top: 16%;
}
60% {
opacity: 0.8;
transform: scale(1.2);
top: 15%;
}
62% {
opacity: 0.8;
transform: scale(1.2);
top: 14%;
}
64% {
opacity: 0.8;
transform: scale(1.2);
top: 13%;
}
66% {
opacity: 0.8;
transform: scale(1.2);
top: 12%;
}
68% {
opacity: 0.8;
transform: scale(1.2);
top: 11%;
}
70% {
opacity: 0.8;
transform: scale(1.2);
top: 10%;
}
72% {
opacity: 0.8;
transform: scale(1.2);
top: 9%;
}
75% {
opacity: 0.8;
transform: scale(1.2);
top: 8%;
}
78% {
opacity: 0.8;
transform: scale(1.2);
top: 7%;
}
80% {
opacity: 0.8;
transform: scale(1.2);
top: 6%;
}
82% {
opacity: 0.8;
transform: scale(1.2);
top: 4%;
}
84% {
opacity: 0.8;
transform: scale(1.2);
top: 3%;
}
86% {
opacity: 0.8;
transform: scale(1.2);
top: 2%;
}
89% {
opacity: 0.8;
transform: scale(1.2);
top: 1%;
}
91% {
opacity: 0;
transform: scale(1.2);
top: 0%;
}
100% {
opacity: 0;
transform: scale(1);
top: 44%;
}
}
.headImg{
position: absolute;
top: 0%;
transform: translate(-50%);
width: 240px;
height: 240px;
border-radius: 50%;
transition: all linear 2s;
}
.headImg.headImg_0{
position: absolute;
top: 0%;
left: 1300px;
}
.headImg.headImg_1{
top: 0%;
left: initial;
right: 1300px;
}
.headImg.headImg_2{
top: 35%;
left: initial;
right: 1300px;
}
.headImg.headImg_3{
top: 65%;
left: 1300px;
}
.headImg.headImg_4{
top: 15%;
left: 1300px;
}
.headImg.headImg_5{
top: 15%;
left: initial;
right: 1300px;
}
.headImg.headImg_6{
top: 35%;
left: 1300px;
}
.headImg.headImg_7{
top: 65%;
left: initial;
right: 1300px;
}
.headImg.headImgYD{
top: 44%;
left: 50%;
width: 13px;
height: 13px;
}
.headImg.headImg_7.headImgYD,.headImg.headImg_5.headImgYD,
.headImg.headImg_2.headImgYD,.headImg.headImg_1.headImgYD{
top: 44%;
left: initial !important;
right: 28% !important;
width: 13px;
height: 13px;
}
.piaoshu{
position: absolute;
z-index: 10;
font-size: 7rem;
color: white;
font-family: 'PingFangR';
top: -8rem;
width: 260%;
left: -80%;
text-align: center;
}
.AllPillar{
display: flex;
justify-content: space-between;
width: 90%;
padding: 0 5%;
overflow: initial;
}
.AllPillar .item{
left: initial;
transform: initial;
position: relative;
width: 245px;
display: flex;
justify-content: center;
}
.AllPillar .piaoshu{
font-size: 5rem;
top: -6rem;
}
.AllPillar .name{
font-size: 3rem;
text-align: center;
position: absolute;
bottom: -2rem;
z-index: 9;
color: white;
}
.AllPillar .name p:nth-child(2){
font-size: 2rem;
}
\ No newline at end of file
src/assets/css/vote.css 0 → 100644
View file @ f3b879d5
.bg_box .bg_video_box{
position: absolute;
background-color: rgb(94, 19, 107);
z-index: -1;
color: rgb(255, 255, 255);
width: 1813px;
height: 1020px;
}
.bg_box .bg_video_box video{
object-fit: fill;
width: 1813px;
height: 1020px;
}
\ No newline at end of file
src/assets/js/menuJson.js
View file @ f3b879d5
......@@ -51,16 +51,16 @@ const leftNavMenu = [
{
Class: 'iconfont iconzu',
Name: '投票',
Url: 'Vote',
Url: 'PerformRanking',
children: [],
bgm: '/static/audio/toupiao.mp3',
},
{
Class: 'iconfont iconpaihangbang',
Name: '排行榜',
Url: 'PerformRanking',
Url: 'PerformRanking2',
children: [],
bgm: '/static/audio/choujiang.mp3',
bgm: '/static/audio/toupiao.mp3',
}
]
const controlMenu = [
......
src/components/PerformRanking.vue
View file @ f3b879d5
<template>
<div class="PerformRanking">
<img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div>
<div class="tit-box">
<p class="tit yinxiang2020">
<span v-for="(item, index) in tit" :key="index">{{item}}</span>
</p>
......@@ -10,22 +10,28 @@
</p>
</div>
<div class="rank-box">
<A-pillar></A-pillar>
</div>
</div>
</template>
<script>
import Apillar from './pillar/aPillar'
export default {
name: 'PerformRanking',
components: {
'A-pillar': Apillar,
},
data () {
return {
tit: '和平印象2019年年会',
tit2: '节目评选结果'
tit2: '节目评选结果',
pillarType: 1
}
},
activated () {},
created () {
this.pillarType = this.$route.query.type
this.MsgBus.$emit('daojishiMp3', 4)
},
mounted () {},
......
src/components/PerformRanking2.vue 0 → 100644
View file @ f3b879d5
<template>
<div class="PerformRanking PerformRanking2">
<img class="logo" src="/static/image/jiemu/logo.png" alt="">
<div class="tit-box">
<p class="tit yinxiang2020">
<span v-for="(item, index) in tit" :key="index">{{item}}</span>
</p>
<p class="tit yinxiang2020">
<span v-for="(item, index) in tit2" :key="index">{{item}}</span>
</p>
</div>
<div class="rank-box">
<All-pillar></All-pillar>
</div>
</div>
</template>
<script>
import AllPillar from './pillar/allPillar'
export default {
name: 'PerformRanking2',
components: {
'All-pillar': AllPillar,
},
data () {
return {
tit: '和平印象2019年年会',
tit2: '节目评选结果',
pillarType: 1
}
},
activated () {},
created () {
this.pillarType = this.$route.query.type
this.MsgBus.$emit('daojishiMp3', 4)
},
mounted () {},
methods: {}
}
</script>
<style scoped>
@import "../assets/css/PerformRanking.css";
</style>
src/components/pageNav.vue
View file @ f3b879d5
......@@ -155,7 +155,6 @@ export default {
window.open('http://activity.oytour.com/html/SignIn/signin.html')
return
}
console.log(obj)
this.MsgBus.$emit('changeBGM', obj.bgm)
if (!obj.children.length && this.$route.name !== obj.Url) {
this.$router.push({
......
src/components/pillar/AllPillar.vue 0 → 100644
View file @ f3b879d5
<template>
<div class="Apillar AllPillar">
<div class="item" v-for="(item, index) in 6">
<div class="top">
<div class="piaoshu">{{piaoshu}}</div>
<div class="miao">
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<div class="body">
<img :class="`fire fire${i}`" :style="{'left': i * 10 + '%'}" v-for="(s, i) in 5" src="/static/image/jiemu/fire.png" alt="">
</div>
<div class="dibu">
<img src="/static/image/jiemu/laoshu.png" alt="">
</div>
</div>
<div class="name">
<p>南京印象</p>
<p>《俺们东北人》</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AllPillar',
data () {
return {
piaoshu: 250
}
},
activated () {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped>
@import "../../assets/css/pillar.css";
</style>
src/components/pillar/aPillar.vue 0 → 100644
View file @ f3b879d5
<template>
<div class="Apillar">
<div class="item">
<div class="top">
<div class="piaoshu">{{piaoshu}}</div>
<div class="miao">
<img src="/static/image/jiemu/huohua.png" alt="">
</div>
<div class="body">
<img v-for="(item, index) in list" :class="item.imgClass" :src="item.headImg" alt="">
<img :class="`fire fire${index}`" :style="{'left': index * 10 + '%'}" v-for="(item, index) in 5" src="/static/image/jiemu/fire.png" alt="">
</div>
<div class="dibu">
<img src="/static/image/jiemu/laoshu.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Apillar',
data () {
return {
headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2491588266,1963864761&fm=26&gp=0.jpg',
imgClass: 'headImg',
list: [],
ClassIndex: 0,
piaoshu: 0
}
},
activated () {},
created () {},
mounted () {
let $this = this
setInterval(() => {
if ($this.ClassIndex === 7) {
$this.ClassIndex = 0
}
$this.ClassIndex++
$this.list.push({
imgClass: 'headImg headImg_' + ($this.ClassIndex - 1),
headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2491588266,1963864761&fm=26&gp=0.jpg'
})
$this.setClass($this.list.length-1, $this.ClassIndex)
}, 1000);
},
methods: {
setClass: function (index, index2) {
let $this = this
setTimeout(() => {
$this.piaoshu++
$this.list[index].imgClass = $this.list[index].imgClass + ' ' + `headImgYD`
$this.setIndex(index)
}, 1000);
},
setIndex: function (index) {
let $this = this
setTimeout(()=>{
$this.list[index].headImg = '/static/image/jiemu/fire.png'
}, 2000)
}
}
}
</script>
<style scoped>
@import "../../assets/css/pillar.css";
</style>
src/components/playGame/GameRanking.vue
View file @ f3b879d5
......@@ -5,11 +5,11 @@
<div class="rank-box">
<div class="item" v-for="(item, index) in rankingList">
<div class="head">
<img v-if="index < 3" class="maozi" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
<img v-if="index < 3" class="maozi" :class="`maozi${index}`" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
<img class="user-img" :src="item.photo" alt="">
</div>
<div class="body">
<div class="color" :style="{'height': (item.height * 20) + 'px'}"></div>
<div class="color" :style="{'height': item.height + '%'}"></div>
</div>
<div class="name">
<p>{{item.name}}</p>
......
src/components/playGame/Mouse.vue
View file @ f3b879d5
......@@ -353,6 +353,10 @@ export default {
height: data.length - index
})
})
let max = this.rankingList[0].rank
this.rankingList.map(x=>{
x.height = x.rank / max * 100
})
this.rankingShow = true
}
},
......
src/components/playGame/Vote.vue
View file @ f3b879d5
<template>
<div>
<div>{{msg}}</div>
<router-link to="/index">返回</router-link>
<div class="bg_box" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
<div class="bg_video_box">
<video src="/static/video/toupiao.mp4" autoplay="autoplay" loop="loop" muted="muted" id="homeBGvideo"></video>
</div>
<div class="home_tit">
</div>
</div>
</template>
<script>
export default {
name: 'Vote',
name: 'index',
data () {
return {
msg: '投票'
initSize: {
width: 1813,
height: 1020
},
videInfo: {
width: 1813,
height: 1020,
offsetX: 0,
offsetY: 0,
transformScale1: 0,
transformScale2: 0
}
}
},
activated () {
this.msg = new Date() + '呵呵'
var video = document.getElementById('homeBGvideo')
video.muted = true
video.play()
},
created () {
this.windowResize()
},
mounted () {
this.MsgBus.$on('inceptMessage', (msg) => {
console.log(msg)
})
const that = this
window.onresize = () => {
return (() => {
that.windowResize()
})()
}
},
methods: {
windowResize: function () {
let WindowW = window.innerWidth
let WindowH = window.innerHeight
this.videInfo.transformScale1 = WindowW / this.initSize.width
this.videInfo.transformScale2 = WindowH / this.initSize.height
this.videInfo.offsetX = (WindowW - this.initSize.width) * 0.5
this.videInfo.offsetY = (WindowH - this.initSize.height) * 0.5
}
}
}
</script>
<style>
<style scoped>
@import "../../assets/css/vote.css";
</style>
src/router/index.js
View file @ f3b879d5
......@@ -5,7 +5,7 @@ import Home from '@/components/Home'
import Mouse from '@/components/playGame/Mouse'
import Money from '@/components/playGame/Money'
import LuckDraw from '@/components/playGame/LuckDraw'
import Vote from '@/components/playGame/Vote'
import PerformRanking2 from '@/components/PerformRanking2'
import Answer from '@/components/playGame/Answer'
import SignIn from '@/components/SignIn'
import PerformRanking from '@/components/PerformRanking'
......@@ -53,9 +53,9 @@ export default new Router({
keepAlive: false
}
}, {
path: '/Vote',
name: 'Vote',
component: Vote,
path: '/PerformRanking2',
name: 'PerformRanking2',
component: PerformRanking2,
meta: {
title: '投票',
keepAlive: false
......@@ -84,14 +84,15 @@ export default new Router({
title: '签到',
keepAlive: false
}
}, {
path: '/Center/:id',
name: 'Center',
component: resolve => require(['@/components/Center'], resolve),
meta: {
title: '中心',
keepAlive: true
}
}
// {
// path: '/PerformRanking/:id',
// name: 'PerformRanking',
// component: PerformRanking,
// meta: {
// title: '节目投票',
// keepAlive: true
// }
// }
]
})
static/image/jiemu/logo.png
View replaced file @ d2fb3282 View file @ f3b879d5
static/image/jiemu/logo.png

1.88 KB | W: | H:

static/image/jiemu/logo.png

1.73 KB | W: | H:

static/image/jiemu/logo.png
static/image/jiemu/logo.png
static/image/jiemu/logo.png
static/image/jiemu/logo.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment