Skip to content

W
walk_daka_h5
Commit e92c5631 by 穆启卓
Options

广播的样式

parent 86ef6c33
Showing with 127 additions and 126 deletions
src/components/NoticeBonus.vue
......@@ -13,57 +13,144 @@
</div>
</template>
<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>
<style>
.notice_bonus {
width: 3.6rem;
height: .44rem;
border-radius: .22rem;
background: rgba(255, 255, 255, .2);
.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 .14rem;
padding: 0 0.14rem;
box-sizing: border-box;
}
}
.icon_container {
width: .22rem;
height: .2rem;
.icon_container {
width: 0.22rem;
height: 0.2rem;
flex-shrink: 0;
margin-right: .1rem;
}
margin-right: 0.1rem;
}
.msg_container {
.msg_container {
flex: 1;
height: .44rem;
height: 0.48rem;
transform-style: preserve-3d;
overflow: hidden;
}
}
.notice_msg {
font-size: .24rem;
.notice_msg {
font-size: 0.24rem;
color: #fff;
line-height: .44rem;
line-height: 0.48rem;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
}
}
.msg1 {
transform: translate3d(0, 0.44rem, 0);
.msg1 {
transform: translate3d(0, 0.48rem, 0);
animation: rowUp 10s infinite;
/* transform: translateZ(35rpx); */
}
}
.msg2 {
.msg2 {
transform: translate3d(0, 0, 0);
animation: rowUp2 10s infinite;
/* transform: rotateX(90deg) translateZ(35rpx); */
}
}
/* .rotate-animation {
/* .rotate-animation {
animation: rotate .3s linear 0s 1 normal forwards;
}
......@@ -76,10 +163,10 @@
}
} */
@keyframes rowUp {
@keyframes rowUp {
0% {
-webkit-transform: translate3d(0, 0.44rem, 0);
transform: translate3d(0, 0.44rem, 0);
-webkit-transform: translate3d(0, 0.48rem, 0);
transform: translate3d(0, 0.48rem, 0);
}
10% {
-webkit-transform: translate3d(0, 0, 0);
......@@ -90,16 +177,16 @@
transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
-webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.48rem, 0);
}
100% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
}
-webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.48rem, 0);
}
}
@keyframes rowUp2 {
@keyframes rowUp2 {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
......@@ -109,102 +196,16 @@
transform: translate3d(0, 0, 0);
}
60% {
-webkit-transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.44rem, 0);
-webkit-transform: translate3d(0, -0.48rem, 0);
transform: translate3d(0, -0.48rem, 0);
}
90% {
-webkit-transform: translate3d(0, -0.32rem, 0);
transform: translate3d(0, -0.44rem, 0);
transform: translate3d(0, -0.48rem, 0);
}
100% {
-webkit-transform: translate3d(0, -0.96rem, 0);
transform: translate3d(0, -0.96rem, 0);
}
}
}
</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 {
}
.notice-broadcast {
flex-shrink: 0;
margin: 4.3rem 0 0.18rem;
margin: 4.5rem 0 0.18rem;
}
.challenge-card {
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