nzdrtrt
/
Luck-Draw
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[转盘]样式修改

master
chenjingyu 5 years ago
parent
0a8be66018
commit
ceaaeabc10
10 changed files with 739 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      src/app/ui/luck-draw/luck-draw.component.html
  2. 81
      src/app/ui/luck-draw/luck-draw.component.scss
  3. 17
      src/app/ui/reset/reset.component.html
  4. 58
      src/app/ui/reset/reset.component.scss
  5. BIN
      src/assets/images/aaa.png
  6. BIN
      src/assets/images/ceshi.png
  7. BIN
      src/assets/images/dui.png
  8. BIN
      src/assets/images/head.png
  9. BIN
      src/assets/images/zhuanbei.png
  10. 725
      src/assets/js/zhuanpan.js

32
src/app/ui/luck-draw/luck-draw.component.html
Unescape View File

@ -4,44 +4,41 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-25 08:48:50 * @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-10-07 09:54:29 * @LastEditTime: 2020-10-10 16:05:16
--> -->
<html> <html>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<body> <body >
<div class="head">
<img src="../../../assets/images/head.png">
<span>指挥员能力考评抽签</span>
</div>
<div class="mainbox"> <div class="mainbox">
<div class="colum"> <div class="colum" style="margin-left: 10%;">
<div class="centerLeft" > <div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi"> <div class="tanCenterbtn" id="chooseZhi">
<span name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> <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}}<mat-icon style="display: none;">done</mat-icon></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>
</div> </div>
</div> </div>
</div> </div>
<div class="colum"> <div class="colum">
<div class="centerLeft"> <div class="centerLeft">
<div class="tanCenterbtn" id="endjieguo"> <div class="tanCenterbtn" id="endjieguo">
<span style="text-align: center;">抽签结果:</span> <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" ></span>
</div> </div>
</div> </div>
</div> </div>
<div id="con1" class="colum" style="padding-left: 18%;margin-top: 10%;"> <div id="con1" class="zhuan" >
<!-- <div class="turntable-wrap">
<div class="light" id="turntable_light"></div>
<div class="turntable" id="turntable">
<ul class="bg" id="turntable_bg"></ul>
<ul class="gift" id="turntable_gift"></ul>
</div>
<div class="pointer disabled" id="turntable_pointer">点击抽奖</div>
</div> -->
<div class="banner" name="banner" id="zhuanpan"> <div class="banner" name="banner" id="zhuanpan">
<div class="turnplate" style="background-image:url(../../../assets/images/turnplate-bg.png);background-size:100% 100%;"> <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> <canvas class="item" id="wheelcanvas" width="422px" height="422px" ></canvas>
<img class="pointer" src="../../../assets/images/turnplate-pointer.png" id="clickButton" disabled/> <img class="pointer" src="../../../assets/images/turnplate-pointer.png" id="clickButton" disabled/>
</div> </div>
</div> </div>
</div> </div>
@ -59,3 +56,4 @@

81
src/app/ui/luck-draw/luck-draw.component.scss
Unescape View File

