Browse Source

[新增]老虎机页面初步完成

master
邵佳豪 4 years ago
parent
commit
6e63bf2abc
  1. 23
      src/app/app-routing.module.ts
  2. 50
      src/app/ui/first-step/first-step.component.html
  3. 12
      src/app/ui/first-step/first-step.component.scss
  4. 55
      src/app/ui/first-step/first-step.component.ts
  5. 77
      src/app/ui/four-step/four-step.component.html
  6. 183
      src/app/ui/four-step/four-step.component.scss
  7. 25
      src/app/ui/four-step/four-step.component.spec.ts
  8. 80
      src/app/ui/four-step/four-step.component.ts
  9. 3
      src/app/ui/ui.module.ts
  10. 256
      src/assets/css/laohujistyle.css
  11. 77
      src/assets/js/firststep.js
  12. 151
      src/assets/js/firststep2.js
  13. 1
      src/styles.scss

23
src/app/app-routing.module.ts

@ -19,33 +19,14 @@ import {MTokenK1Component} from './m-token-k1/m-token-k1.component' //K1秘钥
import { LuckDrawComponent } from './ui/luck-draw/luck-draw.component';
import {ResetComponent} from './ui/reset/reset.component'
import { FirstStepComponent } from './ui/first-step/first-step.component';
import { FourStepComponent } from './ui/four-step/four-step.component';
const routes: Routes = [
//{path:'',redirectTo:'ui/plan',pathMatch:'full',},
/* {
path:'',
component:NavigationComponent,
// canActivate: [AuthGuard],//守卫验证
children:[
{path:'ui',loadChildren:() => import('./ui/ui.module').then(m => m.UiModule)},
// {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)},
// {path:'visualization',component: HomeComponent},
// {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}
]
}, */
{path:'',component:LuckDrawComponent},
{path:'firstStep',component:FirstStepComponent},
{path:'Reset',component:ResetComponent},
// {path:'login',
// component:LoginComponent},
// {path:'getNoMToken',
// component:MTokenK1Component, canActivate: [AuthGuard],}, //K1秘钥验证失败是跳转页面
// {path:'lockscreen',
// component:LockscreenComponent,
// canActivate: [AuthGuard]}//守卫验证
{path:'fourStep',component:FourStepComponent},
];
@NgModule({

50
src/app/ui/first-step/first-step.component.html

@ -6,10 +6,8 @@
* @LastEditors: sueRimn
* @LastEditTime: 2020-10-14 09:08:17
-->
<html>
<meta charset="utf-8"/>
<body>
<div class="head">
<div class="box">
<div class="head">
<img src="../../../assets/images/head.png">
<!-- <span>指挥员能力考评抽签</span> -->
<img class="ziti" src="../../../assets/images/tophead.png">
@ -23,11 +21,13 @@
</div>
</div>
</div> -->
<div class="colum" >
<div class="colum" style="margin-left: 150px;">
<div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi">
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span>
<span name="aaa" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="chosseZhidui(key)">{{item.name}}<img style="margin-left: 8px;display: none;" src="../../../assets/images/dui.png"></span>
<span [attr.key]="item.id" name="aaa" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}}
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png">
</span>
</div>
</div>
</div>
@ -35,51 +35,39 @@
<div class="centerLeft">
<div class="tanCenterbtn" id="endjieguo">
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span>
<span *ngFor="let item of choujiang; let key=index" ></span>
<span *ngFor="let item of choujiang; let key=index" >{{item.result}}</span>
</div>
</div>
</div>
<div class="line" style="padding-top:50px;">
<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;">
<div class="content">
<h1>Feel free to build your oun casino!</h1>
<div style="clear:both; padding-top: 215px;width: 335px;margin: 0 auto;">
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;">
<div id="machine4" class="slotMachine" style="margin-left: -65px;">
<div class="slot slot1"></div>
<div class="slot slot1">博山区</div>
<div class="slot slot2">张店区</div>
<div class="slot slot3">周村区</div>
<div class="slot slot4">淄川区</div>
<div class="slot" >
{{isDraw ? '已抽签' : '开始抽签'}}
</div>
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div>
</div>
<div id="yichou" style="display: none;">
<span>以抽签</span>
</div>
<div class="content text-center">
<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div>
<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div>
</div>
<div class="clearfix"></div>
</div>
<!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end">
<span id="jieguo" ></span>
</div> -->
<div style="text-align: center;">
<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">开始抽签</div>
</div>
</div>
</body>
</html>
</div>
</div>

