sprite icon name tolowercase

bichao.dong
1 parent a040139b
Showing 10 changed files with 309 additions and 39 deletions
2.0/index.html
Gruntfile.js
css/style/common.css
css/style/common.less
css/style/index.css
css/style/index.less
css/style/m/m_icon.css
css/style/m/one-border.css
css/style/m/one-border.less
css/style/m/sprite.less
@@ -7,7 +7,11 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>农丰网</title>
 	<!-- css -->
-	<link rel="stylesheet" type="text/css" href="../css/style/common.css">
+	<link rel="stylesheet" href="../css/style/common.css">
+
+	<!-- base seajs -->
+	<script src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script>
+	<script src="../js/javascript/common/config.js"></script>
 </head>
 <body>
 <!-- 主体 -->
@@ -39,7 +43,7 @@
 	    </div>
 	</div>
-	<ul class="menu">
+	<ul class="menu border-1px border-bottom">
 	    <li><a href="#"><i class="m-icon icon-pfsc"></i>批发市场</a></li>
 	    <li><a href="#"><i class="m-icon icon-cdzg"></i>产地直供</a></li>
 	    <li><a href="#"><i class="m-icon icon-tcls"></i>同城零售</a></li>
@@ -50,12 +54,12 @@
 	    <li><a href="#"><i class="m-icon icon-jhd"></i>进货单</a></li>
 	    <li><a href="#"><i class="m-icon icon-wdnf"></i>我的农丰</a></li>
 	</ul>
-
-	<div class="category">
-		<p class="title">热门采购</p>
-		<ul class="clearfix"></ul>
+	<div class="border-1px border-bottom">
+		<i class="m-icon icon-information"></i>
+		<ul>
+			<li><i class="m-icon icon-new"></i> 今日成交订单3008个</li>
+		</ul>
 	</div>
-
 	<!-- 搜索 -->
 	<div class="s-page">
 		<header class="m-header header-search">
@@ -113,9 +117,8 @@
 			</li>
 		<%})%>
 	</script>
-
 	<script>  
-		// seajs.use(['/js/javascript/index/index']);
+		seajs.use(['/js/javascript/index/index']);
 	</script>
 </div>
 </body>
@@ -28,6 +28,7 @@ module.exports = function (grunt) {
             sprite.name = sprite.name.replace(/^\s{1}/, ''); //去除文件名前空白
             sprite.name = sprite.name.replace('@2x', '');
             sprite.name = sprite.name.replace(/^\d\./, '');
+            sprite.name = sprite.name.toLowerCase();
             sprite.name = 'icon-' + sprite.name;
         },
         // 可选: 指定算法 (top-down, left-right, diagonal,alt-diagonal, binary-tree )等
@@ -411,14 +411,14 @@ This must be run when you have at least 2 sprites.
   display: inline-block;
   vertical-align: middle;
 }
