fe / yohobuy-mobile · Commits

Go to a project

Authored by unknown
Commit 9d38bcf6b7bad793350ef5e8b6bf01a0d4bb0cc7 1 parent e8620d2b

homepage 滚动条 fix

Inline Side-by-side
Showing 11 changed files with 48 additions and 54 deletions
... ... @@ -29,12 +29,15 @@
</script>
</head>
<body>
<div class="mobile-container">
{{{body}}}
</div>
</body>
<script src="http://localhost:8000/static/js/sea.js?nowrap"></script>
<script src="http://172.16.6.246:8000/static/js/sea.js?nowrap"></script>
<script>
seajs.config({
base: 'http://localhost:8000/'
base: 'http://172.16.6.246:8000/'
})
</script>
<script>
... ...
... ... @@ -23,9 +23,10 @@ $('.nav-btn').on('click', function(event) {
if (!$(this).hasClass('menu-open')) {
$('.mobile-wrap').addClass('menu-open');
$('.overlay').addClass('show');
//设置boy高度，页面不能上下滑动
//设置boy高宽，页面不能上下滑动
$('body').css({
height: $(window).height(),
width: '100%',
overflow: 'hidden'
});
}
... ...
... ... @@ -29,10 +29,10 @@
overflow: hidden;
ul {
position: relative;
height: 100%;
height: 309rem / $pxConvertRem;
li {
float: left;
height: 100%;
height: 309rem / $pxConvertRem;
img {
width: 100%;
height: 100%;
... ...
... ... @@ -3,10 +3,11 @@
.banner {
display: block;
height: 400rem / $pxConvertRem;
overflow: hidden;
img {
width: 100%;
height: 404rem / $pxConvertRem;
height: 100%;
}
}
... ... @@ -19,17 +20,13 @@
}
.classify-logo {
display: table-cell;;
width: 212rem / $pxConvertRem;
height: 140rem/ $pxConvertRem;
vertical-align: middle;
height: 192rem / $pxConvertRem;
img {
display: block;
max-width: 212rem / $pxConvertRem;
max-height: 140rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
width: 100%;
height: 100%;
}
}
... ...
.category-swiper {
position: relative;
height: 403rem / $pxConvertRem;
height: 400rem / $pxConvertRem;
overflow: hidden;
ul {
li {
... ... @@ -37,28 +37,28 @@
}
}
.goods-category{
background: #fff;
}
.goods-category .category-list {
background: #f5f7f6;
height: 383rem / $pxConvertRem;
li {
float: left;
width: 191rem / $pxConvertRem;
height: 181rem / $pxConvertRem;
padding: (10rem / $pxConvertRem) 0 0;
height: 191rem / $pxConvertRem;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.first-show {
display: none;
}
.img-box {
display: flex;
display: -webkit-flex;
height: 140rem / $pxConvertRem;
align-items: center;
justify-content: center;
height: 100%;
line-height: 100%;
text-align: center;
img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.category-name {
... ... @@ -70,18 +70,11 @@
}
li:first-child {
width: 253rem / $pxConvertRem;
height: 335rem / $pxConvertRem;
height: 383rem / $pxConvertRem;
border-left: none;
padding: (48rem / $pxConvertRem) 0 0 0;
.first-show {
display: block;
line-height: 44rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #444;
text-align: center;
}
.img-box {
height: 220rem / $pxConvertRem;
height: 100%;
line-height: 100%;
}
.category-name {
line-height: 40rem / $pxConvertRem;
... ...
... ... @@ -10,22 +10,19 @@
width:25%;
height: 146rem / $pxConvertRem;
text-align:center;
}
}
.imagebar {
display: block;
margin:0 auto;
display: flex;
display: -webkit-flex;
text-align: center;
width: 98rem / $pxConvertRem;
height: 98rem / $pxConvertRem;
border-radius: 50%;
border: 2rem / $pxConvertRem solid #e0e0e0;
line-height: 98rem / $pxConvertRem;
box-sizing: border-box;
overflow: hidden;
align-items:center;
justify-content: center;
img {
max-width: 80%;
max-height: 80%;
width: 100%;
height: 100%;
}
}
.linkbar {
... ...
.side-nav {
background: #fff;
position: fixed;
position: absolute;
top: 0;
right: 100rem / $pxConvertRem;
bottom: 0;
... ... @@ -105,12 +106,10 @@
border: none;
a {
position: relative;
display: flex;
display: -webkit-flex;
display: block;
margin: 0 0 0 (30rem / $pxConvertRem);
padding-left: 50rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
align-items: center;
font-size: 36rem / $pxConvertRem;
z-index: 2;
}
... ...
... ... @@ -38,13 +38,12 @@
float: left;
height: 534rem / $pxConvertRem;
.img-box {
display: flex;
display: -webkit-flex;
width: 100%;
height: 360rem / $pxConvertRem;
margin: 0 (30rem / $pxConvertRem);
align-items: center;
justify-content: center;
line-height: 360rem / $pxConvertRem;
text-align: center;
img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
... ...
... ... @@ -23,7 +23,7 @@
}
.trend-coll-content {
padding: 0 (15rem / $pxConvertRem);
padding: 0 0 0 (15rem / $pxConvertRem);
.lspan {
float: left;
margin: 0 (15rem / $pxConvertRem);
... ...
... ... @@ -71,6 +71,10 @@ a:focus {
-moz-osx-font-smoothing: grayscale;
}
.mobile-container{
width: 100%;
overflow: hidden;
}
.mobile-wrap {
position: relative;
z-index: 2;
... ...
{{# data}}
<div class="mobile-wrap boys-wrap">
{{! 顶部app下载}}
{{# headerDownload}}
... ...