chenjingyu
5 years ago
7 changed files with 223 additions and 5 deletions
@ -0,0 +1,55 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-25 08:48:50 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-07 15:47:54 |
||||
--> |
||||
<html> |
||||
<meta charset="utf-8"/> |
||||
<body> |
||||
<div class="mainbox"> |
||||
<div class="colum"> |
||||
<div class="centerLeft" > |
||||
<div class="tanCenterbtn" id="chooseZhi"> |
||||
<span 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}}<mat-icon style="display: none;">done</mat-icon></span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft"> |
||||
<div class="tanCenterbtn" id="endjieguo"> |
||||
<span style="text-align: center;">抽签结果:</span> |
||||
<span *ngFor="let item of choujiang; let key=index" ></span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="con1" class="colum" style="padding-left: 18%;margin-top: 10%;"> |
||||
<div class="banner" name="banner" id="zhuanpan"> |
||||
<div class="turnplate" style="background-image:url(../../../assets/images/turnplate-bg.png);background-size:100% 100%;"> |
||||
<canvas class="item" id="wheelcanvas" width="422px" height="422px" ></canvas> |
||||
<img class="pointer" src="../../../assets/images/turnplate-pointer.png" id="clickButton" disabled/> |
||||
</div> |
||||
</div> |
||||
<div><button>重置</button></div> |
||||
</div> |
||||
|
||||
|
||||
<!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end"> |
||||
<span id="jieguo" ></span> |
||||
</div> --> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,88 @@
|
||||
|
||||
html, body { |
||||
height: 100%; |
||||
} |
||||
|
||||
.mainbox { |
||||
width: 95%; |
||||
height: 95%; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
|
||||
} |
||||
|
||||
.centerLeft{ |
||||
float: left; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtn{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border: 1px solid #30bbec; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
z-index:99; |
||||
width: 350px; |
||||
height: 50px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #30bbec; |
||||
padding: 8px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.colum{ |
||||
height: 85%; |
||||
//width: 100%; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align: center; |
||||
span{ |
||||
font-size: 24px; |
||||
|
||||
//padding-top: 50%; |
||||
} |
||||
} |
||||
.stop{ |
||||
pointer-events: none; |
||||
} |
||||
|
||||
|
||||
//选择后加背景色 |
||||
.beijicolor{ |
||||
background-color: #F7BA2A ; |
||||
} |
||||
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%;} |
||||
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} |
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ResetComponent } from './reset.component'; |
||||
|
||||
describe('ResetComponent', () => { |
||||
let component: ResetComponent; |
||||
let fixture: ComponentFixture<ResetComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ResetComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ResetComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,46 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: sueRimn |
||||
* @Date: 2020-10-07 15:38:37 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-07 15:39:34 |
||||
*/ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-reset', |
||||
templateUrl: './reset.component.html', |
||||
styleUrls: ['./reset.component.scss'] |
||||
}) |
||||
export class ResetComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
//支队数据和是否抽奖
|
||||
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} |
||||
] |
||||
//选中支队
|
||||
chooseid=-1 |
||||
chosseZhidui(key){ |
||||
this.chooseid=key |
||||
} |
||||
|
||||
} |
||||
Loading…
Reference in new issue