dlstatic / static-wappnr · Commits

Commit edc972f533657c0158a8bafb3156d60db35ad965

Authored by bichao.dong
1 parent a040139b

sprite icon name tolowercase

Inline Side-by-side
Showing 10 changed files with 309 additions and 39 deletions
2.0/index.html
  View file @edc972f
... ... @@ -7,7 +7,11 @@
7 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 8 <title>农丰网</title>
9 9 <!-- css -->
10   - <link rel="stylesheet" type="text/css" href="../css/style/common.css">
  10 + <link rel="stylesheet" href="../css/style/common.css">
  11 +
  12 + <!-- base seajs -->
  13 + <script src="http://static.nong12.com/static/newStatic/common/js/base/sea.js"></script>
  14 + <script src="../js/javascript/common/config.js"></script>
11 15 </head>
12 16 <body>
13 17 <!-- 主体 -->
... ... @@ -39,7 +43,7 @@
39 43 </div>
40 44 </div>
41 45  
42   - <ul class="menu">
  46 + <ul class="menu border-1px border-bottom">
43 47 <li><a href="#"><i class="m-icon icon-pfsc"></i>批发市场</a></li>
44 48 <li><a href="#"><i class="m-icon icon-cdzg"></i>产地直供</a></li>
45 49 <li><a href="#"><i class="m-icon icon-tcls"></i>同城零售</a></li>
... ... @@ -50,12 +54,12 @@
50 54 <li><a href="#"><i class="m-icon icon-jhd"></i>进货单</a></li>
51 55 <li><a href="#"><i class="m-icon icon-wdnf"></i>我的农丰</a></li>
52 56 </ul>
53   -
54   - <div class="category">
55   - <p class="title">热门采购</p>
56   - <ul class="clearfix"></ul>
  57 + <div class="border-1px border-bottom">
  58 + <i class="m-icon icon-information"></i>
  59 + <ul>
  60 + <li><i class="m-icon icon-new"></i> 今日成交订单3008个</li>
  61 + </ul>
57 62 </div>
58   -
59 63 <!-- 搜索 -->
60 64 <div class="s-page">
61 65 <header class="m-header header-search">
... ... @@ -113,9 +117,8 @@
113 117 </li>
114 118 <%})%>
115 119 </script>
116   -
117 120 <script>
118   - // seajs.use(['/js/javascript/index/index']);
  121 + seajs.use(['/js/javascript/index/index']);
119 122 </script>
120 123 </div>
121 124 </body>
... ...
Gruntfile.js
  View file @edc972f
... ... @@ -28,6 +28,7 @@ module.exports = function (grunt) {
28 28 sprite.name = sprite.name.replace(/^\s{1}/, ''); //去除文件名前空白
29 29 sprite.name = sprite.name.replace('@2x', '');
30 30 sprite.name = sprite.name.replace(/^\d\./, '');
  31 + sprite.name = sprite.name.toLowerCase();
31 32 sprite.name = 'icon-' + sprite.name;
32 33 },
33 34 // 可选: 指定算法 (top-down, left-right, diagonal,alt-diagonal, binary-tree )等
... ...
css/style/common.css
  View file @edc972f
