diff --git a/meitu/css/main.css b/meitu/css/main.css index 13e1378..b64924c 100644 --- a/meitu/css/main.css +++ b/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; diff --git a/meitu/index.html b/meitu/index.html index 2fb0752..10034c5 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -81,7 +81,7 @@
-
刷新
+
刷新
diff --git a/meitu/js/home/router.js b/meitu/js/home/router.js index f09d0b1..2cad042 100644 --- a/meitu/js/home/router.js +++ b/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(); }