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