12
src/app/ui/first-step/first-step.component.scss

@ -1,16 +1,17 @@
html, body {
@import "../../../assets/css/laohujistyle.css";
.box{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url("../../../assets/images/backgroud.png");
background-size: 100%;
//background-size: 99% 99%;
overflow: hidden;
}
.head{
width: 100%;
height: 50px;
/* background-image: url("../../../assets/images/head.png");
width: 50%; */
img{
width: 100%;
height: 100%;
@ -39,9 +40,6 @@
height: 90%;
padding: 0.125rem 0.125rem 0;
display: flex;
/* background-attachment: fixed;
background-repeat:no-repeat; */
}
.centerLeft{

55
src/app/ui/first-step/first-step.component.ts

@ -17,25 +17,48 @@ export class FirstStepComponent implements OnInit {
}
//支队数据和是否抽奖
choujiang=[
{name:"南宁支队",idnum:1},
{name:"柳州支队",idnum:2},
{name:"桂林支队",idnum:3},
{name:"梧州支队",idnum:4},
{name:"北海支队",idnum:5},
{name:"防城港支队",idnum:6},
{name:"钦州支队",idnum:7},
{name:"贵港支队",idnum:8},
{name:"玉林支队",idnum:9},
{name:"百色支队",idnum:10},
{name:"贺州支队",idnum:11},
{name:"河池支队",idnum:12},
{name:"来宾支队",idnum:13},
{name:"崇左支队",idnum:14}
{name:"南宁支队",id:1,result :localStorage.getItem("南宁支队") || ""},
{name:"柳州支队",id:2,result :localStorage.getItem("柳州支队") || ""},
{name:"桂林支队",id:3,result :localStorage.getItem("桂林支队") || ""},
{name:"梧州支队",id:4,result :localStorage.getItem("梧州支队") || ""},
{name:"北海支队",id:5,result :localStorage.getItem("北海支队") || ""},
{name:"防城港支队",id:6,result :localStorage.getItem("防城港支队") || ""},
{name:"钦州支队",id:7,result :localStorage.getItem("钦州支队") || ""},
{name:"贵港支队",id:8,result :localStorage.getItem("贵港支队") || ""},
{name:"玉林支队",id:9,result :localStorage.getItem("玉林支队") || ""},
{name:"百色支队",id:10,result :localStorage.getItem("百色支队") || ""},
{name:"贺州支队",id:11,result :localStorage.getItem("贺州支队") || ""},
{name:"河池支队",id:12,result :localStorage.getItem("河池支队") || ""},
{name:"来宾支队",id:13,result :localStorage.getItem("来宾支队") || ""},
{name:"崇左支队",id:14,result :localStorage.getItem("崇左支队") || ""}
]
numList = [
{name:"1号",id:1},
{name:"2号",id:2},
{name:"3号",id:3},
{name:"4号",id:4},
{name:"5号",id:5},
{name:"6号",id:6},
{name:"7号",id:7},
{name:"8号",id:8},
{name:"9号",id:9},
{name:"10号",id:10},
{name:"11号",id:11},
{name:"12号",id:12},
{name:"13号",id:13},
{name:"14号",id:14}
]
//选中支队
chooseid=-1
chosseZhidui(key){
this.chooseid=key
isDraw = false
clickName(item){
this.chooseid= item.id - 1
localStorage.setItem("indexNum",item.id)
if(localStorage.getItem(item.name)){//如果已经抽过
this.isDraw = true
}else{
this.isDraw = false
}
}
turnplate={

77
src/app/ui/four-step/four-step.component.html

@ -0,0 +1,77 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-10-14 09:08:17
-->
<div class="box">
<div class="head">
<img src="../../../assets/images/head.png">
<!-- <span>指挥员能力考评抽签</span> -->
<img class="ziti" src="../../../assets/images/tophead.png">
</div>
<div class="mainbox">
<!-- <div class="colum" style="margin-left: 13%;width: 100px;">
<div class="centerLefta" >
<div class="tanCenterbtna" id="chooseZhi">
<span style="background-color: #ff4d29;color:#FFF;" >序号</span>
<span *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item.idnum}}</span>
</div>
</div>
</div> -->
<div class="colum" style="margin-left: 150px;">
<div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi2">
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span>
<span [attr.key]="item.id" name="bbb" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}}
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png">
</span>
</div>
</div>
</div>
<div class="colum">
<div class="centerLeft">
<div class="tanCenterbtn" id="endjieguo2">
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span>
<span *ngFor="let item of choujiang; let key=index" >{{item.result.zhi}}{{item.result.fuzhi}}</span>
</div>
</div>
</div>
<div class="line" style="padding-top:50px;">
<div class="content">
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;">
<div id="machine2" class="slotMachine" style="margin-left: -65px;">
<!-- <div class="slot" >
{{isDraw ? '已抽签' : '开始抽签'}}
</div> -->
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div>
</div>
<div id="machine6" class="slotMachine">
<div class="slot" *ngFor="let item of numList2; let key=index">{{item.name}}</div>
</div>
<div id="yichou" style="display: none;">
<span>以抽签</span>
</div>
</div>
</div>
<div style="text-align: center;">
<div id="slotMachineButtonShuffle2" class="slotMachineButton" style="font-size: 25px">开始抽签</div>
</div>
</div>
</div>
</div>

183
src/app/ui/four-step/four-step.component.scss

@ -0,0 +1,183 @@
@import "../../../assets/css/laohujistyle.css";
.box{
width: 100%;
height: 100%;
overflow: hidden;
background-image: url("../../../assets/images/backgroud.png");
background-size: 100%;
overflow: hidden;
}
.head{
width: 100%;
height: 50px;
img{
width: 100%;
height: 100%;
}
.ziti{
position: relative;
bottom: 70%;
left: 40%;
width: 20%;
height: 53%;
}
span{
position: relative;
bottom: 70%;
left: 45%;
font-size: 28px;
background:linear-gradient(#ff4b27, #ff6e41);
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
}
.mainbox {
width: 99%;
height: 90%;
padding: 0.125rem 0.125rem 0;
display: flex;
}
.centerLeft{
background-color: #FFF;
float: left;
height: 98%;
width: 100%;
position: relative;
flex-direction: column;
flex: 2%;
display: flex;
align-items:center;
box-sizing: border-box;
margin: 0 0;
.tanCenterbtn{
width: 350px;
height: 100%;
border: 1px solid #ECEDEE;
display: flex;
flex-direction: column;
user-select: none;
background-size:100% 100%;
span{
white-space: nowrap;
font-family: Arial;
color: #000;
z-index:99;
width: 300px;
height: 40px;
cursor:pointer;
border-bottom:1px solid #ECEDEE;
padding:8px 24px ;
text-align: center;
font-size: 24px;
}
}
}
.centerLefta{
background-color: #FFF;
float: left;
height: 98%;
width: 100%;
position: relative;
flex-direction: column;
flex: 2%;
display: flex;
align-items:center;
box-sizing: border-box;
margin: 0 0;
.tanCenterbtna{
width: 100px;
height: 100%;
border: 1px solid #ECEDEE;
display: flex;
flex-direction: column;
user-select: none;
background-size:100% 100%;
span{
white-space: nowrap;
font-family: Arial;
color: #000;
z-index:99;
width: 50px;
height: 40px;
cursor:pointer;
border-bottom:1px solid #ECEDEE;
padding:8px 24px ;
text-align: center;
font-size: 24px;
}
}
}
.colum{
height: 90%;
width: 350px;
margin-top: 72px;
display:table-cell;
vertical-align:middle;
text-align: center;
span{
font-size: 24px;
//padding-top: 50%;
}
}
.zhuan{
width: 500px;
margin-left: 160px;
margin-top: 10%;
}
.stop{
pointer-events: none;
}
.button {
height: 48px;
width: 130px;
background-color:transparent;
border-radius: 4px;
border: 1px solid #ECEDEE;
color: #FFF;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.chongzhi{
position: relative;
top: 85%;
right: 17%;
}
//选择后加背景色
.beijicolor{
background-color:#FE693E ;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
input{ font-size:12px;}
a{ text-decoration:none; color:#000;}
a:hover{color:#c00; text-decoration:none;}
.clear{clear:both;}
/* 大转盘样式 */
.banner{//max-height: 650px;
display: block;
width: 95%;
//max-width: 650px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;height: 100%;}
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;}

25
src/app/ui/four-step/four-step.component.spec.ts

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FourStepComponent } from './four-step.component';
describe('FourStepComponent', () => {
let component: FourStepComponent;
let fixture: ComponentFixture<FourStepComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FourStepComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FourStepComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

80
src/app/ui/four-step/four-step.component.ts

@ -0,0 +1,80 @@
import { Component, OnInit } from '@angular/core';
import '../../../assets/js/firststep2'
@Component({
selector: 'app-four-step',
templateUrl: './four-step.component.html',
styleUrls: ['./four-step.component.scss']
})
export class FourStepComponent implements OnInit {
constructor() { }
ngOnInit(){
window.setTimeout(()=>{
//zhuan.drawRouletteWheel()
},0)
}
//支队数据和是否抽奖
choujiang = [
{name:"南宁支队",id:1,result :JSON.parse(localStorage.getItem("南宁支队seatnumber")) || ""},
{name:"柳州支队",id:2,result :JSON.parse(localStorage.getItem("柳州支队seatnumber")) || ""},
{name:"桂林支队",id:3,result :JSON.parse(localStorage.getItem("桂林支队seatnumber")) || ""},
{name:"梧州支队",id:4,result :JSON.parse(localStorage.getItem("梧州支队seatnumber")) || ""},
{name:"北海支队",id:5,result :JSON.parse(localStorage.getItem("北海支队seatnumber")) || ""},
{name:"防城港支队",id:6,result :JSON.parse(localStorage.getItem("防城港支队seatnumber")) || ""},
{name:"钦州支队",id:7,result :JSON.parse(localStorage.getItem("钦州支队seatnumber")) || ""},
{name:"贵港支队",id:8,result :JSON.parse(localStorage.getItem("贵港支队seatnumber")) || ""},
{name:"玉林支队",id:9,result :JSON.parse(localStorage.getItem("玉林支队seatnumber")) || ""},
{name:"百色支队",id:10,result :JSON.parse(localStorage.getItem("百色支队seatnumber")) || ""},
{name:"贺州支队",id:11,result :JSON.parse(localStorage.getItem("贺州支队seatnumber")) || ""},
{name:"河池支队",id:12,result :JSON.parse(localStorage.getItem("河池支队seatnumber")) || ""},
{name:"来宾支队",id:13,result :JSON.parse(localStorage.getItem("来宾支队seatnumber")) || ""},
{name:"崇左支队",id:14,result :JSON.parse(localStorage.getItem("崇左支队seatnumber")) || ""}
]
numList = [
{name:"1号",id:1},
{name:"2号",id:2},
{name:"3号",id:3},
{name:"4号",id:4},
{name:"5号",id:5},
{name:"6号",id:6},
{name:"7号",id:7},
{name:"8号",id:8},
{name:"9号",id:9},
{name:"10号",id:10},
{name:"11号",id:11},
{name:"12号",id:12},
{name:"13号",id:13},
{name:"14号",id:14}
]
numList2 = [
{name:"15号",id:15},
{name:"16号",id:16},
{name:"17号",id:17},
{name:"18号",id:18},
{name:"19号",id:19},
{name:"20号",id:20},
{name:"21号",id:21},
{name:"22号",id:22},
{name:"23号",id:23},
{name:"24号",id:24},
{name:"25号",id:25},
{name:"26号",id:26},
{name:"27号",id:27},
{name:"28号",id:28}
]
//选中支队
chooseid=-1
isDraw = false
clickName(item){
this.chooseid = item.id - 1
localStorage.setItem("indexNum",item.id)
if(localStorage.getItem(item.name)){//如果已经抽过
this.isDraw = true
}else{
this.isDraw = false
}
}
}

3
src/app/ui/ui.module.ts

@ -62,9 +62,10 @@ import { CountdownModule } from 'ngx-countdown';
import { LuckDrawComponent } from './luck-draw/luck-draw.component';
import { ResetComponent } from './reset/reset.component';
import { FirstStepComponent } from './first-step/first-step.component';
import { FourStepComponent } from './four-step/four-step.component';
@NgModule({
declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent, FirstStepComponent],
declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent, FirstStepComponent, FourStepComponent],
imports: [
CommonModule,

256
src/assets/css/laohujistyle.css

@ -1,245 +1,35 @@
@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
a{
color: #ccd500;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #a9b119;
}
.clear {
clear: both;
}
html {
position: relative;
min-height: 100%;
}
body {
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 80px;
width: 100%;
background: black;
}
b{
font-weight: 600;
}
.htmldemo p{font-size: 16px;font-family: "微软雅黑"}
/* Titulos
-------------------------------------------------------------------------*/
h1{
width: 100%;
color: #000000;
font-size: 40px;
margin-bottom: 25px;
}
h2{
color: #000000;
display: table-cell;
float: left;
font-size: 45px;
line-height: 40px;
margin: 0 0 50px;
text-align: center;
width: 100%;
font-weight: 300;
}
h2 span{
font-weight: 400;
}
h3{
float: left;
width: 100%;
margin: 0 0 20px 0;
color: white;
font-size:40px;
font-family: 'Lato', 'sans-serif';
font-weight: 300;
}
h4{
color: #ffffff;
display: table-cell;
float: left;
font-size: 35px;
line-height: 31px;
margin: 0 0 0;
text-align: center;
width: 100%;
font-weight: 400;
}
p.title{
color: #000000;
display: table-cell;
float: left;
font-size: 45px;
line-height: 40px;
margin: 0 0 50px;
text-align: center;
width: 100%;
font-weight: 300;
}
.grey { color:#444;}
/* INICIO
-------------------------------------------------------------------------*/
#header{
margin: 0 auto 0;
width: 100%;
position: absolute;
text-align: center;
top: 0px;
background-color: #6C5726;
overflow: hidden;
position: relative;
padding: 50px 0px;
border-top: 10px solid #A48E4E;
border-bottom: 10px solid #A48E4E;
}
#header table, #footer table{
height: 100%;
width: 100%;
}
#header table td, #footer table td{
vertical-align: middle;
}
#header .content{
color: #FFFFFF;
float: left;
font-size: 50px;
font-weight: 300;
line-height: 42px;
margin-top: 30px;
text-align: center;
width: 100%;
}
#header .content, #footer .content{
font-family: 'Pathway Gothic One';
color: #ffffff;
float: left;
font-size: 70px;
font-weight: 300;
line-height: 80px;
margin-top: 2px;
margin-bottom: 20px;
text-align: center;
width: 100%;
padding: 30px 0px;
}
#header .content > div, #footer .content > div{
display: inline-block;
}
#footer{
width:100%;
background-color: #6C5726;
border-top: 20px dotted #A48E4E;
height: 200px;
}
.line{
background-color: #DCD293;
padding: 50px 0px 25px 0px;
width:100%;
border-top: 20px dotted #A48E4E;
}
.machineContainer{
background-color: #000;
padding: 5px 1px 5px 1px;
overflow: hidden;
height: 135px;
}
.content{
text-align: center;
background: url('../../assets/images/machine.png') no-repeat 50% 120px;
height: 500px;
}
.slotMachine{
width: 32.333333%;
width: 40%;
border: 5px solid #000;
height: 100px;
line-height: 100px;
padding: 0px;
overflow: hidden;
display: inline-block;
text-align: center;
/*margin: 0px 5px;*/
/*border: 5px solid #000;*/
background-color: #ffffff;
}
.machineResult{
color:#fff;
text-align:center;
font-size: 30px;
font-weight: 900;
}
.noBorder{
border:none !important;
background: transparent !important;
}
.slotMachine .slot{
height:100px;
background-position-x: 55%;
background-repeat: no-repeat;
}
.slot1{
background-image: url("../img/slot1.png");
}
.slot2{
background-image: url("../img/slot2.png");
}
.slot3{
background-image: url("../img/slot3.png");
}
.slot4{
background-image: url("../img/slot4.png");
}
.slot5{
background-image: url("../img/slot5.png");
}
.slot6{
background-image: url("../img/slot6.png");
}
#textMachine, #textMachine2{
width:520px;
height: 67px;
overflow: hidden;
display: inline-block;
text-align: left;
}
#textMachine > *, #textMachine2 > *{
padding: 0px 0px;
}
.slotMachineButton{
@ -250,29 +40,22 @@ p.title{
text-align: center;
}
.slotMachineButton {
-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;
box-shadow:inset 0px 1px 0px 0px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
border-radius: 75px;
text-indent:0px;
border:6px solid #eeb44f;
border-radius: 3px;
background-color:#fb9e25;
display:inline-block;
color:#ffffff;
font-size:40px;
font-size:36px;
font-weight:bold;
font-style:normal;
height:100px;
line-height:90px;
height:50px;
line-height:50px;
margin-top:10px;
margin-right:5%;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #cc9f52;
cursor:pointer;
padding: 3px;
}
.slotMachineButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
@ -285,6 +68,13 @@ p.title{
}
.xxx{
.disabled{
pointer-events: none;
background-color: grey;
}
.img{
display: none;
}
.block{
display: inline-block!important;
}

77
src/assets/js/firststep.js

@ -1,25 +1,86 @@
$(document).ready(function(){
var list = [ 4, 2 , 1, 3 ]
var index = 0
var selected = null //点击的单位名称
var selectedIndex = null //点击的单位index
var machine = $("#machine4").slotMachine({
active : 0,
delay : 500,
randomize : function(activeElementIndex){
return list[index];
console.log("xxxxx")
if(selected == "南宁支队"){
localStorage.setItem(selected,"5号")
return 5;
}else if(selected == "柳州支队"){
localStorage.setItem(selected,'10号')
return 10;
}else if(selected == "桂林支队"){
localStorage.setItem(selected,'14号')
return 14;
}else if(selected == "梧州支队"){
localStorage.setItem(selected,'3号')
return 3;
}else if(selected == "北海支队"){
console.log(1996,)
localStorage.setItem(selected,'8号')
return 8;
}else if(selected == "防城港支队"){
localStorage.setItem(selected,'13号')
return 13;
}else if(selected == "钦州支队"){
localStorage.setItem(selected,'6号')
return 6;
}else if(selected == "贵港支队"){
localStorage.setItem(selected,'1号')
return 1;
}else if(selected == "玉林支队"){
localStorage.setItem(selected,'7号')
return 7;
}else if(selected == "百色支队"){
localStorage.setItem(selected,'12号')
return 12;
}else if(selected == "贺州支队"){
localStorage.setItem(selected,'2号')
return 2;
}else if(selected == "河池支队"){
localStorage.setItem(selected,'4号')
return 4;
}else if(selected == "来宾支队"){
localStorage.setItem(selected,'9号')
return 9;
}else if(selected == "崇左支队"){
localStorage.setItem(selected,'11号')
return 11;
}
}
});
$("#slotMachineButtonShuffle").click(function(){
if(!selected){
alert("请先选择单位")
}else{
machine.shuffle();
$("#slotMachineButtonShuffle").addClass("xxx");
$("#slotMachineButtonShuffle").addClass("disabled");
setTimeout(() => {
index ++
machine.stop();
$("#slotMachineButtonShuffle").removeClass("xxx");
// $("#slotMachineButtonShuffle").removeClass("disabled");
setTimeout(() => {
$("#endjieguo span").eq(selectedIndex).html(window.localStorage[selected])
$("#chooseZhi .img").eq(selectedIndex - 1).css("display","inline-block");
}, 1300);
}, 1000);
});
}
// $("#slotMachineButtonStop").click(function(){
});
// });
//左侧表格点击事件
$("span[name='aaa']").on("click",function(e,index){
selected = $(this)[0].innerText
selectedIndex = localStorage.getItem("indexNum")
if($("#endjieguo span").eq(selectedIndex)[0].innerText){
$("#slotMachineButtonShuffle").addClass("disabled");
}else{
$("#slotMachineButtonShuffle").removeClass("disabled");
}
})
});

