diff --git a/meitu/css/main.css b/meitu/css/main.css index 5f53acc..13e1378 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: -4px; + margin-top: -2px; } .tools_items i { font-size: 18px; @@ -201,6 +201,12 @@ html body { min-height:200px; background-color:#fff; opacity:0.8; + + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); } diff --git a/meitu/index.html b/meitu/index.html index 374f0a7..2fb0752 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -1,14 +1,33 @@ - + + + + + + + + + + + + + + + + + + + 美途 + @@ -75,7 +94,7 @@
- +
diff --git a/meitu/js/home/router.js b/meitu/js/home/router.js new file mode 100644 index 0000000..f09d0b1 --- /dev/null +++ b/meitu/js/home/router.js @@ -0,0 +1,32 @@ +/*canvas绘制路线*/ +define('home/router', function(require, exports, module) { + + var $ = require('lib/zepto'); + var canvas = $('#router_canvas')[0]; + var ctx = canvas.getContext('2d'); + + canvas.width = 40; + canvas.height = 200; + + //line + ctx.beginPath(); + var gradient = ctx.createLinearGradient(20, 5, 20, 195); + gradient.addColorStop(0, 'red'); + gradient.addColorStop(1, 'yellow'); + ctx.lineWidth = '2'; + ctx.strokeStyle = gradient; + ctx.moveTo(20, 5); + ctx.lineTo(20, 195); + ctx.closePath(); + ctx.stroke(); + + //circle + for(var i = 0; i < 7; i++){ + ctx.beginPath(); + ctx.fillStyle = '#0091FF'; + ctx.arc(20, 25 + i * 25, 5, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fill(); + } + +}); \ No newline at end of file diff --git a/meitu/js/main.js b/meitu/js/main.js index 151967f..a6d1e0b 100644 --- a/meitu/js/main.js +++ b/meitu/js/main.js @@ -7,8 +7,9 @@ requirejs([ 'lib/zepto_pj', 'home/map', 'lib/underscore', - 'home/dashboard' + 'home/dashboard', + 'home/router' ], - function(zepto_pj, map, underscore) { + function(zepto_pj, map, underscore, router) { }); \ No newline at end of file