H5
/
annual-lottery-wechat
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 动态
浏览代码

xcx

许成详 6 年前
父节点
2ad296a909
当前提交
fa45907210
共有 20 个文件被更改，包括 3130 次插入 和 1948 次删除
合并视图 显示文件统计
  1. 1931
    1931
      package-lock.json
  2. 1
    0
      public/index.html
  3. 二进制
      src/assets/images/icon1.jpg
  4. 二进制
      src/assets/images/icon10.png
  5. 二进制
      src/assets/images/icon11.png
  6. 二进制
      src/assets/images/icon12.png
  7. 二进制
      src/assets/images/icon13.png
  8. 二进制
      src/assets/images/icon14.png
  9. 二进制
      src/assets/images/icon15.png
  10. 二进制
      src/assets/images/icon2.png
  11. 二进制
      src/assets/images/icon4.png
  12. 二进制
      src/assets/images/icon5.png
  13. 二进制
      src/assets/images/icon6.png
  14. 二进制
      src/assets/images/icon7.png
  15. 二进制
      src/assets/images/icon8.png
  16. 二进制
      src/assets/images/icon9.png
  17. 73
    0
      src/assets/reset.css
  18. 309
    0
      src/pages/draw.1.vue
  19. 815
    16
      src/pages/draw.vue
  20. 1
    1
      vue.config.js

+ 1931
- 1931
package-lock.json
文件差异内容过多而无法显示
查看文件


+ 1
- 0
public/index.html 查看文件

5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 7 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
8 
     <title>annual-lottery</title>
 9 
     <title>annual-lottery</title>
9 
   </head>
 10 
   </head>
10 
   <body>
 11 
   <body>

二进制
src/assets/images/icon1.jpg 查看文件


二进制
src/assets/images/icon10.png 查看文件


二进制
src/assets/images/icon11.png 查看文件


二进制
src/assets/images/icon12.png 查看文件


二进制
src/assets/images/icon13.png 查看文件


二进制
src/assets/images/icon14.png 查看文件


二进制
src/assets/images/icon15.png 查看文件


二进制
src/assets/images/icon2.png 查看文件


二进制
src/assets/images/icon4.png 查看文件


二进制
src/assets/images/icon5.png 查看文件


二进制
src/assets/images/icon6.png 查看文件


二进制
src/assets/images/icon7.png 查看文件


二进制
src/assets/images/icon8.png 查看文件


二进制
src/assets/images/icon9.png 查看文件


+ 73
- 0
src/assets/reset.css 查看文件

