Skip to content

W
walk_daka_h5
Commit e92c5631 by 穆启卓
Options

广播的样式

parent 86ef6c33
Showing with 186 additions and 185 deletions
src/components/NoticeBonus.vue
<template> <template>
<div> <div>
<div class="notice_bonus" v-if="isShowNotice"> <div class="notice_bonus" v-if="isShowNotice">
<img class="icon_container" src="../images/components/NoticeBonus/sy_guangbo.png" alt=""> <img class="icon_container" src="../images/components/NoticeBonus/sy_guangbo.png" alt="">
<div ref="container" class="msg_container"> <div ref="container" class="msg_container">
<!--<div class="notice_msg" v-for='item in notice_list'>--> <!--<div class="notice_msg" v-for='item in notice_list'>-->
<!--{{item}}--> <!--{{item}}-->
<!--</div>--> <!--</div>-->
<div ref="msg1" :class="['notice_msg', startAnimate?'msg1':'']">{{msg1}}</div> <div ref="msg1" :class="['notice_msg', startAnimate?'msg1':'']">{{msg1}}</div>
<div :class="['notice_msg', startAnimate?'msg2':'']">{{msg2}}</div> <div :class="['notice_msg', startAnimate?'msg2':'']">{{msg2}}</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<style> <script>
.notice_bonus { import { gameInfo } from "@/components/axios/api";
width: 3.6rem;
height: .44rem;
border-radius: .22rem;
background: rgba(255, 255, 255, .2);
display: flex;
align-items: center;
padding: 0 .14rem;
box-sizing: border-box;
}
.icon_container { export default {
width: .22rem; name: "NoticeBonus",
height: .2rem; data() {
flex-shrink: 0; return {
margin-right: .1rem; isShowNotice: false,
notice_list: [],
gameInfo: {
fly_top: [],
fly_bot: []
},
canScroll: true,
curIndex: 0,
startAnimate: false,
msg1: "",
msg2: ""
};
},
// props: ["notice_list"],
// computed: {
// notice() {
// return this.notice_list;
// }
// },
methods: {
stopScroll(e) {
console.log(e);
e.preventDefault();
},
getGameInfo(nonRefresh) {
gameInfo().then(result => {
console.log("result", result);
if (
result.code == 0 &&
(result.data.fly_bot.length || result.data.fly_top.length)
) {
let fly_bot = result.data.fly_bot;
let fly_top = result.data.fly_top || [];
let len = Math.max(fly_bot.length, fly_top.length);
let list = [];
for (let i = 0; i < len; i++) {
fly_bot[i] && list.push(fly_bot[i]);
fly_top[i] && list.push(fly_top[i]);
}
this.notice_list = list;
this.canScroll = true;
this.msg1 = this.notice_list[0];
this.msg2 = this.notice_list[1];
console.log("this.notice_list", this.notice_list);
this.isShowNotice = true;
}
});
},
msgAnimate() {
setTimeout(() => {
this.startAnimate = true;
}, 100);
let timer = sessionStorage.getItem("timer");
if (timer) {
clearInterval(Number(timer));
}
let newTimer = setInterval(() => {
if (Math.abs(this.notice_list.length - this.curIndex) <= 2) {
this.curIndex = 0;
if (window.location.hash == "#/Daka") {
this.getGameInfo();
}
} else {
this.curIndex += 2;
}
this.msg1 = this.notice_list[this.curIndex];
this.msg2 = this.notice_list[this.curIndex + 1];
}, 10000);
sessionStorage.setItem("timer", newTimer + "");
} }
},
created() {
this.getGameInfo();
},
mounted() {
this.msgAnimate();
}
};
</script>
<style>
.notice_bonus {
width: 6.4rem;
height: 0.48rem;
border-radius: 0.22rem;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
padding: 0 0.14rem;
box-sizing: border-box;
}
.msg_container { .icon_container {
flex: 1; width: 0.22rem;
height: .44rem; height: 0.2rem;
transform-style: preserve-3d; flex-shrink: 0;
overflow: hidden; margin-right: 0.1rem;
} }
.notice_msg { .msg_container {
font-size: .24rem; flex: 1;
color: #fff; height: 0.48rem;
line-height: .44rem; transform-style: preserve-3d;
text-align: center; overflow: hidden;
white-space: nowrap; }
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.msg1 { .notice_msg {
transform: translate3d(0, 0.44rem, 0); font-size: 0.24rem;
animation: rowUp 10s infinite; color: #fff;
/* transform: translateZ(35rpx); */ line-height: 0.48rem;
} text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
.msg2 { .msg1 {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0.48rem, 0);
animation: rowUp2 10s infinite; animation: rowUp 10s infinite;
/* transform: rotateX(90deg) translateZ(35rpx); */ /* transform: translateZ(35rpx); */
} }
/* .rotate-animation { .msg2 {
transform: translate3d(0, 0, 0);
animation: rowUp2 10s infinite;
/* transform: rotateX(90deg) translateZ(35rpx); */
}
/* .rotate-animation {
animation: rotate .3s linear 0s 1 normal forwards; animation: rotate .3s linear 0s 1 normal forwards;
} }
...@@ -76,135 +163,49 @@ ...@@ -76,135 +163,49 @@
} }
} */ } */
@keyframes rowUp { @keyframes rowUp {
0% { 0% {
-webkit-transform: translate3d(0, 0.44rem, 0); -webkit-transform: translate3d(0, 0.48rem, 0);
transform: translate3d(0, 0.44rem, 0); transform: translate3d(0, 0.48rem, 0);
} }
10% { 10% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
40% { 40% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
50% { 50% {
-webkit-transform: translate3d(0, -0.44rem, 0); -webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.44rem, 0); transform: translate3d(0, -0.48rem, 0);
} }
100% { 100% {
-webkit-transform: translate3d(0, -0.44rem, 0); -webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.44rem, 0); transform: translate3d(0, -0.48rem, 0);
} }
} }
@keyframes rowUp2 { @keyframes rowUp2 {
0% { 0% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
50% { 50% {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
60% { 60% {
-webkit-transform: translate3d(0, -0.44rem, 0); -webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.44rem, 0); transform: translate3d(0, -0.48rem, 0);
} }
90% { 90% {
-webkit-transform: translate3d(0, -0.32rem, 0); -webkit-transform: translate3d(0, -0.32rem, 0);
transform: translate3d(0, -0.44rem, 0); transform: translate3d(0, -0.48rem, 0);
} }
100% { 100% {
-webkit-transform: translate3d(0, -0.96rem, 0); -webkit-transform: translate3d(0, -0.96rem, 0);
transform: translate3d(0, -0.96rem, 0); transform: translate3d(0, -0.96rem, 0);
} }
} }
</style> </style>
<script>
import {gameInfo} from "@/components/axios/api"
export default {
name: "NoticeBonus",
data() {
return {
isShowNotice: false,
notice_list: [],
gameInfo: {
"fly_top": [],
"fly_bot": []
},
canScroll: true,
curIndex: 0,
startAnimate: false,
msg1: "",
msg2: "",
}
},
// props: ["notice_list"],
// computed: {
// notice() {
// return this.notice_list;
// }
// },
methods: {
stopScroll(e) {
console.log(e)
e.preventDefault()
},
getGameInfo(nonRefresh) {
gameInfo().then(result => {
console.log("result", result)
if (result.code == 0 && (result.data.fly_bot.length || result.data.fly_top.length)) {
let fly_bot = result.data.fly_bot
let fly_top = result.data.fly_top || []
let len = Math.max(fly_bot.length, fly_top.length)
let list = []
for (let i = 0; i < len; i++) {
fly_bot[i] && (list.push(fly_bot[i]))
fly_top[i] && (list.push(fly_top[i]))
}
this.notice_list = list
this.canScroll = true
this.msg1 = this.notice_list[0]
this.msg2 = this.notice_list[1]
console.log("this.notice_list", this.notice_list)
this.isShowNotice = true
}
})
},
msgAnimate() {
setTimeout(() => {
this.startAnimate = true
}, 100)
let timer = sessionStorage.getItem("timer")
if (timer) {
clearInterval(Number(timer))
}
let newTimer = setInterval(() => {
if (Math.abs(this.notice_list.length - this.curIndex) <= 2) {
this.curIndex = 0
if (window.location.hash == "#/Daka") {
this.getGameInfo()
}
} else {
this.curIndex += 2
}
this.msg1 = this.notice_list[this.curIndex]
this.msg2 = this.notice_list[this.curIndex + 1]
}, 10000)
sessionStorage.setItem("timer", newTimer + "")
}
},
created() {
this.getGameInfo()
},
mounted() {
this.msgAnimate()
}
}
</script>
src/views/SignUp.vue
...@@ -179,7 +179,7 @@ export default { ...@@ -179,7 +179,7 @@ export default {
} }
.notice-broadcast { .notice-broadcast {
flex-shrink: 0; flex-shrink: 0;
margin: 4.3rem 0 0.18rem; margin: 4.5rem 0 0.18rem;
} }
.challenge-card { .challenge-card {
flex-shrink: 0; flex-shrink: 0;
......
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