151
src/assets/js/firststep2.js

@ -0,0 +1,151 @@
$(document).ready(function(){
var index = 0
var selected = null //点击的单位名称
var selectedtime = null //点击的单位名称 + 'time'
var selectedIndex = null //点击的单位index
var machine = $("#machine2").slotMachine({
active : 0,
delay : 500,
randomize : function(activeElementIndex){
if(selected == "南宁支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"21号"}))
return 7;
}else if(selected == "柳州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"26号"}))
return 11;
}else if(selected == "桂林支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"15号"}))
return 13;
}else if(selected == "梧州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
return 12;
}else if(selected == "北海支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"22号"}))
return 3;
}else if(selected == "防城港支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
return 0;
}else if(selected == "钦州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"25号"}))
return 9;
}else if(selected == "贵港支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"19号"}))
return 10;
}else if(selected == "玉林支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"27号"}))
return 1;
}else if(selected == "百色支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
return 8;
}else if(selected == "贺州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"24号"}))
return 2;
}else if(selected == "河池支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
return 5;
}else if(selected == "来宾支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"23号"}))
return 6;
}else if(selected == "崇左支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"17号"}))
return 4;
}
}
});
var machine6 = $("#machine6").slotMachine({
active : 1,
delay : 500,
randomize : function(activeElementIndex){
if(selected == "南宁支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"21号"}))
return 6;
}else if(selected == "柳州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"26号"}))
return 11;
}else if(selected == "桂林支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"15号"}))
return 0;
}else if(selected == "梧州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
return 13;
}else if(selected == "北海支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"22号"}))
return 7;
}else if(selected == "防城港支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
return 1;
}else if(selected == "钦州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"25号"}))
return 10;
}else if(selected == "贵港支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"19号"}))
return 4;
}else if(selected == "玉林支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"27号"}))
return 12;
}else if(selected == "百色支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
return 5;
}else if(selected == "贺州支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"24号"}))
return 9;
}else if(selected == "河池支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
return 3;
}else if(selected == "来宾支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"23号"}))
return 8;
}else if(selected == "崇左支队"){
localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"17号"}))
return 2;
}
}
});
var data = [
{'南宁支队':'8号21号'},
{'柳州支队':'12号26号'},
{'桂林支队':'14号15号'},
{'梧州支队':'13号28号'},
{'北海支队':'4号22号'},
{'防城港支队':'1号16号'},
{'钦州支队':'10号25号'},
{'贵港支队':'11号19号'},
{'玉林支队':'2号27号'},
{'百色支队':'9号20号'},
{'贺州支队':'3号24号'},
{'河池支队':'6号18号'},
{'来宾支队':'7号23号'},
{'崇左支队':'5号17号'}
]
$("#slotMachineButtonShuffle2").click(function(){
if(!selected){
alert("请先选择单位")
}else{
machine.shuffle();
machine6.shuffle();
$("#slotMachineButtonShuffle2").addClass("disabled");
setTimeout(() => {
machine.stop();
machine6.stop();
setTimeout(() => {
$("#endjieguo2 span").eq(selectedIndex).html(data[selectedIndex - 1][selected])
$("#chooseZhi2 .img").eq(selectedIndex - 1).css("display","inline-block");
}, 1300);
}, 1000);
}
});
//左侧表格点击事件
$("span[name='bbb']").on("click",function(e,index){
selected = $(this)[0].innerText
selectedtime = $(this)[0].innerText + 'seatnumber'
selectedIndex = localStorage.getItem("indexNum")
console.log(456,selected,selectedIndex)
if($("#endjieguo2 span").eq(selectedIndex)[0].innerText){
$("#slotMachineButtonShuffle2").addClass("disabled");
}else{
$("#slotMachineButtonShuffle2").removeClass("disabled");
}
})
});

1
src/styles.scss

@ -5,6 +5,7 @@ html,body{
height: 100%;
margin:0 auto;
padding:0;
overflow: hidden;
}
ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{
margin:0;

Loading…
Cancel
Save