1 
+@charset"utf-8";
2 
+html,body{width:100%;height:100%;-webkit-text-size-adjust:100%;position:relative;overflow-x:hidden;font-size:100px;}
3 
+
4 
+@media screen and(max-width:320px){html,body{font-size:85px;}}
5 
+@media screen and(min-width:375px){html,body{font-size:100px;}}
6 
+@media screen and(min-width:414px){html,body{font-size:110px;}}
7 
+
8 
+*{margin:0;padding:0;font-family:"微软雅黑";-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-font-smoothing:antialiased;}
9 
+body *{font-size:.15rem;}
10 
+a{text-decoration:none;}
11 
+a:hover{cursor:pointer;}
12 
+em{font-style:normal;}
13 
+li{list-style:none;}
14 
+img{border:0;vertical-align:middle;}
15 
+table{border-collapse:collapse;border-spacing:0;}
16 
+p{word-wrap:break-word;}
17 
+b{font-weight:normal;}
18 
+input,textarea{border:0;-webkit-appearance:none;}
19 
+input[type=input]{-webkit-appearance:none;}
20 
+input[type=checkbox]{-webkit-appearance:checkbox;}
21 
+input:focus,textarea:focus,select:focus{outline:none;}
22 
+textarea{resize:none;}
23 
+select{direction:rtl;}
24 
+select option{direction:ltr;}
25 
+::-webkit-scrollbar{display:none;}
26 
+
27 
+.text-overflow-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
28 
+.centerLabel{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
29 
+.flex-h{display:flex;display:-webkit-flex;}
30 
+.flex-v{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;}
31 
+.flex-item{flex:1;-webkit-flex:1;position:relative;overflow:hidden;}
32 
+*[class*="text-overflowEllipsis-line"]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;}
33 
+.text-overflowEllipsis-line2{-webkit-line-clamp:2;}
34 
+.text-overflowEllipsis-line3{-webkit-line-clamp:3;}
35 
+.text-overflowEllipsis-line4{-webkit-line-clamp:4;}
36 
+*[class*="overflow-scroll-y"]{overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
37 
+*[class*="overflow-scroll-x"]{overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:touch;}
38 
+.overflow-scroll-y-3d,.overflow-scroll-x-3d{transform:translateZ(0);-webkit-transform:translateZ(0);}
39 
+.overflow-scroll-x::-webkit-scrollbar,.overflow-scroll-x-3d::-webkit-scrollbar{width:0;height:0;color:transparent;display:none;}
40 
+*>img.cover{width:100%;height:100%;object-fit:cover;}
41 
+*>img.contain{width:100%;height:100%;object-fit:contain;}
42 
+
43 
+.mainPage{width:100%;height:100%;position:relative;background:#fff;}
44 
+
45 
+.van-toast div{color:white;}
46 
+.van-toast i{color:white;}
47 
+.van-dialog__message{text-align:center;}
48 
+.van-dialog__message.van-dialog__message--has-title{text-align:center;}
49 
+.mescroll{
50 
+  -webkit-overflow-scrolling: touch;
51 
+  transform:translateZ(0);
52 
+  -webkit-transform:translateZ(0);
53 
+}
54 
+.mescroll-upwarp{
55 
+  min-height: 0 !important;
56 
+  padding: 0 !important;
57 
+}
58 
+.mescroll-upwarp>*{
59 
+  margin: .1rem 0;
60 
+}
61 
+.mescroll-upwarp.mescroll-hardware{
62 
+  display: none !important;
63 
+}
64 
+
65 
+.redBtn{
66 
+  background: #FF5454;
67 
+  color: #fff;
68 
+  text-align: center;
69 
+}
70 
+
71 
+.redBtn:active{
72 
+  background: #fe3333;
73 
+}

+ 309
- 0
src/pages/draw.1.vue 查看文件

1 
+<template>
2 
+  <div class="mainPage">
3 
+    <img
4 
+      src="../assets/images/icon1.jpg"
5 
+      class="centerLabel cover bg"
6 
+      :class="{'grey': bgGrey}"
7 
+      style="z-index: 1;"
8 
+      @load="imgLoad"
9 
+      alt
10 
+    >
11 
+    <img
12 
+      src="../assets/images/icon2.png"
13 
+      width="100%"
14 
+      class="bg"
15 
+      :class="{'grey': bgGrey}"
16 
+      style="z-index: 3;top:0;left:0"
17 
+      @load="imgLoad"
18 
+      alt
19 
+    >
20 
+    <div class="userList centerLabel">
21 
+      <ul class="flex-h">
22 
+        <li
23 
+          v-for="(item, index) in users"
24 
+          v-show="!item.delete"
25 
+          class="flex-item"
26 
+          :key="index"
27 
+          :class="{'active': item.active, 'activeLi': item.active, 'hide': !item.show}"
28 
+        >
29 
+          <span>{{item.UserName}}</span>
30 
+        </li>
31 
+      </ul>
32 
+    </div>
33 
+    <div class="drawUserList centerLabel">
34 
+      <ul class="flex-h">
35 
+        <li
36 
+          v-for="(item, index) in drawUsersArr"
37 
+          class="flex-item targetLi"
38 
+          :key="index"
39 
+          :class="{'active': item.active}"
40 
+        >
41 
+          <span>{{item.UserName}}</span>
42 
+        </li>
43 
+      </ul>
44 
+    </div>
45 
+    <div class="drawEndList">
46 
+      <a
47 
+        v-for="(item, index) in drawUsersArr"
48 
+        :key="index"
49 
+        :style="{width: item.width + 'px', left: item.startX + 'px', top: item.startY + 'px'}"
50 
+      >
51 
+        <span>{{item.UserName}}</span>
52 
+      </a>
53 
+    </div>
54 
+  </div>
55 
+</template>
56 
+
57 
+<script>
58 
+/* eslint-disable */
59 
+import '../assets/reset.css'
60 
+export default {
61 
+  name: 'draw',
62 
+  data () {
63 
+    return {
64 
+      bgGrey: false,
65 
+      time: 300,
66 
+      drawCount: 10,
67 
+      imgTotal: 2,
68 
+      curImgNum: 0,
69 
+      status: false,
70 
+      sureStatus: true,
71 
+      arrTimer: null,
72 
+      users: [],
73 
+      initUsers: [],
74 
+      drawUsersArr: [],
75 
+      randomArr: [],
76 
+      windowWidth: window.innerWidth,
77 
+      windowHeight: window.innerHeight,
78 
+      drawWidth: Math.floor(window.innerWidth * .7)
79 
+    }
80 
+  },
81 
+  created () {
82 
+    for (var n = 0; n < 500; n++) {
83 
+      this.initUsers.push({
84 
+        UserId: n + 1,
85 
+        UserName: '姓名' + n,
86 
+        active: false,
87 
+        show: true,
88 
+        delete: false
89 
+      })
90 
+    }
91 
+  },
92 
+  mounted () {
93 
+    this.$nextTick(() => {
94 
+    })
95 
+  },
96 
+  methods: {
97 
+    imgLoad () {
98 
+      this.curImgNum += 1 // 图片加载完 + 1
99 
+      if (this.curImgNum >= this.imgTotal) { // 图片加载完毕之后执行抽奖初始化逻辑
100 
+        this.initDraw()
101 
+      }
102 
+    },
103 
+    initDraw () { // 初始化抽奖
104 
+      // this.arrTimer = window.setInterval(() => { // 间隔时间进行抽奖随机变换效果
105 
+      //   this.users = [] // 每次变换之前置空当前显示列表
106 
+      //   this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount) // 从所有名单中随机获取若干个数据（获取数据个数，所有名单对象，当前显示名单列表对象，判重关键字，抽取中奖数量）
107 
+      // }, this.time)
108 
+      document.getElementsByTagName('html')[0].onkeydown = (e) => { // 页面添加键盘点击事件监听
109 
+        e = e || event
110 
+        if (e.ctrlKey && e.keyCode == 13) { // 启停抽奖组合键：Ctrl + Enter
111 
+          this.sureStatus = true
112 
+          if (!this.status) { // 重新抽奖
113 
+            this.bgGrey = true
114 
+            this.status = !this.status
115 
+            this.users = []
116 
+            this.drawUsersArr = [] // 置空中奖数据
117 
+            this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount)
118 
+            this.arrTimer = window.setInterval(() => {
119 
+              this.users = []
120 
+              this.calcRandomArr(90, this.initUsers, this.users, 'UserId', this.drawCount)
121 
+            }, this.time)
122 
+          } else { // 抽奖变换动画暂定
123 
+            this.status = !this.status
124 
+            clearInterval(this.arrTimer)
125 
+            this.arrTimer = null
126 
+            this.users.map((item) => { // 记录中奖数据，以便读取过渡动画结束位置坐标
127 
+              if (item.active) {
128 
+                this.drawUsersArr.push({ ...item, width: 0, startX: '', startY: '' })
129 
+              }
130 
+            })
131 
+            this.$nextTick(() => {
132 
+              this.drawUsersArr.map((item, index) => { // 记录中奖名单结束位置坐标
133 
+                item.endX = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().x
134 
+                item.endY = document.getElementsByClassName('targetLi')[index].getBoundingClientRect().y
135 
+              })
136 
+              for (var n = 0; n < this.drawCount; n++) { // 记录中奖名单开始位置坐标
137 
+                this.drawUsersArr[n].startX = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().x
138 
+                this.drawUsersArr[n].startY = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().y
139 
+                this.drawUsersArr[n].width = document.getElementsByClassName('activeLi')[n].getBoundingClientRect().width
140 
+              }
141 
+            })
142 
+          }
143 
+        } else if (e.ctrlKey && e.keyCode == 32) { // 确认抽奖结果组合键：Ctrl + Space
144 
+          if (!this.status) {
145 
+            if (this.sureStatus) { // 之前已执行过Ctrl + Enter的前提下，才能执行确认动作
146 
+              this.sureStatus = !this.sureStatus
147 
+              this.users.map((item) => { // 隐藏未抽中数据
148 
+                item.show = false
149 
+              })
150 
+              this.drawUsersArr.map((item) => {
151 
+                item.startX = item.endX
152 
+                item.startY = item.endY
153 
+              })
154 
+            }
155 
+          }
156 
+        }
157 
+      }
158 
+    },
159 
+    calcRandomArr (num, pArr, aArr, key, activeNum) {
160 
+      if (pArr.length > num) {
161 
+        var randomNum = Math.floor(Math.random() * pArr.length), bool = false
162 
+        aArr.map((item) => {
163 
+          if (item[key] === pArr[randomNum]) {
164 
+            bool = true
165 
+          }
166 
+        })
167 
+        if (!bool) aArr.push({ ...pArr[randomNum], active: false })
168 
+        if (aArr.length === num) {
169 
+          return this.returnSubArr(aArr, activeNum, 'active', 0)
170 
+        } else {
171 
+          this.calcRandomArr(num, pArr, aArr, key, activeNum)
172 
+        }
173 
+      } else {
174 
+        return { ...pArr[randomNum], active: true }
175 
+      }
176 
+    },
177 
+    returnSubArr (arr, subNum, key, count) {
178 
+      var randomNum = Math.floor(Math.random() * arr.length)
179 
+      if (!arr[randomNum][key]) {
180 
+        arr[randomNum][key] = true
181 
+        count += 1
182 
+      }
183 
+      if (count < subNum) {
184 
+        this.returnSubArr(arr, subNum, key, count)
185 
+      } else {
186 
+        return arr
187 
+      }
188 
+    }
189 
+  }
190 
+}
191 
+</script>
192 
+
193 
+<style>
194 
+.mainPage {
195 
+  overflow: hidden;
196 
+  background: #000;
197 
+}
198 
+.bg{
199 
+  -webkit-filter: brightness(100%);
200 
+  filter: brightness(100%);
201 
+  transition: filter .3s linear;
202 
+  -webkit-transition: filter .3s linear;
203 
+  display: block;
204 
+  position: absolute;
205 
+}
206 
+.bg.grey{
207 
+  -webkit-filter: brightness(20%);
208 
+  filter: brightness(20%);
209 
+}
210 
+.drawEndList {
211 
+  width: 100%;
212 
+  height: 100%;
213 
+  position: relative;
214 
+  overflow: hidden;
215 
+  z-index: 200;
216 
+}
217 
+.drawEndList > a {
218 
+  display: inline-block;
219 
+  box-sizing: border-box;
220 
+  border-radius: 60px;
221 
+  border: 2px solid #e7963b;
222 
+  position: absolute;
223 
+  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2);
224 
+  transition: none 0.5s ease-out 1s;
225 
+  -webkit-transition: none 0.5s ease-out 1s;
226 
+  transition-property: left, top;
227 
+  -webkit-transition-property: left, top;
228 
+}
229 
+.drawEndList > a > span {
230 
+  width: 100%;
231 
+  display: block;
232 
+  line-height: 60px;
233 
+  border-radius: 60px;
234 
+  color: #fff;
235 
+  text-align: center;
236 
+  font-size: 27px;
237 
+  white-space: nowrap;
238 
+  overflow: hidden;
239 
+  text-overflow: ellipsis;
240 
+  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2) inset;
241 
+}
242 
+.userList,
243 
+.drawUserList {
244 
+  width: 44%;
245 
+  min-width: 1500px;
246 
+  overflow: visible;
247 
+  z-index: 100;
248 
+}
249 
+.drawUserList {
250 
+  width: 22%;
251 
+  min-width: 750px;
252 
+  opacity: 0;
253 
+}
254 
+.userList > ul,
255 
+.drawUserList > ul {
256 
+  width: 100%;
257 
+  position: relative;
258 
+  overflow: visible;
259 
+  flex-wrap: wrap;
260 
+  -webkit-flex-wrap: wrap;
261 
+  transition: all 0.2s linear;
262 
+  -webkit-transition: all 0.2s linear;
263 
+  justify-content: center;
264 
+}
265 
+.userList > ul > li,
266 
+.drawUserList > ul > li {
267 
+  min-width: 10%;
268 
+  max-width: 10%;
269 
+  margin: 10px 0.5%;
270 
+  box-sizing: border-box;
271 
+  border: 2px solid #79321c;
272 
+  border-radius: 60px;
273 
+  overflow: hidden;
274 
+  opacity: 1;
275 
+  transition: all 0.2s linear;
276 
+  -webkit-transition: all 0.2s linear;
277 
+}
278 
+.drawUserList > ul > li {
279 
+  min-width: 20%;
280 
+  max-width: 20%;
281 
+  margin: 10px 1%;
282 
+}
283 
+.userList > ul > li.hide {
284 
+  opacity: 0;
285 
+}
286 
+.userList > ul > li > span,
287 
+.drawUserList > ul > li > span {
288 
+  width: 100%;
289 
+  display: block;
290 
+  line-height: 60px;
291 
+  border-radius: 60px;
292 
+  color: #777;
293 
+  text-align: center;
294 
+  font-size: 27px;
295 
+  white-space: nowrap;
296 
+  overflow: hidden;
297 
+  text-overflow: ellipsis;
298 
+}
299 
+.userList > ul > li.active {
300 
+  border-color: #e7963b;
301 
+  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2);
302 
+}
303 
+.userList > ul > li.active > span {
304 
+  border-color: #e7963b;
305 
+  box-shadow: 0 0 0.2rem 0.15rem rgba(231, 150, 59, 0.2) inset;
306 
+  color: #fff;
307 
+}
308 
+</style>
309 
+

+ 815
- 16
src/pages/draw.vue
文件差异内容过多而无法显示
查看文件


+ 1
- 1
vue.config.js 查看文件

4 
     port: 9000,
 4 
     port: 9000,
5 
     proxy: {
 5 
     proxy: {
6 
       '/api': {
 6 
       '/api': {
7 
-        target: 'http://localhost:8080',
7 
+        target: 'http://192.168.0.11:8080',
8 
         changeOrigin: true
 8 
         changeOrigin: true
9 
       },
 9 
       },
10 
     }
 10 
     }