change canvas to dom

meitu/css/main.css

@@ -141,7 +141,7 @@ html body {
 	margin-right: auto;
 }
 .tools_items>div:last-child {
-	margin-top: -1px;
+	margin-top: 1px;
 }
 .tools_items i {
 	margin-top: 3px;
@@ -228,15 +228,14 @@ html body {
 	clear: both;
 	width: 100%;
 	height: 70px;
-	color: #999999;
 }
 .speed_data>div {
 	height: 20px;
 }
 .speed_title_strong {
 	color: #0091FF;
-	font-size: 13px;
-	font-style: italic;
+	font-size: 15px;
+	/*font-style: italic;*/
 }
 .speed_l {
 	margin-left: 10px;
@@ -251,7 +250,7 @@ html body {
 	left: 10px;
 	top: 110px;
 	width: 45px;
-	min-height: 220px;
+	min-height: 190px;
 	background-color: #fff;
 	opacity: 0.8;
 }
@@ -264,39 +263,44 @@ html body {
 }
 .router_line {
 	width: 2px;
-	height: 200px;
+	height: 180px;
 	background-color: #E82D00;
 	margin-left: 33px;
-	margin-top: 10px;
+	margin-top: 6px;
 	FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#E82D00, endColorStr=#FFAE01);
 	/* IE 10 */
-	background: -ms-linear-gradient(top, #E82D00, #FFAE01 );
+	
+	background: -ms-linear-gradient(top, #E82D00, #FFAE01);
 	/*firefox*/
+	
 	background: -moz-linear-gradient(top, #E82D00, #FFAE01);
 	/*google*/
+	
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E82D00), to(#FFAE01));
 	/* Safari 4-5, Chrome 1-9*/
+	
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E82D00), to(#FFAE01));
 	/*Safari5.1 Chrome 10+*/
+	
 	background: -webkit-linear-gradient(top, #E82D00, #FFAE01);
 	/*Opera 11.10+*/
+	
 	background: -o-linear-gradient(top, #E82D00, #FFAE01);
 }
-.router_span{
-	position:absolute;
-	top:10px;
-	margin-left:3px;
+.router_span {
+	position: absolute;
+	top: 5px;
+	margin-left: 3px;
+	color: #363636;
 }
-
-.router_circle{
-	width:10px;
-	height:10px;
-	background-color:#00C348;
-	border-radius:5px;
-	margin-left:2px;
-	margin-top:5px;
+.router_circle {
+	width: 10px;
+	height: 10px;
+	background-color: #0091FF;
+	border-radius: 5px;
+	margin-left: 2px;
+	margin-top: 5px;
 }
-
 /*-----------------SN_info--------------------------------*/
 
 .SN_info {
@@ -367,14 +371,22 @@ html body {
 	font-size: 17px;
 	cursor: pointer;
 }
-/*天气预报*/
+/*---------------------天气预报---------------------*/
 
-.tianqi_container {
-	position: absolute;
-	min-width: 100px;
-	min-height: 100px;
-	left: 50%;
-	margin-left: -60px;
-	bottom: 140px;
-	z-index: 10090;
+.tianqi_div {
+	width: 100%;
+	height: 50px;
+	margin-top:30px;
+	text-align: center;
+}
+.tianqi_div img {
+	width: 50px;
+}
+.tianqi_div>div {
+	width: 33%;
+}
+.tianqi_div_du {
+	font-size: 20px;
+	line-height: 50px;
+	font-family: "AvenirNextCondensed-Medium", "AvenirNextLTW01-MediumC 721311", "Arial Narrow", Verdana, sans-serif;
 }

meitu/index.html

@@ -139,8 +139,8 @@
 						<span>模拟车速:</span><span>50,000 km/h</span>
 					</div>
 				</div>
-				<div>
-					<div style="margin-left:10px;width:100%;">
+				<div style="min-height:40px;">
+					<div style="margin-left:10px;width:100%;min-height:40px;">
 						<i class="fa fa-map-marker" style="color:#E82D00;"></i>
 						<span>
 	        					安徽省安庆市望江县长岭镇农信社1001号
@@ -148,8 +148,16 @@
 					</div>
 				</div>
 			</div>
-			<div>
-				
+			<div class="tianqi_div">
+				<div class="fl">
+					<img src="img/sun.png"/>
+				</div>
+				<div class="fl tianqi_div_du">
+					32°
+				</div>
+				<div class="fl tianqi_div_du" style="font-size:15px;">
+					西南风
+				</div>
 			</div>
 		</div>
 		
@@ -170,7 +178,7 @@
 			<script type="text/template" id="tpl_router">
 				<% for (var i in items){%>
 					<%
-						var top = 10 + parseInt(i) * 22;
+						var top = 5 + parseInt(i) * 22;
 					%>
 					<div class="router_span" style="top:<%=top%>px;">
 						<div class="fl"><%=items[i].content%></div>