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

[抽签]添加序号

master
chenjingyu 4 years ago
parent
20ee60696f
commit
95d3a572ee
8 changed files with 593 additions and 1553 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. 17
      src/app/ui/luck-draw/luck-draw.component.html
  2. 56
      src/app/ui/luck-draw/luck-draw.component.scss
  3. 30
      src/app/ui/luck-draw/luck-draw.component.ts
  4. 14
      src/app/ui/reset/reset.component.html
  5. 52
      src/app/ui/reset/reset.component.scss
  6. 30
      src/app/ui/reset/reset.component.ts
  7. BIN
      src/assets/images/tophead.png
  8. 1947
      src/assets/js/zhuanpan.js

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

@ -4,17 +4,26 @@
* @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-10 17:05:45 * @LastEditTime: 2020-10-14 09:08:17
--> -->
<html> <html>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<body > <body>
<div class="head"> <div class="head">
<img src="../../../assets/images/head.png"> <img src="../../../assets/images/head.png">
<span>指挥员能力考评抽签</span> <!-- <span>指挥员能力考评抽签</span> -->
<img class="ziti" src="../../../assets/images/tophead.png">
</div> </div>
<div class="mainbox"> <div class="mainbox">
<div class="colum" style="margin-left: 13%;"> <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" >
<div class="centerLeft" > <div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi"> <div class="tanCenterbtn" id="chooseZhi">
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> <span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span>

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

