Skip to content

L
Lotteryprocedure
Commit 2d1849c7 authored by xieyishang's avatar xieyishang
Browse files
Options

addxx

parent 9823bf78
Hide whitespace changes
Inline Side-by-side
Showing with 3290 additions and 51 deletions
cjcode/package-lock.json
View file @ 2d1849c7
......@@ -2314,6 +2314,14 @@
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true
},
"async-validator": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
"requires": {
"babel-runtime": "6.x"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
......@@ -2367,6 +2375,11 @@
"resolve": "^1.12.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-loader": {
"version": "8.2.2",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.2.tgz",
......@@ -2418,6 +2431,27 @@
"@babel/helper-define-polyfill-provider": "^0.2.2"
}
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
},
"dependencies": {
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
},
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
}
}
},
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -4053,8 +4087,7 @@
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
"dev": true
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
},
"default-gateway": {
"version": "5.0.5",
......@@ -4503,6 +4536,19 @@
"integrity": "sha512-zeM5AFwvTlSYvGpBaFZKVo7GQEWSk6hS3rQ7mdrr3qB7CiqVl84K6nIPznyKSu0b8ABiEeMEIqyBuzqMkxnjjg==",
"dev": true
},
"element-ui": {
"version": "2.15.3",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.3.tgz",
"integrity": "sha512-yGcK0AspuC827Nq7GUHct83cywAKIDo+kpp/rtov5ptmK1hZ8FMlt2SKbcozmSabmpdBNroMgqxqXl6IT1zy1A==",
"requires": {
"async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0",
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1"
}
},
"elliptic": {
"version": "6.5.4",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
......@@ -7537,6 +7583,11 @@
"integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
"dev": true
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
......@@ -9199,6 +9250,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"resolve": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
......@@ -10389,6 +10445,11 @@
"neo-async": "^2.6.0"
}
},
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......
cjcode/package.json
View file @ 2d1849c7
......@@ -9,6 +9,7 @@
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.15.3",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
......
cjcode/public/favicon.ico
View replaced file @ 9823bf78 View file @ 2d1849c7
cjcode/public/favicon.ico

4.19 KB | W: | H:

cjcode/public/favicon.ico

16.6 KB | W: | H:

cjcode/public/favicon.ico
cjcode/public/favicon.ico
cjcode/public/favicon.ico
cjcode/public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
cjcode/public/index.html
View file @ 2d1849c7
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>鹿马108旅游研讨会签到程序</title>
</head>
<body>
<noscript>
......
cjcode/src/App.vue
View file @ 2d1849c7
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
cjcode/src/components/qrcodebox.vue 0 → 100644
View file @ 2d1849c7
<template>
<!-- 二维码 -->
<div class="qrcodebox">
</div>
</template>
<script>
</script>
<style>
</style>
cjcode/src/main.js
View file @ 2d1849c7
......@@ -3,6 +3,14 @@ import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import "./style/base.css";
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
......
cjcode/src/router/index.js
View file @ 2d1849c7
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Home from '../views/Home/Home.vue'
import Luckdraw from '../views/Luckdraw/Luckdraw.vue'
Vue.use(VueRouter)
......@@ -11,13 +12,18 @@ const routes = [
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
path:"/Luckdraw",
name: 'Luckdraw',
component: Luckdraw
}
// {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// }
]
const router = new VueRouter({
......
cjcode/src/style/base.css 0 → 100644
View file @ 2d1849c7
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
/* font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; */
/* 用 ascii 字符表示，使得在任何编码下都无问题 */
}
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
q:before, q:after { content: ''; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
\ No newline at end of file
cjcode/src/utils/userlist.js 0 → 100644
View file @ 2d1849c7
This source diff could not be displayed because it is too large. You can view the blob instead.
cjcode/src/views/Home.vue deleted 100644 → 0
View file @ 9823bf78
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
cjcode/src/views/Home/Home.vue 0 → 100644
View file @ 2d1849c7
<template>
<!-- 签到页面 -->
<!-- 签到墙纸 -->
<div class="homepage">
<!-- 顶部栏内容 -->
<div class="Panel_Top" >
<div class="top_menu">
<img class="activity_logo" src="@/assets/news/cb17d06b638982473bb08483878b0626.png">
<div class="istoptab">
<router-link to="/" class="tabitme">签到墙</router-link>
<router-link to="/Luckdraw" class="tabitme">大抽奖</router-link>
</div>
<div class="tp2">
<div class="tp-1" style="">
<div class="tp-3" id="counter">参与人数：15,850人</div>
</div>
</div>
</div>
</div>
<!-- 视频背景 -->
<div class="bgvideo" style="width: 100%;height: 100%;position: absolute;left:0;top: 0;z-index: -1;">
<!-- bgvideo.mp4 -->
<!-- beijvie.mp4 -->
<video src="@/assets/news/piantou.mp4" style="object-fit:fill;" autoplay autoplay="autoplay" autobuffer=""
autoloop="" loop="" width="100%" height="100%"></video>
</div>
<div class="Panel Lottery">
<div class="qiandao" id="ddd" style="display: block;">
<ul id="divDetail">
<li class="qiaodaosf" v-for="(item,index) in Checkuserlist" :key="index">
<img class="qiaodaotx" :src="item.usertx">
<p class="qiaodaoxm">{{item.username}}</p>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data(){
return {
Checkuserlist:[
{
username:"春暖花开",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:">☀️☀️☀",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"朱晓东",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"。。。",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"草M（赵立新)",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"君墨",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"牛奶咖啡",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"全村的期望",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"汪宏超",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"人人",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"时龙辉",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
username:"愛曬太陽的喵",
},
{
username:"郭思雨",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
},
{
username:"小谢",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
}
]
}
},
created() {
this.demoadduser();
},
methods:{
demoadduser(){
setInterval(()=>{
this.Checkuserlist.push({
username:"小谢",
usertx:"https://p.qqan.com/up/2021-7/2021761012352324.png",
});
let viedeheiht = document.getElementById("divDetail").clientHeight;
document.getElementById('ddd').scrollTop=viedeheiht+200;//通过scrollTop设置滚动到100位置
},1500)
}
}
}
</script>
<style>
@import "./home.css";
</style>
cjcode/src/views/Home/home.css 0 → 100644
View file @ 2d1849c7
.homepage {
width: 100vw;
height: 100vh;
}
::-webkit-scrollbar {
display: none;
}
.Panel_Top {
/* position: fixed; */
display: table;
height: 100px;
top: 0;
width: 100%;
background-color: transparent;
z-index: 999;
}
.top_menu {
width: 96%;
height: 100%;
margin: 0 auto;
position: relative;
}
.activity_logo {
display: block;
position: absolute;
height: 60px;
margin-top: 28px;
left: 0;
}
.tp-1 {
position: absolute;
padding: 0.14rem 0.55rem;
height: 20px;
background: #000;
border-radius: 20px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 20px;
background: rgba(0, 0, 0, .5);
font-size: 0.4rem;
right: 0px;
top: 40px;
}
.Panel.Lottery {
position: absolute;
top: 17%;
height: 72%;
width: 96%;
left: 50%;
margin-left: -48%;
}
.qiandao {
display: block;
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
overflow: auto;
position: relative;
}
.qiandao ul {
list-style: none;
margin: 0;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
}
.qiandao ul li {
float:left;
width:144px;
height:144px;
text-align:center;
padding:0;
opacity:0;
display:none;
margin: 15px 15px 0 0
}
.qiandao ul li.qiaodaosf {
display:block;
opacity:1;
position: relative;
}
.qiaodaotx {
position: relative;
z-index: 9;
-webkit-animation: f1 1.2s 0.5s ease forwards;
-moz-animation: 2s 0.5s ease forwards;
animation: f1 1.2s 0.5s ease forwards;
display: block;
width: 108px;
height: 108px;
margin: 0 auto;
border-radius: 100%;
overflow: hidden;
}
.qiaodaoxm {
font-size: 16px;
color: #FFF;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 auto;
padding: 5px 0;
text-align: center;
width: 100%;
}
.qiaodaosf .qiaodaoxm {
-webkit-animation: mc 1.2s 0.5s ease forwards;
-moz-animation: 2s 0.5s ease forwards;
animation: mc 1.2s 0.5s ease forwards;
display: block;
}
/* 特效 */
@-webkit-keyframes f1 {
0% {
-webkit-transform:scale(0.1);
opacity:0;
}
70% {
-webkit-transform:scale(1.5);
opacity:1;
}
100% {
-webkit-transform:scale(1);
opacity:1;
}
}
@-webkit-keyframes mc {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@-webkit-keyframes xs {
0% {
opacity:1;
-webkit-transform:scale(1);
}
100% {
opacity:0;
-webkit-transform:scale(0);
}
}
/* 特效end */
/* 顶部tab栏 */
.istoptab{
display: flex;
width: 200px;
height: 100px;
/* background-color: #fff; */
position: absolute;
z-index: 88;
top: 0;
right: 200px;
}
.tabitme{
cursor: pointer;
width: 50%;
height: 100px;
line-height: 100px;
text-align: center;
color:#fff;
}
\ No newline at end of file
cjcode/src/views/Luckdraw/Luckdraw.css 0 → 100644
View file @ 2d1849c7
.Luckdraw{
width: 100vw;
height: 100vh;
}
#lottery-panel{
position: absolute;
width: 90%;
left: 50%;
margin-left: -45%;
height: calc(100% - 200px);
bottom: 100px;
}
.lottery-left {
left: 0;
top: 0;
}
.lottery-left {
background-color: rgba(30, 3, 64, .5);
height: 100%;
width: 260px;
position: absolute;
overflow: hidden;
}
.lottery-side {
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lottery-img{
width: 100%;
height: 150px;
position: absolute;
bottom: 50%;
}
.lottery-img img {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 5px;
margin-left: 55px;
}
.lottery-control {
position: absolute;
width: 100%;
bottom: 70px;
}
.control-item {
height: 50px;
line-height: 50px;
width: 85%;
background-color: rgba(0, 0, 0, .5);
border-radius: 25px 25px 25px 25px;
position: relative;
margin: 0 auto;
font-size: 16px;
color: #fff;
padding: 0 10px 0 23px;
box-sizing: border-box;
}
.icon-minus {
background-image: url("~@/assets/news/icon-minus.png");
background-size: 24px;
vertical-align: -7px;
}
.icon-ctrol {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
cursor: pointer;
}
.control-item em {
font-size: 22px;
font-weight: bold;
color: #ffde00;
vertical-align: middle;
font-style: normal;
}
.lottery-num {
display: inline-block;
width: 45px;
text-align: center;
}
.icon-plus {
background-image: url("~@/assets/news/icon-plus.png");
background-size: 24px;
vertical-align: -7px;
}
.icon-ctrol {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
cursor: pointer;
line-height: 50px;
font-size: 16px;
color: #fff;
}
.control-item-btn {
margin-top: 20px;
height: 46px;
width: 90%;
border-radius: 25px 25px 25px 25px;
position: absolute;
color: #fff;
box-sizing: border-box;
}
.btn-start {
background-image: url("~@/assets/news/lottery-start.png");
}
.lottery-btn {
display: inline-block;
width: 60%;
height: 100%;
position: absolute;
margin-left: 25%;
background-repeat: no-repeat;
cursor: pointer;
background-size: auto 100%;
}
/* 中奖名单 */
.lottery-right {
right: 0;
top: 0;
padding: 42px 0 10px 0;
box-sizing: border-box;
}
.lottery-right {
background-color: rgba(30, 3, 64, .5);
width: calc(100% - 270px);
right: 0px;
height: 100%;
position: absolute;
}
.lottery-side {
border-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.winnernum {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 1.5;
background: url("~@/assets/news/line.png") no-repeat 50% 100%;
padding: 10px 0;
font-size: 1.5em;
}
.lottery-right .lottery-win-list {
background-color: transparent;
}
.lottery-right .lottery-win-list {
padding: 30px 0;
}
.lottery-win-list {
width: 100%;
height: 100%;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 5px;
background-color: rgba(30, 3, 64, .5);
}
.lottery-win-list .lottery-winner {
padding: 0 0 0 0;
overflow: auto;
}
.lottery-winner {
height: 100%;
box-sizing: border-box;
}
.lottery-win-list .lottery-winner ul {
width: 100%;
height: 100%;
}
.lottery-right .lottery-win-list.lottery-horizontal .lottery-winner ul li {
width: 25%;
position: relative;
height: 84px;
margin: 0;
padding: 10px 10px 10px 84px;
background-color: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lottery-right .lottery-win-list .lottery-winner ul li {
width: 110px;
height: 0;
padding-top: 110px;
margin: 15px 10px;
}
.lottery-win-list .lottery-winner ul li {
padding: 0;
height: 100%;
border-radius: 10px;
background-color: rgba(30, 3, 64, .5);
overflow: hidden;
position: relative;
margin-right: 15px;
float: left;
}
.lottery-right .lottery-win-list.lottery-horizontal .lottery-winner .lottery-avatar-bd {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.lottery-winner .lottery-avatar-bd {
width: 64px;
height: 64px;
position: absolute;
left: 0;
top: 10px;
}
.lottery-avatar-bd {
padding: 2px;
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
border-radius: 50%;
overflow: hidden;
}
.lottery-right .lottery-win-list.lottery-horizontal .winner-name {
width: 100%;
}
.winner-name {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color: #fff;
line-height: 68px;
}
.lottery-right .lottery-win-list .lottery-winner ul li img {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
z-index: 1;
}
.lottery-scroll {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-wrap: wrap;
justify-content: center;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.lottery-scroll li {
width: 14%;
padding: 14% 0 0 0;
box-shadow: 0px 0px 12px rgb(243 241 137 / 50%);
border: 1px solid rgba(240, 11, 11, 0.25);
background-color: rgba(240, 11, 11, 0.6);
}
.lottery-scroll li {
width: 8%;
padding: 8% 0 0 0;
margin: 1%;
height: 0;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lottery-scroll .lottery-item {
font-size: 1.4em;
color: rgb(243, 241, 137);
font-weight: bold;
text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}
.lottery-item {
position: absolute;
top: 50%;
width: 96%;
left: 2%;
overflow: hidden;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 16px;
color: #fff;
line-height: 1.5;
text-align: center;
z-index: 2;
text-shadow: 0 0 2px rgb(0 0 0);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.lottery-scroll li img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.control-item-btn1{
}
.lottery-middle .control-item-btn1 .lottery-btn1 {
margin-left: -70px;
width: 140px;
}
.btn-stop {
bottom: 0;
background-image: url("~@/assets/news/lottery-stop.png");
}
.lottery-btn1 {
display: inline-block;
/* width: 300px;
height: 102px; */
position: absolute;
margin-left: 25%;
background-repeat: no-repeat;
cursor: pointer;
background-size: auto 100%;
width: 140px;
height: 46px;
left: 50%;
margin-left: -70px;
}
cjcode/src/views/Luckdraw/Luckdraw.vue 0 → 100644
View file @ 2d1849c7
<template>
<!-- 抽奖页面 -->
<div class="homepage">
<!-- 顶部栏内容 -->
<div class="Panel_Top" >
<div class="top_menu">
<img class="activity_logo" src="@/assets/news/cb17d06b638982473bb08483878b0626.png">
<div class="istoptab">
<router-link to="/" class="tabitme">签到墙</router-link>
<router-link to="/Luckdraw" class="tabitme">大抽奖</router-link>
</div>
<div class="tp2">
<div class="tp-1" style="">
<div class="tp-3" id="counter">参与人数：15,850人</div>
</div>
</div>
</div>
</div>
<!-- 视频背景 -->
<div class="bgvideo" style="width: 100%;height: 100%;position: absolute;left:0;top: 0;z-index: -1;">
<!-- bgvideo.mp4 -->
<!-- beijvie.mp4 -->
<video src="@/assets/news/28.mp4" style="object-fit:fill;" autoplay autoplay="autoplay" autobuffer=""
autoloop="" loop="" width="100%" height="100%"></video>
</div>
<div id="lottery-panel" class="">
<div v-show="centerDialogVisible==false" class="lottery-side lottery-left">
<div class="lottery-img">
<img src="@/assets/news/defaultaward.jpg" alt="">
</div>
<div class="lottery-control">
<div class="control-item">
中奖人数：<span @click="jianren" class="icon-ctrol icon-minus" title="按上下键增减人数"></span>
<em class="lottery-num">{{Wintheprizenum}}</em>
<span @click="jiaren" class="icon-ctrol icon-plus" title="按上下键增减人数"></span>
</div>
<div @click="startchoujiang" class="control-item-btn">
<div class="lottery-btn btn-start" title="按空格键开始抽奖">&nbsp;</div>
</div>
</div>
</div>
<!-- 左边的 -->
<div v-show="centerDialogVisible==false" class="lottery-side lottery-right" style="">
<span class="winnernum">中奖名单(<span class="winnernum_txt">413</span>人)</span>
<div class="lottery-win-list lottery-horizontal">
<div class="lottery-winner" id="lottery-winner">
<ul class="lottery-win-scroll" tabindex="5000">
<li v-for="(item,index) in imitateuserlist" :key="index">
<div class="lottery-avatar-bd">
<div class="lottery-avatar-bg"><img :src="item.usertx">
</div>
</div>
<div class="winner-name">{{item.username}}</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 右边的 -->
<el-dialog @open="openrun" :close-on-click-modal="false" :close-on-press-escape="false"
:modal-append-to-body="false" title="" :visible.sync="centerDialogVisible" width="30%" center>
<ul class="lottery-scroll">
<li v-for="(item,index) in dtuserzj" :key="index" style="width:14%;padding:14% 0 0 0;">
<div class="lottery-item" style="font-size:1.4em">
<p>{{item.username}}</p>
</div>
<img :src="item.usertx">
</li>
</ul>
<div v-show="isshowstop" class="control-item-btn1">
<div @click="stopkaijiang" class="lottery-btn1 btn-stop" title="按回车键停止抽奖" style="">&nbsp;</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {
userlist
} from "@/utils/userlist.js"
let cls = 0;
export default {
name: "Luckdraw",
data() {
return {
moniuserlist: userlist, //模拟数据列表
Wintheprizenum: 1,
centerDialogVisible: false,
//模拟数据
imitateuserlist: [{
username: "现金啥",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLUVQibXaS2mk2scS5ZacUyc4dQkqfZXsz8K6at0b8UM0JxxCFQRs44KEiaG5DDItKFV6y6hrbklubQ/132",
},
{
username: "cd",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/zwb3VX705VW6RvgGiapTibWLf2GasKeiaB7BviaSbxTJicUeWfJq1OAuvI9qlEJUwCiaC8Ty1H6ZZEwatfHCrIUDgxAQ/132",
},
{
username: "黄斌斌",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Qp6EnXhUrLJRVU3rRvV2n0PofBLj5MM7QpZgu7nYx6mZicSS6YFImhic4djyI8yXHEawgqutGQ9wyKSgY6lF6BpQ/132",
},
{
username: "钟霓",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJOsGtyIibIo4sz1kRXmzZmTpVlgQKRZEaepsicd5ftbyX3z1Uj9k0No75JiaaicPibDaPYvg76kURIhww/132",
},
{
username: "123",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/byk9mvYJ8Sxt1cLicKqgXyRI5UiazwQp9lN2wZBpZmyZTs1cqeWmSXIcvNCKb21iaJAkaL18EkibICs5hyAQ96iczUQ/132",
},
{
username: "胡冬兰",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/sL72V9yVUrFx3ib0nKzguUhgyk5u4wyXp754XiaDpdOiaibg78msqgH0QTibv9vKXz1hr3bYB5sPzD6WoOb4BQ96Z2A/132",
},
{
username: "曹聪",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/tgQUUzHnIHicc9Ry2G2bwlRSNt2ERx5xT8BX7kSz2QlaoSZicZsp9npvDSzfWrB4zd2LF0ickhbo1I3oEJJdn9O6g/132",
},
{
username: "余凯",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJBHJiapUR6dalN9icy8hpNxzB85CFH6r7CKvNAmibNdAHv2K6EWDp2JdjgAE2RSptC5ibKfjAUXak7g/132",
},
{
username: "杨敢",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/gpGOLe5GJZ02u2DPDvSvSZkNFCWmRiaIS18qibErgaYiaV4mmXV4vUxnlNvLEkEAmcBiahb3xia1G880DuTDOPiaBfjg/132",
},
{
username: "现金啥",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLUVQibXaS2mk2scS5ZacUyc4dQkqfZXsz8K6at0b8UM0JxxCFQRs44KEiaG5DDItKFV6y6hrbklubQ/132",
},
{
username: "cd",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/zwb3VX705VW6RvgGiapTibWLf2GasKeiaB7BviaSbxTJicUeWfJq1OAuvI9qlEJUwCiaC8Ty1H6ZZEwatfHCrIUDgxAQ/132",
},
{
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Qp6EnXhUrLJRVU3rRvV2n0PofBLj5MM7QpZgu7nYx6mZicSS6YFImhic4djyI8yXHEawgqutGQ9wyKSgY6lF6BpQ/132",
username: "黄斌斌",
},
{
username: "钟霓",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJOsGtyIibIo4sz1kRXmzZmTpVlgQKRZEaepsicd5ftbyX3z1Uj9k0No75JiaaicPibDaPYvg76kURIhww/132",
},
{
username: "77六斤8",
usertx: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83er132T98gMqaYMibNhAE7SkOMKAR7dgxRr27EXtnv50JqkdeMfGNra1U3I1Ww6lPMNWYY8VcK4bMdg/132",
}
],
dtuserzj: [], //动态中奖用户名单
isshowstop:false,//是否显示停止按钮
}
},
methods: {
//取指定范围内的随机数
randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
},
//减人
jianren() {
this.Wintheprizenum--;
if (this.Wintheprizenum <= 0) {
this.Wintheprizenum = 1;
}
},
//加人
jiaren() {
this.Wintheprizenum++;
if(this.Wintheprizenum>=10){
this.Wintheprizenum = 10;
}
},
//开始抽奖
startchoujiang() {
this.centerDialogVisible = true;
let index = 0;
this.isshowstop = true;
cls = setInterval(() => {
let suijiarr = [];
for (let i = 0; i < this.Wintheprizenum; i++) {
let suijindex = this.randomNum(0, this.moniuserlist.length);
// console.info("suijindex",suijindex);
suijiarr.push(this.moniuserlist[suijindex]);
}
this.dtuserzj = suijiarr; //赋值集合
index++;
}, 100)
},
//停止按钮点击 也就是开奖的方法
stopkaijiang(){
this.dtuserzj = [this.moniuserlist[0]]; //设置最后的结果
clearInterval(cls);
cls = 0;
this.isshowstop = false;
//开奖 这个最后要请求真实数据
let suijiarr = [];
for (let i = 0; i < this.Wintheprizenum; i++) {
let suijindex = this.randomNum(0, this.moniuserlist.length);
// console.info("suijindex",suijindex);
suijiarr.push(this.moniuserlist[suijindex]);
}
this.dtuserzj = suijiarr; //赋值集合
},
//打开弹窗的回调
openrun() {
},
//Dialog 关闭的回调
close() {
clearInterval(cls);
cls = 0;
this.isshowstop = false;
}
}
}
</script>
<style>
@import "../Home/home.css";
@import "./Luckdraw.css";
</style>
<style>
#lottery-panel .el-dialog.el-dialog--center {
width: 100% !important;
height: 78%;
background-color: rgba(30, 3, 64, .3) !important;
}
.el-dialog__headerbtn .el-dialog__close {
color: #fff !important;
font-size: 50px;
}
</style>
cjcode/vue.config.js 0 → 100644
View file @ 2d1849c7
module.exports = {
lintOnSave: false
}
\ No newline at end of file
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