Browse Source

[抽签]添加序号

master
chenjingyu 4 years ago
parent
commit
95d3a572ee
  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

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

56
src/app/ui/luck-draw/luck-draw.component.scss

@ -1,7 +1,9 @@
html, body {
width: 100%;
height: 100%;
background-image: url("../../../assets/images/backgroud.png");
background-size: 100%;
//background-size: 99% 99%;
}
.head{
@ -13,6 +15,13 @@
width: 100%;
height: 100%;
}
.ziti{
position: relative;
bottom: 70%;
left: 40%;
width: 20%;
height: 53%;
}
span{
position: relative;
bottom: 70%;
@ -36,7 +45,7 @@
}
.centerLeft{
background-color: aliceblue;
background-color: #FFF;
float: left;
height: 100%;
width: 100%;
@ -56,10 +65,47 @@ 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: 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;
border-bottom:1px solid #ECEDEE;
padding:8px 24px ;
@ -69,7 +115,7 @@ span{
}
}
.colum{
height: 85%;
height: 90%;
width: 350px;
margin-top: 72px;
display:table-cell;
@ -95,7 +141,7 @@ span{
background-color:transparent;
border-radius: 4px;
border: 1px solid #ECEDEE;
color: white;
color: #FFF;
padding: 12px 32px;
text-align: center;
text-decoration: none;
@ -134,6 +180,6 @@ span{
}
.banner .turnplate{display:block;width:100%;position:relative;}
.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

@ -4,7 +4,7 @@
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-09-27 14:58:42
* @LastEditTime: 2020-10-13 15:49:22
*/
import { Component, OnInit } from '@angular/core';
//import * from '../../../assets/js/awardRotate'
@ -27,20 +27,20 @@ export class LuckDrawComponent 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:"南宁支队",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

14
src/app/ui/reset/reset.component.html

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

52
src/app/ui/reset/reset.component.scss

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

@ -4,7 +4,7 @@
* @Author: sueRimn
* @Date: 2020-10-07 15:38:37
* @LastEditors: sueRimn
* @LastEditTime: 2020-10-07 15:39:34
* @LastEditTime: 2020-10-14 09:17:22
*/
import { Component, OnInit } from '@angular/core';
@ -22,20 +22,20 @@ export class ResetComponent 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:"南宁支队",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

BIN
src/assets/images/tophead.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

1947
src/assets/js/zhuanpan.js

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