@ -1,17 +1,42 @@
html, body { html, body {
height: 100%; height: 100%;
background-image: url("../../../assets/images/backgroud.png");
//background-size: 99% 99%;
}
.head{
width: 100%;
height: 50px;
/* background-image: url("../../../assets/images/head.png");
width: 50%; */
img{
width: 100%;
height: 100%;
}
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 { .mainbox {
width: 95%; width: 99%;
height: 95%; height: 90%;
padding: 0.125rem 0.125rem 0; padding: 0.125rem 0.125rem 0;
display: flex; display: flex;
/* background-attachment: fixed;
background-repeat:no-repeat; */
} }
.centerLeft{ .centerLeft{
background-color: aliceblue;
float: left; float: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -23,20 +48,21 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0 0; margin: 0 0;
.tanCenterbtn{ .tanCenterbtn{
width: 100%; width: 350px;
height: 100%; height: 100%;
border: 1px solid #30bbec; border: 1px solid #ECEDEE;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
user-select: none; user-select: none;
background-size:100% 100%; background-size:100% 100%;
span{ span{
color: #000;
z-index:99; z-index:99;
width: 350px; width: 300px;
height: 50px; height: 50px;
cursor:pointer; cursor:pointer;
border-bottom:1px solid #30bbec; border-bottom:1px solid #ECEDEE;
padding: 8px ; padding:8px 24px ;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
} }
@ -44,7 +70,8 @@ span{
} }
.colum{ .colum{
height: 85%; height: 85%;
//width: 100%; width: 350px;
margin-top: 52px;
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
text-align: center; text-align: center;
@ -54,14 +81,38 @@ span{
//padding-top: 50%; //padding-top: 50%;
} }
} }
.zhuan{
width: 500px;
margin-left: 160px;
margin-top: 10%;
}
.stop{ .stop{
pointer-events: none; pointer-events: none;
} }
.button {
height: 48px;
width: 130px;
background-color:transparent;
border-radius: 4px;
border: 1px solid #ECEDEE;
color: white;
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{ .beijicolor{
background-color: #F7BA2A ; 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,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"} body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
@ -73,16 +124,16 @@ span{
.clear{clear:both;} .clear{clear:both;}
/* 大转盘样式 */ /* 大转盘样式 */
.banner{max-height: 650px; .banner{//max-height: 650px;
display: block; display: block;
width: 95%; width: 95%;
max-width: 650px; //max-width: 650px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 20px; margin-bottom: 20px;
} }
.banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;} .banner .turnplate canvas.item{width:100%;height: 100%;}
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:25%;}

17
src/app/ui/reset/reset.component.html
Unescape View File

@ -4,33 +4,34 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-25 08:48:50 * @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-10-09 17:18:07 * @LastEditTime: 2020-10-10 16:10:36
--> -->
<html> <html>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<body > <body >
<div class="head"> <div class="head">
<img src="../../../assets/images/head.jpg"> <img src="../../../assets/images/head.png">
<span>指挥员能力考评抽签</span>
</div> </div>
<div class="mainbox"> <div class="mainbox">
<div class="colum"> <div class="colum" style="margin-left: 10%;">
<div class="centerLeft" > <div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi"> <div class="tanCenterbtn" id="chooseZhi">
<span name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> <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}}<mat-icon style="display: none;">done</mat-icon></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>
</div> </div>
</div> </div>
</div> </div>
<div class="colum"> <div class="colum">
<div class="centerLeft"> <div class="centerLeft">
<div class="tanCenterbtn" id="endjieguo"> <div class="tanCenterbtn" id="endjieguo">
<span style="text-align: center;">抽签结果:</span> <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" ></span>
</div> </div>
</div> </div>
</div> </div>
<div id="con1" class="colum" style=""> <div id="con1" class="zhuan" >
<div class="banner" name="banner" id="zhuanpan"> <div class="banner" name="banner" id="zhuanpan">
<div class="turnplate" style="background-image:url(../../../assets/images/turnplate-bg.png);background-size:100% 100%;"> <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> <canvas class="item" id="wheelcanvas" width="422px" height="422px" ></canvas>
@ -39,7 +40,7 @@
</div> </div>
</div> </div>
<div style="height: 100%;"><button id="Reset" class="button">重置</button></div> <div class="chongzhi" style="height: 20%;"><button id="Reset" class="button">重置</button></div>
<!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end"> <!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end">

58
src/app/ui/reset/reset.component.scss
Unescape View File

@ -7,6 +7,23 @@
.head{ .head{
width: 100%; width: 100%;
height: 50px; height: 50px;
/* background-image: url("../../../assets/images/head.png");
width: 50%; */
img{
width: 100%;
height: 100%;
}
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 { .mainbox {
width: 99%; width: 99%;
@ -19,6 +36,7 @@
} }
.centerLeft{ .centerLeft{
background-color: aliceblue;
float: left; float: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -30,9 +48,9 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0 0; margin: 0 0;
.tanCenterbtn{ .tanCenterbtn{
width: 100%; width: 350px;
height: 100%; height: 100%;
border: 1px solid #30bbec; border: 1px solid #ECEDEE;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
user-select: none; user-select: none;
@ -40,11 +58,11 @@ background-size:100% 100%;
span{ span{
color: #000; color: #000;
z-index:99; z-index:99;
width: 350px; width: 300px;
height: 50px; height: 50px;
cursor:pointer; cursor:pointer;
border-bottom:1px solid #30bbec; border-bottom:1px solid #ECEDEE;
padding: 8px ; padding:8px 24px ;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
} }
@ -52,7 +70,8 @@ span{
} }
.colum{ .colum{
height: 85%; height: 85%;
//width: 100%; width: 350px;
margin-top: 52px;
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
text-align: center; text-align: center;
@ -62,15 +81,22 @@ span{
//padding-top: 50%; //padding-top: 50%;
} }
} }
.zhuan{
width: 500px;
margin-left: 160px;
margin-top: 10%;
}
.stop{ .stop{
pointer-events: none; pointer-events: none;
} }
.button { .button {
height: 48px;
width: 130px;
background-color:transparent;
border-radius: 4px; border-radius: 4px;
background-color: #4CAF50; /* Green */ border: 1px solid #ECEDEE;
border: none;
color: white; color: white;
padding: 15px 32px; padding: 12px 32px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
@ -78,7 +104,11 @@ span{
margin: 4px 2px; margin: 4px 2px;
cursor: pointer; cursor: pointer;
} }
.chongzhi{
position: relative;
top: 85%;
right: 17%;
}
//选择后加背景色 //选择后加背景色
.beijicolor{ .beijicolor{
@ -94,16 +124,16 @@ span{
.clear{clear:both;} .clear{clear:both;}
/* 大转盘样式 */ /* 大转盘样式 */
.banner{max-height: 650px; .banner{//max-height: 650px;
display: block; display: block;
width: 95%; width: 95%;
max-width: 650px; //max-width: 650px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 20px; margin-bottom: 20px;
} }
.banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;} .banner .turnplate canvas.item{width:100%;height: 100%;}
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:25%;}

BIN
src/assets/images/aaa.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/assets/images/ceshi.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
src/assets/images/dui.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/head.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/zhuanbei.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

725
src/assets/js/zhuanpan.js
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save