dlstatic / seven-piece · Commits

Commit 741fd530528af3c1d98fa162d6c5859f3d653163

Authored by bichao.dong
1 parent 4a0fbd52

m-nav add scroller

Inline Side-by-side
Showing 8 changed files with 34 additions and 13 deletions
css/common.css
  View file @741fd53
@@ -397,6 +397,9 @@ a.m-more { @@ -397,6 +397,9 @@ a.m-more {
397 .background-gray { 397 .background-gray {
398 background-color: #666 !important; 398 background-color: #666 !important;
399 } 399 }
  400 +.background-deep-gray {
  401 + background-color: #444 !important;
  402 +}
400 .background-yellow { 403 .background-yellow {
401 background-color: #FF9D2C !important; 404 background-color: #FF9D2C !important;
402 } 405 }
@@ -794,17 +797,20 @@ Pagination Styles @@ -794,17 +797,20 @@ Pagination Styles
794 display: inline-block; 797 display: inline-block;
795 width: 100px; 798 width: 100px;
796 } 799 }
797 -.scroll-wrap .m-tab { 800 +.scroll-wrap .m-tab,
  801 +.scroll-wrap .m-nav {
798 white-space: nowrap; 802 white-space: nowrap;
799 overflow: visible; 803 overflow: visible;
800 width: auto; 804 width: auto;
801 } 805 }
802 -.scroll-wrap .m-tab li { 806 +.scroll-wrap .m-tab li,
  807 +.scroll-wrap .m-nav li {
803 float: none; 808 float: none;
804 display: inline; 809 display: inline;
805 width: 90px; 810 width: 90px;
806 } 811 }
807 -.scroll-wrap .m-tab li a { 812 +.scroll-wrap .m-tab li a,
  813 +.scroll-wrap .m-nav li a {
808 display: inline-block; 814 display: inline-block;
809 } 815 }
810 .m-list-view { 816 .m-list-view {
@@ -1054,7 +1060,6 @@ Pagination Styles @@ -1054,7 +1060,6 @@ Pagination Styles
1054 } 1060 }
1055 .m-nav { 1061 .m-nav {
1056 width: 100%; 1062 width: 100%;
1057 - background-color: #444;  
1058 font-size: 14px; 1063 font-size: 14px;
1059 color: #999; 1064 color: #999;
1060 overflow: hidden; 1065 overflow: hidden;
@@ -1064,6 +1069,7 @@ Pagination Styles @@ -1064,6 +1069,7 @@ Pagination Styles
1064 color: #999; 1069 color: #999;
1065 padding: 0 10px; 1070 padding: 0 10px;
1066 min-width: 70px; 1071 min-width: 70px;
  1072 + display: block;
1067 } 1073 }
1068 .m-nav li { 1074 .m-nav li {
1069 float: left; 1075 float: left;
css/global.css
  View file @741fd53
@@ -333,6 +333,9 @@ a.m-more { @@ -333,6 +333,9 @@ a.m-more {
333 .background-gray { 333 .background-gray {
334 background-color: #666 !important; 334 background-color: #666 !important;
335 } 335 }
  336 +.background-deep-gray {
  337 + background-color: #444 !important;
  338 +}
336 .background-yellow { 339 .background-yellow {
337 background-color: #FF9D2C !important; 340 background-color: #FF9D2C !important;
338 } 341 }
@@ -534,16 +537,19 @@ a.m-more { @@ -534,16 +537,19 @@ a.m-more {
534 display: inline-block; 537 display: inline-block;
535 width: 100px; 538 width: 100px;
536 } 539 }
537 -.scroll-wrap .m-tab { 540 +.scroll-wrap .m-tab,
  541 +.scroll-wrap .m-nav {
538 white-space: nowrap; 542 white-space: nowrap;
539 overflow: visible; 543 overflow: visible;
540 width: auto; 544 width: auto;
541 } 545 }
542 -.scroll-wrap .m-tab li { 546 +.scroll-wrap .m-tab li,
  547 +.scroll-wrap .m-nav li {
543 float: none; 548 float: none;
544 display: inline; 549 display: inline;
545 width: 90px; 550 width: 90px;
546 } 551 }
547 -.scroll-wrap .m-tab li a { 552 +.scroll-wrap .m-tab li a,
  553 +.scroll-wrap .m-nav li a {
548 display: inline-block; 554 display: inline-block;
549 } 555 }
css/section.css
  View file @741fd53
@@ -101,16 +101,19 @@ @@ -101,16 +101,19 @@
101 display: inline-block; 101 display: inline-block;
102 width: 100px; 102 width: 100px;
103 } 103 }
104 -.scroll-wrap .m-tab { 104 +.scroll-wrap .m-tab,
  105 +.scroll-wrap .m-nav {
105 white-space: nowrap; 106 white-space: nowrap;
106 overflow: visible; 107 overflow: visible;
107 width: auto; 108 width: auto;
108 } 109 }
109 -.scroll-wrap .m-tab li { 110 +.scroll-wrap .m-tab li,
  111 +.scroll-wrap .m-nav li {
110 float: none; 112 float: none;
111 display: inline; 113 display: inline;
112 width: 90px; 114 width: 90px;
113 } 115 }
114 -.scroll-wrap .m-tab li a { 116 +.scroll-wrap .m-tab li a,
  117 +.scroll-wrap .m-nav li a {
115 display: inline-block; 118 display: inline-block;
116 } 119 }
css/section.less
  View file @741fd53
@@ -106,7 +106,7 @@ @@ -106,7 +106,7 @@
106 } 106 }
107 } 107 }
108 } 108 }
109 - .m-tab{ 109 + .m-tab, .m-nav{
110 white-space: nowrap; 110 white-space: nowrap;
111 overflow: visible; 111 overflow: visible;
112 width: auto; 112 width: auto;
css/tab.css
  View file @741fd53
1 .m-nav { 1 .m-nav {
2 width: 100%; 2 width: 100%;
3 - background-color: #444;  
4 font-size: 14px; 3 font-size: 14px;
5 color: #999; 4 color: #999;
6 overflow: hidden; 5 overflow: hidden;
@@ -10,6 +9,7 @@ @@ -10,6 +9,7 @@
10 color: #999; 9 color: #999;
11 padding: 0 10px; 10 padding: 0 10px;
12 min-width: 70px; 11 min-width: 70px;
  12 + display: block;
13 } 13 }
14 .m-nav li { 14 .m-nav li {
15 float: left; 15 float: left;
css/tab.less
  View file @741fd53
1 .m-nav{ 1 .m-nav{
2 width: 100%; 2 width: 100%;
3 - background-color: #444;  
4 font-size: 14px; 3 font-size: 14px;
5 color: #999; 4 color: #999;
6 overflow: hidden; 5 overflow: hidden;
@@ -9,6 +8,7 @@ @@ -9,6 +8,7 @@
9 color: #999; 8 color: #999;
10 padding: 0 10px; 9 padding: 0 10px;
11 min-width: 70px; 10 min-width: 70px;
  11 + display: block;
12 } 12 }
13 li{ 13 li{
14 float: left; 14 float: left;
css/util.less
  View file @741fd53
@@ -179,6 +179,10 @@ @@ -179,6 +179,10 @@
179 .background-gray{ 179 .background-gray{
180 background-color: #666 !important; 180 background-color: #666 !important;
181 } 181 }
  182 +
  183 +.background-deep-gray{
  184 + background-color: #444 !important;
  185 +}
182 .background-yellow{ 186 .background-yellow{
183 background-color: #FF9D2C !important; 187 background-color: #FF9D2C !important;
184 } 188 }
html/index.html
  View file @741fd53
@@ -22,12 +22,14 @@ @@ -22,12 +22,14 @@
22 22
23 23
24 <!-- tab --> 24 <!-- tab -->
  25 + <div class="scroll-wrap background-deep-gray">
25 <ul class="m-nav border-1px border-bottom"> 26 <ul class="m-nav border-1px border-bottom">
26 <li class="on"><a href="#">秒杀专区</a></li> 27 <li class="on"><a href="#">秒杀专区</a></li>
27 <li><a href="#">活动专区</a></li> 28 <li><a href="#">活动专区</a></li>
28 <li><a href="#">最低专区</a></li> 29 <li><a href="#">最低专区</a></li>
29 <li><a href="#">精品专区</a></li> 30 <li><a href="#">精品专区</a></li>
30 </ul> 31 </ul>
  32 +</div>
31 <!-- slider --> 33 <!-- slider -->
32 <div class="m-slider"> 34 <div class="m-slider">
33 <!-- Swiper --> 35 <!-- Swiper -->