... ... @@ -411,14 +411,14 @@ This must be run when you have at least 2 sprites.
411 411 display: inline-block;
412 412 vertical-align: middle;
413 413 }
414   -.icon-Information {
  414 +.icon-information {
415 415 background-image: url(../../images/dist/sprite.png);
416 416 background-position: -180px -270px;
417 417 width: 90px;
418 418 height: 30px;
419 419 background-size: 410px;
420 420 }
421   -.icon-LOGO-APP {
  421 +.icon-logo-app {
422 422 background-image: url(../../images/dist/sprite.png);
423 423 background-position: -360px -290px;
424 424 width: 37.5px;
... ... @@ -432,7 +432,7 @@ This must be run when you have at least 2 sprites.
432 432 height: 20px;
433 433 background-size: 410px;
434 434 }
435   -.icon-have-Point {
  435 +.icon-have-point {
436 436 background-image: url(../../images/dist/sprite.png);
437 437 background-position: -397.5px -290px;
438 438 width: 12px;
... ... @@ -446,7 +446,7 @@ This must be run when you have at least 2 sprites.
446 446 height: 25.5px;
447 447 background-size: 410px;
448 448 }
449   -.icon-no-Point {
  449 +.icon-no-point {
450 450 background-image: url(../../images/dist/sprite.png);
451 451 background-position: -397.5px -302px;
452 452 width: 12px;
... ... @@ -2000,6 +2000,71 @@ a.m-more {
2000 2000 .m-bar-content .icon-order {
2001 2001 background-position: -48px -309px;
2002 2002 }
  2003 +.border-1px {
  2004 + position: relative;
  2005 +}
  2006 +.border-1px:before,
  2007 +.border-1px:after {
  2008 + border-top: 1px solid #e2e2e2;
  2009 + content: '';
  2010 + display: block;
  2011 + width: 100%;
  2012 + position: absolute;
  2013 + left: 0;
  2014 + z-index: 1;
  2015 +}
  2016 +.border-1px:before {
  2017 + top: 0;
  2018 +}
  2019 +.border-1px:after {
  2020 + bottom: 0;
  2021 +}
  2022 +.border-1px.border-top:after {
  2023 + display: none;
  2024 +}
  2025 +.border-1px.border-bottom:before {
  2026 + display: none;
  2027 +}
  2028 +.border-1px-full {
  2029 + position: relative;
  2030 +}
  2031 +.border-1px-full:after {
  2032 + content: '';
  2033 + position: absolute;
  2034 + top: 0;
  2035 + left: 0;
  2036 + z-index: 1;
  2037 + border: 1px solid #e2e2e2;
  2038 + -webkit-box-sizing: border-box;
  2039 + box-sizing: border-box;
  2040 + width: 200%;
  2041 + height: 200%;
  2042 + -webkit-transform: scale(0.5);
  2043 + transform: scale(0.5);
  2044 + -webkit-transform-origin: left top;
  2045 + transform-origin: left top;
  2046 + border-radius: 3px;
  2047 + -webkit-border-radius: 3px;
  2048 + -moz-border-radius: 3px;
  2049 +}
  2050 +@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  2051 + .border-1px::after,
  2052 + .border-1px::before {
  2053 + -webkit-transform: scaleY(0.7);
  2054 + -webkit-transform-origin: 0 0;
  2055 + transform: scaleY(0.7);
  2056 + }
  2057 + .border-1px::after {
  2058 + -webkit-transform-origin: left bottom;
  2059 + }
  2060 +}
  2061 +@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  2062 + .border-1px::after,
  2063 + .border-1px::before {
  2064 + -webkit-transform: scaleY(0.5);
  2065 + transform: scaleY(0.5);
  2066 + }
  2067 +}
2003 2068 * {
2004 2069 margin: 0;
2005 2070 padding: 0;
... ...
css/style/common.less
  View file @edc972f
... ... @@ -33,6 +33,7 @@
33 33 @import "m/m_dropdown";
34 34 @import "m/utilities";
35 35 @import "m/m_bar";
  36 +@import "m/one-border";
36 37 @import "m/jquery.mobile.custom.structure.min.css";
37 38 // @import "m/animation";
38 39  
... ...
css/style/index.css
  View file @edc972f
... ... @@ -81,23 +81,25 @@
81 81 display: block;
82 82 }
83 83 #indexPage .menu {
84   - padding: 15px 10px;
  84 + padding: 15px 10px 7px;
85 85 text-align: center;
86 86 background-color: #fff;
87   - border-bottom: 1px #dddddd solid;
88 87 overflow: hidden;
89 88 }
90 89 #indexPage .menu li {
91 90 float: left;
92 91 width: 25%;
93 92 text-align: center;
  93 + padding-bottom: 8px;
94 94 }
95 95 #indexPage .menu a {
96 96 display: inline-block;
  97 + text-align: center;
97 98 font-size: 12px;
98 99 }
99 100 #indexPage .menu .m-icon {
100 101 display: block;
  102 + margin-bottom: 5px;
101 103 }
102 104 #indexPage .category {
103 105 background: #fff;
... ...
css/style/index.less
  View file @edc972f