@ -1,7 +1,9 @@
html, body { html, body {
width: 100%;
height: 100%; height: 100%;
background-image: url("../../../assets/images/backgroud.png"); background-image: url("../../../assets/images/backgroud.png");
background-size: 100%;
//background-size: 99% 99%; //background-size: 99% 99%;
} }
.head{ .head{
@ -13,6 +15,13 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.ziti{
position: relative;
bottom: 70%;
left: 40%;
width: 20%;
height: 53%;
}
span{ span{
position: relative; position: relative;
bottom: 70%; bottom: 70%;
@ -36,7 +45,7 @@
} }
.centerLeft{ .centerLeft{
background-color: aliceblue; background-color: #FFF;
float: left; float: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -56,10 +65,47 @@ flex-direction: column;
user-select: none; user-select: none;
background-size:100% 100%; background-size:100% 100%;
span{ span{
white-space: nowrap;
font-family: Arial;
color: #000; color: #000;
z-index:99; z-index:99;
width: 300px; width: 300px;
height: 50px; 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: 100%;
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; cursor:pointer;
border-bottom:1px solid #ECEDEE; border-bottom:1px solid #ECEDEE;
padding:8px 24px ; padding:8px 24px ;
@ -69,7 +115,7 @@ span{
} }
} }
.colum{ .colum{
height: 85%; height: 90%;
width: 350px; width: 350px;
margin-top: 72px; margin-top: 72px;
display:table-cell; display:table-cell;
@ -95,7 +141,7 @@ span{
background-color:transparent; background-color:transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ECEDEE; border: 1px solid #ECEDEE;
color: white; color: #FFF;
padding: 12px 32px; padding: 12px 32px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -134,6 +180,6 @@ span{
} }
.banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;height: 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:25%;} .banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;}

30
src/app/ui/luck-draw/luck-draw.component.ts
Unescape View File

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-09-25 08:48:50 * @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-09-27 14:58:42 * @LastEditTime: 2020-10-13 15:49:22
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
//import * from '../../../assets/js/awardRotate' //import * from '../../../assets/js/awardRotate'
@ -27,20 +27,20 @@ export class LuckDrawComponent implements OnInit {
} }
//支队数据和是否抽奖 //支队数据和是否抽奖
choujiang=[ choujiang=[
{name:"钦州支队",idnum:1}, {name:"南宁支队",idnum:1},
{name:"南宁支队",idnum:2}, {name:"柳州支队",idnum:2},
{name:"柳州支队",idnum:3}, {name:"桂林支队",idnum:3},
{name:"河池支队",idnum:4}, {name:"梧州支队",idnum:4},
{name:"来宾支队",idnum:5}, {name:"北海支队",idnum:5},
{name:"贺州支队",idnum:6}, {name:"防城港支队",idnum:6},
{name:"防城港支队",idnum:7}, {name:"钦州支队",idnum:7},
{name:"崇左支队",idnum:8}, {name:"贵港支队",idnum:8},
{name:"贵港支队",idnum:9}, {name:"玉林支队",idnum:9},
{name:"梧州支队",idnum:10}, {name:"百色支队",idnum:10},
{name:"百色支队",idnum:11}, {name:"贺州支队",idnum:11},
{name:"玉林支队",idnum:12}, {name:"河池支队",idnum:12},
{name:"北海支队",idnum:13}, {name:"来宾支队",idnum:13},
{name:"桂林支队",idnum:14} {name:"崇左支队",idnum:14}
] ]
//选中支队 //选中支队
chooseid=-1 chooseid=-1

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

@ -4,17 +4,25 @@
* @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-10 17:07:16 * @LastEditTime: 2020-10-14 09:10:58
--> -->
<html> <html>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<body > <body >
<div class="head"> <div class="head">
<img src="../../../assets/images/head.png"> <img src="../../../assets/images/head.png">
<span>指挥员能力考评抽签</span> <img class="ziti" src="../../../assets/images/tophead.png">
</div> </div>
<div class="mainbox"> <div class="mainbox">
<div class="colum" style="margin-left: 13%;"> <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" >
<div class="centerLeft" > <div class="centerLeft" >
<div class="tanCenterbtn" id="chooseZhi"> <div class="tanCenterbtn" id="chooseZhi">
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> <span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span>

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

@ -7,6 +7,13 @@
.head{ .head{
width: 100%; width: 100%;
height: 50px; height: 50px;
.ziti{
position: relative;
bottom: 70%;
left: 40%;
width: 20%;
height: 53%;
}
/* background-image: url("../../../assets/images/head.png"); /* background-image: url("../../../assets/images/head.png");
width: 50%; */ width: 50%; */
img{ img{
@ -36,7 +43,7 @@
} }
.centerLeft{ .centerLeft{
background-color: aliceblue; background-color: #FFF;
float: left; float: left;
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -56,6 +63,8 @@ flex-direction: column;
user-select: none; user-select: none;
background-size:100% 100%; background-size:100% 100%;
span{ span{
white-space: nowrap;
font-family: Arial;
color: #000; color: #000;
z-index:99; z-index:99;
width: 300px; width: 300px;
@ -68,8 +77,43 @@ span{
} }
} }
} }
.centerLefta{
background-color: #FFF;
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;
.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{ .colum{
height: 85%; height: 90%;
width: 350px; width: 350px;
margin-top: 72px; margin-top: 72px;
display:table-cell; display:table-cell;
@ -95,7 +139,7 @@ span{
background-color:transparent; background-color:transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ECEDEE; border: 1px solid #ECEDEE;
color: white; color: #FFF;
padding: 12px 32px; padding: 12px 32px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -134,6 +178,6 @@ span{
} }
.banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;height: 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:25%;} .banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;}

30
src/app/ui/reset/reset.component.ts
Unescape View File

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-10-07 15:38:37 * @Date: 2020-10-07 15:38:37
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-10-07 15:39:34 * @LastEditTime: 2020-10-14 09:17:22
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
@ -22,20 +22,20 @@ export class ResetComponent implements OnInit {
//支队数据和是否抽奖 //支队数据和是否抽奖
choujiang=[ choujiang=[
{name:"钦州支队",idnum:1}, {name:"南宁支队",idnum:1},
{name:"南宁支队",idnum:2}, {name:"柳州支队",idnum:2},
{name:"柳州支队",idnum:3}, {name:"桂林支队",idnum:3},
{name:"河池支队",idnum:4}, {name:"梧州支队",idnum:4},
{name:"来宾支队",idnum:5}, {name:"北海支队",idnum:5},
{name:"贺州支队",idnum:6}, {name:"防城港支队",idnum:6},
{name:"防城港支队",idnum:7}, {name:"钦州支队",idnum:7},
{name:"崇左支队",idnum:8}, {name:"贵港支队",idnum:8},
{name:"贵港支队",idnum:9}, {name:"玉林支队",idnum:9},
{name:"梧州支队",idnum:10}, {name:"百色支队",idnum:10},
{name:"百色支队",idnum:11}, {name:"贺州支队",idnum:11},
{name:"玉林支队",idnum:12}, {name:"河池支队",idnum:12},
{name:"北海支队",idnum:13}, {name:"来宾支队",idnum:13},
{name:"桂林支队",idnum:14} {name:"崇左支队",idnum:14}
] ]
//选中支队 //选中支队
chooseid=-1 chooseid=-1

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

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

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