Merge "Modify favor list in user home."

dlstatic · Gerrit Code Review
2 parents 8abccb3b 67311935
Showing 13 changed files with 3274 additions and 165 deletions
2.0/collect_shop.html
Gruntfile.js
css/style/checkin.css
css/style/collection.css
css/style/collection.less
css/style/common-2.css
css/style/common.css
css/style/coupons.css
css/style/m/m_coupons.less
css/style/order_confirm.css
css/style/user_relevance.css
css/style/userhome.less
package.json
@@ -29,14 +29,14 @@
         <div class="content">
             <div class="m-tab">
                 <ul class="clearfix">
-                    <li class="on"><a href="#">供应</a></li>
-                    <li><a href="#">求购</a></li>
-                    <li><a href="#">预售</a></li>
-                    <li><a href="#">商品</a></li>
-                    <li><a href="#">店铺</a></li>
+                    <li class="on"><a href="#insale">供应</a></li>
+                    <li><a href="#asksale">求购</a></li>
+                    <li><a href="#presale">预售</a></li>
+                    <li><a href="#goods">商品</a></li>
+                    <li><a href="#shops">店铺</a></li>
                 </ul>
             </div>
-            <div class="collection-lists supply-list" >
+            <div class="collection-lists supply-list inlist" id="insale">
                 <ul class="m-table-view">
                     <li class="cell">
                         <a href="#">
@@ -51,116 +51,88 @@
                             </div>
                         </a>
                     </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                                <span class="right price">0.7元/斤</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                                <span class="right price">0.7元/斤</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
                 </ul>
             </div>
-            <div class="collection-lists supply-list">
-                <ul class="m-table-view">
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
+
+            <div class="collection-lists supply-list asklist" id="asksale">
             </div>
-            <div class="collection-lists supply-list">
-                <ul class="m-table-view">
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                                <span class="right price">7月~9月上市</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                                <span class="right price">7月~9月上市</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                    <li class="cell">
-                        <a href="#">
-                            <div class="orso">
-                                <span class="title">山东白萝卜</span>
-                                <span class="right price">7月~9月上市</span>
-                            </div>
-                            <p>有机花菜近期行情不错,销售大,建议大家及时大量买进有机花菜近期行情不错,销售大,建议大家及时大量买进</p>
-                            <div class="orso">
-                                <span>河北张家口张北县</span>
-                                <span class="right">2015-03-04</span>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
+
+            <div class="collection-lists supply-list prelist" id="presale">
+            </div>
+              
+            <div id="goods" class="goodlist">
+            <ul class="m-table-view">
+                <li class="cell cell-extend-pic">
+                    <a class="display-block" href="#">
+                        <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
+                        <h3 class="title">
+                          山东白萝卜，物美价廉
+                        </h3>
+                        <p class="title">
+                          <span class="red">170~180元/箱</span>
+                        </p>
+                        <p class="body">
+                          <span class="inline">胖丫果业</span>
+                          <span class="inline">主营：柚子、橘子</span>
+                        </p>
+                        <p class="body">
+                          辽宁沈阳地利批发市场五号厅
+                        </p>
+                    </a>
+                </li>
+            </ul>
+
+            </div>
+              
+            <div id="shops" class="shoplist">
+            <ul class="m-table-view">
+                <li class="cell cell-extend-pic">
+                    <a class="display-block" href="#">
+                        <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
+                        <h3 class="title">
+                                <i class="m-icon icon-medal-gold"></i>
+                                寿光合作社 
+                            </h3>
+                        <p class="main-cate">
+                            <span class="key">
+                                    主营产品
+                                </span>
+                            <span class="value">水果<span class="value-red">（售）</span></span>
+                        </p>
+                        <p class="localtion">
+                            四川 成都
+                        </p>
+                        <p class="order-numbers body">
+                            成交量0笔
+                        </p>
+                        <p class="text from-label">产地直供</p>
+                        <i class="m-icon icon-sdrz store-label"></i>
+                    </a>
+                </li>
+                <li class="cell cell-extend-pic">
+                    <a class="display-block" href="#">
+                        <img src="http://img7.nong12.com/images/i3/e5f60bde9834492bab6c98f169ba4aad.jpeg" width="80" height="80" alt="" class="pic">
+                        <h3 class="title">
+                                <i class="m-icon icon-medal-sliver"></i>
+                                寿光合作社 
+                            </h3>
+                        <p class="main-cate">
+                            <span class="key">
+                                    主营产品
+                                </span>
+                            <span class="value">水果<span class="value-blue">（购）</span></span>
+                        </p>
+                        <p class="localtion">
+                            四川 成都
+                        </p>
+                        <p class="order-numbers body">
+                            成交量0笔
+                        </p>
+                        <p class="text from-label">产地直供</p>
+                        <i class="m-icon icon-sxsj store-label"></i>
+                    </a>
+                </li>
+            </ul>
             </div>
             <!--<div class="collection-lists">-->
                 <!--<ul>-->
@@ -176,4 +148,4 @@
         </div>
     </div>
 </body>
-</html>
 \ No newline at end of file
