change canvas to dom

meitu/css/main.css

@@ -203,7 +203,7 @@ html body {
 	z-index: 10012;
 	background-color: #FFF;
 	opacity: 0.9;
-	display:none;
+	display: none;
 }
 .speed_dash_container {
 	width: 100px;
@@ -220,36 +220,30 @@ html body {
 	margin-left: auto;
 	margin-right: auto;
 }
-
-.speed_lable{
-	margin-top:-6px;
-	color:#999;
+.speed_lable {
+	margin-top: -6px;
+	color: #999;
 }
-
-.speed_data{
+.speed_data {
 	clear: both;
-	width:100%;
-	height:70px;
-	color:#999999;
+	width: 100%;
+	height: 70px;
+	color: #999999;
 }
-.speed_data>div{
-	height:20px;
+.speed_data>div {
+	height: 20px;
 }
-
-.speed_title_strong{
-	color:#0091FF;
-	font-size:13px;
+.speed_title_strong {
+	color: #0091FF;
+	font-size: 13px;
 	font-style: italic;
 }
-
-.speed_l{
+.speed_l {
 	margin-left: 10px;
 }
-
-.speed_r{
+.speed_r {
 	width: 100px;
 }
-
 /*-----------------router----------------------------**/
 
 .router {
@@ -268,6 +262,41 @@ html body {
 	-o-transform: translateZ(0);
 	transform: translateZ(0);
 }
+.router_line {
+	width: 2px;
+	height: 200px;
+	background-color: #E82D00;
+	margin-left: 33px;
+	margin-top: 10px;
+	FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#E82D00, endColorStr=#FFAE01);
+	/* IE 10 */
+	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_circle{
+	width:10px;
+	height:10px;
+	background-color:#00C348;
+	border-radius:5px;
+	margin-left:2px;
+	margin-top:5px;
+}
+
 /*-----------------SN_info--------------------------------*/
 
 .SN_info {
@@ -338,17 +367,14 @@ 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_container {
+	position: absolute;
+	min-width: 100px;
+	min-height: 100px;
+	left: 50%;
+	margin-left: -60px;
+	bottom: 140px;
+	z-index: 10090;
+}

meitu/index.html

@@ -165,7 +165,20 @@
 		</div>-->
 		<!--路线图-->
 		<div class="router sh">
-			<canvas id="router_canvas"></canvas>
+			<!--<canvas id="router_canvas"></canvas>-->
+			<div class="router_line"></div>
+			<script type="text/template" id="tpl_router">
+				<% for (var i in items){%>
+					<%
+						var top = 10 + parseInt(i) * 22;
+					%>
+					<div class="router_span" style="top:<%=top%>px;">
+						<div class="fl"><%=items[i].content%></div>
+						<div class="fl router_circle"></div>
+					</div>
+				<%}%>
+			</script>
+			<div id="ROUTER_TPL"></div>
 		</div>
 		<!--信息窗-->
 		<div class="SN_info">

meitu/js/home/router.js

@@ -3,39 +3,50 @@ define('home/router', function(require, exports, module) {
 
 	var $ = require('lib/zepto');
 	var router = require('common/data').router[0];
-	var canvas = $('#router_canvas')[0];
-	var ctx = canvas.getContext('2d');
+	var wrapper = $('#ROUTER_TPL');
+  	var tpl = $('#tpl_router').html();
+  	
+  	var data = {
+  		items: router
+  	};
+  	
+  	console.log(data.items);
+  	var html = _.template(tpl)(data);
+  	wrapper.html(html);
 	
-	canvas.width = 45;
-	canvas.height = 220;
-	canvas.style.width = 45;
-	canvas.style.height = 220;
-	
-	//line
-	ctx.beginPath();
-	var gradient = ctx.createLinearGradient(35, 5, 20, 215);
-    gradient.addColorStop(0, 'red');
-    gradient.addColorStop(1, 'yellow');
-	ctx.lineWidth = '2';
-	ctx.strokeStyle = gradient;
-	ctx.moveTo(35, 5);
-	ctx.lineTo(35, 215);
-	ctx.closePath();
-	ctx.stroke();
+//	var canvas = $('#router_canvas')[0];
+//	var ctx = canvas.getContext('2d');
+//	
+//	canvas.width = 45;
+//	canvas.height = 220;
+//	canvas.style.width = 45;
+//	canvas.style.height = 220;
+//	
+//	//line
+//	ctx.beginPath();
+//	var gradient = ctx.createLinearGradient(35, 5, 20, 215);
+//  gradient.addColorStop(0, 'red');
+//  gradient.addColorStop(1, 'yellow');
+//	ctx.lineWidth = '2';
+//	ctx.strokeStyle = gradient;
+//	ctx.moveTo(35, 5);
+//	ctx.lineTo(35, 215);
+//	ctx.closePath();
+//	ctx.stroke();
 	
 	//circle
-	for(var i = 0; i < router.length; i++){
-		ctx.beginPath();
-		ctx.fillStyle = '#159AFE';
-        ctx.arc(35, 25 + i * 25, 5, 0, Math.PI*2, true);
-        ctx.closePath();
-        ctx.fill();
-        
-        ctx.beginPath();
-        ctx.fillStyle = '#000';
-        ctx.fillText(router[i].content, 2, 25 + 3 + i * 25);
-        ctx.closePath();
-        ctx.fill();
-	}
+//	for(var i = 0; i < router.length; i++){
+//		ctx.beginPath();
+//		ctx.fillStyle = '#159AFE';
+//      ctx.arc(35, 25 + i * 25, 5, 0, Math.PI*2, true);
+//      ctx.closePath();
+//      ctx.fill();
+//      
+//      ctx.beginPath();
+//      ctx.fillStyle = '#000';
+//      ctx.fillText(router[i].content, 2, 25 + 3 + i * 25);
+//      ctx.closePath();
+//      ctx.fill();
+//	}
 	
 });