-.icon-Information {
+.icon-information {
   background-image: url(../../images/dist/sprite.png);
   background-position: -180px -270px;
   width: 90px;
   height: 30px;
   background-size: 410px;
 }
-.icon-LOGO-APP {
+.icon-logo-app {
   background-image: url(../../images/dist/sprite.png);
   background-position: -360px -290px;
   width: 37.5px;
@@ -432,7 +432,7 @@ This must be run when you have at least 2 sprites.
   height: 20px;
   background-size: 410px;
 }
-.icon-have-Point {
+.icon-have-point {
   background-image: url(../../images/dist/sprite.png);
   background-position: -397.5px -290px;
   width: 12px;
@@ -446,7 +446,7 @@ This must be run when you have at least 2 sprites.
   height: 25.5px;
   background-size: 410px;
 }
-.icon-no-Point {
+.icon-no-point {
   background-image: url(../../images/dist/sprite.png);
   background-position: -397.5px -302px;
   width: 12px;
@@ -2000,6 +2000,71 @@ a.m-more {
 .m-bar-content .icon-order {
   background-position: -48px -309px;
 }
+.border-1px {
+  position: relative;
+}
+.border-1px:before,
+.border-1px:after {
+  border-top: 1px solid #e2e2e2;
+  content: '';
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+.border-1px:before {
+  top: 0;
+}
+.border-1px:after {
+  bottom: 0;
+}
+.border-1px.border-top:after {
+  display: none;
+}
+.border-1px.border-bottom:before {
+  display: none;
+}
+.border-1px-full {
+  position: relative;
+}
+.border-1px-full:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid #e2e2e2;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+  .border-1px::after,
+  .border-1px::before {
+    -webkit-transform: scaleY(0.7);
+    -webkit-transform-origin: 0 0;
+    transform: scaleY(0.7);
+  }
+  .border-1px::after {
+    -webkit-transform-origin: left bottom;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .border-1px::after,
+  .border-1px::before {
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
 * {
   margin: 0;
   padding: 0;
@@ -33,6 +33,7 @@
 @import "m/m_dropdown";
 @import "m/utilities";
 @import "m/m_bar";
+@import "m/one-border";
 @import "m/jquery.mobile.custom.structure.min.css";
 // @import "m/animation";
@@ -81,23 +81,25 @@
   display: block;
 }
 #indexPage .menu {
-  padding: 15px 10px;
+  padding: 15px 10px 7px;
   text-align: center;
   background-color: #fff;
-  border-bottom: 1px #dddddd solid;
   overflow: hidden;
 }
 #indexPage .menu li {
   float: left;
   width: 25%;
   text-align: center;
+  padding-bottom: 8px;
 }
 #indexPage .menu a {
   display: inline-block;
+  text-align: center;
   font-size: 12px;
 }
 #indexPage .menu .m-icon {
   display: block;
+  margin-bottom: 5px;
 }
 #indexPage .category {
   background: #fff;
@@ -90,22 +90,24 @@
     }
     @border-ddd: 1px #ddd solid;
     .menu {
-        padding: 15px 10px;
+        padding: 15px 10px 7px;
         text-align: center;
         background-color: #fff;
-        border-bottom: @border-ddd;
         overflow: hidden;
         li {
             float: left;
             width: 25%;
             text-align: center;
+            padding-bottom: 8px;
         }
         a {
             display: inline-block;
+            text-align: center;
             font-size: 12px;
         }
         .m-icon{
             display: block;
+            margin-bottom: 5px;
         }
     }
     .category {
@@ -58,14 +58,14 @@ This must be run when you have at least 2 sprites.
   display: inline-block;
   vertical-align: middle;
 }
-.icon-Information {
+.icon-information {
   background-image: url(../../images/dist/sprite.png);
   background-position: -180px -270px;
   width: 90px;
   height: 30px;
   background-size: 410px;
 }
-.icon-LOGO-APP {
+.icon-logo-app {
   background-image: url(../../images/dist/sprite.png);
   background-position: -360px -290px;
   width: 37.5px;
@@ -79,7 +79,7 @@ This must be run when you have at least 2 sprites.
   height: 20px;
   background-size: 410px;
 }
-.icon-have-Point {
+.icon-have-point {
   background-image: url(../../images/dist/sprite.png);
   background-position: -397.5px -290px;
   width: 12px;
@@ -93,7 +93,7 @@ This must be run when you have at least 2 sprites.
   height: 25.5px;
   background-size: 410px;
 }
-.icon-no-Point {
+.icon-no-point {
   background-image: url(../../images/dist/sprite.png);
   background-position: -397.5px -302px;
   width: 12px;
+.border-1px {
+  position: relative;
+}
+.border-1px:before,
+.border-1px:after {
+  border-top: 1px solid #e2e2e2;
+  content: '';
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+}
+.border-1px:before {
+  top: 0;
+}
+.border-1px:after {
+  bottom: 0;
+}
+.border-1px.border-top:after {
+  display: none;
+}
+.border-1px.border-bottom:before {
+  display: none;
+}
+.border-1px-full {
+  position: relative;
+}
+.border-1px-full:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid #e2e2e2;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  width: 200%;
+  height: 200%;
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: left top;
+  transform-origin: left top;
+  border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+  .border-1px::after,
+  .border-1px::before {
+    -webkit-transform: scaleY(0.7);
+    -webkit-transform-origin: 0 0;
+    transform: scaleY(0.7);
+  }
+  .border-1px::after {
+    -webkit-transform-origin: left bottom;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .border-1px::after,
+  .border-1px::before {
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.border-1px{
+  position: relative;
+  &:before, &:after{
+    border-top: 1px solid #e2e2e2;
+    content: '';
+    display: block;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    z-index: 1;
+  }
+  &:before{
+    top: 0;
+  }
+  &:after{
+    bottom: 0;
+  }
+  &.border-top{
+    &:after{
+      display: none;
+    }
+  }
+  &.border-bottom{
+    &:before{
+      display: none;
+    }
+  }
+
+  // &.border-right{
+  //   &:before{
+  //     display: block;
+  //     border-right: 1px solid #e2e2e2;
+  //     height: 100%;
+  //     top: 0;
+  //     left: auto;
+  //     width: 0;
+  //     right: 0;
+  //   }
+  // }
+}
+
+.border-1px-full{
+  position: relative;
+  &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      border: 1px solid #e2e2e2;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 200%;
+      height: 200%;
+      -webkit-transform: scale(0.5);
+      transform: scale(0.5);
+      -webkit-transform-origin: left top;
+      transform-origin: left top;
+      border-radius: 3px;
+      -webkit-border-radius: 3px;
+      -moz-border-radius: 3px;
+  }
+}
+// .border-1px-x{
+//     position: relative;
+//     &:before, &:after{
+//       border-left: 1px solid #aaa;
+//       content: ' ';
+//       display: block;
+//       height: 100%;
+//       position: absolute;
+//       top: 0;
+//       z-index: 1;
+//     }
+//     &:before{
+//       left: 0;
+//     }
+//     &:after{
+//       right: -1px;
+//     }
+//     &.border-left{
+//       &:after{
+//         display: none;
+//       }
+//     }
+//     &.border-right{
+//       &:before{
+//         display: none;
+//       }
+//     }
+// }
+
+@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
+  .border-1px{
+    &::after, &::before{
+      -webkit-transform: scaleY(.7);
+      -webkit-transform-origin: 0 0;
+      transform: scaleY(.7);
+    }
+    &::after{
+      -webkit-transform-origin: left bottom;
+    }
+  }
+
+  // .border-1px-x{
+  //   &::after, &::before{
+  //     -webkit-transform: scaleX(.7);
+  //     -webkit-transform-origin: 0 0;
+  //     transform: scaleX(.7);
+  //   }
+  //   &::after{
+  //     -webkit-transform-origin: left bottom;
+  //   }
+  // }
+}
+
+@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
+  .border-1px{
+    &::after, &::before{
+      -webkit-transform: scaleY(.5);
+      transform: scaleY(.5);
+    }
+  }
+
+  // .border-1px-x{
+  //   &::after, &::before{
+  //     -webkit-transform: scaleX(.5);
+  //     transform: scaleX(.5);
+  //   }
+  // }
+}
 \ No newline at end of file
@@ -11,7 +11,7 @@ The large array-like variables contain all information about a single icon
 At the bottom of this section, we provide information about the spritesheet itself
 @spritesheet: width height image @spritesheet-sprites;
 */
-@icon-information-name: icon-Information;
+@icon-information-name: icon-information;
 @icon-information-x: 360px;
 @icon-information-y: 540px;
 @icon-information-offset-x: -360px;
@@ -21,18 +21,18 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-information-total-width: 820px;
 @icon-information-total-height: 770px;
 @icon-information-image: '../../images/dist/sprite.png';
-@icon-information: 360px 540px -360px -540px 180px 60px 820px 770px '../../images/dist/sprite.png' icon-Information;
-@icon-l-o-g-o-a-p-p-name: icon-LOGO-APP;
-@icon-l-o-g-o-a-p-p-x: 720px;
-@icon-l-o-g-o-a-p-p-y: 580px;
-@icon-l-o-g-o-a-p-p-offset-x: -720px;
-@icon-l-o-g-o-a-p-p-offset-y: -580px;
-@icon-l-o-g-o-a-p-p-width: 75px;
-@icon-l-o-g-o-a-p-p-height: 75px;
-@icon-l-o-g-o-a-p-p-total-width: 820px;
-@icon-l-o-g-o-a-p-p-total-height: 770px;
-@icon-l-o-g-o-a-p-p-image: '../../images/dist/sprite.png';
-@icon-l-o-g-o-a-p-p: 720px 580px -720px -580px 75px 75px 820px 770px '../../images/dist/sprite.png' icon-LOGO-APP;
+@icon-information: 360px 540px -360px -540px 180px 60px 820px 770px '../../images/dist/sprite.png' icon-information;
+@icon-logo-app-name: icon-logo-app;
+@icon-logo-app-x: 720px;
+@icon-logo-app-y: 580px;
+@icon-logo-app-offset-x: -720px;
+@icon-logo-app-offset-y: -580px;
+@icon-logo-app-width: 75px;
+@icon-logo-app-height: 75px;
+@icon-logo-app-total-width: 820px;
+@icon-logo-app-total-height: 770px;
+@icon-logo-app-image: '../../images/dist/sprite.png';
+@icon-logo-app: 720px 580px -720px -580px 75px 75px 820px 770px '../../images/dist/sprite.png' icon-logo-app;
 @icon-fiter-name: icon-fiter;
 @icon-fiter-x: 630px;
 @icon-fiter-y: 720px;
@@ -44,7 +44,7 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-fiter-total-height: 770px;
 @icon-fiter-image: '../../images/dist/sprite.png';
 @icon-fiter: 630px 720px -630px -720px 40px 40px 820px 770px '../../images/dist/sprite.png' icon-fiter;
-@icon-have-point-name: icon-have-Point;
+@icon-have-point-name: icon-have-point;
 @icon-have-point-x: 795px;
 @icon-have-point-y: 580px;
 @icon-have-point-offset-x: -795px;
@@ -54,7 +54,7 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-have-point-total-width: 820px;
 @icon-have-point-total-height: 770px;
 @icon-have-point-image: '../../images/dist/sprite.png';
-@icon-have-point: 795px 580px -795px -580px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-have-Point;
+@icon-have-point: 795px 580px -795px -580px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-have-point;
 @icon-new-name: icon-new;
 @icon-new-x: 720px;
 @icon-new-y: 655px;
@@ -66,7 +66,7 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-new-total-height: 770px;
 @icon-new-image: '../../images/dist/sprite.png';
 @icon-new: 720px 655px -720px -655px 90px 51px 820px 770px '../../images/dist/sprite.png' icon-new;
-@icon-no-point-name: icon-no-Point;
+@icon-no-point-name: icon-no-point;
 @icon-no-point-x: 795px;
 @icon-no-point-y: 604px;
 @icon-no-point-offset-x: -795px;
@@ -76,7 +76,7 @@ At the bottom of this section, we provide information about the spritesheet itse
 @icon-no-point-total-width: 820px;
 @icon-no-point-total-height: 770px;
 @icon-no-point-image: '../../images/dist/sprite.png';
-@icon-no-point: 795px 604px -795px -604px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-no-Point;
+@icon-no-point: 795px 604px -795px -604px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-no-point;
 @icon-pro-more-name: icon-pro-more;
 @icon-pro-more-x: 540px;
 @icon-pro-more-y: 540px;
@@ -597,7 +597,7 @@ At the bottom of this section, we provide information about the spritesheet itse
 @spritesheet-width: 820px;
 @spritesheet-height: 770px;
 @spritesheet-image: '../../images/dist/sprite.png';
-@spritesheet-sprites: @icon-information @icon-l-o-g-o-a-p-p @icon-fiter @icon-have-point @icon-new @icon-no-point @icon-pro-more @icon-search @icon-talking @icon-white-jt @icon-cdzg @icon-gqxx @icon-jhd @icon-nhzy @icon-pfsc @icon-tcls @icon-wdnf @icon-yqxx @icon-cao-mei @icon-da-suan @icon-dou-jiao @icon-hua-cai @icon-luo-bo @icon-mo-gu @icon-ping-guo @icon-pro-more2 @icon-pu-tao @icon-tao-zi @icon-tu-dou @icon-xiang-jiao @icon-xue-li @icon-yang-cong @icon-ying-tao @icon-dgys @icon-qtzl @icon-scl @icon-sgl-20150825111731 @icon-spfl @icon-wlfw @icon-ddgl @icon-szgl @icon-tkgl @icon-wdsc @icon-xxgl @icon-back-top @icon-dwtb @icon-lsjt @icon-wsc @icon-xk-no @icon-xk-yes @icon-ysc @icon-sdrz @icon-sxsj;
+@spritesheet-sprites: @icon-information @icon-logo-app @icon-fiter @icon-have-point @icon-new @icon-no-point @icon-pro-more @icon-search @icon-talking @icon-white-jt @icon-cdzg @icon-gqxx @icon-jhd @icon-nhzy @icon-pfsc @icon-tcls @icon-wdnf @icon-yqxx @icon-cao-mei @icon-da-suan @icon-dou-jiao @icon-hua-cai @icon-luo-bo @icon-mo-gu @icon-ping-guo @icon-pro-more2 @icon-pu-tao @icon-tao-zi @icon-tu-dou @icon-xiang-jiao @icon-xue-li @icon-yang-cong @icon-ying-tao @icon-dgys @icon-qtzl @icon-scl @icon-sgl-20150825111731 @icon-spfl @icon-wlfw @icon-ddgl @icon-szgl @icon-tkgl @icon-wdsc @icon-xxgl @icon-back-top @icon-dwtb @icon-lsjt @icon-wsc @icon-xk-no @icon-xk-yes @icon-ysc @icon-sdrz @icon-sxsj;
 @spritesheet: 820px 770px '../../images/dist/sprite.png' @spritesheet-sprites;
 /*