1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最新战报</title> 6 7 <style> 8 div, ul, li, span, img { 9 margin: 0; 10 padding: 0; 11 display: flex; 12 box-sizing: border-box; 13 } 14 .marquee { 15 100%; 16 height: 50px; 17 align-items: center; 18 color: #3A3A3A; 19 background-color: #b3effe; 20 display: flex; 21 box-sizing: border-box; 22 } 23 24 .marquee_title { 25 padding: 0 20px; 26 height: 30px; 27 font-size: 14px; 28 border-right: 1px solid #d8d8d8; 29 align-items: center; 30 } 31 32 .marquee_box { 33 display: block; 34 position: relative; 35 60%; 36 height: 30px; 37 overflow: hidden; 38 } 39 40 .marquee_list { 41 display: block; 42 position: absolute; 43 top: 0; 44 left: 0; 45 } 46 .marquee_top { 47 transition: all 0.5s; 48 margin-top: -30px 49 } 50 51 .marquee_list li { 52 height: 30px; 53 line-height: 30px; 54 font-size: 14px; 55 padding-left: 20px; 56 } 57 58 .marquee_list li span { 59 padding: 0 2px; 60 } 61 62 .red { 63 color: #FF0101; 64 } 65 66 </style> 67 68 </head> 69 <body> 70 71 <div class="vueBox"> 72 <div class="marquee"> 73 <div class="marquee_title"> 74 <span>最新战报</span> 75 </div> 76 <div class="marquee_box"> 77 <ul class="marquee_list" :class="{marquee_top:animate}"> 78 <li v-for="(item, index) in marqueeList"> 79 <span>{{item.name}}</span> 80 <span>在</span> 81 <span class="red"> {{item.city}}</span> 82 <span>杀敌</span> 83 <span class="red"> {{item.amount}}</span> 84 <span>万</span> 85 </li> 86 </ul> 87 </div> 88 </div> 89 </div> 90 91 <script type="text/javascript" src="js/vue.min.js"></script> 92 <script type="text/javascript"> 93 const vm = new Vue({ 94 el: ".vueBox", 95 data: { 96 animate: false, 97 marqueeList: [ 98 { 99 name: '1军', 100 city: '北京', 101 amount: '10' 102 }, 103 { 104 name: '2军', 105 city: '上海', 106 amount: '20' 107 }, 108 { 109 name: '3军', 110 city: '广州', 111 amount: '30' 112 }, 113 { 114 name: '4军', 115 city: '重庆', 116 amount: '40' 117 } 118 ] 119 }, 120 created: function () { 121 setInterval(this.showMarquee, 2000) 122 }, 123 methods: { 124 showMarquee: function () { 125 this.animate = true; 126 setTimeout(()=>{ 127 this.marqueeList.push(this.marqueeList[0]); 128 this.marqueeList.shift(); 129 this.animate = false; 130 },500)}, 131 } 132 }); 133 </script> 134 135 136 </body> 137 </html>