add canvas

meitu/css/main.css

@@ -137,7 +137,7 @@ html body {
 	margin-right: auto;
 }
 .tools_items>div:last-child {
-	margin-top: -2px;
+	margin-top: -1px;
 }
 .tools_items i {
 	font-size: 18px;
@@ -197,8 +197,8 @@ html body {
 	position:absolute;
 	left:10px;
 	top:120px;
-	width:40px;
-	min-height:200px;
+	width:45px;
+	min-height:220px;
 	background-color:#fff;
 	opacity:0.8;
 	

meitu/index.html

@@ -81,7 +81,7 @@
         			<div>
         				<i class="fa fa-refresh" style="color:#999999;"></i>
         			</div>
-        			<div>刷新</div>
+        			<div onclick="(function(){location.reload();return false;})()">刷新</div>
         		</div>
         </div>
         <!--仪表盘-->

meitu/js/home/router.js

@@ -2,29 +2,36 @@
 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');
 	
-	canvas.width = 40;
-	canvas.height = 200;
+	canvas.width = 45;
+	canvas.height = 220;
 	
 	//line
 	ctx.beginPath();
-	var gradient = ctx.createLinearGradient(20, 5, 20, 195);
+	var gradient = ctx.createLinearGradient(35, 5, 20, 215);
     gradient.addColorStop(0, 'red');
     gradient.addColorStop(1, 'yellow');
 	ctx.lineWidth = '2';
 	ctx.strokeStyle = gradient;
-	ctx.moveTo(20, 5);
-	ctx.lineTo(20, 195);
+	ctx.moveTo(35, 5);
+	ctx.lineTo(35, 215);
 	ctx.closePath();
 	ctx.stroke();
 	
 	//circle
-	for(var i = 0; i < 7; i++){
+	for(var i = 0; i < router.length; i++){
 		ctx.beginPath();
 		ctx.fillStyle = '#0091FF';
-        ctx.arc(20, 25 + i * 25, 5, 0, Math.PI*2, true);
+        ctx.arc(35, 25 + i * 25, 5, 0, Math.PI*2, true);
+        ctx.closePath();
+        ctx.fill();
+        
+        ctx.beginPath();
+        ctx.fillStyle = '#4C4C4C';
+        ctx.fillText(router[i].content, 2, 25 + 5 + i * 25);
         ctx.closePath();
         ctx.fill();
 	}