merge

linksgo2011
2 parents ba8d5483 c0cfc1ba
Showing 16 changed files with 1794 additions and 74 deletions
css/common.css
css/common.less
css/global.css
css/global.less
css/goods-items.css
css/header.css
css/list-view.css
css/one-border.css
css/photo-wall.css
css/reset.css
css/section.css
css/slider.css
css/sprite_admin.css
css/tab.css
css/util.css
html/index.html
@@ -258,6 +258,186 @@ a {
   }
 }
 /***************************************************
+<<<<<<< HEAD
+=======
+* 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-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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;
+}
+.mask-hidden {
+  opacity: 0;
+}
+.font-white {
+  color: #FFF !important;
+}
+.font-white-opacity {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+.font-deep {
+  color: #333 !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;
+}
+.background-white {
+  background-color: #FFF;
+}
+.background-gray {
+  background-color: #666 !important;
+}
+.background-yellow {
+  background-color: #FF9D2C !important;
+}
+.background-orange {
+  background-color: #FF6B00 !important;
+}
+.background-red {
+  background-color: #fa4535 !important;
+}
+.background-green {
+  background-color: #23ac38 !important;
+}
+.position-relative {
+  position: relative;
+}
+.z-index2 {
+  z-index: 2;
+}
+.width-auto {
+  width: auto !important;
+}
+.width-200p {
+  width: 200%;
+}
+.m-col-1 {
+  width: 100% !important;
+}
+.m-col-2 {
+  width: 50% !important;
+}
+.m-col-3 {
+  width: 33.33% !important;
+}
+.m-col-4 {
+  width: 25% !important;
+}
+/***************************************************
+>>>>>>> c0cfc1bac841f1dbd73cdd87de041380fd52f99a
 * feature  :  全局头部，提供默认 深色(绿底白字) & 浅色(白底黑字)主题;
 * update   :  2015/02/03;
 * use      :  .m-header;
@@ -913,6 +1093,7 @@ Pagination Styles
   height: 2px;
   background-color: #23ac38;
 }
+<<<<<<< HEAD
 /***************************************************
 * feature  :  工具类class，提供浮动清除、文本对齐、显示隐藏等;
 * update   :  2015/02/03;
@@ -1120,3 +1301,5 @@ a.m-more {
 .scroll-wrap .m-tab li a {
   display: inline-block;
 }
+=======
+>>>>>>> c0cfc1bac841f1dbd73cdd87de041380fd52f99a
 @import "reset";
 @import "one-border";
+@import "util";
 @import "header";
 @import "slider";
 @import "section";
@@ -7,40 +8,11 @@
 @import "goods-items";
 @import "photo-wall";
 @import "tab";
-@import "util";
+
 @import "icon.css";
 @import "icon_admin.css";
  
-.scroll-wrap{
-  overflow-y: hidden;
-  overflow-x:scroll;
-  -webkit-overflow-scrolling: touch;
-  .m-goods-items{
-    white-space: nowrap;
-    li{
-      float: none;
-      display: inline;
-      width: 110px !important;
-      a{
-        display: inline-block;
-        width: 100px;
-      }
-    }
-  }
-  .m-tab{
-    white-space: nowrap;
-    overflow: visible;
-    width: auto;
-    li{
-      float: none;
-      display: inline;
-      width: 90px;
-      a{
-        display: inline-block;
-      }
-    }
-  }
-}
+
 //自定义 非合并图
 //
 // body{
+* {
+  -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  :  工具类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-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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;
+}
+.mask-hidden {
+  opacity: 0;
+}
+.font-white {
+  color: #FFF !important;
+}
+.font-white-opacity {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+.font-deep {
+  color: #333 !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;
+}
+.background-white {
+  background-color: #FFF;
+}
+.background-gray {
+  background-color: #666 !important;
+}
+.background-yellow {
+  background-color: #FF9D2C !important;
+}
+.background-orange {
+  background-color: #FF6B00 !important;
+}
+.background-red {
+  background-color: #fa4535 !important;
+}
+.background-green {
+  background-color: #23ac38 !important;
+}
+.position-relative {
+  position: relative;
+}
+.z-index2 {
+  z-index: 2;
+}
+.width-auto {
+  width: auto !important;
+}
+.width-200p {
+  width: 200%;
+}
+.m-col-1 {
+  width: 100% !important;
+}
+.m-col-2 {
+  width: 50% !important;
+}
+.m-col-3 {
+  width: 33.33% !important;
+}
+.m-col-4 {
+  width: 25% !important;
+}
+.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;
+}
+@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);
+  }
+}
+.m-section .section-head {
+  line-height: 45px;
+  padding: 0 10px;
+  background-color: #fff;
+  font-size: 14px;
+  color: #666;
+  text-align: left;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.m-section .section-head:first-letter {
+  font-size: 18px;
+  color: #23ac38;
+}
+.section-items {
+  margin-bottom: 10px;
+}
+.section-items .section-item {
+  display: block;
+  margin-bottom: 5px;
+  width: 100%;
+}
+.section-items .section-item img {
+  width: 100%;
+  max-width: 100%;
+}
+.product-items {
+  background-color: #FFF;
+  margin-bottom: 10px;
+}
+.product-items .items .item {
+  width: 33.33%;
+  float: left;
+  font-size: 13px;
+  text-align: center;
+  padding: 8px 0;
+}
+.product-items .items .item a {
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+.product-items .items .item h3 {
+  font-size: 13px;
+  padding: 0 5px;
+  font-weight: 700;
+  color: #333;
+  line-height: 16px;
+  padding: 0 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.product-items .items .item p {
+  padding: 0 10px;
+  text-align: left;
+}
+.product-items .items .item em {
+  text-align: left;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  font-style: normal;
+  color: #FA4535;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.product-items .items .item span {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.product-items .items .item .pic {
+  max-width: 100%;
+  height: 60px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.product-items .items .item:after {
+  border-left: none;
+  border-top: none;
+}
+.scroll-wrap {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.scroll-wrap .m-goods-items {
+  white-space: nowrap;
+}
+.scroll-wrap .m-goods-items li {
+  float: none;
+  display: inline;
+  width: 110px !important;
+}
+.scroll-wrap .m-goods-items li a {
+  display: inline-block;
+  width: 100px;
+}
+.scroll-wrap .m-tab {
+  white-space: nowrap;
+  overflow: visible;
+  width: auto;
+}
+.scroll-wrap .m-tab li {
+  float: none;
+  display: inline;
+  width: 90px;
+}
+.scroll-wrap .m-tab li a {
+  display: inline-block;
+}
+@import "reset";
+@import "util";
+@import "one-border";
+@import "section";
+@import "section";
+.scroll-wrap{
+  overflow-y: hidden;
+  overflow-x:scroll;
+  -webkit-overflow-scrolling: touch;
+  .m-goods-items{
+    white-space: nowrap;
+    li{
+      float: none;
+      display: inline;
+      width: 110px !important;
+      a{
+        display: inline-block;
+        width: 100px;
+      }
+    }
+  }
+  .m-tab{
+    white-space: nowrap;
+    overflow: visible;
+    width: auto;
+    li{
+      float: none;
+      display: inline;
+      width: 90px;
+      a{
+        display: inline-block;
+      }
+    }
+  }
+}
 .m-goods-items {
-  padding: 0 5px 10px;
+  padding: 0 5px 5px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 .m-goods-items li {
   float: left;
-  width: 50%;
+  width: 110px;
   padding: 0 5px 10px;
   box-sizing: border-box;
 }
@@ -24,25 +27,20 @@
   font-size: 0;
   overflow: hidden;
 }
-.m-goods-items img {
-  display: block;
-  width: 100%;
-  height: 90px;
-  margin: 0 auto 5px;
-}
 .m-goods-items .pic {
   display: block;
   width: 100%;
-  height: 90px;
+  height: 110px;
   margin: 0 auto 5px;
-  background: url(../images/upload/p_1.jpg) center center no-repeat;
+  background-position: center center;
+  background-repeat: no-repeat;
   background-size: cover;
 }
 .m-goods-items h3 {
-  font-size: 12px;
+  font-size: 13px;
   padding: 0 5px;
   font-weight: 700;
-  color: #5d6065;
+  color: #333;
   text-align: left;
   line-height: 16px;
   height: 32px;
@@ -52,14 +50,13 @@
   text-align: left;
   display: block;
   padding: 0 5px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 700;
   font-style: normal;
-  color: #fe4442;
+  color: #FA4535;
 }
 .m-goods-items .origin-price {
   font-size: 12px;
-  text-align: center;
-  color: #9c9c9c;
+  color: #bbb;
   text-decoration: line-through;
 }
-.m-header{z-index:5;color:#FFF;color:#fff;background-color:#23AC38;position:relative}.m-header .head{padding:0 50px;box-sizing:border-box;height:44px;text-align:center}.m-header .head h1{display:inline-block;vertical-align:middle;line-height:44px;font-weight:400;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-light{background-color:#FFF;color:#666}.m-header.header-light .text{color:#666}.m-header.header-light .m-input{color:#333}.m-header.header-light .m-input::-webkit-input-placeholder{color:#999}
 \ No newline at end of file
+/***************************************************
+* 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下未能垂直居中];
+****************************************************/
+.m-header {
+  z-index: 5;
+  color: #FFF;
+  color: #ffffff;
+  background-color: #23AC38;
+  position: relative;
+}
+.m-header .head {
+  padding: 0 50px;
+  box-sizing: border-box;
+  height: 44px;
+  text-align: center;
+}
+.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-light {
+  background-color: #FFF;
+  color: #666;
+}
+.m-header.header-light .text {
+  color: #666;
+}
+.m-header.header-light .m-input {
+  color: #333;
+}
+.m-header.header-light .m-input::-webkit-input-placeholder {
+  color: #999;
+}
+.m-list-view {
+  margin-bottom: 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-block {
+  padding: 8px 10px;
+}
+.m-list-view .cell-block h3 {
+  font-size: 16px;
+  font-weight: normal;
+  padding-right: 60px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.m-list-view .cell-block p {
+  font-size: 14px;
+  color: #666;
+}
+.m-list-view .cell-block .bottom {
+  margin-top: 10px;
+  padding-top: 8px;
+  line-height: 30px;
+}
+.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;
+}
+.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;
+}
+@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);
+  }
+}
 .photo-wall {
   width: 100%;
+  padding-left: 5px;
+  box-sizing: border-box;
+  margin-bottom: 5px;
 }
 .photo-wall .photo-item {
   float: left;
   box-sizing: border-box;
-  padding: 0 5px 5px;
+  padding: 0 5px 5px 0;
   height: 105px;
 }
 .photo-wall .photo-item img {
   width: 100%;
+  height: 100%;
   max-width: 100%;
+  max-height: 100%;
 }
 .photo-wall .photo-1p {
   width: 33.33%;
-*{-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}html{height:100%}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:0 0}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:700}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:0;padding:0}input,select{vertical-align:middle}button:focus,input:focus{outline:0}a{color:#333;text-decoration:none;margin:0;padding:0;vertical-align:baseline;background:0 0}a:active,a:visited{color:#333}img,input{border:0;vertical-align:middle}a,input,textarea{-webkit-tap-highlight-color:transparent}.clear,.clearfix{display:inline-table;zoom:1}* html .clear,* html .clearfix{height:1%}* html .clear,* html .clearfix{zoom:1}.clear,.clearfix{display:block}.clear{clear:both}.clear:after,.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;line-height:0}
 \ No newline at end of file
+* {
+  -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;
+}
+.m-section .section-head {
+  line-height: 45px;
+  padding: 0 10px;
+  background-color: #fff;
+  font-size: 14px;
+  color: #666;
+  text-align: left;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.m-section .section-head:first-letter {
+  font-size: 18px;
+  color: #23ac38;
+}
+.section-items {
+  margin-bottom: 10px;
+}
+.section-items .section-item {
+  display: block;
+  margin-bottom: 5px;
+  width: 100%;
+}
+.section-items .section-item img {
+  width: 100%;
+  max-width: 100%;
+}
+.product-items {
+  background-color: #FFF;
+  margin-bottom: 10px;
+}
+.product-items .items .item {
+  width: 33.33%;
+  float: left;
+  font-size: 13px;
+  text-align: center;
+  padding: 8px 0;
+}
+.product-items .items .item a {
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+.product-items .items .item h3 {
+  font-size: 13px;
+  padding: 0 5px;
+  font-weight: 700;
+  color: #333;
+  line-height: 16px;
+  padding: 0 10px;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.product-items .items .item p {
+  padding: 0 10px;
+  text-align: left;
+}
+.product-items .items .item em {
+  text-align: left;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  font-style: normal;
+  color: #FA4535;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.product-items .items .item span {
+  display: block;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.product-items .items .item .pic {
+  max-width: 100%;
+  height: 60px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.product-items .items .item:after {
+  border-left: none;
+  border-top: none;
+}
+/*
+ * Swiper 2.7.0
+ * Mobile touch slider and framework with hardware accelerated transitions
+ *
+ * http://www.idangero.us/sliders/swiper/
+ *
+ * Copyright 2010-2014, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under GPL & MIT
+ *
+ * Released on: August 30, 2014
+*/
+/* ===============================================================
+Basic Swiper Styles
+================================================================*/
+.swiper-container {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  -webkit-transition-property: -webkit-transform, left, top;
+  -webkit-transition-duration: 0s;
+  -webkit-transform: translate3d(0px, 0, 0);
+  -webkit-transition-timing-function: ease;
+  -moz-transition-property: -moz-transform, left, top;
+  -moz-transition-duration: 0s;
+  -moz-transform: translate3d(0px, 0, 0);
+  -moz-transition-timing-function: ease;
+  -o-transition-property: -o-transform, left, top;
+  -o-transition-duration: 0s;
+  -o-transform: translate3d(0px, 0, 0);
+  -o-transition-timing-function: ease;
+  -o-transform: translate(0px, 0px);
+  -ms-transition-property: -ms-transform, left, top;
+  -ms-transition-duration: 0s;
+  -ms-transform: translate3d(0px, 0, 0);
+  -ms-transition-timing-function: ease;
+  transition-property: transform, left, top;
+  transition-duration: 0s;
+  transform: translate3d(0px, 0, 0);
+  transition-timing-function: ease;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.swiper-free-mode > .swiper-wrapper {
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+.swiper-slide {
+  float: left;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+/* IE10 Windows Phone 8 Fixes */
+.swiper-wp8-horizontal {
+  -ms-touch-action: pan-y;
+}
+.swiper-wp8-vertical {
+  -ms-touch-action: pan-x;
+}
+/* ===============================================================
+Your custom styles, here you need to specify container's and slide's
+sizes, pagination, etc.
+================================================================*/
+.swiper-container {
+  /* Specify Swiper's Size: */
+  /*width:200px;
+	height: 100px;*/
+}
+.swiper-slide {
+  /* Specify Slides's Size: */
+  /*width: 100%;
+	height: 100%;*/
+}
+.swiper-slide-active {
+  /* Specific active slide styling: */
+}
+.swiper-slide-visible {
+  /* Specific visible slide styling: */
+}
+/* ===============================================================
+Pagination Styles
+================================================================*/
+.swiper-pagination-switch {
+  /* Stylize pagination button: */
+}
+.swiper-active-switch {
+  /* Specific active button style: */
+}
+.swiper-visible-switch {
+  /* Specific visible button style: */
+}
+.swiper-pagination {
+  position: absolute;
+  text-align: center;
+  -webkit-transition: 300ms;
+  -moz-transition: 300ms;
+  -o-transition: 300ms;
+  transition: 300ms;
+  -webkit-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.swiper-pagination {
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+.swiper-pagination .swiper-pagination-switch {
+  margin: 0 5px;
+}
+.swiper-pagination-switch {
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+  /*background: #FFF;*/
+  background: none;
+  -webkit-box-shadow: inset 0 0 0 2px #ddd;
+  box-shadow: inset 0 0 0 2px #ddd;
+  -webkit-box-shadow: inset hoff voff blur color;
+  box-shadow: inset hoff voff blur color;
+  border-radius: 100%;
+  /*    -webkit-transition: all ease-in-out .15s;
+    -o-transition: all ease-in-out .15s;
+    transition: all ease-in-out .15s;*/
+}
+.swiper-active-switch {
+  opacity: 1;
+  -webkit-box-shadow: inset 0 0 0 4px #23AC38;
+  box-shadow: inset 0 0 0 4px #23AC38;
+  /*background: #23AC38;*/
+  /*-webkit-box-shadow: none;*/
+  /*box-shadow: none;*/
+}
+.m-slider {
+  height: 120px;
+  position: relative;
+  overflow: hidden;
+  font-size: 0;
+}
+.m-slider a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.m-slider img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  float: left;
+}
+.m-slider .swiper-container {
+  height: 100%;
+}
+.m-slider .swiper-wrapper {
+  height: 100%;
+}
+/*
+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-nav {
+  width: 100%;
+  background-color: #444;
+  font-size: 14px;
+  color: #999;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.m-nav a {
+  color: #999;
+  padding: 0 10px;
+  min-width: 70px;
+}
+.m-nav li {
+  float: left;
+  line-height: 40px;
+  text-align: center;
+  position: relative;
+}
+.m-nav li:last-child {
+  padding-right: 0;
+}
+.m-nav .on a {
+  color: #FFF;
+  background-color: #23ac38;
+  display: block;
+  position: relative;
+}
 .m-tab {
   width: 100%;
   background-color: #FFF;
@@ -6,16 +34,17 @@
   border-width: 1px 0;
   overflow: hidden;
   box-sizing: border-box;
-  padding: 0 15px;
+  margin-bottom: 10px;
 }
 .m-tab a {
+  display: block;
   color: #999;
+  padding: 0 10px;
+  min-width: 70px;
 }
 .m-tab li {
   float: left;
-  min-width: 32px;
-  padding-right: 18px;
-  line-height: 40px;
+  line-height: 45px;
   text-align: center;
   position: relative;
 }
@@ -23,7 +52,7 @@
   padding-right: 0;
 }
 .m-tab .on a {
-  color: #2caa3f;
+  color: #23ac38;
   display: block;
   position: relative;
 }
@@ -34,20 +63,5 @@
   left: 0;
   right: 0;
   height: 2px;
-  background-color: #23AC38;
-}
-.m-tab.tab-col-2 li {
-  width: 50% !important;
-}
-.m-tab.tab-col-3 li {
-  width: 33.33% !important;
-  padding-right: 0 ;
-}
-.m-tab.tab-col-4 li {
-  padding-right: 0;
-  width: 25% !important;
-}
-.m-tab.tab-col-5 li {
-  padding-right: 0;
-  width: 20% !important;
+  background-color: #23ac38;
 }
-.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-overflow{overflow:hidden;text-overflow:ellipsis}.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}.mask-hidden{opacity:0}.font-white{color:#FFF!important}.font-white-opacity{color:rgba(255,255,255,.8)!important}.font-deep{color:#333!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}.background-white{background-color:#FFF}.background-gray{background-color:#666!important}.background-yellow{background-color:#FF9D2C!important}.background-orange{background-color:#FF6B00!important}.background-red{background-color:#fa4535!important}.background-green{background-color:#23ac38!important}.position-relative{position:relative}.z-index2{z-index:2}.width-auto{width:auto!important}.width-200p{width:200%}.m-col-1{width:100%!important}.m-col-2{width:50%!important}.m-col-3{width:33.33%!important}.m-col-4{width:25%!important}
 \ No newline at end of file
+/***************************************************
+* 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-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.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;
+}
+.mask-hidden {
+  opacity: 0;
+}
+.font-white {
+  color: #FFF !important;
+}
+.font-white-opacity {
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+.font-deep {
+  color: #333 !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;
+}
+.background-white {
+  background-color: #FFF;
+}
+.background-gray {
+  background-color: #666 !important;
+}
+.background-yellow {
+  background-color: #FF9D2C !important;
+}
+.background-orange {
+  background-color: #FF6B00 !important;
+}
+.background-red {
+  background-color: #fa4535 !important;
+}
+.background-green {
+  background-color: #23ac38 !important;
+}
+.position-relative {
+  position: relative;
+}
+.z-index2 {
+  z-index: 2;
+}
+.width-auto {
+  width: auto !important;
+}
+.width-200p {
+  width: 200%;
+}
+.m-col-1 {
+  width: 100% !important;
+}
+.m-col-2 {
+  width: 50% !important;
+}
+.m-col-3 {
+  width: 33.33% !important;
+}
+.m-col-4 {
+  width: 25% !important;
+}
@@ -28,8 +28,6 @@
     <li><a href="#">最低专区</a></li>
     <li><a href="#">精品专区</a></li>
   </ul>
-
-
   <!-- slider -->
   <div class="m-slider">
     <!-- Swiper -->