From 6e63bf2abc029cfdd13f63979decdfdba7ec0641 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Sun, 18 Oct 2020 08:27:39 +0800 Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=E8=80=81=E8=99=8E=E6=9C=BA?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 23 +- .../ui/first-step/first-step.component.html | 60 ++-- .../ui/first-step/first-step.component.scss | 14 +- src/app/ui/first-step/first-step.component.ts | 55 ++-- src/app/ui/four-step/four-step.component.html | 77 ++++++ src/app/ui/four-step/four-step.component.scss | 183 +++++++++++++ .../ui/four-step/four-step.component.spec.ts | 25 ++ src/app/ui/four-step/four-step.component.ts | 80 ++++++ src/app/ui/ui.module.ts | 3 +- src/assets/css/laohujistyle.css | 256 ++---------------- src/assets/js/firststep.js | 87 +++++- src/assets/js/firststep2.js | 151 +++++++++++ src/styles.scss | 1 + 13 files changed, 687 insertions(+), 328 deletions(-) create mode 100644 src/app/ui/four-step/four-step.component.html create mode 100644 src/app/ui/four-step/four-step.component.scss create mode 100644 src/app/ui/four-step/four-step.component.spec.ts create mode 100644 src/app/ui/four-step/four-step.component.ts create mode 100644 src/assets/js/firststep2.js diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5c11a89..83fbfb3 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/ui/first-step/first-step.component.html b/src/app/ui/first-step/first-step.component.html index 0ccd603..3bf796e 100644 --- a/src/app/ui/first-step/first-step.component.html +++ b/src/app/ui/first-step/first-step.component.html @@ -6,10 +6,8 @@ * @LastEditors: sueRimn * @LastEditTime: 2020-10-14 09:08:17 --> - - - -
+
+
@@ -23,63 +21,53 @@
--> -
+
请选择支队 - {{item.name}} + {{item.name}} + +
- 抽签结果: - + 抽签结果: + {{item.result}}
-
+
-

Feel free to build your oun casino!

- -
-
-
-
博山区
-
张店区
-
周村区
-
淄川区
+
+
+
+ {{isDraw ? '已抽签' : '开始抽签'}} +
+
{{item.name}}
- +
-
-
Shuffle!
-
Stop!
+
+
开始抽签
+
-
- - - - -
+ +
+
- - - - - - diff --git a/src/app/ui/first-step/first-step.component.scss b/src/app/ui/first-step/first-step.component.scss index d024bfe..dee0242 100644 --- a/src/app/ui/first-step/first-step.component.scss +++ b/src/app/ui/first-step/first-step.component.scss @@ -1,16 +1,17 @@ - html, body { - width: 100%; + + @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{ diff --git a/src/app/ui/first-step/first-step.component.ts b/src/app/ui/first-step/first-step.component.ts index 821bdc7..37c1e9f 100644 --- a/src/app/ui/first-step/first-step.component.ts +++ b/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={ diff --git a/src/app/ui/four-step/four-step.component.html b/src/app/ui/four-step/four-step.component.html new file mode 100644 index 0000000..40967bc --- /dev/null +++ b/src/app/ui/four-step/four-step.component.html @@ -0,0 +1,77 @@ + +
+
+ + + +
+
+ +
+
+
+ 请选择支队 + {{item.name}} + + +
+
+
+
+
+
+ 抽签结果: + {{item.result.zhi}}{{item.result.fuzhi}} +
+
+
+ +
+ +
+ +
+
+ +
{{item.name}}
+
+
+
{{item.name}}
+
+ +
+ +
+ +
+
开始抽签
+ +
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/src/app/ui/four-step/four-step.component.scss b/src/app/ui/four-step/four-step.component.scss new file mode 100644 index 0000000..85b9fd4 --- /dev/null +++ b/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%;} + + \ No newline at end of file diff --git a/src/app/ui/four-step/four-step.component.spec.ts b/src/app/ui/four-step/four-step.component.spec.ts new file mode 100644 index 0000000..ad67d40 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FourStepComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FourStepComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui/four-step/four-step.component.ts b/src/app/ui/four-step/four-step.component.ts new file mode 100644 index 0000000..a3f2614 --- /dev/null +++ b/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 + } + } + +} diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index b7c5d42..bafb788 100644 --- a/src/app/ui/ui.module.ts +++ b/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, diff --git a/src/assets/css/laohujistyle.css b/src/assets/css/laohujistyle.css index ade2d74..8128335 100644 --- a/src/assets/css/laohujistyle.css +++ b/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; } \ No newline at end of file diff --git a/src/assets/js/firststep.js b/src/assets/js/firststep.js index 438d873..bdb836a 100644 --- a/src/assets/js/firststep.js +++ b/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(){ - machine.shuffle(); - $("#slotMachineButtonShuffle").addClass("xxx"); - setTimeout(() => { - index ++ - machine.stop(); - $("#slotMachineButtonShuffle").removeClass("xxx"); - }, 1000); - }); - - // $("#slotMachineButtonStop").click(function(){ + if(!selected){ + alert("请先选择单位") + }else{ + machine.shuffle(); + $("#slotMachineButtonShuffle").addClass("disabled"); + setTimeout(() => { + machine.stop(); + // $("#slotMachineButtonShuffle").removeClass("disabled"); + setTimeout(() => { + $("#endjieguo span").eq(selectedIndex).html(window.localStorage[selected]) + $("#chooseZhi .img").eq(selectedIndex - 1).css("display","inline-block"); + }, 1300); + }, 1000); + } - // }); + }); + + //左侧表格点击事件 + $("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"); + } + }) }); \ No newline at end of file diff --git a/src/assets/js/firststep2.js b/src/assets/js/firststep2.js new file mode 100644 index 0000000..61bad39 --- /dev/null +++ b/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"); + } + }) +}); \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 33b023e..a65541a 100644 --- a/src/styles.scss +++ b/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;