fe / YOHOBUYWAP · Commits

Go to a project

Authored by 梁志锋
Commit aa9e081b8fbae61fc7454316703f77875356de83 2 parents 0fc4ad4c f57e2ffe

update

Inline Side-by-side
Showing 3 changed files with 872 additions and 840 deletions
... ... @@ -1058,223 +1058,153 @@
'pageHeader': {
'navBack': 'sss ',
'navHome': 'sss ',
'navTitle': '商品详情TEST'
'navTitle': '商品详情'
},
'bannerTop': {
'list': [
{
'url' => '',
'img' => 'http://img13.static.yhbimg.com/goodsimg/2015/10/18/03/0250c3935f86dbd2baa7d45603d19fd637.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'
{
'url' : '',
'img' : ''
},
{
'url' => '',
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/12/03/01bf4cf4444035a1930d33a9d0f8bff4fa.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90' ),
...
]
},
'goodsName' : 'Stussy No. 4 BOX TEE ',
'goodsSubtitle' : '【全民拼抢购】经典印花T恤，满4件免一件！',
'goodsPrice' : {
'currentPrice' : '¥298.00',
'previousPrice' : '¥598.00'
},
'periodOfMarket' : '11月',
'goodsTitle' : '¥298.00',
'vipLevel' : {
'list' : [
{
'img':'',
'text' : '¥284.00'
},
{
'url' => '',
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/12/03/01d7ef2f624eeea15e80bb374607aea317.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'
}
...
]
},
'goodsName' => 'Stussy No. 4 BOX TEE DC SPAR HIGH WC
SHOE BQT KEN BLOCK',
'goodsSubtitle'=>'【全民拼抢购】经典印花T恤，满4件免一件！全场低至
9.9元，拼购时代High起来。',
'goodsPrice' =>array(
'currentPrice'=>'¥298.00',
'previousPrice'=>'¥598.00'
),
'periodOfMarket'=>'11月',
'goodsTitle' => '¥298.00',
'vipLevel' => array (
'list' => array (
array (
'img'=>'http://static.dev.yohobuy.com/img/product/silver.png',
'text' => '¥284.00'
),
array ( 'img'=>'http://static.dev.yohobuy.com/img/product/golden.png',
'text' => '¥269.00'
),
array (
'img'=>'http://static.dev.yohobuy.com/img/product/platinum.png',
'text' => '¥263.00'
)
)
// ),
// 'goodsDiscount'=>array(
// 'list'=>array(
// '【summer final sale】满¥499立享6.8折',
// '【BACK TO SCHOOL】满￥499赠送Paul
// Franke帽子一个，多买多送！',
// '【BACK TO SCHOOL】满￥499赠送Paul
// Franke帽子一个，多买多送！'
// )
// ),
// 'feedbacks'=>array(
// 'commentsNum'=>0,
// 'consultsNum'=>1,
// // 'commentName'=>'商品评价',
// // 'consultName' =>'购买咨询',
// 'link'=>'',
// 'comments'=>array(
// array(
// 'userName'=>'Lynnic',
// 'desc'=>'购买了白色Mate7',
// 'content'=>'活动时买的，挺超值。上身效果也不错。质量
//很好，买送人的，很满意。而且物流相当给...',
// 'time'=>'2014-08-12 10:24:26'
// )
// ),
// 'consults'=>array(
// array(
// 'question' =>'您好 我一米七七 140斤 穿M的行吗',
// 'time'=>'2014-08-12 10:24:26',
// 'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
// )
// )
// ),
//
// 'enterStore'=>array(
// 'img'=>'http://static.dev.yohobuy.com/img/product/store.png',
// 'storeName'=>'Stussy',
// 'url'=>'http://stussy.m.yohobuy.com/'
// ),
//
// 'goodsDescription'=>array(
// 'title' =>'商品描述',
// 'enTitle'=>'DESCRIPTON',
//
// 'detail'=>array(
// 'nubmer' =>'51018059',
// 'color' =>'黑',
// 'type' =>'帽子',
// 'gender' =>'女款',
// 'hatType' =>'棒球帽',
// 'bongrace' =>'平檐款式',
// 'goodsDetail'=>'字母图案',
// 'style'=>'街头'
// )
// ),
//
// 'sizeInfo'=>array(
// 'title' => '尺码信息',
// 'enTitle' =>'xSIZE INFO',
//
// 'detail' =>array(
// 'list'=>array(
// array(
// 'name'=>'尺寸',
// 'sizem'=>'m',
// 'sizexl' =>'XL'
// ),
// array(
// 'name'=>'肩宽',
// 'sizem'=>'43',
// 'sizexl' =>'46'
// ),
// array(
// 'name'=>'衣长',
// 'sizem'=>'102',
// 'sizexl' =>'106'
// ),
// array(
// 'name'=>'肩宽',
// 'sizem'=>'90',
// 'sizexl' =>'96'
// ),
// array(
// 'name'=>'胸围',
// 'sizem'=>'90',
// 'sizexl' =>'96'
// ),
// array(
// 'name'=>'xx',
// 'sizem'=>'xx',
// 'sizexl' =>'xx'
// )
// )
// )
// ),
//
// 'measurementMethod'=>array(
// 'title' => '测量方式',
// 'enTitle' =>'MEASUREMENT METHOD',
//
// 'detail'=>array(
// 'sort' =>'上衣' ,
// 'enSort'=>'TOPS',
// 'img' =>'http://static.dev.yohobuy.com/img/product/tops.png',
// 'items'=>array(
// '肩宽(两端肩线间的直线长度)',
// '胸围(两端肩线间的直线长度)',
// '肩宽(两端肩线间的直线长度)',
// '肩宽(两端肩线间的直线长度)',
// '肩宽(两端肩线间的直线长度)',
// '肩宽(两端肩线间的直线长度)'
// )
// )
// ),
//
// 'reference' => array(
// 'title' => '模特试穿',
// 'enTitle' =>'REFERENCE',
//
// 'detail' =>array(
// 'list'=>array(
// array(
// 'fieldName'=>'1 ',
// 'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
// 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
// ),
// array(
// 'fieldName'=>'模特',
// 'firstModel'=>'Oliver',
// 'secondModel' =>'Jvly'
// ),
// array(
// 'fieldName'=>'身高',
// 'firstModel'=>'175',
// 'secondModel' =>'170'
// ),
// array(
// 'fieldName'=>'体重',
// 'firstModel'=>'53',
// 'secondModel' =>'59'
// ),
// array(
// 'fieldName'=>'三围',
// 'firstModel'=>'78/70/87',
// 'secondModel' =>'78/70/87'
// ),
// array(
// 'fieldName'=>'吊牌尺',
// 'firstModel'=>'S',
// 'secondModel' =>'L'
// )
// )
// )
// ),
//
// 'materials' => array(
// 'title' => '商品材质',
// 'enTitle' =>'MATERIALS',
// 'img' => 'http://static.dev.yohobuy.com/img/product/material.png',
// 'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。',
// 'materialType'=>'http://static.dev.yohobuy.com/img/product/material-type.png'
// ),
//
// 'productDetail' =>array(
// 'title' => '商品详情',
// 'enTitle' =>'DETAILS',
// 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
// 'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
// ),
//
// 'cartInfo' =>array(
// 'numInCart' => 3,
// 'goodsInstore'=>0
// )
//
// );
\ No newline at end of file
'goodsDiscount' : {
'list' : [
{
'text' : '【BACK TO SCHOOL】满￥499赠送Paul
Franke帽子一个，多买多送！'
},
...
],
'feedbacks' : {
'commentsNum' : 0,
'consultsNum' : 1,
'link' : '',
'comments' : [
{
'userName' : 'Lynnic',
'desc' : '购买了白色Mate7',
'content' : '活动时买的',
'time' : '2014-08-12 10:24:26'
},
...
],
'consults' : [
{
'question' : '您好 我一米七七 140斤 穿M的行吗',
'time' : '2014-08-12 10:24:26',
'answer' : ''
},
...
]
},
'enterStore' : {
'img' : '',
'storeName' : 'Stussy',
'url' : 'http://stussy.m.yohobuy.com/'
},
'goodsDescription' : {
'title' : '商品描述',
'enTitle' : 'DESCRIPTON',
'detail' : {
'nubmer' : '51018059',
'color' : '黑',
'type' : '帽子',
'gender' : '女款',
'hatType' : '棒球帽',
'bongrace' : '平檐款式',
'goodsDetail' : '字母图案',
'style' : '街头'
}
},
'sizeInfo' : {
'title' : '尺码信息',
'enTitle' : '',
'detail' : {
'list' : [
{
'name' : '尺寸',
'sizem' : 'm',
'sizexl' : 'XL'
},
...
]
}
},
'measurementMethod' : {
'title' : '测量方式',
'enTitle' : '',
'detail' : {
'sort' : '上衣' ,
'enSort' : 'TOPS',
'img' : '',
'items' : [
'item' : '肩宽(两端肩线间的直线长度)',
...
]
}
},
'reference' : {
'title' : '模特试穿',
'enTitle' : '',
'detail' : {
'list' : [
{
'fieldName' : '头像',
'firstModel' : '', //头像图片url
'secondModel' =>''
},
...
]
}
},
'materials' : {
'title' : '商品材质',
'enTitle' : '',
'img' : '',
'desc' : '用各种洗涤剂',
'materialType' : ''
},
'productDetail' : {
'title' : '商品详情',
'enTitle' : '',
'desc' : 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计',
'img' : ''
},
'cartInfo' : {
'numInCart' : 3,
'goodsInstore' : 0
}
}
... ...
... ... @@ -3,115 +3,70 @@ $subFontC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
$basicBtnC:#eb0313;
.my-swiper-button-prev,
.my-swiper-button-next {
position: absolute;
top: 50%;
width: pxToRem(48px);
height: pxToRem(48px);
margin-top: pxToRem(-44px);
cursor: pointer;
-moz-background-size: pxToRem(48px) pxToRem(48px);
-webkit-background-size: pxToRem(48px) pxToRem(48px);
background-size: pxToRem(48px) pxToRem(48px);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
width: pxToRem(48px);
height: pxToRem(48px);
margin-top: pxToRem(-44px);
cursor: pointer;
-moz-background-size: pxToRem(48px) pxToRem(48px);
-webkit-background-size: pxToRem(48px) pxToRem(48px);
background-size: pxToRem(48px) pxToRem(48px);
background-position: center;
background-repeat: no-repeat;
}
.next-grey {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
right: pxToRem(30px);
left: auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
right: pxToRem(30px);
left: auto;
}
.prev-grey {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
left: pxToRem(30px);
right: auto;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
left: pxToRem(30px);
right: auto;
}
.good-detail-page {
overflow: hidden;
.page-block{
box-sizing:border-box;
width: 100%;
border-bottom: 2px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
>.title{
line-height: pxToRem(88px);
color: $mainFontC;
font-size : pxToRem(28px);
border-bottom: 1px solid $borderC;
span{
color:#a0a0a0;
font-size:pxToRem(18px);
}
}
.detail{
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table{
display: table;
width: 100%;
.row{
display: table-row;
.column{
display: table-cell;
padding: 0.4em 0.8em;
border:1px solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
}
}
.gap-block{
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.banner-container{
position: relative;
// overflow: hidden;
.is-new-lable{
position: absolute;
left: pxToRem(108px);
top:pxToRem(40px);
height: pxToRem(35px);
width:pxToRem(70px);
color:#fff;
text-align: center;
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
// z-index: 16;
}
}
.banner-top{
// width: 100%;
min-height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
.swiper-pagination{
position:absolute;
bottom: pxToRem(40px);
.swiper-pagination-bullet {
margin-right: 2px;
}
.swiper-pagination-bullet-active {
background-color: #000;
overflow: hidden;
.page-block {
box-sizing: border-box;
width: 100%;
border-bottom: 2px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
>.title {
line-height: pxToRem(88px);
color: $mainFontC;
font-size: pxToRem(28px);
border-bottom: 1px solid $borderC;
span {
color: #a0a0a0;
font-size: pxToRem(18px);
}
}
.detail {
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table {
display: table;
width: 100%;
.row {
display: table-row;
.column {
display: table-cell;
padding: 0.4em 0.8em;
border: 1px solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
<<<<<<< HEAD
}
... ... @@ -245,406 +200,539 @@ $basicBtnC:#eb0313;
border-bottom: 1px solid $borderC;
h1{
padding : pxToRem(30px) pxToRem(28px);
=======
}
}
}
.gap-block {
min-height: 30rem/$pxConvertRem;
background-color: #f0f0f0;
}
.banner-container {
position: relative;
// overflow: hidden;
.is-new-lable {
position: absolute;
left: pxToRem(108px);
top: pxToRem(40px);
height: pxToRem(35px);
width: pxToRem(70px);
color: #fff;
text-align: center;
font-size: pxToRem(20px);
line-height: pxToRem(35px);
background-color: #7cd881;
// z-index: 16;
}
}
.banner-top {
// width: 100%;
min-height: 660rem / $pxConvertRem;
overflow: hidden;
position: relative;
.swiper-pagination {
position: absolute;
bottom: pxToRem(40px);
.swiper-pagination-bullet {
margin-right: 2px;
}
.swiper-pagination-bullet-active {
background-color: #000;
}
}
}
.banner-swiper {
min-height: pxToRem(600px);
min-width: pxToRem(448px);
margin: pxToRem(30px) pxToRem(96px);
// position: relative;
overflow: hidden;
ul {
position: relative;
height: 100%;
li {
float: left;
height: 100%;
}
}
}
.goodsName {
box-sizing: border-box;
width: 100%;
min-height: pxToRem(83px);
font-size: pxToRem(28px);
color: #fff;
padding-left: pxToRem(25px);
padding-right: pxToRem(25px);
line-height: pxToRem(36px);
background-color: #515150;
}
.goodsSubtitle {
min-height: pxToRem(87px);
font-size: pxToRem(24px);
>>>>>>> f57e2ffe1ca53fe633e327c2a34a6f34b887a7bd
line-height: pxToRem(36px);
// line-height: pxToRem(88px);
color: $subFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
border-bottom: 1px solid $borderC;
background-color: #f4f4f4;
}
.price-date {
// width: 100%;
color: $subFontC;
min-height: pxToRem(88px);
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
border-bottom: 1px solid $borderC;
}
.iconfont{
display: inline-block;
width: pxToRem(35px);
font-size: pxToRem(45px);
.goodsPrice {
float: left;
font-size: pxToRem(34.59px);
h1 {
display: inline-block;
line-height: pxToRem(88px);
}
.currentPrice {
color: red;
margin-right: pxToRem(10px);
}
.previousPrice {
text-decoration: line-through;
}
}
.periodOfMarket {
font-size: pxToRem(24px);
float: right;
color:#e0e0e0;
// padding-left:pxToRem(50px);
h1 {
display: inline-block;
line-height: pxToRem(88px);
}
}
.goodsName,
.goodsSubtitle {
// width: 100%;
display: table;
span {
display: table-cell;
vertical-align: middle;
}
}
.vipLevel {
width: 100%;
box-sizing: border-box;
display: table;
min-height: pxToRem(88px);
padding-left: pxToRem(28px);
padding-right: pxToRem(28px);
font-size: pxToRem(22px);
color: #999999;
border-bottom: 1px solid $borderC;
span {
display: table-cell;
vertical-align: middle;
}
.vip-img {
padding-right: pxToRem(22px);
img {
width: pxToRem(52px);
height: pxToRem(32px);
}
}
.vip-price {
padding-right: pxToRem(55px);
}
.vip-price:last-child {
padding-right: 0;
}
}
.discount-folder{
.folder-item{
.goodsDiscount {
font-size: pxToRem(28px);
color: $mainFontC;
border-bottom: 1px solid $borderC;
h1 {
padding: pxToRem(30px) pxToRem(28px);
line-height: pxToRem(36px);
// line-height: pxToRem(88px);
}
.iconfont {
display: inline-block;
width: pxToRem(35px);
font-size: pxToRem(45px);
float: right;
color: #e0e0e0;
// padding-left:pxToRem(50px);
}
.discount-folder {
.folder-item {
border-top: 1px solid $borderC;
}
display: none;
}
}
.goodsSubtitle,
.goodsDiscount {
text-indent: pxToRem(-14px);
}
.feedback-list {
padding-top: pxToRem(30px);
background-color: #f0f0f0;
.nav-tab {
width: 100%;
}
.nav-tab {
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav,
.consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60px);
line-height: pxToRem(60px);
font-size: pxToRem(28px);
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content {
.content-main {
background-color: #fff;
border-bottom: 1px solid $borderC;
&.comment-content-main {
.user-name {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color: $mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content {
// font-size: pxToRem(28px);
// line-height: pxToRem(36px);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color: $mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time {
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content {
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content {
color: $mainFontC;
}
.detail-content,
.comment-time {
padding-left: pxToRem(28px);
}
.detail-content {
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content {
padding-right: pxToRem(28px);
}
.comment-time {
color: #c1c1c1;
}
}
&.consult-content-main {
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
padding-top: pxToRem(20px);
padding-bottom: pxToRem(20px);
.question {
font-size: pxToRem(24px);
color: $mainFontC;
span {
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
}
}
.time {
font-size: pxToRem(22px);
color: $subFontC;
}
.answer {
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color: $subFontC;
margin-top: pxToRem(14px);
span {
display: block;
float: left;
font-size: inherit;
color: $mainFontC;
padding-right: pxToRem(15px);
}
p {
overflow: hidden;
}
}
}
}
}
.comment-content-footer,
.consult-content-footer {
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a {
color: #e0e0e0;
.iconfont {
font-size: inherit;
}
}
}
.content.hide {
display: none;
}
display: none;
}
}
.goodsSubtitle,
.goodsDiscount{
text-indent: pxToRem(-14px);
}
.feedback-list {
padding-top: pxToRem(30px);
background-color: #f0f0f0;
.nav-tab{
width: 100%;
}
.nav-tab {
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav, .consult-nav {
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60px);
line-height: pxToRem(60px);
font-size: pxToRem(28px);
text-align: center;
color: #ccc;
&.focus {
color: #000;
}
}
.comment-nav {
border-right: 1px solid #ccc;
}
.content{
.content-main{
background-color: #fff;
border-bottom: 1px solid $borderC;
&.comment-content-main{
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
// font-size: pxToRem(28px);
// line-height: pxToRem(36px);
font-size: pxToRem(24px);
line-height: pxToRem(62px);
color:$mainFontC;
padding-left: pxToRem(28px);
padding-right: pxToRem(18px);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
}
.detail-content{
font-size: pxToRem(28px);
line-height: pxToRem(36px);
}
.goods-spec,
.detail-content{
color:$mainFontC;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
}
.detail-content{
padding-right: pxToRem(28px);
}
.comment-time{
color:#c1c1c1;
}
}
&.consult-content-main{
padding-right: pxToRem(28px);
padding-left: pxToRem(28px);
padding-top: pxToRem(20px);
padding-bottom: pxToRem(20px);
.question{
font-size: pxToRem(24px);
color:$mainFontC;
span{
display: block;
float: left;
font-size: inherit;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
.time{
font-size: pxToRem(22px);
color:$subFontC;
}
.answer{
font-size: pxToRem(24px);
line-height: pxToRem(36px);
color:$subFontC;
margin-top: pxToRem(14px);
span{
display: block;
float: left;
font-size: inherit;
color:$mainFontC;
padding-right: pxToRem(15px);
}
p{
overflow: hidden;
}
}
}
}
}
.comment-content-footer,
.consult-content-footer{
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a{
color: #e0e0e0;
.iconfont{
font-size: inherit;
}
}
}
.content.hide {
display: none;
}
}
.feedback-list .nodata{
height: pxToRem(88px);
font-size: pxToRem(28px);
line-height: pxToRem(88px);
background-color: #fff;
padding:0 pxToRem(28px);
.go-consult{
float: right;
color: $subFontC;
span{
.feedback-list .nodata {
height: pxToRem(88px);
font-size: pxToRem(28px);
line-height: pxToRem(88px);
background-color: #fff;
padding: 0 pxToRem(28px);
.go-consult {
float: right;
color: $subFontC;
span {
font-size: pxToRem(28px);
}
}
}
.enter-store {
min-height: pxToRem(100px);
display: table;
a {
display: table-cell;
vertical-align: middle;
text-align: left;
}
.store-logo {
// padding-right: 35rem/$pxConvertRem;
img {
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: pxToRem(-25px);
}
}
.store-name {
font-size: pxToRem(34px);
color: $mainFontC;
}
.store-link {
font-size: pxToRem(28px);
color: $subFontC;
text-align: right;
span {
font-size: inherit;
}
}
}
}
.enter-store{
min-height: pxToRem(100px);
display: table;
a{
display: table-cell;
vertical-align: middle;
text-align: left;
}
.store-logo{
// padding-right: 35rem/$pxConvertRem;
img{
width: pxToRem(109px);
height: pxToRem(68px);
margin-left: 0;
margin-right: pxToRem(-25px);
}
}
.store-name{
font-size: pxToRem(34px);
color:$mainFontC;
}
.store-link{
font-size:pxToRem(28px) ;
color:$subFontC;
text-align: right;
span{
font-size: inherit;
}
}
}
.goods-desc{
.service{
width: pxToRem(489px);
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
}
.tips{
color:$subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials{
.detail{
img{
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc{
font-size: pxToRem(24px);
overflow: hidden;
}
}
.material-type{
width: pxToRem(581px);
height: pxToRem(99px);
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
}
.product-detail{
.detail{
img{
margin-top: pxToRem(20px);
width: pxToRem(581px);
height: pxToRem(772px);
}
}
margin-bottom: pxToRem(120px);
}
.detail-swiper{
.swiper-wrapper{
.goods-desc {
.service {
width: pxToRem(489px);
height: pxToRem(28px);
margin-top: pxToRem(22px);
}
}
.tips {
color: $subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials {
.detail {
img {
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc {
font-size: pxToRem(24px);
overflow: hidden;
}
}
.material-type {
width: pxToRem(581px);
height: pxToRem(99px);
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
}
.product-detail {
.detail {
img {
margin-top: pxToRem(20px);
width: pxToRem(581px);
height: pxToRem(772px);
}
}
margin-bottom: pxToRem(120px);
}
.detail-swiper {
.swiper-wrapper {
height: pxToRem(200px);
overflow: hidden;
.swiper-slide{
width: pxToRem(114px);
div{
text-align: center;
&.cell{
font-size: pxToRem(24px);
background-color: $tableCellC;
padding:pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
#reference-swiper-container{
.first-group{
width: pxToRem(70px);
margin-top: pxToRem(66px);
.avatar{
line-height: pxToRem(40px);
width: pxToRem(40px);
height: pxToRem(40px);
margin: pxToRem(18px) 0;
}
}
}
.measurement-method{
.detail{
width: 100%;
height: pxToRem(260px);
img{
float:left;
width: pxToRem(270px);
height: pxToRem(239px);
margin-top: pxToRem(18px);
margin-right: pxToRem(28px);
}
.right-part{
overflow: hidden;
.title{
>h1{
margin-top: pxToRem(10px);
display: inline-block;
padding-right: pxToRem(10px);
border-right: 1px solid $borderC;
line-height: 100%;
}
>span{
font-size: pxToRem(12px);
}
}
ul.items{
margin-top: pxToRem(20px);
padding: 0;
line-height: pxToRem(30px);
font-size: pxToRem(13px);
li{
span{
display: inline-block;
width: pxToRem(15px);
height: pxToRem(15px);
background-color: $basicBtnC;
border-radius: 50%;
color:#fff;
text-align: center;
line-height: pxToRem(15px);
font-size: pxToRem(13px);
margin-right: pxToRem(12px);
vertical-align: text-bottom;
}
}
}
}
clear:both;
}
}
.cart-bar{
position: relative;
box-sizing:border-box;
width: 100%;
height: pxToRem(120px);
position:fixed;
bottom: 0;
background-color: #fff;
z-index:2;
padding:pxToRem(20px) pxToRem(28px);
text-align: center;
a{
display: inline-block;
&.num-incart{
font-size: pxToRem(47px);
color:#444;
}
&.favorite{
font-size: pxToRem(34px);
color:$basicBtnC;
}
&.addto-cart,
&.sold-out{
height: pxToRem(80px);
width: pxToRem(260px);
margin:0 pxToRem(100px) 0 pxToRem(115px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
}
&.sold-out{
background-color: #f58189;
}
}
.num-tag{
position: absolute;
left:pxToRem(66px);
height: pxToRem(20px);
display: block;
width: pxToRem(36px);
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color:#fff;
font-size: pxToRem(24px);
}
}
.swiper-slide {
width: pxToRem(114px);
div {
text-align: center;
&.cell {
font-size: pxToRem(24px);
background-color: $tableCellC;
padding: pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
#reference-swiper-container {
.first-group {
width: pxToRem(70px);
margin-top: pxToRem(66px);
.avatar {
line-height: pxToRem(40px);
width: pxToRem(40px);
height: pxToRem(40px);
margin: pxToRem(18px) 0;
}
}
}
.measurement-method {
.detail {
width: 100%;
height: pxToRem(260px);
img {
float: left;
width: pxToRem(270px);
height: pxToRem(239px);
margin-top: pxToRem(18px);
margin-right: pxToRem(28px);
}
.right-part {
overflow: hidden;
.title {
>h1 {
margin-top: pxToRem(10px);
display: inline-block;
padding-right: pxToRem(10px);
border-right: 1px solid $borderC;
line-height: 100%;
}
>span {
font-size: pxToRem(12px);
}
}
ul.items {
margin-top: pxToRem(20px);
padding: 0;
line-height: pxToRem(30px);
font-size: pxToRem(13px);
li {
span {
display: inline-block;
width: pxToRem(15px);
height: pxToRem(15px);
background-color: $basicBtnC;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: pxToRem(15px);
font-size: pxToRem(13px);
margin-right: pxToRem(12px);
vertical-align: text-bottom;
}
}
}
}
clear:both;
}
}
.cart-bar {
position: relative;
box-sizing: border-box;
width: 100%;
height: pxToRem(120px);
position: fixed;
bottom: 0;
background-color: #fff;
z-index: 2;
padding: pxToRem(20px) pxToRem(28px);
text-align: center;
a {
display: inline-block;
&.num-incart {
font-size: pxToRem(47px);
color: #444;
}
&.favorite {
font-size: pxToRem(34px);
color: $basicBtnC;
}
&.addto-cart,
&.sold-out {
height: pxToRem(80px);
width: pxToRem(260px);
margin: 0 pxToRem(100px) 0 pxToRem(115px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
}
&.sold-out {
background-color: #f58189;
}
}
.num-tag {
position: absolute;
left: pxToRem(66px);
height: pxToRem(20px);
display: block;
width: pxToRem(36px);
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color: #fff;
font-size: pxToRem(24px);
}
}
}
... ...
... ... @@ -22,12 +22,14 @@
<h1 class="previousPrice">{{previousPrice}}</h1>
</div>
{{/goodsPrice}}
{{#periodOfMarket}}
<div class="periodOfMarket">
<h1>上市期：</h1>
<h1 >{{.}}</h1>
</div>
{{/periodOfMarket}}
<<<<<<< HEAD
</div>
{{# vipLevel}}
... ... @@ -40,120 +42,131 @@
{{/ list}}
</div>
{{/ vipLevel}}
=======
</div>
>>>>>>> f57e2ffe1ca53fe633e327c2a34a6f34b887a7bd
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#each list}}
{{#if @first}}
<h1 class="first-item">{{title}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
{{else}}
<h1 class="folder-item">{{title}}</h1>
{{/if}}
{{/list}}
{{# vipLevel}}
<div class="vipLevel">
{{# list}}
<span class="vip-img">
<img class="lazy" data-original="http://static.dev.yohobuy.com/img/product/silver.png" alt="">
</span>
<span class="vip-price">{{text}}</span>
{{/ list}}
</div>
</div>
{{/goodsDiscount}}
{{/ vipLevel}}
<div class="feedback-list ">
{{# feedbacks}}
{{#if commentsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
{{#if consultsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
<div class="nodata">
<span>暂无商品评价和咨询</span>
<a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
{{#goodsDiscount}}
<div class="goodsDiscount">
{{#each list}}
{{#if @first}}
<h1 class="first-item">{{title}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
<div class="discount-folder">
{{else}}
<h1 class="folder-item">{{title}}</h1>
{{/if}}
{{/list}}
</div>
{{/if}}
{{/if}}
</div>
{{/goodsDiscount}}
{{/ feedbacks}}
</div>
<div class="feedback-list ">
{{# feedbacks}}
{{#if commentsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
{{#if consultsNum}}
<!--tab begin-->
{{> product/feedback-tab}}
<!--/tab end-->
{{else}}
<div class="nodata">
<span>暂无商品评价和咨询</span>
<a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
</div>
{{/if}}
{{/if}}
{{/ feedbacks}}
</div>
<div class="gap-block"></div>
<div class="gap-block"></div>
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<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}}
{{# enterStore}}
<div class="enter-store page-block">
<a class="store-logo" href="{{url}}" style="">
<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>
<div class="gap-block"></div>
{{#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">
<div class="row">
<div class="column">编号：{{nubmer}}</div>
<div class="column">帽型：{{hatType}}</div>
{{#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">
<div class="row">
<div class="column">编号：{{nubmer}}</div>
<div class="column">帽型：{{hatType}}</div>
</div>
<div class="row">
<div class="column">颜色：{{color}}</div>
<div class="column">帽檐：{{bongrace}}</div>
</div>
<div class="row">
<div class="column">类型：{{type}}</div>
<div class="column">细节：{{goodsDetail}}</div>
</div>
<div class="row">
<div class="column">性别：{{gender}}</div>
<div class="column">风格：{{style}}</div>
</div>
</div>
<div class="row">
<div class="column">颜色：{{color}}</div>
<div class="column">帽檐：{{bongrace}}</div>
</div>
<div class="row">
<div class="column">类型：{{type}}</div>
<div class="column">细节：{{goodsDetail}}</div>
</div>
<div class="row">
<div class="column">性别：{{gender}}</div>
<div class="column">风格：{{style}}</div>
</div>
</div>
{{/detail}}
</div>
{{/goodsDescription}}
{{/detail}}
</div>
{{/goodsDescription}}
<div class="gap-block"></div>
<div class="gap-block"></div>
{{#sizeInfo}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide " >
<div class="size-name cell">{{name}}</div>
<div class="size-m cell">{{sizem}}</div>
<div class="size-xl cell">{{sizexl}}</div>
{{#sizeInfo}}
<div class="size-info page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
{{#detail}}
<div class="detail">
<div class="swiper-container detail-swiper" id="size-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide " >
<div class="size-name cell">{{name}}</div>
<div class="size-m cell">{{sizem}}</div>
<div class="size-xl cell">{{sizexl}}</div>
</div>
{{/list}}
</div>
</div>
{{/list}}
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
{{/sizeInfo}}
{{/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>
... ... @@ -210,53 +223,54 @@
<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">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</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}}
{{#materials}}
<div class="materials page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</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 class="gap-block"></div>
<div class="gap-block"></div>
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<p>{{desc}}</p>
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
{{#productDetail}}
<div class="product-detail page-block">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
</h1>
<div class="detail">
<p>{{desc}}</p>
<img class="lazy" data-original="{{img}}" alt="">
</div>
</div>
{{/productDetail}}
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart iconfont">&#xe62c;</a>
{{#if goodsInstore}}
<a href="" class="addto-cart ">加入购物车</a>
{{else}}
<a href="" class="sold-out">已售罄</a>
{{/if}}
<a href="" class="favorite iconfont">&#xe605;</a>
</div>
{{/cartInfo}}
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart iconfont">&#xe62c;</a>
{{#if goodsInstore}}
<a href="" class="addto-cart ">加入购物车</a>
{{else}}
<a href="" class="sold-out">已售罄</a>
{{/if}}
<a href="" class="favorite iconfont">&#xe605;</a>
</div>
{{/cartInfo}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...