Luck-Draw/src/app/ui/luck-draw/luck-draw.component.scss

  html, body {
	  width: 100%;
	height: 100%;
	background-image: url("../../../assets/images/backgroud.png");
	background-size: 100%;
	//background-size: 99% 99%;
  }
  .head{
	  width: 100%;
	  height: 50px;
	 /*  background-image: url("../../../assets/images/head.png");
	  width: 50%; */
	  img{
		  width: 100%;
		  height: 100%;
	  }
	  .ziti{
		position: relative;
		bottom: 70%;
		left: 40%;
		width: 20%;
		height: 53%;
	  }
	  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 {
	width: 99%;
	height: 90%;
	padding: 0.125rem 0.125rem 0;
	display: flex;
	.title{
		position: absolute;
		left: 24%;
		top: 75px;
		color: white;
		font-size: 30px;
	  }
	/* background-attachment: fixed;
	background-repeat:no-repeat; */
  }
  
  .centerLeft{
	background-color: #FFF;
	float: left;
	height: 98%;
	width: 100%;
	position: relative;
	flex-direction: column;
    flex: 2%;
    display: flex;
    align-items:center;
    box-sizing: border-box;
   margin: 0 0;
.tanCenterbtn{
  width: 350px;
  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: 300px;
	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: 98%;
	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: 90%;
	width: 350px;
	margin-top: 72px;
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	span{
		font-size: 24px;
		
		//padding-top: 50%;
	}
}
.zhuan{
	width: 500px;
	margin-left: 160px;
	margin-top: 10%;
}
.stop{
	pointer-events: none; 
}
.button {
	height: 48px;
	width: 130px;
	background-color:transparent;
	border-radius: 4px;
    border: 1px solid #ECEDEE;
    color: #FFF;
    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{
	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{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%;height: 100%;}
	.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;}