+</html>
@@ -7,9 +7,9 @@ module.exports = function (grunt) {
       dist: {
         files: [{
           expand: true,
-          cwd: 'css',
+          cwd: 'css/style',
           src: ['*.less'],
-          dest: 'css',
+          dest: 'css/style',
           ext: '.css'
         }]
       }
@@ -45,7 +45,7 @@ module.exports = function (grunt) {
       },
       css: {
         files: [
-          'css/*.less'
+          'css/style/*.less'
         ],
         tasks: ['less'],
         options: {
+/**
+ * name : zzf
+ * info : 
+ */
+/***************************************************
+* feature  :  变量配置;
+* update   :  2015/02/05;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.bg-img {
+  background: url('../../images/icon/icon.png') no-repeat;
+  background-size: 150px;
+}
+#check_in {
+  background: #f44f4c;
+}
+#check_in img {
+  width: 100%;
+}
+#check_in .check-btn {
+  text-align: center;
+  font-size: 20px;
+  color: #fff;
+  line-height: 30px;
+  margin-top: 10px;
+}
+#check_in .check-btn span {
+  font-weight: bold;
+  margin: 0 5px;
+  font-size: 30px;
+}
+#check_in .check-btn .btn {
+  background: url("../../images/icon-1-3.png") center center no-repeat;
+  display: inline-block;
+  background-size: 270px;
+  background-position: -1px -59px;
+  width: 230px;
+  height: 60px;
+  line-height: 60px;
+  color: #f44f4c;
+  font-size: 24px;
+  margin-top: 20px;
+}
+#check_in .check-btn .btn:focus,
+#check_in .check-btn .btn:active,
+#check_in .check-btn .btn:hover {
+  background-position: -1px 0px;
+  color: #fff;
+}
+#check_in .winning {
+  margin: 20px 15px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 15px;
+  color: #ddd;
+}
+#check_in .winning p {
+  margin-bottom: 10px;
+}
+#check_in .intro span {
+  background: url("../../images/icon-1-3.png") center center no-repeat;
+  display: inline-block;
+  background-size: 250px;
+  background-position: -1px -170px;
+  width: 87px;
+  height: 40px;
+  text-align: center;
+  line-height: 45px;
+  color: #fff;
+}
+#check_in .intro p {
+  margin: 5px 15px;
+  font-size: 14px;
+  color: #fff;
+}
@@ -79,3 +79,94 @@
   width: 20%;
   padding: 0px;
 }
+#collection .m-table-view .cell-extend-pic {
+  padding: 15px 56px;
+  padding-left: 95px;
+}
+#collection .m-table-view .cell-extend-pic .pic {
+  width: 80px;
+  height: 80px;
+  margin-left: -90px;
+}
+#collection .m-table-view .cell-extend-pic .display-block {
+  margin-left: 10px;
+}
+#collection .m-table-view .title {
+  font-size: 16px;
+  color: #333;
+  line-height: 1;
+  clear: both;
+}
+#collection .m-table-view h3.title {
+  padding-bottom: 5px;
+  margin: 0;
+}
+#collection .main-cate .value-red {
+  font-size: 14px;
+  color: #fb5041;
+}
+#collection .main-cate .value-blue {
+  font-size: 14px;
+  color: #1b6ba5;
+}
+#collection .main-cate .key {
+  font-size: 14px;
+  color: #999;
+}
+#collection .main-cate .value {
+  font-size: 14px;
+  color: #666;
+}
+#collection li p {
+  line-height: 1;
+  padding: 5px 0;
+  margin: 0;
+}
+#collection li p.body {
+  color: #999;
+  padding: 2px 0 3px 0;
+}
+#collection .store-label {
+  position: absolute;
+  left: 15px;
+  top: 15px;
+}
+#collection .from-label {
+  color: #999;
+  font-size: 12px;
+  font-weight: 100;
+  padding: 0 10px 0 0;
+}
+#collection .localtion {
+  font-size: 14px;
+  color: #666;
+}
+#collection .order-numbers {
+  font-size: 13px;
+  color: #999;
+}
+.supply-list {
+  padding: 0;
+}
+.supply-list > ul {
+  margin-top: 10px;
+}
+.supply-list li {
+  margin: 0 10px 10px 10px;
+}
+.supply-list li p {
+  line-height: 20px !important;
+}
+.supply-list .orso {
+  height: 30px;
+  line-height: 30px;
+}
+.supply-list .orso .title {
+  line-height: 30px !important;
+}
+.shoplist .cell-extend-pic .m-icon {
+  margin: -3px 0 0 0;
+}
+.red {
+  color: #fa4535;
+}
@@ -12,4 +12,104 @@
       padding: 0px;
     }
   }
-}
 \ No newline at end of file
+  .m-table-view {
+    .cell-extend-pic{
+      padding: 15px 56px;
+      padding-left:95px;
+    }
+    .cell-extend-pic {
+      .pic{
+        width:80px;
+        height:80px;
+        margin-left: -90px;
+      }
+      .display-block{
+        margin-left:10px;
+      }
+    }
+    .title{
+      font-size:16px;
+      color:#333;
+      line-height: 1;
+      clear: both;
+    }
+    h3.title {
+      padding-bottom: 5px;
+      margin: 0;
+    }
+  }
+  .main-cate {
+    .value-red{
+      font-size:14px;
+      color:#fb5041;
+    }
+    .value-blue{
+      font-size:14px;
+      color:#1b6ba5;
+    }
+    .key{
+      font-size:14px;
+      color:#999;
+    }
+    .value{
+      font-size:14px;
+      color:#666;
+    }
+  }
+  li p {
+    line-height: 1;
+    padding: 5px 0;
+    margin: 0;
+  }
+  li p.body {
+    color: #999;
+    padding: 2px 0 3px 0;
+  }
+  .store-label{
+    position: absolute;
+    left: 15px;
+    top: 15px;
+  }
+  .from-label{
+    color:#999;
+    font-size:12px;
+    font-weight: 100;
+    padding: 0 10px 0 0;
+  }
+  .localtion{
+    font-size:14px;
+    color:#666;
+  }
+  .order-numbers{
+    font-size: 13px;
+    color:#999;
+  }
+}
+
+.supply-list {
+  padding: 0;
+  >ul {
+    margin-top: 10px;
+  }
+  li {
+    margin: 0 10px 10px 10px;
+    p {
+      line-height: 20px !important;
+    }
+  }
+  .orso {
+    height: 30px;
+    line-height: 30px;
+    .title {
+      line-height: 30px !important;
+    }
+  }
+}
+.shoplist {
+  .cell-extend-pic .m-icon {
+    margin: -3px 0 0 0;
+  }
+}
+.red {
+  color: #fa4535;
+}
+@import "m2.0/jquery.mobile.custom.structure.min.css";
+/***************************************************
+* feature  :  零散的ui组件的集合;
+* update   :  2015/02/03;
+* use      :  import 本文件;
+* desc     :  仅需在HTML Page引入本文件，即可调用到 reset、通用UI样式;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+/***************************************************
+* feature  :  全局样式重置;
+* update   :  2015/02/03;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+* {
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  -o-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html {
+  height: 100%;
+}
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  vertical-align: baseline;
+  background: transparent;
+}
+body {
+  font: 12px/1.5 sans-serif;
+  background-color: #F5F5F5;
+  position: relative;
+  color: #333;
+  min-height: 100%;
+  overflow-x: hidden;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+nav ul {
+  list-style: none;
+}
+li {
+  list-style: none;
+}
+em {
+  font-style: normal;
+}
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 0;
+  padding: 0;
+}
+input,
+select {
+  vertical-align: middle;
+}
+input:focus,
+button:focus {
+  outline: none;
+}
+a {
+  color: #333;
+  text-decoration: none;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  background: transparent;
+}
+a:active,
+a:visited {
+  color: #333;
+}
+input,
+img {
+  border: 0;
+  vertical-align: middle;
+}
+textarea,
+input,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+/* 清除浮动 */
+.clearfix,
+.clear {
+  display: inline-table;
+  zoom: 1;
+}
+* html .clearfix,
+* html .clear {
+  height: 1%;
+}
+* html .clearfix,
+* html .clear {
+  zoom: 1;
+}
+.clearfix,
+.clear {
+  display: block;
+}
+.clear {
+  clear: both;
+}
+.clearfix:after,
+.clear:after {
+  content: " ";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  line-height: 0px;
+}
+/***************************************************
+* feature  :  变量配置;
+* update   :  2015/02/05;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.bg-img {
+  background: url('../../images/icon/icon.png') no-repeat;
+  background-size: 150px;
+}
+/***************************************************
+* feature  :  全局头部，提供默认 深色(绿底白字) & 浅色(白底黑字)主题;
+* update   :  2015/02/03;
+* use      :  .m-header;
+* extend   :  .header-*;
+* example  :  <header class="m-header header-light"></header>;
+* desc     :  默认为深色主题, 通过 .header-light 来引用浅色主题;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.head {
+  height: 44px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.logo {
+  width: 25px;
+  background: url('../../images/icon/icon.png') no-repeat;
+  background-size: 150px;
+  background-position: -125px 11px;
+  margin: 0 15px;
+}
+.m-header {
+  z-index: 5;
+  color: #FFF;
+  background-color: #23AC38;
+  position: relative;
+}
+.m-header.header-light {
+  background: rgba(255, 255, 255, 0.8);
+  color: #000;
+}
+.m-header.header-light .text {
+  color: #666;
+}
+.m-header .head {
+  padding: 0 50px;
+  box-sizing: border-box;
+}
+.m-header .head h1 {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 44px;
+  font-weight: normal;
+  font-size: 18px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.m-header .lt-bar,
+.m-header .rt-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-width: 44px;
+  line-height: 44px;
+  height: 100%;
+  text-align: center;
+  cursor: pointer;
+  z-index: 1;
+}
+.m-header .lt-bar {
+  float: left;
+}
+.m-header .lt-bar.text {
+  padding-left: 10px;
+  text-align: left;
+}
+.m-header .rt-bar {
+  float: right;
+  left: auto;
+  right: 0;
+}
+.m-header .rt-bar.text {
+  padding-right: 10px;
+  text-align: right;
+}
+.m-header .text {
+  text-align: center;
+  line-height: 44px;
+  font-size: 15px;
+  color: #FFF;
+}
+.m-header.header-search .head {
+  padding: 7px 44px;
+}
+.m-header.header-search .search-box {
+  line-height: 30px;
+  font-size: 14px;
+  padding: 0 8px;
+  background-color: #158F28;
+  color: #eee;
+  cursor: text;
+  display: block;
+  color: #999;
+  text-align: left;
+}
+.m-header.header-search .icon-search {
+  margin-top: 7px;
+}
+.m-header.header-search .icon-search-w {
+  margin-top: 8px;
+}
+.m-header.header-search .input-wrap {
+  display: block;
+  overflow: hidden;
+  padding-left: 8px;
+  box-sizing: border-box;
+}
+.m-header.header-search .m-input {
+  float: left;
+  width: 98%;
+  display: block;
+  padding: 4px 0;
+  color: #333;
+  border: none;
+  background: none;
+}
+.m-header.header-search .m-input::-webkit-input-placeholder {
+  color: #999;
+}
+.m-header.header-search .m-dropdown {
+  float: left;
+}
+.m-header.header-search #search-btn {
+  background: none;
+  color: #fff;
+  font-size: 14px;
+}
+.m-header.header-home .head {
+  position: relative;
+  padding: 7px 10px 7px 44px;
+  margin-right: 0;
+}
+.m-header.header-home .search-box {
+  background-color: #158F28;
+  color: #FFF;
+}
+/***************************************************
+* feature  :  全局底部;
+* update   :  2015/02/03;
+* use      :  .m-footer;
+* extend   :  .footer-*;
+* example  :  <footer class="m-footer"></footer>;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-footer {
+  position: fixed !important;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 12px 10px;
+  background: rgba(255, 255, 255, 0.9);
+  z-index: 1;
+}
+/***************************************************
+* feature  :  全局icon库，提供常用icon集合;
+* update   :  2015/02/03;
+* use      :  .m-icon;
+* extend   :  .icon-*;
+* example  :  <i class="m-icon icon-back">返回<i>;
+* desc     :  默认为深色或彩色icon, 通过 .white 来引用白色icon;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+/*
+LESS variables are information about icon's compiled state, stored under its original file name
+
+.icon-home {
+  width: @icon-home-width;
+}
+
+The large array-like variables contain all information about a single icon
+@icon-home: x y offset_x offset_y width height total_width total_height image_path name;
+
+At the bottom of this section, we provide information about the spritesheet itself
+@spritesheet: width height image @spritesheet-sprites;
+*/
+/*
+The provided classes are intended to be used with the array-like variables
+
+.icon-home {
+  .sprite-width(@icon-home);
+}
+.icon-email {
+  .sprite(@icon-email);
+}
+*/
+/*
+The `.sprites` mixin generates identical output to the CSS template
+  but can be overridden inside of LESS
+
+This must be run when you have at least 2 sprites.
+  If run with a single sprite, then there will be reference errors.
+
+.sprites(@spritesheet-sprites);
+*/
+.m-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.icon-information {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px 0px;
+  background-position: -290px 0px;
+  width: 120px;
+  width: 60px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-logo-app {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -210px;
+  background-position: -290px -105px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-fiter {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -440px -360px;
+  background-position: -220px -180px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-have-point {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -668px -453px;
+  background-position: -334px -226.5px;
+  width: 24px;
+  width: 12px;
+  height: 24px;
+  height: 12px;
+  background-size: 350px;
+}
+.icon-new {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -310px;
+  background-position: -290px -155px;
+  width: 60px;
+  width: 30px;
+  height: 34px;
+  height: 17px;
+  background-size: 350px;
+}
+.icon-no-point {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -513px -480px;
+  background-position: -256.5px -240px;
+  width: 24px;
+  width: 12px;
+  height: 24px;
+  height: 12px;
+  background-size: 350px;
+}
+.icon-pro-more {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -40px;
+  background-position: -290px -20px;
+  width: 60px;
+  width: 30px;
+  height: 60px;
+  height: 30px;
+  background-size: 350px;
+}
+.icon-talking {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -344px;
+  background-position: -290px -172px;
+  width: 45px;
+  width: 22.5px;
+  height: 45px;
+  height: 22.5px;
+  background-size: 350px;
+}
+.icon-white-jt {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -680px -210px;
+  background-position: -340px -105px;
+  width: 20px;
+  width: 10px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-cdzg {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px 0px;
+  background-position: -240px 0px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-gqxx {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px -100px;
+  background-position: -240px -50px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-jhd {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px -200px;
+  background-position: -240px -100px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-nhzy {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px -300px;
+  background-position: -240px -150px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-pfsc {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: 0px -480px;
+  background-position: 0px -240px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-tcls {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -100px -480px;
+  background-position: -50px -240px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-wdnf {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -240px -360px;
+  background-position: -120px -180px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-yqxx {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -340px -360px;
+  background-position: -170px -180px;
+  width: 100px;
+  width: 50px;
+  height: 100px;
+  height: 50px;
+  background-size: 350px;
+}
+.icon-cao-mei {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -240px -240px;
+  background-position: -120px -120px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-da-suan {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -360px 0px;
+  background-position: -180px 0px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-dou-jiao {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -360px -120px;
+  background-position: -180px -60px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-hua-cai {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -360px -240px;
+  background-position: -180px -120px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-luo-bo {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: 0px -360px;
+  background-position: 0px -180px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-mo-gu {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -120px -360px;
+  background-position: -60px -180px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-ping-guo {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: 0px 0px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-pro-more2 {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -620px -477px;
+  background-position: -310px -238.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-pu-tao {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: 0px -240px;
+  background-position: 0px -120px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-tao-zi {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -240px -120px;
+  background-position: -120px -60px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-tu-dou {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -240px 0px;
+  background-position: -120px 0px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-xiang-jiao {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -120px -120px;
+  background-position: -60px -60px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-xue-li {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: 0px -120px;
+  background-position: 0px -60px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-yang-cong {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -120px -240px;
+  background-position: -60px -120px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-ying-tao {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -120px 0px;
+  background-position: -60px 0px;
+  width: 120px;
+  width: 60px;
+  height: 120px;
+  height: 60px;
+  background-size: 350px;
+}
+.icon-dgys {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -160px;
+  background-position: -290px -80px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-qtzl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -630px -160px;
+  background-position: -315px -80px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-scl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -640px -40px;
+  background-position: -320px -20px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-sgl_20150825111731 {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -630px -210px;
+  background-position: -315px -105px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-spfl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -260px;
+  background-position: -290px -130px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-wlfw {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -630px -260px;
+  background-position: -315px -130px;
+  width: 50px;
+  width: 25px;
+  height: 50px;
+  height: 25px;
+  background-size: 350px;
+}
+.icon-ddgl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -517px;
+  background-position: -290px -258.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-szgl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -620px -517px;
+  background-position: -310px -258.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-tkgl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -660px -477px;
+  background-position: -330px -238.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-wdsc {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -660px -517px;
+  background-position: -330px -258.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-xxgl {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -477px;
+  background-position: -290px -238.5px;
+  width: 40px;
+  width: 20px;
+  height: 40px;
+  height: 20px;
+  background-size: 350px;
+}
+.icon-back-top {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px -400px;
+  background-position: -240px -200px;
+  width: 80px;
+  width: 40px;
+  height: 80px;
+  height: 40px;
+  background-size: 350px;
+}
+.icon-dwtb {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -389px;
+  background-position: -290px -194.5px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.icon-lsjt {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -668px -433px;
+  background-position: -334px -216.5px;
+  width: 30px;
+  width: 15px;
+  height: 20px;
+  height: 10px;
+  background-size: 350px;
+}
+.icon-wsc {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -624px -389px;
+  background-position: -312px -194.5px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.icon-xk-no {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -433px;
+  background-position: -290px -216.5px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.icon-xk-yes {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -625px -344px;
+  background-position: -312.5px -172px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.icon-ysc {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -624px -433px;
+  background-position: -312px -216.5px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.icon-sdrz {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -100px;
+  background-position: -290px -50px;
+  width: 90px;
+  width: 45px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-sxsj {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -130px;
+  background-position: -290px -65px;
+  width: 90px;
+  width: 45px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-arrow-down {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -668px -415px;
+  background-position: -334px -207.5px;
+  width: 26px;
+  width: 13px;
+  height: 14px;
+  height: 7px;
+  background-size: 350px;
+}
+.icon-back {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -680px -160px;
+  background-position: -340px -80px;
+  width: 20px;
+  width: 10px;
+  height: 34px;
+  height: 17px;
+  background-size: 350px;
+}
+.icon-call {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -640px -310px;
+  background-position: -320px -155px;
+  width: 32px;
+  width: 16px;
+  height: 33px;
+  height: 16.5px;
+  background-size: 350px;
+}
+.icon-circle-back {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -270px -480px;
+  background-position: -135px -240px;
+  width: 70px;
+  width: 35px;
+  height: 70px;
+  height: 35px;
+  background-size: 350px;
+}
+.icon-circle-more {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -340px -480px;
+  background-position: -170px -240px;
+  width: 70px;
+  width: 35px;
+  height: 70px;
+  height: 35px;
+  background-size: 350px;
+}
+.icon-circle-star {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -410px -480px;
+  background-position: -205px -240px;
+  width: 70px;
+  width: 35px;
+  height: 70px;
+  height: 35px;
+  background-size: 350px;
+}
+.icon-circle-video {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -200px -480px;
+  background-position: -100px -240px;
+  width: 70px;
+  width: 35px;
+  height: 70px;
+  height: 35px;
+  background-size: 350px;
+}
+.icon-jrjhd {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -440px -400px;
+  background-position: -220px -200px;
+  width: 36px;
+  width: 18px;
+  height: 37px;
+  height: 18.5px;
+  background-size: 350px;
+}
+.icon-medal-gold {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -670px -130px;
+  background-position: -335px -65px;
+  width: 22px;
+  width: 11px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-medal-sliver {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -672px -310px;
+  background-position: -336px -155px;
+  width: 22px;
+  width: 11px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-phone {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -670px -100px;
+  background-position: -335px -50px;
+  width: 29px;
+  width: 14.5px;
+  height: 29px;
+  height: 14.5px;
+  background-size: 350px;
+}
+.icon-search-w {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -668px -389px;
+  background-position: -334px -194.5px;
+  width: 25px;
+  width: 12.5px;
+  height: 26px;
+  height: 13px;
+  background-size: 350px;
+}
+.icon-search {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -669px -344px;
+  background-position: -334.5px -172px;
+  width: 30px;
+  width: 15px;
+  height: 31px;
+  height: 15.5px;
+  background-size: 350px;
+}
+.icon-star {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -480px -480px;
+  background-position: -240px -240px;
+  width: 33px;
+  width: 16.5px;
+  height: 31px;
+  height: 15.5px;
+  background-size: 350px;
+}
+.icon-up-down {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -560px -400px;
+  background-position: -280px -200px;
+  width: 20px;
+  width: 10px;
+  height: 24px;
+  height: 12px;
+  background-size: 350px;
+}
+.icon-yjt {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -680px -260px;
+  background-position: -340px -130px;
+  width: 17px;
+  width: 8.5px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+.icon-arrow {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -680px -260px;
+  background-position: -340px -130px;
+  width: 17px;
+  width: 8.5px;
+  height: 30px;
+  height: 15px;
+  background-size: 350px;
+}
+/***************************************************
+* feature  :  分隔栏;
+* update   :  2015/02/03;
+* use      :  .m-segment;
+* extend   :  .segment-*;
+* example  :  <ul class="m-segment"><li class="on"><a href="#" class="text">商品详情</a></li><li><a href="#" class="text">商品评论</a></li></ul>;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-segment {
+  overflow: hidden;
+  vertical-align: middle;
+}
+.m-segment li {
+  width: 50%;
+  line-height: 30px;
+  text-align: center;
+  float: left;
+  background-color: #FFF;
+  color: #23AC38;
+  border: 1px solid #23AC38;
+  border-right: none;
+  box-sizing: border-box;
+}
+.m-segment li:last-child {
+  border-right: 1px solid #23AC38;
+}
+.m-segment li .segment-text {
+  display: block;
+  color: #23AC38;
+  line-height: 30px;
+  font-size: 14px;
+}
+.m-segment .on {
+  color: #FFF;
+  background-color: #23AC38;
+}
+.m-segment .on .segment-text {
+  color: #FFF;
+}
+.m-segment.tab-col-2 li {
+  width: 50% !important;
+}
+.m-segment.tab-col-3 li {
+  width: 33.3% !important;
+}
+.m-segment.tab-col-4 li {
+  padding-right: 0;
+  width: 25% !important;
+}
+/***************************************************
+* feature  :  表格;
+* update   :  2015/02/03;
+* use      :  .m-table;
+* extend   :  .table-*;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 14px;
+  background-color: #FFF;
+}
+.m-table thead tr {
+  background-color: #f4f7fa;
+}
+.m-table th,
+.m-table td {
+  font-size: 14px;
+  color: #333;
+  padding: 6px 15px;
+  border: 1px solid #dfe5e7;
+  font-weight: normal;
+}
+.m-table td {
+  color: #999;
+}
+/***************************************************
+* feature  :  按钮，默认提供3种样式;
+* update   :  2015/02/03;
+* use      :  .m-btn;
+* extend   :  .btn-*;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-btn,
+a.m-btn {
+  display: inline-block;
+  padding: 0 15px;
+  min-width: 43px;
+  line-height: 28px;
+  font-size: 14px;
+  color: #666;
+  text-align: center;
+  border: none;
+  background-color: #FFF;
+  cursor: pointer;
+  vertical-align: middle;
+  border: 1px solid #EEE;
+  background-color: #EEE;
+}
+.m-btn.btn-success,
+a.m-btn.btn-success {
+  color: #FFF;
+  background-color: #23AC38;
+  border-color: #23AC38;
+}
+.m-btn.btn-success.reverse,
+a.m-btn.btn-success.reverse {
+  background-color: #FFF;
+  color: #23ac38;
+  line-height: 43px;
+  border: 1px solid #23ac38;
+}
+.m-btn.btn-large,
+a.m-btn.btn-large {
+  font-size: 16px;
+  line-height: 48px;
+}
+.m-btn.btn-default,
+a.m-btn.btn-default {
+  background-color: #FFF;
+  color: #666;
+  border-color: #ddd;
+}
+.m-btn.btn-warning,
+a.m-btn.btn-warning {
+  color: #FFF;
+  background-color: #ff9d2c;
+  border-color: #ff9d2c;
+}
+.m-btn.btn-danger,
+a.m-btn.btn-danger {
+  color: #FFF;
+  background-color: #FA4535;
+  border-color: #FA4535;
+}
+.m-btn.btn-text,
+a.m-btn.btn-text {
+  background: none;
+  border: 1px solid #23ac38;
+  color: #23ac38;
+  width: 65px;
+  font-size: 12px;
+  text-align: center;
+  line-height: 23px;
+  padding: 0;
+  float: right;
+  border-radius: 2px;
+  margin-top: -2px;
+}
+.m-btn.disabled,
+a.m-btn.disabled {
+  background-color: #ddd;
+  border-color: #ddd;
+}
+/***************************************************
+* feature  :  表单组件类集合，提供input、textarea等样式;
+* update   :  2015/02/03;
+* use      :  按需使用;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-input {
+  display: inline-block;
+  line-height: normal;
+  line-height: 22px;
+  min-height: 22px;
+  padding: 3px;
+  background: none;
+  font-size: 14px;
+  color: #000;
+  border: 1px solid #ddd;
+  text-align: left;
+  outline: none;
+  background-color: #f5f5f5;
+  border-radius: 0;
+  box-shadow: none;
+  vertical-align: middle;
+}
+.m-input.input-small {
+  width: 47px;
+}
+.m-input.input-large {
+  width: 92px;
+}
+.m-input:focus {
+  background-color: #fff;
+  border-color: #23AC38;
+}
+.m-textarea {
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  font-size: 14px;
+  min-height: 90px;
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  margin-top: 10px;
+  outline: none;
+  border-radius: 0;
+  box-shadow: none;
+  resize: none;
+  -webkit-appearance: none;
+}
+.m-input-number {
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #FFF;
+  font-size: 0;
+}
+.m-input-number input {
+  line-height: normal;
+  float: left;
+  height: 22px;
+  padding: 5px 5px 6px;
+  font-size: 12px;
+  color: #666;
+  width: 40px;
+  text-align: center;
+}
+.m-input-number span {
+  float: left;
+  position: relative;
+  width: 33px;
+  height: 33px;
+  cursor: pointer;
+}
+.m-input-number span:before,
+.m-input-number span:after {
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 1px;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  background-color: #999;
+  font-size: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+.m-input-number .reduce {
+  border-right: 1px solid #ccc;
+}
+.m-input-number .reduce:after {
+  display: none;
+}
+.m-input-number .add {
+  border-left: 1px solid #ccc;
+}
+.m-input-number .add:after {
+  content: '';
+  position: absolute;
+  height: 15px;
+  width: 1px;
+  margin: -7px 0 0;
+}
+input.m-radio {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -580px -433px;
+  background-position: -290px -216.5px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  display: inline-block;
+  border: none;
+  cursor: pointer;
+  margin: 0px;
+  position: relative;
+  outline: none;
+}
+input.m-radio:focus {
+  outline: 0;
+  outline: none;
+}
+input.m-radio:checked {
+  background-image: url(../../images/dist/sprite.png);
+  background-position: -625px -344px;
+  background-position: -312.5px -172px;
+  width: 44px;
+  width: 22px;
+  height: 44px;
+  height: 22px;
+  background-size: 350px;
+}
+.m-select {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 50px;
+}
+.m-select .select-text {
+  color: #999;
+  text-align: right;
+  display: block;
+  line-height: 21px;
+}
+.m-select select {
+  border: 0;
+  font-size: 14px;
+  background: none;
+  outline: none;
+  -webkit-appearance: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+}
+.m-input-date {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 50px;
+}
+.m-input-date .current {
+  color: #999;
+  text-align: right;
+  display: block;
+  line-height: 21px;
+}
+.m-input-date input {
+  border: 0;
+  font-size: 14px;
+  background: none;
+  outline: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+/***************************************************
+* feature  :  深色背景遮罩层、常配合.m-popup使用;
+* update   :  2015/02/03;
+* use      :  .m-mask;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-mask {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  right: 0;
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+  overflow: hidden;
+  -webkit-transition: opacity 0.05s ease-in-out;
+  -moz-transition: opacity 0.05s ease-in-out;
+  -o-transition: opacity 0.05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
+}
+/***************************************************
+* feature  :  popup;
+* update   :  2015/02/03;
+* use      :  .m-popup;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-popup {
+  position: fixed;
+  right: 0;
+  left: 50%;
+  bottom: 0;
+  width: 270px;
+  margin-left: -135px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 4px;
+  z-index: 20;
+  -webkit-transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
+  -moz-transition: -moz-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
+  -o-transition: -o-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
+  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
+}
+.m-popup.popup-large {
+  left: 25px;
+  right: 25px;
+  width: auto;
+  margin-left: 0;
+}
+.m-popup .popup-head h1 {
+  font-size: 14px;
+  color: #000;
+  line-height: 50px;
+  text-align: center;
+  font-weight: 400;
+}
+.m-popup .popup-cont .title {
+  color: #666;
+}
+.m-popup .popup-cont .m-table-view {
+  margin-top: 0;
+  background: none;
+}
+.m-popup .popup-foot .m-btn {
+  float: left;
+  width: 50%;
+  background: none;
+  color: #027aff;
+  box-sizing: border-box;
+  border-radius: 0;
+  border: none;
+}
+.m-popup .popup-foot .m-btn:first-child {
+  border-right: 1px solid #ddd;
+}
+/***************************************************
+* feature  :  swipe.js的图片滑动组件;
+* update   :  2015/02/03;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-slider {
+  position: relative;
+  height: 220px;
+  width: 100%;
+  color: #333;
+  text-align: center;
+  line-height: 23px;
+  font-size: 14px;
+}
+.m-slider .slider-wrap {
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+.m-slider .slider-wrap div {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+}
+.m-slider .page-contrl {
+  float: left;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: -16px;
+  text-align: center;
+}
+.m-slider .page-contrl li {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background: #d3d3d3;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+.m-slider .page-contrl li:last-child {
+  margin-right: 0;
+}
+.m-slider .page-contrl li.on {
+  background: #00b4af;
+}
+/***************************************************
+* feature  :  评论统计模块;
+* update   :  2015/02/03;
+* use      :  .m-stat;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-stat {
+  padding: 12px 0 12px 90px;
+  background-color: #fff;
+}
+.m-stat .rate {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  float: left;
+  margin-left: -58px;
+  margin-top: 0;
+}
+.m-stat .rate em {
+  font-style: normal;
+  font-size: 18px;
+  color: #FF9D2C;
+}
+.m-stat ul {
+  width: 100%;
+}
+.m-stat li {
+  width: 100%;
+  font-size: 10px;
+  color: #666;
+  box-sizing: border-box;
+  padding: 0 50px;
+  overflow: hidden;
+  position: relative;
+}
+.m-stat li .text {
+  float: left;
+  margin-left: -50px;
+  text-align: right;
+  width: 70px;
+  margin-right: 15px;
+}
+.m-stat li .progress {
+  display: block;
+  background-color: #ddd;
+  height: 10px;
+  font-size: 0;
+  margin-top: 3px;
+}
+.m-stat li .progress span {
+  display: block;
+  height: 100%;
+  background-color: #ff9d2c;
+}
+.m-stat li .percent {
+  position: absolute;
+  right: 4px;
+  top: 0;
+  text-align: left;
+  width: 36px;
+  margin-left: 10px;
+}
+/***************************************************
+* feature  :  评论星级样式;
+* update   :  2015/02/03;
+* use      :  .m-star;
+* extend   :  ;
+* example  :  ;
+* desc     :  m-star用于展示，m-like用户交互;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-star {
+  width: 75px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  background: url("../../images/icon/star@2x.png") left center repeat-x;
+  background-size: 15px;
+}
+.m-star span {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: url("../../images/icon/star_ht@2x.png") left center repeat-x;
+  background-size: 15px;
+}
+.m-like {
+  float: left;
+  height: 25px;
+}
+.m-like span {
+  float: left;
+  width: 25px;
+  height: 25px;
+  padding: 0 1px;
+  background: url("../../images/icon/star@2x.png") left center no-repeat;
+  background-size: 25px;
+  cursor: pointer;
+}
+.m-like .on {
+  background-image: url("../../images/icon/star_ht@2x.png");
+  background-size: 25px;
+}
+/***************************************************
+* feature  :  商品详情页，阶梯价格;
+* update   :  2015/02/03;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-step {
+  overflow: hidden;
+  position: relative;
+  padding: 11px 0;
+}
+.m-step:after {
+  left: auto;
+  right: -4px;
+  border: 8px solid #ddd;
+  border-color: transparent transparent transparent #ddd;
+  background: none;
+  width: 0;
+  height: 0;
+  margin-top: -7px;
+  font-size: 0;
+}
+.m-step li {
+  float: left;
+  text-align: left;
+  padding: 0 5px;
+  position: relative;
+  min-width: 85px;
+  box-sizing: border-box;
+}
+.m-step .desc,
+.m-step .price {
+  font-size: 14px;
+  color: #6c2;
+  display: block;
+  padding-bottom: 8px;
+}
+.m-step .price {
+  font-size: 18px;
+  font-style: normal;
+  padding: 0;
+  line-height: 1.1;
+}
+.m-list-view {
+  margin-top: 10px;
+}
+.m-list-view .cell {
+  font-size: 14px;
+  padding: 0 0 0 15px;
+  background-color: #FFF;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+}
+.m-list-view .cell-header {
+  background-color: #f8f8f8;
+  padding: 0 10px;
+}
+.m-list-view .cell-header .title {
+  font-size: 13px;
+  color: #333;
+  line-height: 35px;
+  width: auto;
+}
+.m-list-view .cell-header .text {
+  font-size: 13px;
+  line-height: 35px;
+  float: right;
+  color: #9e9e9e;
+  text-align: right;
+  margin: 0;
+}
+.m-list-view .cell-basic {
+  padding: 11px 10px;
+}
+.m-list-view .cell-basic .title,
+.m-list-view .cell-basic .text {
+  float: none;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 10px 0 0;
+  line-height: 1.5;
+}
+.m-list-view .cell-basic .sub-title {
+  padding-top: 10px;
+  font-size: 13px;
+  color: #999;
+}
+.m-list-view .cell-radio {
+  text-align: right;
+  padding: 0 10px;
+  margin-bottom: 10px;
+  background-color: #eee;
+}
+.m-list-view .cell-radio .title {
+  color: #333;
+  width: auto;
+  text-align: left;
+}
+.m-list-view .cell-radio .text {
+  float: none;
+  text-align: right;
+}
+.m-list-view .cell-radio .m-radio {
+  margin-left: 8px;
+}
+.m-list-view .cell-radio .m-table-view {
+  margin: 0 -10px;
+}
+.m-list-view .cell-radio .m-table-view .cell-radio {
+  margin: 0;
+  background-color: #FFF;
+}
+.m-list-view .cell-extend .m-table-view {
+  margin: 0 0 0 45px;
+}
+.m-list-view .cell-extend .m-table-view .cell {
+  padding: 0;
+}
+.m-list-view .cell-extend .m-table-view .text {
+  margin-left: 0;
+}
+.m-list-view .cell-pic {
+  padding: 15px;
+}
+.m-list-view .cell-pic .pic {
+  float: left;
+}
+.m-list-view .cell-pic .cont {
+  margin-left: 90px;
+}
+.m-list-view .cell-pic h3 {
+  font-size: 14px;
+  font-weight: normal;
+}
+.m-list-view .cell-pic em {
+  font-size: 16px;
+  font-weight: normal;
+}
+.m-list-view .cell-pic p {
+  color: #9b9b9b;
+  font-size: 12px;
+}
+.m-list-view .acc-icon {
+  position: relative;
+  padding-right: 30px;
+}
+.m-list-view .acc-icon .acc {
+  position: absolute;
+  right: 0;
+  top: 0;
+  min-width: 30px;
+  height: 100%;
+  line-height: 44px;
+  text-align: left;
+  color: #999;
+  text-align: right;
+}
+.m-list-view .acc-icon .acc .m-icon {
+  margin-right: 4px;
+}
+.m-list-view .title {
+  font-size: 15px;
+  color: #999;
+  float: left;
+  font-weight: 400;
+  line-height: 44px;
+}
+.m-list-view .text {
+  display: block;
+  font-size: 15px;
+  color: #333;
+  line-height: 44px;
+  position: relative;
+  white-space: nowrap;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.m-list-view .text .m-input {
+  font-size: 15px;
+}
+/***************************************************
+* feature  :  文本消息遮罩;
+* update   :  2015/02/03;
+* use      :  .m-message;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-message {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: none;
+  text-align: center;
+  z-index: 9999;
+}
+.m-message .text {
+  margin-top: 20%;
+  display: inline-block;
+  vertical-align: middle;
+  color: #FFF;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  font-size: 14px;
+  padding: 15px 45px;
+}
+.m-tips {
+  padding: 20px 15px;
+  min-height: 70px;
+}
+.m-tips .pic {
+  float: left;
+  width: 70px;
+  height: 70px;
+  margin-right: 10px;
+}
+.m-tips h3 {
+  font-size: 16px;
+  color: #FF9D2C;
+  margin-bottom: 8px;
+  font-weight: 400;
+}
+.m-tips p {
+  font-size: 12px;
+  color: #999;
+}
+/***************************************************
+* feature  :  tab选项卡切换;
+* update   :  2015/02/03;
+* use      :  ;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-tab {
+  width: 100%;
+  background-color: #FFF;
+  font-size: 14px;
+  color: #999;
+  border-width: 1px 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
+.m-tab a {
+  color: #999;
+}
+.m-tab li {
+  float: left;
+  min-width: 32px;
+  padding-right: 18px;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+}
+.m-tab li:last-child {
+  padding-right: 0;
+}
+.m-tab .on a {
+  color: #2caa3f;
+  display: block;
+  position: relative;
+}
+.m-tab .on a:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: #23AC38;
+}
+.m-tab.tab-col-2 li {
+  width: 50% !important;
+}
+.m-tab.tab-col-4 li {
+  padding-right: 0;
+  width: 25% !important;
+}
+/***************************************************
+* feature  :  表格视图, 提供类ios UITableView风格布局;
+* update   :  2015/02/03;
+* use      :  .m-table-view;
+* extend   :  ;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-table-view-old {
+  background-color: #fff;
+}
+.m-table-view-old li {
+  padding: 15px;
+  border-bottom: 1px solid #ddd;
+}
+.m-table-view-old .pic {
+  float: left;
+  width: 60px;
+  height: 60px;
+  margin-right: 13px;
+}
+.m-table-view-old h3 {
+  font-size: 14px;
+  color: #FA4535;
+  margin-bottom: 4px;
+}
+.m-table-view-old p {
+  color: #999;
+  font-size: 12px;
+}
+.m-table-view {
+  width: 100%;
+  background-color: #FFF;
+  border-top: 1px solid #ddd;
+  margin-top: 10px;
+}
+.m-table-view .cell {
+  font-size: 14px;
+  padding: 11px 15px;
+  text-align: right;
+  border-bottom: 1px solid #ddd;
+  overflow: hidden;
+  position: relative;
+}
+.m-table-view .acc-icon {
+  position: relative;
+}
+.m-table-view .acc-icon .text {
+  padding-right: 15px;
+}
+.m-table-view .acc-icon:after {
+  content: '';
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  width: 10px;
+  height: 15px;
+  background: url("../../images/icon/arrow_rt@2x.png") center center no-repeat;
+  background-size: 10px;
+  margin-top: -7.5px;
+}
+.m-table-view .title {
+  font-size: 14px;
+  color: #333;
+  float: left;
+  font-weight: 400;
+}
+.m-table-view .text {
+  display: inline-block;
+  font-size: 14px;
+  color: #999;
+}
+.m-table-view .cell-extend {
+  padding: 11px 45px 11px 110px;
+  text-align: left;
+}
+.m-table-view .cell-extend .m-icon {
+  margin-right: 10px;
+}
+.m-table-view .cell-extend .title {
+  line-height: 36px;
+  margin-left: -95px;
+  display: inline-block;
+  float: none;
+  vertical-align: middle;
+}
+.m-table-view .cell-extend .text {
+  display: inline-block;
+  text-align: left;
+  padding: 0 10px;
+  font-size: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  color: #999;
+  vertical-align: middle;
+}
+.m-table-view .cell-extend .acc {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -10px;
+  float: right;
+  width: 20px;
+  height: 20px;
+}
+.m-table-view .cell-extend-pic {
+  padding: 11px 45px 11px 110px;
+  padding: 15px 85px;
+  text-align: left;
+  font-size: 12px;
+}
+.m-table-view .cell-extend-pic .m-icon {
+  margin-right: 10px;
+}
+.m-table-view .cell-extend-pic .title {
+  line-height: 36px;
+  margin-left: -95px;
+  display: inline-block;
+  float: none;
+  vertical-align: middle;
+}
+.m-table-view .cell-extend-pic .text {
+  display: inline-block;
+  text-align: left;
+  padding: 0 10px;
+  font-size: 12px;
+  width: 100%;
+  box-sizing: border-box;
+  color: #999;
+  vertical-align: middle;
+}
+.m-table-view .cell-extend-pic .acc {
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -10px;
+  float: right;
+  width: 20px;
+  height: 20px;
+}
+.m-table-view .cell-extend-pic .title {
+  margin-left: 0;
+  font-size: 12px;
+  text-align: left;
+  margin: 0 0 5px;
+  line-height: 1.5;
+}
+.m-table-view .cell-extend-pic .detail {
+  color: #999;
+  font-size: 12px;
+}
+.m-table-view .cell-extend-pic .pic {
+  width: 60px;
+  height: 60px;
+  float: left;
+  margin-left: -70px;
+}
+.m-table-view .cell-extend-pic .text {
+  position: absolute;
+  right: 0;
+  top: 15px;
+  text-align: right;
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+  width: 70px;
+  padding: 0 15px 0 0;
+  box-sizing: content-box;
+}
+.m-table-view .cell-extend-pic .text em {
+  display: block;
+  font-style: normal;
+}
+/***************************************************
+* feature  :  actionSheet组件，模拟IOS actionSheet外观;
+* update   :  2015/02/03;
+* use      :  .m-actionsheet;
+* extend   :  .actionsheet-*;
+* example  :  ;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.m-actionsheet {
+  position: fixed;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  padding-bottom: 10px;
+  z-index: 20;
+  -webkit-transform: translate(0, 100%) translateZ(0);
+  -ms-transform: translate(0, 100%) translateZ(0);
+  -o-transform: translate(0, 100%) translateZ(0);
+  transform: translate(0, 100%) translateZ(0);
+  -webkit-transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
+  -moz-transition: -moz-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
+  -o-transition: -o-transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
+  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
+}
+.m-actionsheet ul {
+  list-style: none;
+}
+.m-actionsheet li {
+  line-height: 50px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.95);
+  border-top: 1px solid #ddd;
+}
+.m-actionsheet li:first-child {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border: none;
+}
+.m-actionsheet li:last-child {
+  margin-top: 10px;
+  border-radius: 8px;
+  border: none;
+}
+.m-actionsheet li.last-item {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.m-actionsheet li a {
+  display: block;
+  color: #027aff;
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+}
+/*
+* use      :  .m-dropdown;
+*/
+.m-dropdown {
+  display: inline-block;
+  line-height: 30px;
+  overflow: visible;
+}
+.m-dropdown .current {
+  font-size: 14px;
+  color: #FFF;
+  position: relative;
+  display: inline-block;
+  padding: 0 25px 0 10px;
+  cursor: pointer;
+}
+.m-dropdown .current:after {
+  content: '';
+  position: absolute;
+  right: 7px;
+  top: 50%;
+  width: 11px;
+  height: 7px;
+  cursor: pointer;
+  margin-top: -3px;
+  background: url("../../images/icon.png") -121px -206px no-repeat;
+  background-size: 150px;
+}
+.m-dropdown .dropdown-items {
+  background: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: 40px;
+  border-radius: 3px;
+  min-width: 85px;
+  display: none;
+}
+.m-dropdown .dropdown-items:before {
+  content: '';
+  position: absolute;
+  top: -16px;
+  left: 17px;
+  width: 0;
+  height: 0;
+  font-size: 0;
+  overflow: hidden;
+  border: 8px solid rgba(0, 0, 0, 0.8);
+  border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+}
+.m-dropdown .dropdown-items .item {
+  display: block;
+  line-height: 45px;
+  border-bottom: 1px solid #666;
+  text-align: left;
+  color: #EEE;
+}
+.m-dropdown .dropdown-items .item a {
+  padding: 0 15px;
+  font-size: 14px;
+  display: inline-block;
+  color: #EEE;
+}
+.m-dropdown .dropdown-items .item:first-child {
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.m-dropdown .dropdown-items .item:last-child {
+  border: none;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.m-dropdown .dropdown-items .item .m-icon {
+  margin-right: 5px;
+}
+/***************************************************
+* feature  :  工具类class，提供浮动清除、文本对齐、显示隐藏等;
+* update   :  2015/02/03;
+* use      :  按需使用对应class即可;
+* desc     :  ;
+* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
+*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
+****************************************************/
+.text-left {
+  text-align: left !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-nowrap {
+  white-space: nowrap !important;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-indent {
+  text-indent: -999em;
+}
+.float-left {
+  float: left !important;
+}
+.float-right {
+  float: right !important;
+}
+.float-none {
+  float: none !important;
+}
+.display-block {
+  display: block !important;
+}
+.clearfix:after {
+  content: '';
+  display: block;
+  height: 0;
+  overflow: hidden;
+  font-size: 0;
+  clear: both;
+}
+.m-hide {
+  display: none !important;
+  visibility: hidden;
+  opacity: 0;
+  z-index: -1;
+}
+.m-hidden {
+  visibility: hidden;
+  opacity: 0;
+  z-index: -1;
+}
+.m-show {
+  display: block !important;
+  visibility: visible;
+}
+.m-separate {
+  position: relative;
+  width: 100%;
+  line-height: 50px;
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  overflow: visible;
+}
+.m-more,
+a.m-more {
+  display: block;
+  font-size: 12px;
+  text-align: center;
+  color: #999;
+  line-height: 45px;
+  background-color: #FFF;
+}
+.m-animate-hide {
+  -webkit-transform: translate(0, 100%) translateZ(0) !important;
+  -ms-transform: translate(0, 100%) translateZ(0) !important;
+  -o-transform: translate(0, 100%) translateZ(0) !important;
+  transform: translate(0, 100%) translateZ(0) !important;
+}
+.m-animate-show {
+  -webkit-transform: translate(0, 0) translateZ(0) !important;
+  -ms-transform: translate(0, 0) translateZ(0) !important;
+  -o-transform: translate(0, 0) translateZ(0) !important;
+  transform: translate(0, 0) translateZ(0) !important;
+}
+.hidden {
+  opacity: 0;
+  z-index: -1;
+}
+.font-white {
+  color: #FFF !important;
+}
+.font-gray {
+  color: #666 !important;
+}
+.font-light {
+  color: #999 !important;
+}
+.font-yellow {
+  color: #FF9D2C !important;
+}
+.font-orange {
+  color: #FF6B00 !important;
+}
+.font-red {
+  color: #fa4535 !important;
+}
+.font-green {
+  color: #23ac38 !important;
+}
+/**
+	m/m_bar
+	左下角工具条
+*/
+.m-bar {
+  position: absolute;
+  z-index: 10;
+}
+.m-bar-bg {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+}
+.m-bar-content {
+  position: fixed;
+  z-index: 10;
+  left: 20px;
+  bottom: 65px;
+  text-align: center;
+}
+.m-bar-content .m-bar-btn {
+  position: relative;
+  width: 46px;
+  height: 46px;
+  border-radius: 100%;
+  background: #66cc22;
+  border: 2px #fff solid;
+  z-index: 1001;
+}
+.m-bar-content .m-bar-icon {
+  margin: 0;
+  display: inline-block;
+  height: 100%;
+}
+.m-bar-content a {
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  left: 0;
+  top: 0;
+  display: block;
+  background: #ffffff;
+  border-radius: 100%;
+  font-size: 12px;
+  color: #666;
+  -webkit-transform: translate(0, 0) translateZ(0);
+  -moz-transform: translate(0, 0) translateZ(0);
+  -o-transform: translate(0, 0) translateZ(0);
+  transform: translate(0, 0) translateZ(0);
+  -webkit-transition: -webkit-transform ease-out 0.25s;
+  -moz-transition: -moz-transform ease-out 0.25s;
+  -ms-transition: -ms-transform ease-out 0.25s;
+  -o-transition: -o-transform ease-out 0.25s;
+  transition: transform ease-out 0.25s;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  /* Chrome 和 Safari */
+  -moz-backface-visibility: hidden;
+  /* Firefox */
+  -ms-backface-visibility: hidden;
+  /* Internet Explorer */
+}
+.m-bar-content p {
+  line-height: normal;
+  margin-top: -2px;
+}
+.m-bar-content .icon {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  line-height: normal;
+  margin-top: 5px;
+  background: url('../../images/icon/icon.png') no-repeat;
+  background-size: 150px;
+}
+.m-bar-content .icon-home {
+  background-position: 0 -309px;
+}
+.m-bar-content .icon-me {
+  background-position: -23px -309px;
+}
+.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;
+  border: none;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+ul {
+  list-style: none;
+}
+.m-page {
+  padding-bottom: 80px;
+}
+.m-list-text {
+  background-color: #FFF;
+  border-top: 1px solid #ddd;
+}
+.m-list-text li {
+  padding: 15px;
+  border-bottom: 1px solid #ddd;
+}
+.m-list-text .author {
+  float: right;
+  font-size: 12px;
+  color: #999;
+}
+.m-list-text p {
+  color: #666;
+  font-size: 14px;
+}
+.s-page {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  min-height: 100%;
+  background: #f5f5f5;
+  display: none;
+  z-index: 99;
+}
+.transition-wrapper {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.transition-wrapper .m-page {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.transition-wrapper body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.transition-up {
+  background: #F5F5F5;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-bottom: 20px;
+  -webkit-transform: translate3d(0px, 100%, 0px);
+  -moz-transform: translate3d(0px, 100%, 0px);
+  transform: translate3d(0px, 100%, 0px);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  -moz-transition: -moz-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  -o-transition: -o-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+.transition-up .transition-content {
+  min-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.transition-up.show {
+  -webkit-transform: translate3d(0px, 0%, 0px);
+  -moz-transform: translate3d(0px, 0%, 0px);
+  transform: translate3d(0px, 0%, 0px);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  -moz-transition: -moz-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  -o-transition: -o-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.m-no-data {
+  margin-top: 50px;
+  text-align: center;
+  font-size: 18px;
+  color: #666;
+}
+.m-no-data .no-data-icon {
+  height: 150px;
+  background: url("../../images/no-data.png") center center no-repeat;
+  background-size: 150px;
+  margin-bottom: 20px;
+}
+.m-city {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
+  display: inline-block;
+  vertical-align: middle;
+}
+.to-app-box {
+  position: fixed;
+  bottom: -100%;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+}
+.to-app-box .ll {
+  float: left;
+}
+.to-app-box .rr {
+  float: right;
+}
+.to-app-box .to-app-bg {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.7);
+}
+.to-app-box .app-close,
+.to-app-box .app-logo,
+.to-app-box .app-info {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+.to-app-box .app-close {
+  width: 18px;
+  height: 19px;
+  background: url("../../images/icon/d-x.png") 0 0 no-repeat;
+  background-size: 18px;
+}
+.to-app-box .app-logo {
+  width: 35px;
+  height: 35px;
+  background: url("../../images/icon/d-logo.png") 0 0 no-repeat;
+  background-size: 35px;
+}
+.to-app-box .app-info {
+  color: #fff;
+  font-size: 15px;
+}
+.to-app-box .app-info p {
+  font-size: 12px;
+}
+.to-app-box .app-download {
+  width: 89px;
+  height: 36px;
+  margin-top: 3px;
+  background: url("../../images/icon/d-btn.png") 0 0 no-repeat;
+  background-size: 87px;
+}
+/*重置按钮*/
+.clear-view {
+  text-align: center;
+  padding-top: 10px;
+}
+.clear-view .m-btn {
+  padding: 0 30px;
+  line-height: 40px;
+}
+.ui-loader-default {
+  width: 4.125em;
+  height: 4.125em;
+  margin-left: -2.0625em;
+  margin-top: -2.0625em;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+.ui-loader .ui-icon-loading {
+  width: 4em;
+  height: 4em;
+  border-radius: 0;
+  background-color: transparent;
+}
+.ui-icon-loading {
+  background: url(../../images/ajax-loader.gif) center center no-repeat;
+  background-size: 4.125em 4.125em;
+}
+@import "m/jquery.mobile.custom.structure.min.css";
 /***************************************************
 * feature  :  零散的ui组件的集合;
 * update   :  2015/02/03;
@@ -16,7 +17,6 @@
 * feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
 *          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
 ****************************************************/
-@import "m/jquery.mobile.custom.structure.min.css";
 * {
   -moz-tap-highlight-color: rgba(0, 0, 0, 0);
   -o-tap-highlight-color: rgba(0, 0, 0, 0);
+/**
+ * name : zzf
+ * info : 
+ */
+.m-tab {
+  height: 45px;
+  padding: 0px;
+}
+.m-tab li {
+  width: 29.3%;
+  padding: 0 2%;
+  line-height: 43px;
+}
+.m-tab li.on a:after {
+  height: 2px;
+  background-color: #2caa3f;
+}
+.hint {
+  height: 40px;
+  background: #faaf19;
+  position: fixed;
+  bottom: 0px;
+  width: 100%;
+  font-size: 16px;
+  text-align: center;
+  color: #fff;
+  line-height: 40px;
+}
+.hint a {
+  margin-left: 10px;
+  color: #fff;
+  border: 1px solid #fff;
+  padding: 5px 10px;
+}
+#add_coupons p {
+  height: 45px;
+  line-height: 45px;
+  margin: 0 15px;
+  font-size: 14px;
+  color: #999;
+}
+#add_coupons .input-view {
+  height: 50px;
+  background: #fff;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  line-height: 50px;
+}
+#add_coupons .input-view input {
+  color: #bbb;
+  font-size: 16px;
+  height: 50px;
+  width: 100%;
+  padding-left: 15px;
+}
+#add_coupons .input-view input:focus {
+  color: #333;
+}
+#add_coupons .m-btn {
+  display: block;
+  margin: 15px;
+  background: #faaf19;
+  color: #fff;
+}
@@ -12,51 +12,6 @@
   background: url('../../images/icon/icon.png') no-repeat;
   background-size: 150px;
 }
-/**
- * name : zzf
- * info : 
- */
-.acoupons {
-  height: 50px;
-  padding: 10px 0;
-  background: #fff;
-  border-bottom: 1px solid #ddd;
-  border-top: 1px solid #ddd;
-  margin-top: 10px;
-  position: relative;
-}
-.acoupons img {
-  float: left;
-  margin-left: 10px;
-  width: 50px;
-  height: 50px;
-  background-size: cover;
-}
-.acoupons .cont {
-  font-size: 12px;
-  line-height: 18px;
-  margin-left: 70px;
-  color: #333;
-}
-.acoupons .cont .time {
-  color: #999;
-}
-.acoupons .icon-about {
-  position: absolute;
-  right: 0px;
-  top: 0px;
-}
-.acoupons .icon-use,
-.acoupons .icon-overdue {
-  position: absolute;
-  right: 5px;
-  top: 5px;
-}
-.acoupons .m-radio {
-  position: absolute;
-  top: 25px;
-  right: 25px;
-}
 .orderConfirm {
   background-color: #F5F5F5;
 }
+/**
+ * name : zzf
+ * info : 
+ */
+#relevance .relevance-msg {
+  text-align: center;
+  margin-top: 25px;
+}
+#relevance .relevance-msg img {
+  width: 75px;
+  height: 75px;
+  border-radius: 50%;
+}
+#relevance .relevance-msg span {
+  margin: 0 20px;
+}
+#relevance .relevance-msg .info {
+  line-height: 25px;
+  margin-top: 15px;
+  font-size: 14px;
+  color: #999;
+}
+#relevance .relevance-msg .info .name {
+  font-size: 16px;
+  color: #333;
+}
+#relevance .relevance-bound {
+  margin: 10px;
+  background: #fff;
+  border: 1px solid #ddd;
+  padding-bottom: 10px;
+}
+#relevance .relevance-bound .head {
+  display: block;
+  height: 43px;
+}
+#relevance .relevance-bound .head p {
+  width: 50%;
+  line-height: 43px;
+  float: left;
+  border-bottom: 1px solid #ddd;
+  font-size: 16px;
+  border-top: 2px solid #fff;
+  color: #999;
+  border-right: 1px solid #ddd;
+  margin-right: -1px;
+}
+#relevance .relevance-bound .head p.on {
+  color: #23ac38;
+  border-top: 2px solid #23ac38;
+  border-bottom: 1px solid #fff;
+}
+#relevance .relevance-bound .relevance-form li {
+  border: 1px solid #ddd;
+  margin: 15px 15px 0 15px;
+}
+#relevance .relevance-bound .relevance-form li input {
+  font-size: 16px;
+  color: #bbb;
+}
+#relevance .relevance-bound .relevance-form li input:focus {
+  color: #333;
+}
+#relevance .relevance-bound .relevance-form .m-btn {
+  display: block;
+  margin: 15px 15px 0;
+}
+#relevance .relevance-bound .relevance-form .firm-reg-reg {
+  background: #fff;
+  border: 1px solid #FF9D2C;
+  color: #FF9D2C;
+  margin-top: 10px;
+}
@@ -154,4 +154,4 @@ header {
   border: 1px solid #ddd;
   line-height: 50px;
   margin: 30px 10px 15px;
-}
 \ No newline at end of file
+}
@@ -21,6 +21,7 @@
     "grunt": "^0.4.5",
     "grunt-contrib-less": "^1.0.1",
     "grunt-contrib-watch": "^0.6.1",
+    "grunt-spritesmith": "^5.0.0",
     "less": "^2.5.1",
     "node-sass": "^3.2.0"
   }