... ... @@ -90,22 +90,24 @@
90 90 }
91 91 @border-ddd: 1px #ddd solid;
92 92 .menu {
93   - padding: 15px 10px;
  93 + padding: 15px 10px 7px;
94 94 text-align: center;
95 95 background-color: #fff;
96   - border-bottom: @border-ddd;
97 96 overflow: hidden;
98 97 li {
99 98 float: left;
100 99 width: 25%;
101 100 text-align: center;
  101 + padding-bottom: 8px;
102 102 }
103 103 a {
104 104 display: inline-block;
  105 + text-align: center;
105 106 font-size: 12px;
106 107 }
107 108 .m-icon{
108 109 display: block;
  110 + margin-bottom: 5px;
109 111 }
110 112 }
111 113 .category {
... ...
css/style/m/m_icon.css
  View file @edc972f
... ... @@ -58,14 +58,14 @@ This must be run when you have at least 2 sprites.
58 58 display: inline-block;
59 59 vertical-align: middle;
60 60 }
61   -.icon-Information {
  61 +.icon-information {
62 62 background-image: url(../../images/dist/sprite.png);
63 63 background-position: -180px -270px;
64 64 width: 90px;
65 65 height: 30px;
66 66 background-size: 410px;
67 67 }
68   -.icon-LOGO-APP {
  68 +.icon-logo-app {
69 69 background-image: url(../../images/dist/sprite.png);
70 70 background-position: -360px -290px;
71 71 width: 37.5px;
... ... @@ -79,7 +79,7 @@ This must be run when you have at least 2 sprites.
79 79 height: 20px;
80 80 background-size: 410px;
81 81 }
82   -.icon-have-Point {
  82 +.icon-have-point {
83 83 background-image: url(../../images/dist/sprite.png);
84 84 background-position: -397.5px -290px;
85 85 width: 12px;
... ... @@ -93,7 +93,7 @@ This must be run when you have at least 2 sprites.
93 93 height: 25.5px;
94 94 background-size: 410px;
95 95 }
96   -.icon-no-Point {
  96 +.icon-no-point {
97 97 background-image: url(../../images/dist/sprite.png);
98 98 background-position: -397.5px -302px;
99 99 width: 12px;
... ...
css/style/m/one-border.css 0 → 100644
  View file @edc972f
  1 +.border-1px {
  2 + position: relative;
  3 +}
  4 +.border-1px:before,
  5 +.border-1px:after {
  6 + border-top: 1px solid #e2e2e2;
  7 + content: '';
  8 + display: block;
  9 + width: 100%;
  10 + position: absolute;
  11 + left: 0;
  12 + z-index: 1;
  13 +}
  14 +.border-1px:before {
  15 + top: 0;
  16 +}
  17 +.border-1px:after {
  18 + bottom: 0;
  19 +}
  20 +.border-1px.border-top:after {
  21 + display: none;
  22 +}
  23 +.border-1px.border-bottom:before {
  24 + display: none;
  25 +}
  26 +.border-1px-full {
  27 + position: relative;
  28 +}
  29 +.border-1px-full:after {
  30 + content: '';
  31 + position: absolute;
  32 + top: 0;
  33 + left: 0;
  34 + z-index: 1;
  35 + border: 1px solid #e2e2e2;
  36 + -webkit-box-sizing: border-box;
  37 + box-sizing: border-box;
  38 + width: 200%;
  39 + height: 200%;
  40 + -webkit-transform: scale(0.5);
  41 + transform: scale(0.5);
  42 + -webkit-transform-origin: left top;
  43 + transform-origin: left top;
  44 + border-radius: 3px;
  45 + -webkit-border-radius: 3px;
  46 + -moz-border-radius: 3px;
  47 +}
  48 +@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
  49 + .border-1px::after,
  50 + .border-1px::before {
  51 + -webkit-transform: scaleY(0.7);
  52 + -webkit-transform-origin: 0 0;
  53 + transform: scaleY(0.7);
  54 + }
  55 + .border-1px::after {
  56 + -webkit-transform-origin: left bottom;
  57 + }
  58 +}
  59 +@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  60 + .border-1px::after,
  61 + .border-1px::before {
  62 + -webkit-transform: scaleY(0.5);
  63 + transform: scaleY(0.5);
  64 + }
  65 +}
... ...
css/style/m/one-border.less 0 → 100644
  View file @edc972f
  1 +.border-1px{
  2 + position: relative;
  3 + &:before, &:after{
  4 + border-top: 1px solid #e2e2e2;
  5 + content: '';
  6 + display: block;
  7 + width: 100%;
  8 + position: absolute;
  9 + left: 0;
  10 + z-index: 1;
  11 + }
  12 + &:before{
  13 + top: 0;
  14 + }
  15 + &:after{
  16 + bottom: 0;
  17 + }
  18 + &.border-top{
  19 + &:after{
  20 + display: none;
  21 + }
  22 + }
  23 + &.border-bottom{
  24 + &:before{
  25 + display: none;
  26 + }
  27 + }
  28 +
  29 + // &.border-right{
  30 + // &:before{
  31 + // display: block;
  32 + // border-right: 1px solid #e2e2e2;
  33 + // height: 100%;
  34 + // top: 0;
  35 + // left: auto;
  36 + // width: 0;
  37 + // right: 0;
  38 + // }
  39 + // }
  40 +}
  41 +
  42 +.border-1px-full{
  43 + position: relative;
  44 + &:after {
  45 + content: '';
  46 + position: absolute;
  47 + top: 0;
  48 + left: 0;
  49 + z-index: 1;
  50 + border: 1px solid #e2e2e2;
  51 + -webkit-box-sizing: border-box;
  52 + box-sizing: border-box;
  53 + width: 200%;
  54 + height: 200%;
  55 + -webkit-transform: scale(0.5);
  56 + transform: scale(0.5);
  57 + -webkit-transform-origin: left top;
  58 + transform-origin: left top;
  59 + border-radius: 3px;
  60 + -webkit-border-radius: 3px;
  61 + -moz-border-radius: 3px;
  62 + }
  63 +}
  64 +// .border-1px-x{
  65 +// position: relative;
  66 +// &:before, &:after{
  67 +// border-left: 1px solid #aaa;
  68 +// content: ' ';
  69 +// display: block;
  70 +// height: 100%;
  71 +// position: absolute;
  72 +// top: 0;
  73 +// z-index: 1;
  74 +// }
  75 +// &:before{
  76 +// left: 0;
  77 +// }
  78 +// &:after{
  79 +// right: -1px;
  80 +// }
  81 +// &.border-left{
  82 +// &:after{
  83 +// display: none;
  84 +// }
  85 +// }
  86 +// &.border-right{
  87 +// &:before{
  88 +// display: none;
  89 +// }
  90 +// }
  91 +// }
  92 +
  93 +@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
  94 + .border-1px{
  95 + &::after, &::before{
  96 + -webkit-transform: scaleY(.7);
  97 + -webkit-transform-origin: 0 0;
  98 + transform: scaleY(.7);
  99 + }
  100 + &::after{
  101 + -webkit-transform-origin: left bottom;
  102 + }
  103 + }
  104 +
  105 + // .border-1px-x{
  106 + // &::after, &::before{
  107 + // -webkit-transform: scaleX(.7);
  108 + // -webkit-transform-origin: 0 0;
  109 + // transform: scaleX(.7);
  110 + // }
  111 + // &::after{
  112 + // -webkit-transform-origin: left bottom;
  113 + // }
  114 + // }
  115 +}
  116 +
  117 +@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
  118 + .border-1px{
  119 + &::after, &::before{
  120 + -webkit-transform: scaleY(.5);
  121 + transform: scaleY(.5);
  122 + }
  123 + }
  124 +
  125 + // .border-1px-x{
  126 + // &::after, &::before{
  127 + // -webkit-transform: scaleX(.5);
  128 + // transform: scaleX(.5);
  129 + // }
  130 + // }
  131 +}
0 132 \ No newline at end of file
... ...
css/style/m/sprite.less
  View file @edc972f
... ... @@ -11,7 +11,7 @@ The large array-like variables contain all information about a single icon
11 11 At the bottom of this section, we provide information about the spritesheet itself
12 12 @spritesheet: width height image @spritesheet-sprites;
13 13 */
14   -@icon-information-name: icon-Information;
  14 +@icon-information-name: icon-information;
15 15 @icon-information-x: 360px;
16 16 @icon-information-y: 540px;
17 17 @icon-information-offset-x: -360px;
... ... @@ -21,18 +21,18 @@ At the bottom of this section, we provide information about the spritesheet itse
21 21 @icon-information-total-width: 820px;
22 22 @icon-information-total-height: 770px;
23 23 @icon-information-image: '../../images/dist/sprite.png';
24   -@icon-information: 360px 540px -360px -540px 180px 60px 820px 770px '../../images/dist/sprite.png' icon-Information;
25   -@icon-l-o-g-o-a-p-p-name: icon-LOGO-APP;
26   -@icon-l-o-g-o-a-p-p-x: 720px;
27   -@icon-l-o-g-o-a-p-p-y: 580px;
28   -@icon-l-o-g-o-a-p-p-offset-x: -720px;
29   -@icon-l-o-g-o-a-p-p-offset-y: -580px;
30   -@icon-l-o-g-o-a-p-p-width: 75px;
31   -@icon-l-o-g-o-a-p-p-height: 75px;
32   -@icon-l-o-g-o-a-p-p-total-width: 820px;
33   -@icon-l-o-g-o-a-p-p-total-height: 770px;
34   -@icon-l-o-g-o-a-p-p-image: '../../images/dist/sprite.png';
35   -@icon-l-o-g-o-a-p-p: 720px 580px -720px -580px 75px 75px 820px 770px '../../images/dist/sprite.png' icon-LOGO-APP;
  24 +@icon-information: 360px 540px -360px -540px 180px 60px 820px 770px '../../images/dist/sprite.png' icon-information;
  25 +@icon-logo-app-name: icon-logo-app;
  26 +@icon-logo-app-x: 720px;
  27 +@icon-logo-app-y: 580px;
  28 +@icon-logo-app-offset-x: -720px;
  29 +@icon-logo-app-offset-y: -580px;
  30 +@icon-logo-app-width: 75px;
  31 +@icon-logo-app-height: 75px;
  32 +@icon-logo-app-total-width: 820px;
  33 +@icon-logo-app-total-height: 770px;
  34 +@icon-logo-app-image: '../../images/dist/sprite.png';
  35 +@icon-logo-app: 720px 580px -720px -580px 75px 75px 820px 770px '../../images/dist/sprite.png' icon-logo-app;
36 36 @icon-fiter-name: icon-fiter;
37 37 @icon-fiter-x: 630px;
38 38 @icon-fiter-y: 720px;
... ... @@ -44,7 +44,7 @@ At the bottom of this section, we provide information about the spritesheet itse
44 44 @icon-fiter-total-height: 770px;
45 45 @icon-fiter-image: '../../images/dist/sprite.png';
46 46 @icon-fiter: 630px 720px -630px -720px 40px 40px 820px 770px '../../images/dist/sprite.png' icon-fiter;
47   -@icon-have-point-name: icon-have-Point;
  47 +@icon-have-point-name: icon-have-point;
48 48 @icon-have-point-x: 795px;
49 49 @icon-have-point-y: 580px;
50 50 @icon-have-point-offset-x: -795px;
... ... @@ -54,7 +54,7 @@ At the bottom of this section, we provide information about the spritesheet itse
54 54 @icon-have-point-total-width: 820px;
55 55 @icon-have-point-total-height: 770px;
56 56 @icon-have-point-image: '../../images/dist/sprite.png';
57   -@icon-have-point: 795px 580px -795px -580px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-have-Point;
  57 +@icon-have-point: 795px 580px -795px -580px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-have-point;
58 58 @icon-new-name: icon-new;
59 59 @icon-new-x: 720px;
60 60 @icon-new-y: 655px;
... ... @@ -66,7 +66,7 @@ At the bottom of this section, we provide information about the spritesheet itse
66 66 @icon-new-total-height: 770px;
67 67 @icon-new-image: '../../images/dist/sprite.png';
68 68 @icon-new: 720px 655px -720px -655px 90px 51px 820px 770px '../../images/dist/sprite.png' icon-new;
69   -@icon-no-point-name: icon-no-Point;
  69 +@icon-no-point-name: icon-no-point;
70 70 @icon-no-point-x: 795px;
71 71 @icon-no-point-y: 604px;
72 72 @icon-no-point-offset-x: -795px;
... ... @@ -76,7 +76,7 @@ At the bottom of this section, we provide information about the spritesheet itse
76 76 @icon-no-point-total-width: 820px;
77 77 @icon-no-point-total-height: 770px;
78 78 @icon-no-point-image: '../../images/dist/sprite.png';
79   -@icon-no-point: 795px 604px -795px -604px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-no-Point;
  79 +@icon-no-point: 795px 604px -795px -604px 24px 24px 820px 770px '../../images/dist/sprite.png' icon-no-point;
80 80 @icon-pro-more-name: icon-pro-more;
81 81 @icon-pro-more-x: 540px;
82 82 @icon-pro-more-y: 540px;
... ... @@ -597,7 +597,7 @@ At the bottom of this section, we provide information about the spritesheet itse
597 597 @spritesheet-width: 820px;
598 598 @spritesheet-height: 770px;
599 599 @spritesheet-image: '../../images/dist/sprite.png';
600   -@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;
  600 +@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;
601 601 @spritesheet: 820px 770px '../../images/dist/sprite.png' @spritesheet-sprites;
602 602  
603 603 /*
... ...