新增11.18看板

src/components/viitto/ActivityBoard.vue

+<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: 32px;
+}
+.personDiv {
+  position: fixed;
+  padding-left: 30px;
+  bottom: 0px;
+  height: 300px;
+  padding-bottom: 10px;
+}
+.personDiv li {
+  display: none;
+  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;
+}
+
+@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-end;
+  flex-wrap: wrap;
+  flex-direction: column;
+  height: 100%;
+}
+#box{  overflow:hidden;}
+</style>
+<template>
+  <div class="ActivityBoard" v-loading="loading">
+    <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>
+    <!-- v-show="liState" -->
+    <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>
+        <!-- <li>
+          <img src="../../assets/img/activity/logo.png" alt />成都印象李思思
+        </li>
+        <li>
+          <img src="../../assets/img/activity/logo.png" alt />成都印象李思思
+        </li>
+        <li>
+          <img src="../../assets/img/activity/logo.png" alt />成都印象李思思
+        </li>
+        <li>
+          <img src="../../assets/img/activity/logo.png" alt />成都印象李思思
+        </li>
+        <li>
+          <img src="../../assets/img/activity/logo.png" alt />成都印象李思思
+        </li> -->
+      </ul>
+      <ul id="list2"></ul>
+  </div>  
+  </div>
+</template>
+<script>
+import moment from "moment";
+
+export default {
+  components: {},
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('../../assets/img/activity/logo.png') + '"',						
+
+      loading: false,
+      selectTime: -1,
+      dataInfo: {},
+      value: 1236,
+      html: "",
+      today: moment().format("MM.DD"),
+      Select: -1,
+      
+
+      scrollMove:'',
+      box:'',
+      l1:'',
+      l2:'',
+      liState:true,
+
+      tempPopList:[]
+    };
+  },
+  mounted() {
+    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.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

+<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

@@ -7,6 +7,8 @@ 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'
+import ActivityBoard22 from './components/viitto/ActivityBoard22'
 
 Vue.use(Router)
 
@@ -29,6 +31,8 @@ export default new Router({
         'content':'IE=Edge,chrome=1'
       }
     },
+    
+    
     {
       path: '/viittoData',
       name: 'viittoData',
@@ -53,6 +57,16 @@ export default new Router({
       path: '/PerCompetition',
       name: 'PerCompetition',
       component: PerCompetition,
-    }
+    },
+    {
+      path: '/ActivityBoard',
+      name: 'ActivityBoard',
+      component: ActivityBoard,
+    },
+    {
+      path: '/ActivityBoard22',
+      name: 'ActivityBoard',
+      component: ActivityBoard22,
+    },
   ]
 })