Showing
11 changed files
with
49 additions
and
55 deletions
| @@ -29,12 +29,15 @@ | @@ -29,12 +29,15 @@ | ||
| 29 | </script> | 29 | </script> |
| 30 | </head> | 30 | </head> |
| 31 | <body> | 31 | <body> |
| 32 | - {{{body}}} | 32 | + <div class="mobile-container"> |
| 33 | + {{{body}}} | ||
| 34 | + </div> | ||
| 35 | + | ||
| 33 | </body> | 36 | </body> |
| 34 | - <script src="http://localhost:8000/static/js/sea.js?nowrap"></script> | 37 | + <script src="http://172.16.6.246:8000/static/js/sea.js?nowrap"></script> |
| 35 | <script> | 38 | <script> |
| 36 | seajs.config({ | 39 | seajs.config({ |
| 37 | - base: 'http://localhost:8000/' | 40 | + base: 'http://172.16.6.246:8000/' |
| 38 | }) | 41 | }) |
| 39 | </script> | 42 | </script> |
| 40 | <script> | 43 | <script> |
| @@ -23,9 +23,10 @@ $('.nav-btn').on('click', function(event) { | @@ -23,9 +23,10 @@ $('.nav-btn').on('click', function(event) { | ||
| 23 | if (!$(this).hasClass('menu-open')) { | 23 | if (!$(this).hasClass('menu-open')) { |
| 24 | $('.mobile-wrap').addClass('menu-open'); | 24 | $('.mobile-wrap').addClass('menu-open'); |
| 25 | $('.overlay').addClass('show'); | 25 | $('.overlay').addClass('show'); |
| 26 | - //设置boy高度，页面不能上下滑动 | 26 | + //设置boy高宽，页面不能上下滑动 |
| 27 | $('body').css({ | 27 | $('body').css({ |
| 28 | height: $(window).height(), | 28 | height: $(window).height(), |
| 29 | + width: '100%', | ||
| 29 | overflow: 'hidden' | 30 | overflow: 'hidden' |
| 30 | }); | 31 | }); |
| 31 | } | 32 | } |
| @@ -29,10 +29,10 @@ | @@ -29,10 +29,10 @@ | ||
| 29 | overflow: hidden; | 29 | overflow: hidden; |
| 30 | ul { | 30 | ul { |
| 31 | position: relative; | 31 | position: relative; |
| 32 | - height: 100%; | 32 | + height: 309rem / $pxConvertRem; |
| 33 | li { | 33 | li { |
| 34 | float: left; | 34 | float: left; |
| 35 | - height: 100%; | 35 | + height: 309rem / $pxConvertRem; |
| 36 | img { | 36 | img { |
| 37 | width: 100%; | 37 | width: 100%; |
| 38 | height: 100%; | 38 | height: 100%; |
| @@ -3,10 +3,11 @@ | @@ -3,10 +3,11 @@ | ||
| 3 | 3 | ||
| 4 | .banner { | 4 | .banner { |
| 5 | display: block; | 5 | display: block; |
| 6 | - | 6 | + height: 400rem / $pxConvertRem; |
| 7 | + overflow: hidden; | ||
| 7 | img { | 8 | img { |
| 8 | width: 100%; | 9 | width: 100%; |
| 9 | - height: 404rem / $pxConvertRem; | 10 | + height: 100%; |
| 10 | } | 11 | } |
| 11 | } | 12 | } |
| 12 | 13 | ||
| @@ -19,17 +20,13 @@ | @@ -19,17 +20,13 @@ | ||
| 19 | } | 20 | } |
| 20 | 21 | ||
| 21 | .classify-logo { | 22 | .classify-logo { |
| 22 | - display: table-cell;; | ||
| 23 | width: 212rem / $pxConvertRem; | 23 | width: 212rem / $pxConvertRem; |
| 24 | - height: 140rem/ $pxConvertRem; | ||
| 25 | - vertical-align: middle; | 24 | + height: 192rem / $pxConvertRem; |
| 26 | 25 | ||
| 27 | img { | 26 | img { |
| 28 | display: block; | 27 | display: block; |
| 29 | - max-width: 212rem / $pxConvertRem; | ||
| 30 | - max-height: 140rem / $pxConvertRem; | ||
| 31 | - vertical-align: middle; | ||
| 32 | - margin: 0 auto; | 28 | + width: 100%; |
| 29 | + height: 100%; | ||
| 33 | } | 30 | } |
| 34 | } | 31 | } |
| 35 | 32 |
| 1 | .category-swiper { | 1 | .category-swiper { |
| 2 | position: relative; | 2 | position: relative; |
| 3 | - height: 403rem / $pxConvertRem; | 3 | + height: 400rem / $pxConvertRem; |
| 4 | overflow: hidden; | 4 | overflow: hidden; |
| 5 | ul { | 5 | ul { |
| 6 | li { | 6 | li { |
| @@ -37,28 +37,28 @@ | @@ -37,28 +37,28 @@ | ||
| 37 | } | 37 | } |
| 38 | } | 38 | } |
| 39 | 39 | ||
| 40 | +.goods-category{ | ||
| 41 | + background: #fff; | ||
| 42 | +} | ||
| 40 | .goods-category .category-list { | 43 | .goods-category .category-list { |
| 41 | - background: #f5f7f6; | ||
| 42 | height: 383rem / $pxConvertRem; | 44 | height: 383rem / $pxConvertRem; |
| 43 | li { | 45 | li { |
| 44 | float: left; | 46 | float: left; |
| 45 | width: 191rem / $pxConvertRem; | 47 | width: 191rem / $pxConvertRem; |
| 46 | - height: 181rem / $pxConvertRem; | ||
| 47 | - padding: (10rem / $pxConvertRem) 0 0; | 48 | + height: 191rem / $pxConvertRem; |
| 48 | border-left: 1px solid #e0e0e0; | 49 | border-left: 1px solid #e0e0e0; |
| 49 | border-bottom: 1px solid #e0e0e0; | 50 | border-bottom: 1px solid #e0e0e0; |
| 50 | .first-show { | 51 | .first-show { |
| 51 | display: none; | 52 | display: none; |
| 52 | } | 53 | } |
| 53 | .img-box { | 54 | .img-box { |
| 54 | - display: flex; | ||
| 55 | - display: -webkit-flex; | ||
| 56 | - height: 140rem / $pxConvertRem; | ||
| 57 | - align-items: center; | ||
| 58 | - justify-content: center; | 55 | + height: 100%; |
| 56 | + line-height: 100%; | ||
| 57 | + text-align: center; | ||
| 59 | img { | 58 | img { |
| 60 | - max-width: 100%; | ||
| 61 | - max-height: 100%; | 59 | + width: 100%; |
| 60 | + height: 100%; | ||
| 61 | + vertical-align: middle; | ||
| 62 | } | 62 | } |
| 63 | } | 63 | } |
| 64 | .category-name { | 64 | .category-name { |
| @@ -70,18 +70,11 @@ | @@ -70,18 +70,11 @@ | ||
| 70 | } | 70 | } |
| 71 | li:first-child { | 71 | li:first-child { |
| 72 | width: 253rem / $pxConvertRem; | 72 | width: 253rem / $pxConvertRem; |
| 73 | - height: 335rem / $pxConvertRem; | 73 | + height: 383rem / $pxConvertRem; |
| 74 | border-left: none; | 74 | border-left: none; |
| 75 | - padding: (48rem / $pxConvertRem) 0 0 0; | ||
| 76 | - .first-show { | ||
| 77 | - display: block; | ||
| 78 | - line-height: 44rem / $pxConvertRem; | ||
| 79 | - font-size: 30rem / $pxConvertRem; | ||
| 80 | - color: #444; | ||
| 81 | - text-align: center; | ||
| 82 | - } | ||
| 83 | .img-box { | 75 | .img-box { |
| 84 | - height: 220rem / $pxConvertRem; | 76 | + height: 100%; |
| 77 | + line-height: 100%; | ||
| 85 | } | 78 | } |
| 86 | .category-name { | 79 | .category-name { |
| 87 | line-height: 40rem / $pxConvertRem; | 80 | line-height: 40rem / $pxConvertRem; |
| @@ -10,22 +10,19 @@ | @@ -10,22 +10,19 @@ | ||
| 10 | width:25%; | 10 | width:25%; |
| 11 | height: 146rem / $pxConvertRem; | 11 | height: 146rem / $pxConvertRem; |
| 12 | text-align:center; | 12 | text-align:center; |
| 13 | - } | 13 | +} |
| 14 | .imagebar { | 14 | .imagebar { |
| 15 | + display: block; | ||
| 15 | margin:0 auto; | 16 | margin:0 auto; |
| 16 | - display: flex; | ||
| 17 | - display: -webkit-flex; | 17 | + text-align: center; |
| 18 | width: 98rem / $pxConvertRem; | 18 | width: 98rem / $pxConvertRem; |
| 19 | height: 98rem / $pxConvertRem; | 19 | height: 98rem / $pxConvertRem; |
| 20 | - border-radius: 50%; | ||
| 21 | - border: 2rem / $pxConvertRem solid #e0e0e0; | 20 | + line-height: 98rem / $pxConvertRem; |
| 22 | box-sizing: border-box; | 21 | box-sizing: border-box; |
| 23 | overflow: hidden; | 22 | overflow: hidden; |
| 24 | - align-items:center; | ||
| 25 | - justify-content: center; | ||
| 26 | img { | 23 | img { |
| 27 | - max-width: 80%; | ||
| 28 | - max-height: 80%; | 24 | + width: 100%; |
| 25 | + height: 100%; | ||
| 29 | } | 26 | } |
| 30 | } | 27 | } |
| 31 | .linkbar { | 28 | .linkbar { |
| 1 | + | ||
| 1 | .side-nav { | 2 | .side-nav { |
| 2 | background: #fff; | 3 | background: #fff; |
| 3 | - position: fixed; | 4 | + position: absolute; |
| 4 | top: 0; | 5 | top: 0; |
| 5 | right: 100rem / $pxConvertRem; | 6 | right: 100rem / $pxConvertRem; |
| 6 | bottom: 0; | 7 | bottom: 0; |
| @@ -105,12 +106,10 @@ | @@ -105,12 +106,10 @@ | ||
| 105 | border: none; | 106 | border: none; |
| 106 | a { | 107 | a { |
| 107 | position: relative; | 108 | position: relative; |
| 108 | - display: flex; | ||
| 109 | - display: -webkit-flex; | 109 | + display: block; |
| 110 | margin: 0 0 0 (30rem / $pxConvertRem); | 110 | margin: 0 0 0 (30rem / $pxConvertRem); |
| 111 | padding-left: 50rem / $pxConvertRem; | 111 | padding-left: 50rem / $pxConvertRem; |
| 112 | border-bottom: 1px solid #e0e0e0; | 112 | border-bottom: 1px solid #e0e0e0; |
| 113 | - align-items: center; | ||
| 114 | font-size: 36rem / $pxConvertRem; | 113 | font-size: 36rem / $pxConvertRem; |
| 115 | z-index: 2; | 114 | z-index: 2; |
| 116 | } | 115 | } |
| @@ -38,13 +38,12 @@ | @@ -38,13 +38,12 @@ | ||
| 38 | float: left; | 38 | float: left; |
| 39 | height: 534rem / $pxConvertRem; | 39 | height: 534rem / $pxConvertRem; |
| 40 | .img-box { | 40 | .img-box { |
| 41 | - display: flex; | ||
| 42 | - display: -webkit-flex; | 41 | + width: 100%; |
| 43 | height: 360rem / $pxConvertRem; | 42 | height: 360rem / $pxConvertRem; |
| 44 | - margin: 0 (30rem / $pxConvertRem); | ||
| 45 | - align-items: center; | ||
| 46 | - justify-content: center; | 43 | + line-height: 360rem / $pxConvertRem; |
| 44 | + text-align: center; | ||
| 47 | img { | 45 | img { |
| 46 | + vertical-align: middle; | ||
| 48 | max-width: 100%; | 47 | max-width: 100%; |
| 49 | max-height: 100%; | 48 | max-height: 100%; |
| 50 | } | 49 | } |
| @@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
| 23 | } | 23 | } |
| 24 | 24 | ||
| 25 | .trend-coll-content { | 25 | .trend-coll-content { |
| 26 | - padding: 0 (15rem / $pxConvertRem); | 26 | + padding: 0 0 0 (15rem / $pxConvertRem); |
| 27 | .lspan { | 27 | .lspan { |
| 28 | float: left; | 28 | float: left; |
| 29 | margin: 0 (15rem / $pxConvertRem); | 29 | margin: 0 (15rem / $pxConvertRem); |
| @@ -71,6 +71,10 @@ a:focus { | @@ -71,6 +71,10 @@ a:focus { | ||
| 71 | -moz-osx-font-smoothing: grayscale; | 71 | -moz-osx-font-smoothing: grayscale; |
| 72 | } | 72 | } |
| 73 | 73 | ||
| 74 | +.mobile-container{ | ||
| 75 | + width: 100%; | ||
| 76 | + overflow: hidden; | ||
| 77 | +} | ||
| 74 | .mobile-wrap { | 78 | .mobile-wrap { |
| 75 | position: relative; | 79 | position: relative; |
| 76 | z-index: 2; | 80 | z-index: 2; |
-
Please register or login to post a comment