fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by Lynnic
Commit ab8a5051f029488b98ad82d1766811fcf6f29383 1 parent 01744950

page optimization

Inline Side-by-side
Showing 4 changed files with 150 additions and 183 deletions
... ... @@ -6,8 +6,11 @@
var $ = require('jquery'),
Swiper = require('yoho.iswiper'),
lazyLoad = require('yoho.lazyload'),
Handlebars = require('yoho.handlebars'),
goodsSwiper,
Handlebars = require('yoho.handlebars');
var goodsSwiper,
// winH = $(window).height(),
sizeSwiper,
refSwiper,
handleHelper;
... ... @@ -57,7 +60,9 @@ handleHelper = Handlebars.registerHelper('addOne', function(index) {
return index + 1;
});
// $('#iframe').load(function() {
// var mainheight = $(this).contents().find('body').height() + 30;
// $(this).height(mainheight);
//srcoll to load more
// $(window).scroll(function () {
// if ($(window).scrollTop() + winH >= $(document).height() - 50) {
// }
// });
... ...
... ... @@ -5,7 +5,7 @@ $tableCellC:#eee;
$basicBtnC:#eb0313;
.good-detail-page {
overflow: hidden;
/* basic component */
.page-block{
box-sizing:border-box;
... ... @@ -14,7 +14,6 @@ $basicBtnC:#eb0313;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
>.title{
min-height: pxToRem(88px);
line-height: pxToRem(88px);
color: $mainFontC;
font-size : pxToRem(28px);
... ... @@ -23,7 +22,6 @@ $basicBtnC:#eb0313;
span{
color:#a0a0a0;
font-size:pxToRem(18px);
// vertical-align: baseline;
}
}
.detail{
... ... @@ -40,24 +38,15 @@ $basicBtnC:#eb0313;
.column{
display: table-cell;
padding: 0.4em 0.8em;
border:1px solid white;
border:1px solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
// table {
// width: 100%;
// tbody td{
// padding: 0.4em 0.8em;
// border:3px solid white;
// font-size: pxToRem(24px);
// background-color: $tableCellC;
// }
// }
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
... ... @@ -167,7 +156,7 @@ $basicBtnC:#eb0313;
h1{
display: inline-block;
line-height: pxToRem(88px);
}
}
}
.goodsName,
.goodsSubtitle{
... ... @@ -179,6 +168,8 @@ $basicBtnC:#eb0313;
}
}
.vipLevel {
width: 100%;
box-sizing:border-box;
display: table;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
... ... @@ -213,17 +204,21 @@ $basicBtnC:#eb0313;
color: $mainFontC;
line-height: pxToRem(88px);
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
.iconfont{
// padding-right:28rem/$pxConvertRem;
font-size: inherit;
display: inline-block;
width: pxToRem(35px);
font-size: pxToRem(45px);
float: right;
color:#e0e0e0;
text-align: right;
// padding-left:pxToRem(50px);
}
}
.goodsSubtitle,
.goodsDiscount{
text-indent: pxToRem(-14px);
}
.feedback-list-page {
padding-top: pxToRem(30px);
background-color: #f0f0f0;
... ... @@ -254,30 +249,28 @@ $basicBtnC:#eb0313;
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.comment-content{
.comment-content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
.user-name{
font-size: px2rem(24);
line-height: px2rem(62);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: px2rem(28);
padding-right: px2rem(18);
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: px2rem(24);
line-height: px2rem(62);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: px2rem(28);
line-height: px2rem(36);
font-size: pxToRem(28px);
line-height: pxToRem(36px);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
... ... @@ -299,17 +292,15 @@ $basicBtnC:#eb0313;
}
.detail-content,
.comment-time{
padding-left: px2rem(28);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: px2rem(28);
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
color:#c1c1c1;
... ... @@ -322,7 +313,7 @@ $basicBtnC:#eb0313;
text-align: center;
background-color: #fff;
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
... ... @@ -332,7 +323,7 @@ $basicBtnC:#eb0313;
font-size: inherit;
}
}
}
}
}
... ... @@ -353,10 +344,8 @@ $basicBtnC:#eb0313;
.store-logo{
// padding-right: 35rem/$pxConvertRem;
img{
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: pxToRem(-25px);
}
... ... @@ -374,17 +363,19 @@ $basicBtnC:#eb0313;
}
}
}
.goods-desc{
.goods-desc{
.service{
width: pxToRem(489px);
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
}
.tips{
}
.tips{
color:$subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials{
}
.materials{
.detail{
img{
display: block;
... ... @@ -395,12 +386,14 @@ $basicBtnC:#eb0313;
float: left;
}
.material-desc{
// float: left;
font-size: pxToRem(24px);
overflow: hidden;
}
}
.material-type{
width: pxToRem(581px);
height: pxToRem(99px);
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
... ... @@ -435,10 +428,15 @@ $basicBtnC:#eb0313;
}
#reference-swiper-container{
.first-group{
width: pxToRem(58px);
>div{
height: pxToRem(67px);
width: pxToRem(70px);
margin-top: pxToRem(66px);
.avatar{
line-height: pxToRem(40px);
width: pxToRem(40px);
height: pxToRem(40px);
margin: pxToRem(18px) 0;
}
}
}
... ... @@ -446,7 +444,7 @@ $basicBtnC:#eb0313;
.measurement-method{
.detail{
width: 100%;
height: pxToRem(300px);
// height: pxToRem(300px);
img{
float:left;
width: pxToRem(270px);
... ... @@ -455,7 +453,7 @@ $basicBtnC:#eb0313;
margin-right: pxToRem(28px);
}
.right-part{
float:left;
overflow: hidden;
.title{
>h1{
margin-top: pxToRem(10px);
... ... @@ -480,7 +478,7 @@ $basicBtnC:#eb0313;
height: pxToRem(15px);
background-color: $basicBtnC;
border-radius: 50%;
color:white;
color:#fff;
text-align: center;
line-height: pxToRem(15px);
font-size: pxToRem(13px);
... ... @@ -491,37 +489,33 @@ $basicBtnC:#eb0313;
}
}
clear:both;
}
}
.cart-bar{
}
}
.cart-bar{
position: relative;
box-sizing:border-box;
width: 100%;
height: pxToRem(120px);
position:fixed;
bottom: 0;
background-color: white;
background-color: #fff;
z-index: 64;
padding:pxToRem(20px) pxToRem(28px);
text-align: center;
a{
display: inline-block;
&.num-incart{
width: pxToRem(45px);
height: pxToRem(45px);
background: url(../img/product/cart.png) no-repeat;
font-size: pxToRem(47px);
color:#444;
}
&.favorite{
width: pxToRem(34px);
height: pxToRem(32px);
background:url(../img/product/favorite.png) no-repeat;
font-size: pxToRem(34px);
color:$basicBtnC;
}
&.addto-cart{
height: pxToRem(80px);
width: pxToRem(260px);
margin:0 pxToRem(100px) 0 pxToRem(128px);
margin:0 pxToRem(100px) 0 pxToRem(115px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
... ... @@ -538,11 +532,8 @@ $basicBtnC:#eb0313;
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color:white;
color:#fff;
font-size: pxToRem(24px);
}
}
}
}
... ...
{{> layout/header}}
<div class="good-detail-page yoho-page">
<div class="banner-container">
<h1 class="is-new-lable">NEW</h1>
{{# bannerTop}}
{{> product/banner_swiper_arrow}}
{{/ bannerTop}}
</div>
{{# goodsName}}
<h2 class="goodsName"><span>{{.}}</span></h2>
{{/ goodsName}}
... ... @@ -21,10 +15,6 @@
<h1 class="goodsSubtitle"><span>{{.}}</span></h1>
{{/ goodsSubtitle}}
<!-- {{# goodsTitle}}
<h1 class="goodsTitle">{{.}}</h1>
{{/ goodsTitle}} -->
<div class="price-date">
{{#goodsPrice}}
<div class="goodsPrice">
... ... @@ -32,44 +22,32 @@
<h1 class="previousPrice">{{previousPrice}}</h1>
</div>
{{/goodsPrice}}
{{#periodOfMarket}}
<div class="periodOfMarket">
<h1>上市期：</h1>
<h1 >{{.}}</h1>
</div>
{{/periodOfMarket}}
</div>
<!-- {{# vipLevel}}
<div class="vipLevel">
{{# list}}
{{#if @last}}
<span>{{text}}</span>
{{^}}
<span>{{text}}</span> |
{{/if}}
{{/ list}}
</div>
{{/ vipLevel}} -->
</div>
{{# vipLevel}}
<div class="vipLevel">
{{# vipLevel}}
<div class="vipLevel">
{{# list}}
<span class="vip-img"><img src="{{img}}" alt=""></span>
<span class="vip-img">
<img class="lazy" data-original="{{img}}" alt="">
</span>
<span class="vip-price">{{text}}</span>
{{/ list}}
</div>
{{/ vipLevel}}
</div>
{{/ vipLevel}}
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#goodsDiscount}}
<div class="goodsDiscount">
<h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
</div>
{{/goodsDiscount}}
</div>
{{/goodsDiscount}}
<div class="feedback-list-page ">
<div class="feedback-list-page ">
{{# feedbacks}}
<ul id="nav-tab" class="nav-tab clearfix">
<li class="comment-nav focus">{{commentName}}</li>
... ... @@ -104,30 +82,31 @@
</div>
</div>
{{/ feedbacks}}
</div>
<div class="gap-block"></div>
</div>
<div class="gap-block"></div>
{{# enterStore}}
<div class="enter-store page-block">
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<img src="{{img}}" alt="{{storeName}}">
<img class="lazy" data-original="{{img}}" alt="{{storeName}}">
</a>
<a class="store-name" href="{{url}}">{{storeName}}</a>
<a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
</div>
{{/ enterStore}}
<div class="gap-block"></div>
<!-- <iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe> -->
</div>
{{/ enterStore}}
<div class="gap-block"></div>
{{#goodsDescription}}
<div class="goods-desc page-block">
<img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">
{{#goodsDescription}}
<div class="goods-desc page-block">
<img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail table">
</h1>
{{#detail}}
<div class="detail table">
<div class="row">
<div class="column">编号：{{nubmer}}</div>
<div class="column">帽型：{{hatType}}</div>
... ... @@ -144,21 +123,21 @@
<div class="column">性别：{{gender}}</div>
<div class="column">风格：{{style}}</div>
</div>
</div>
{{/detail}}
</div>
{{/goodsDescription}}
</div>
{{/detail}}
</div>
{{/goodsDescription}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{#sizeInfo}}
<div class="size-info page-block">
{{#sizeInfo}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
... ... @@ -169,24 +148,24 @@
</div>
{{/list}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{#measurementMethod}}
<div class="measurement-method page-block">
{{#measurementMethod}}
<div class="measurement-method page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail" style="width:100%">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
<div class="right-part">
<div class="title">
<h1 >{{sort}}</h1>
... ... @@ -220,13 +199,8 @@
{{#list}}
{{#if @first}}
<div class="swiper-slide first-group" >
<div class="model-field" >{{fieldName}}</div>
<div class="first-model">
<img src="{{firstModel}}" alt="">
</div>
<div class="second-model">
<img src="{{secondModel}}" alt="">
</div>
<img class="lazy avatar" data-original="{{firstModel}}" alt="">
<img class="lazy avatar" data-original="{{secondModel}}" alt="">
</div>
{{^}}
<div class="swiper-slide" >
... ... @@ -241,52 +215,49 @@
<p class="tips">提示:左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/reference}}
</div>
{{/reference}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{#materials}}
<div class="materials page-block">
{{#materials}}
<div class="materials page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<img src="{{img}}" alt="">
</h1>
<div class="detail">
<img class="lazy" data-original="{{img}}" alt="">
<p class="material-desc">
{{desc}}
</p>
</div>
<img class="lazy material-type" data-original="{{materialType}}" alt="" >
</div>
{{/materials}}
</div>
<img src="{{materialType}}" alt="" class="material-type">
</div>
{{/materials}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{#productDetail}}
<div class="product-detail page-block">
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
</h1>
<div class="detail">
<p>{{desc}}</p>
<img src="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
{{#cartInfo}}
<div class="cart-bar">
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart"></a>
<a href="" class="addto-cart">加入购物车</a>
<a href="" class="favorite"></a>
</div>
{{/cartInfo}}
<a href="" class="num-incart iconfont">&#xe62c;</a>
<a href="" class="addto-cart ">加入购物车</a>
<a href="" class="favorite iconfont">&#xe605;</a>
</div>
{{/cartInfo}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -105,7 +105,7 @@ SHOE BQT KEN BLOCK',
'sizeInfo'=>array(
'title' => '尺码信息',
'enTitle' =>'SIZE INFO',
'enTitle' =>'xSIZE INFO',
'detail' =>array(
'list'=>array(
... ... @@ -169,7 +169,7 @@ SHOE BQT KEN BLOCK',
'detail' =>array(
'list'=>array(
array(
'fieldName'=>' ',
'fieldName'=>'1 ',
'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
),
... ...