Skip to content

M
Muse
Commit 2e056357 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/luochao/muse

parents d1e372ed 7d54bc61
Hide whitespace changes
Inline Side-by-side
Showing with 484 additions and 1 deletion
src/assets/img/activity/bg.png 0 → 100644
View file @ 2e056357
This diff is collapsed.
src/components/viitto/ActivityBoard.vue 0 → 100644
View file @ 2e056357
<style scpoed>
.ActivityBoard {
width: 100%;
height: 100%;
background: url("../../assets/img/activity/bg.png") no-repeat;
padding-top: 8%;
}
.middle {
width: 75%;
margin: 0 auto;
}
.Text {
font-family: "percomp";
font-weight: 400;
color: rgba(255, 255, 255, 1);
font-family: "percomp";
display: flex;
align-items: center;
font-weight: 800;
}
.Text img {
width: 80px;
}
.Text span {
font-size: 50px;
text-shadow: 2px -1px 5px #9f3343;
}
.numUl > span {
display: inline-block;
width: 57px;
height: 50px;
margin-bottom: 20px;
}
.numUl > span image {
width: 100%;
height: 100%;
}
.numUl li span {
position: relative;
z-index: 100;
width: 100%;
height: 100%;
}
/* 数字开始 */
.wrap-container {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.wrap {
position: relative;
overflow: hidden;
box-sizing: border-box;
font-size: 18px;
display: inline-block;
width: 286px;
height: 430px;
background: url("../../assets/img/activity/numbg.png") no-repeat;
font-size: 300px;
font-family: "pingfangR";
text-align: center;
color: #fff;
text-shadow: 10px 14px 4px #c029b6;
}
.list {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
height: 100%;
box-sizing: border-box;
}
.list li {
list-style: none;
color: #fff;
text-align: center;
float: left;
box-sizing: border-box;
width: 100%;
height: 100%;
}
@keyframes move9 {
0% {
top: 0;
}
100% {
top: -900%;
}
}
@keyframes move8 {
0% {
top: 0;
}
100% {
top: -800%;
}
}
@keyframes move7 {
0% {
top: 0;
}
100% {
top: -700%;
}
}
@keyframes move6 {
0% {
top: 0;
}
100% {
top: -600%;
}
}
@keyframes move5 {
0% {
top: 0;
}
100% {
top: -500%;
}
}
@keyframes move4 {
0% {
top: 0;
}
100% {
top: -400%;
}
}
@keyframes move3 {
0% {
top: 0;
}
100% {
top: -300%;
}
}
@keyframes move2 {
0% {
top: 0;
}
100% {
top: -200%;
}
}
@keyframes move1 {
0% {
top: 0;
}
100% {
top: -100%;
}
}
.scroll9 {
animation: 2s move9 /*infinite*/ linear;
top: -900%;
}
.scroll8 {
animation: 2s move8 /*infinite*/ linear;
top: -800%;
}
.scroll7 {
animation: 2s move7 /*infinite*/ linear;
top: -700%;
}
.scroll6 {
animation: 2s move6 /*infinite*/ linear;
top: -600%;
}
.scroll5 {
animation: 2s move5 /*infinite*/ linear;
top: -500%;
}
.scroll4 {
animation: 2s move4 /*infinite*/ linear;
top: -400%;
}
.scroll3 {
animation: 2s move3 /*infinite*/ linear;
top: -300%;
}
.scroll2 {
animation: 2s move2 /*infinite*/ linear;
top: -200%;
}
.scroll1 {
animation: 2s move1 /*infinite*/ linear;
top: -100%;
}
.numDiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.personDiv li img {
width: 24px;
height:24px;
border-radius: 100%;
padding-right: 5px;
}
.personDiv {
position: fixed;
padding-left: 30px;
bottom: 0px;
height: 300px;
padding-bottom: 10px;
}
.personDiv li {
display: none;
height: 30px;
background: rgba(255, 255, 255, 0.26);
border-radius: 20px;
margin-bottom: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 28px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
color: #fff;
font-family: "pingfang";
animation: fadeio 6s 1;
animation-fill-mode:forwards;
opacity: 0;
padding-left: 5px;
}
@keyframes fadeio {
/*设置内容由显示变为隐藏*/
0% {
opacity: 0;
height: 0px;
display: flex;
}
10% {
height: 30px;
}
16% {
opacity: 1;
}
83% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
/* 数字结束 */
/* 无缝 */
#mocc {
height: 100%;
width: 100%;
margin-left: 25px;
margin-top: 10px;
overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
.personDiv ul li a {
width: 180px;
float: left;
overflow: hidden;
text-indent: 15px;
height: 24px;
}
.personDiv ul li span {
float: right;
color: #999;
}
#list1{
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: column;
height: 100%;
}
#box{ overflow:hidden;}
</style>
<template>
<div class="ActivityBoard" >
<div :style="{zoom: zoom}">
<div class="middle">
<div class="Text">
<img src="../../assets/img/activity/logo.png" alt />
<span>
<span>{{today}}</span>
<span>活动</span>
<span v-if="dataInfo.activeState==0">未开始</span>
<span v-if="dataInfo.activeState==1">进行中</span>
<span v-if="dataInfo.activeState==2">已结束</span>
</span>
</div>
<div class="numDiv">
<div style="width:90%" ref="number" class="wrap-container numUl"></div>
<div style="width:10%;text-align:right" class="rightDiv">
<img src="../../assets/img/activity/zh.png" alt />
</div>
</div>
</div>
<div id="box" class="personDiv">
<ul id="list1">
<li class="li" v-for="(item,index) in tempPopList" :key="index">
<img :onerror="defaultImg" :src="item.customerPhoto" alt />{{item.customerName}} 购买了200元线路优惠价
</li>
</ul>
<ul id="list2"></ul>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
export default {
components: {},
data() {
return {
defaultImg: 'this.src="' + require('../../assets/img/activity/tx_bg.png') + '"',
loading: false,
selectTime: -1,
dataInfo: {},
value: 1236,
html: "",
today: moment().format("MM.DD"),
Select: -1,
scrollMove:'',
box:'',
l1:'',
l2:'',
liState:true,
tempPopList:[],
zoom:1,
};
},
mounted() {
let Height = window.innerHeight
this.zoom = Math.round((Height/1080) * 100) / 100
this.init();
this.GetData();
this.scrollMove = setInterval(this.MoveInit,1000);
setInterval(this.GetData,1000*60);
},
methods: {
MoveInit(){
if(this.dataInfo.resultList && this.dataInfo.resultList.length>0){
this.tempPopList.push(this.dataInfo.resultList[0]);
this.dataInfo.resultList.splice(0,1);
if(this.tempPopList.length>7){
document.querySelectorAll("#list1 .li")[this.tempPopList.length-7].style.display="none";
}
}
},
init() {
this.html = "";
this.value
.toString()
.split("")
.forEach(v => {
this.html += '<div class="wrap"><ul class="list scroll' + v + '">';
for (let i = 0; i <= 9; i++) {
this.html += "<li>" + i + "</li>";
}
this.html += "</ul></div>";
});
this.$refs.number.innerHTML = this.html;
},
PrefixInteger(num, length) {
return (Array(length).join("0") + num).slice(-length);
},
GetData() {
let msg = {
selectTime: this.Select
};
this.loading = true;
this.apipost(
"sellorder_get_GetTodayActiveInfo",
{ msg },
res => {
this.loading = false;
this.Select=moment().format("YYYY-MM-DD HH:mm:ss");
if (res.data.resultCode == 1) {
this.dataInfo=res.data.data;
this.dataInfo.CouponReceiveCount = res.data.data.CouponReceiveCount;
let val = this.dataInfo.CouponReceiveCount;
if(!this.dataInfo.resultList){
this.dataInfo.resultList=[]
}
this.dataInfo.resultList=this.dataInfo.resultList.concat(res.data.data.resultList)
this.value = this.PrefixInteger(val, 4);
this.init();
this.liState=true;
this.tempPopList=[];
} else {
}
},
err => {}
);
}
}
};
</script>
\ No newline at end of file
src/components/viitto/ActivityBoard22.vue 0 → 100644
View file @ 2e056357
<template>
<div ref="number" class="wrap-container"></div>
</template>
<script>
export default {
name: 'num',
data () {
return {
value: 1234,
html: ''
}
},
methods: {
init () {
this.value.toString().split('').forEach(v => {
this.html += '<div class="wrap"><ul class="list scroll' + v + '">'
for (let i = 0; i <= 4; i++) {
this.html += '<li>' + i + '</li>'
}
this.html += '</ul></div>'
})
this.$refs.number.innerHTML = this.html
}
},
mounted () {
this.init()
}
}
</script>
<style scoped>
.wrap-container { display:flex;justify-content: flex-start;background: red}
.wrap{ width:12px;height:18px; position:relative; overflow:hidden;box-sizing: border-box;font-size: 18px;}
.list { position:absolute;left:0;top:0;margin:0;padding:0; height:100%;box-sizing: border-box;}
.list li{ list-style:none;width:12px;height:18px;line-height:18px;color:#fff; text-align:center; float:left;box-sizing: border-box;}
@keyframes move9{0%{top:0;}100%{top:-900%;}}
@keyframes move8{0%{top:0;}100%{top:-800%;}}
@keyframes move7{0%{top:0;}100%{top:-700%;}}
@keyframes move6{0%{top:0;}100%{top:-600%;}}
@keyframes move5{0%{top:0;}100%{top:-500%;}}
@keyframes move4{0%{top:0;}100%{top:-400%;}}
@keyframes move3{0%{top:0;}100%{top:-300%;}}
@keyframes move2{0%{top:0;}100%{top:-200%;}}
@keyframes move1{0%{top:0;}100%{top:-100%;}}
.scroll9 {animation:2s move9 /*infinite*/ linear;top:-900%; }
.scroll8 {animation:2s move8 /*infinite*/ linear;top:-800%; }
.scroll7 {animation:2s move7 /*infinite*/ linear;top:-700%; }
.scroll6 {animation:2s move6 /*infinite*/ linear;top:-600%; }
.scroll5 {animation:2s move5 /*infinite*/ linear;top:-500%; }
.scroll4 {animation:2s move4 /*infinite*/ linear;top:-400%; }
.scroll3 {animation:2s move3 /*infinite*/ linear;top:-300%; }
.scroll2 {animation:2s move2 /*infinite*/ linear;top:-200%; }
.scroll1 {animation:2s move1 /*infinite*/ linear;top:-100%; }
</style>
\ No newline at end of file
src/router.js
View file @ 2e056357
......@@ -7,6 +7,7 @@ import viittoData2 from './components/viitto/viittoData2'
import dataLook from './components/viitto/dataLook'
import saleDataLook from './components/viitto/saleDataLook'
import PerCompetition from './components/viitto/PerCompetition'
import ActivityBoard from './components/viitto/ActivityBoard'
Vue.use(Router)
......@@ -29,6 +30,8 @@ export default new Router({
'content':'IE=Edge,chrome=1'
}
},
{
path: '/viittoData',
name: 'viittoData',
......@@ -53,6 +56,11 @@ export default new Router({
path: '/PerCompetition',
name: 'PerCompetition',
component: PerCompetition,
}
},
{
path: '/ActivityBoard',
name: 'ActivityBoard',
component: ActivityBoard,
},
]
})
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