[转盘]ui设计

4 years ago · 0a8be66018
7 changed files with 19 additions and 8 deletions
--- a/src/app/ui/reset/reset.component.html
+++ b/src/app/ui/reset/reset.component.html
@ -4,11 +4,14 @@
 * @Author: sueRimn
 * @Date: 2020-09-25 08:48:50
 * @LastEditors: sueRimn
- * @LastEditTime: 2020-10-09 14:28:40
+ * @LastEditTime: 2020-10-09 17:18:07
 -->
 <html>
 	<meta charset="utf-8"/>
-	<body>
+	<body >
+		<div class="head">
+			<img src="../../../assets/images/head.jpg">
+		</div>
 		<div class="mainbox">
 			<div class="colum">
 				<div class="centerLeft" >
@ -27,7 +30,7 @@
 				</div>
 			</div>
 			
-			<div id="con1" class="colum" style="padding-left: 18%;margin-top: 10%;">
+			<div id="con1" class="colum" style="">
 				  <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>
@ -36,7 +39,7 @@
 				</div>
 				
 			</div>
-			<div><button id="Reset" class="button">重置</button></div>
+			<div style="height: 100%;"><button id="Reset" class="button">重置</button></div>
 				
 			
 			<!-- <div class="colum" style="display: none;padding-left: 10%;margin-top: 20%;" id="end">
--- a/src/app/ui/reset/reset.component.scss
+++ b/src/app/ui/reset/reset.component.scss
@ -1,14 +1,21 @@

  html, body {
 	height: 100%;
+	background-image: url("../../../assets/images/backgroud.png");
+	//background-size: 99% 99%;
+  }
+  .head{
+	  width: 100%;
+	  height: 50px;
  }
-  
  .mainbox {
-	width: 95%;
-	height: 95%;
+	width: 99%;
+	height: 90%;
 	padding: 0.125rem 0.125rem 0;
 	display: flex;
 	
+	/* background-attachment: fixed;
+	background-repeat:no-repeat; */
  }
  
  .centerLeft{
@ -31,6 +38,7 @@ flex-direction: column;
 user-select: none;
 background-size:100% 100%;
 span{
+	color: #000;
 	z-index:99;
 	width: 350px;
 	height: 50px;
@ -74,7 +82,7 @@ span{

 //选择后加背景色
 .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{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
--- a/src/assets/images/backgroud.png
+++ b/src/assets/images/backgroud.png
--- a/src/assets/images/head.jpg
+++ b/src/assets/images/head.jpg
--- a/src/assets/images/turnplate-bg.png
+++ b/src/assets/images/turnplate-bg.png
--- a/src/assets/images/turnplate-pointer-hui.png
+++ b/src/assets/images/turnplate-pointer-hui.png
--- a/src/assets/images/turnplate-pointer.png
+++ b/src/assets/images/turnplate-pointer.png