wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit d0efe235a2f10ae872180764359994c014abe7a0 1 parent 9c9d6d49

build guang detail

Inline Side-by-side
Showing 19 changed files with 792 additions and 61 deletions
... ... @@ -323,80 +323,78 @@
intro: '',
url: ''
},
article: {
detail: {
title: '',
publishTime: '',
pageView: 3445,
content: [
{
text: {
deps: ''
}
text: ''
},
{
bigImage: {
src: ''
}
bigImage: ''
},
{
smallImage: {
imgs: [
{
src: ''
},
{
src: ''
}
]
}
smallImage: [
{
src: ''
},
{
src: ''
}
]
},
{
recommendation: {
list: [
{...}, //商品信息
...
]
//onlyOne
relatedReco: {
onlyOne: true, //若只有一个商品，传此字段为true
thumb: '',
name: '',
salePrice: 123,
price: 213,
url: ''
}
//多个
relatedReco: [
{...}, //商品信息
...
]
}，
{
collocation: {
list: [
{
thumb: '',
type: 'pants',
products: [
{...}, //商品信息
...
]
},
...
]
}
collocation: [
{
thumb: '',
type: 'pants',
goods: [
{...}, //商品信息
...
]
},
...
]
}
]
},
relatedBrands: {
list: [
{
thumb: '',
name: '',
url: ''
},
...
]
},
tags: {
list: [
{
name: '',
url: ''
},
...
]
},
relatedArticles: [
relatedBrand: [
{
thumb: '',
name: '',
url: ''
},
...
],
relatedTag: [
{
name: '',
url: ''
},
...
],
relatedInfo: [
{
thumb: '',
squareThumb: true, //是否为方图
title: '',
url: '',
publishTime: ''
... ...
/**
* 逛详情页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/13
*/
var $ = require('yoho.zepto'),
ellipsis = require('mlellipsis'),
lazyLoad = require('yoho.lazyload');
ellipsis.init();
lazyLoad($('.lazy'));
//title mlellipsis
$('.info-list .title, .one-good .reco-name').each(function() {
this.mlellipsis(2);
});
\ No newline at end of file
... ...
@import "guang/clothes/*.png";
$clothes: sprite-map("guang/clothes/*.png");
@mixin retina-sprite($map, $sprite, $scale) {
$width: image-width(sprite-file($map, $sprite));
$height: image-height(sprite-file($map, $sprite));
$offsetY: ceil(nth(sprite-position($map, $sprite), 2) / $scale);
background: sprite-url($map) 0 $offsetY no-repeat;
$zoomX: ceil(image_width(sprite-path($map)) / $scale);
$zoomY: auto;
@include background-size($zoomX $zoomY);
display: block;
}
@mixin relatedTitle {
margin: 0 29rem / $pxConvertRem;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.guang-detail-page {
#wrapper.ios {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.author {
border-bottom: 1px solid #e0e0e0;
background: #fff;
> a {
display: block;
height: 100%;
}
.avatar {
float: left;
margin-top: 20rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
@include border-radius(50%);
}
.name {
float: left;
font-size: 28rem / $pxConvertRem;
color: #000;
padding: 30rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem 0;
}
.intro {
float: left;
font-size: 28rem / $pxConvertRem;
color: #b0b0b0;
padding: 30rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem 0;
}
}
.post-title {
padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;
background: #fff;
.title {
line-height: 60rem / $pxConvertRem;
font-size: 40rem / $pxConvertRem;
color: #000;
font-weight: bold;
}
}
.text-block {
padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
background: #fff;
color: #444;
}
.big-img-block {
padding-bottom: 5rem / $pxConvertRem;
background: #fff;
img {
width: 100%;
height: 640rem / $pxConvertRem;
}
}
.small-img-block {
padding-bottom: 8rem / $pxConvertRem;
background: #fff;
img {
float: right;
width: 315rem / $pxConvertRem;
height: 420rem / $pxConvertRem;
&:first-child {
float: left;
}
}
}
.collocation-block {
background: #fff;
.thumb-container {
padding-top: 30rem / $pxConvertRem;
padding-left: 30rem / $pxConvertRem;
background: transparent image-url('guang/thumb-container-bg.png') no-repeat;
background-size: 100% 100%;
&.fixed-top {
position: fixed;
left: 0;
right: 0;
top: 0;
}
&.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,0.9);
}
&.absolute {
position: absolute;
left: 0;
right: 0;
}
&.static {
position: static;
}
}
.thumb {
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 30rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
&.focus .thumb-img {
border-color: #000;
}
}
.thumb-img {
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
border: 1px solid transparent;
}
.good-list {
padding-left:15rem / $pxConvertRem;
}
.clothe-type {
position: absolute;
right: 6rem / $pxConvertRem;
bottom: 34rem / $pxConvertRem;
width: 20px;
height: 20px;
@include border-radius(50%);
&.bag {
@include retina-sprite ($clothes, bag, 80/20);
background-color: #fff;
background-size: 100%;
}
&.cloth {
@include retina-sprite ($clothes, cloth, 80/20);
background-color: #fff;
background-size: 100%;
}
&.dress {
@include retina-sprite ($clothes, dress, 80/20);
background-color: #fff;
background-size: 100%;
}
&.headset {
@include retina-sprite ($clothes, headset, 80/20);
background-color: #fff;
background-size: 100%;
}
&.lamp {
@include retina-sprite ($clothes, lamp, 80/20);
background-color: #fff;
background-size: 100%;
}
&.pants {
@include retina-sprite ($clothes, pants, 80/20);
background-color: #fff;
background-size: 100%;
}
&.shoe {
@include retina-sprite ($clothes, shoe, 80/20);
background-color: #fff;
background-size: 100%;
}
&.swim-suit {
@include retina-sprite ($clothes, swim-suit, 80/20);
background-color: #fff;
background-size: 100%;
}
&.under {
@include retina-sprite ($clothes, under, 80/20);
background-color: #fff;
background-size: 100%;
}
&.watch {
@include retina-sprite ($clothes, watch, 80/20);
background-color: #fff;
background-size: 100%;
}
}
}
.related-reco-block {
background: #fff;
padding-left: 15rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
h2 {
margin-left: -15rem / $pxConvertRem;
line-height: 104rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.one-good {
padding-left: 15rem / $pxConvertRem;
padding-right: 30rem / $pxConvertRem;
margin-bottom: 20rem / $pxConvertRem;
.thumb {
float: left;
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
}
.content-container {
padding-left: 120rem / $pxConvertRem;
height: 134rem / $pxConvertRem;
line-height: 1;
font-size: 24rem / $pxConvertRem;
> p {
height: 50%;
line-height: 94rem / $pxConvertRem;
}
span {
display: inline-block;
line-height: 24rem / $pxConvertRem;
}
.price {
line-height: 47rem / $pxConvertRem;
}
}
.sale-price {
color: #d62927;
line-height: 1.5;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin-left: 5rem / $pxConvertRem;
color: #b0b0b0;
text-decoration: line-through;
line-height: 1.5;
}
.check-detail {
display: inline-block;
color: #000;
border: 1px solid;
border-radius: 2px;
float: right;
padding: 0 5px;
line-height: 1.5;
}
}
}
.related-brand {
margin-top: 30rem / $pxConvertRem;
h2 {
@include relatedTitle;
}
.brand-list {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
background: #fff;
}
.brand {
float: left;
width: 158rem / $pxConvertRem;
height: 128rem / $pxConvertRem;
border-right: 1px solid #e0e0e0;
margin-bottom: 10rem / $pxConvertRem;
a {
display: block;
}
&:nth-child(4n) {
border-right: none;
}
}
.brand-logo {
display: table-cell;
width: 158rem / $pxConvertRem;
height: 94rem / $pxConvertRem;
vertical-align: middle;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 94rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10rem / $pxConvertRem 0 0 0;
line-height: 24rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.related-tag {
position: relative;
padding-bottom: 30rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
background: #fff;
.tag-bg {
position: absolute;
height: 40rem / $pxConvertRem;
width: 40rem / $pxConvertRem;
background: image-url('guang/tag.png') no-repeat;
background-size: 100% 100%;
top: 35rem / $pxConvertRem;
left: 20rem / $pxConvertRem;
}
.tag-list {
margin-left: 50rem / $pxConvertRem;
}
li {
float: left;
margin-top: 31rem / $pxConvertRem;
margin-left: 31rem / $pxConvertRem;
}
a {
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #000;
text-decoration: underline;
white-space: nowrap;
}
}
.related-info {
margin-top: 30rem / $pxConvertRem;
h2 {
@include relatedTitle;
}
.info-list {
background: #fff;
padding-bottom: 30rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
}
li {
padding-top: 30rem / $pxConvertRem;
margin-bottom: 10rem / $pxConvertRem;
a {
display: block;
}
img {
float: left;
margin-left: 30rem / $pxConvertRem;
width: 182rem / $pxConvertRem;
height: 114rem / $pxConvertRem;
&.square {
height: 182rem / $pxConvertRem;
}
}
}
.title, .publish-time {
float: left;
width: 360rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
line-height: 40rem / $pxConvertRem;
color: #444;
font-size: 28rem / $pxConvertRem;
}
.publish-time {
font-size: 18rem / $pxConvertRem;
margin-top: 0;
color: #b0b0b0;
.iconfont {
font-size: 18rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
... ...
@import "tvls", "info", "plus-star", "info-list";
\ No newline at end of file
@import "tvls", "info", "plus-star", "info-list", "detail";
\ No newline at end of file
... ...
{{>layout/header}}
<div class="guang-detail-page guang-page yoho-page">
{{# guang}}
<div id="wrapper">
<div id="scroller">
{{# author}}
<div class="author" data-id={{id}}>
<a class="clearfix" href={{url}}>
<img class="avatar" src={{avatar}}>
<span class="name">{{name}}</span>
<span class="intro">{{intro}}</span>
</a>
</div>
{{/ author}}
{{# detail}}
<div class="detail">
<div class="post-title">
<p class="title">{{title}}</p>
{{> guang/tvls}}
</div>
<div class="post-content">
{{# content}}
{{#if text}}
<div class="post-block text-block">
{{text}}
</div>
{{/if}}
{{#if bigImage}}
<div class="post-block big-img-block">
<img class="lazy" data-original={{bigImage}}>
</div>
{{/if}}
{{#if smallImage}}
<div class="post-block small-img-block clearfix">
{{# smallImage}}
<img class="lazy" data-original={{src}}>
{{/ smallImage}}
</div>
{{/if}}
{{#if collocation}}
<div class="post-block collocation-block">
<ul class="thumb-container">
{{#each collocation}}
<li class="thumb {{#if @first}}focus{{/if}}">
<img class="thumb-img lazy" data-original={{thumb}}>
<span class="clothe-type {{type}}"></span>
</li>
{{/each}}
</ul>
<div class="good-list clearfix">
{{#each collocation}}
<div class="prod {{#unless @first}}hide{{/unless}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/each}}
</div>
</div>
{{/if}}
{{#if relatedReco}}
<div class="post-block related-reco-block clearfix">
<h2>相关推荐</h2>
{{#if relatedReco.onlyOne}}
{{#with relatedReco}}
<div class="one-good">
<img class="thumb lazy" data-original={{thumb}}>
<div class="content-container">
<p>
<span class="reco-name">{{name}}</span>
</p>
<p class="price">
<span class="sale-price {{^price}}no-price{{/price}}">￥{{salePrice}}</span>
{{#price}}
<span class="market-price">￥{{.}}</span>
{{/price}}
<a class="check-detail" href={{url}}>
查看详情
</a>
</p>
</div>
</div>
{{/with}}
{{^}}
<div class="good-list clearfix">
{{# relatedReco}}
{{> good}}
{{/ relatedReco}}
</div>
{{/if}}
</div>
{{/if}}
{{/ content}}
</div>
</div>
{{/ detail}}
{{#if relatedBrand}}
<div class="related-brand">
<h2>相关品牌</h2>
<ul class="brand-list clearfix">
{{# relatedBrand}}
<li class="brand">
<a href={{url}}>
<div class="brand-logo">
<img class="lazy" data-original={{thumb}}>
</div>
<p class="brand-name">{{name}}</p>
</a>
</li>
{{/ relatedBrand}}
</ul>
</div>
{{/if}}
{{#if relatedTag}}
<div class="related-tag">
<div class="tag-bg"></div>
<ul class="tag-list clearfix">
{{# relatedTag}}
<li>
<a href={{url}}>{{name}}</a>
</li>
{{/ relatedTag}}
</ul>
</div>
{{/if}}
{{#if relatedInfo}}
<div class="related-info">
<h2>相关文章</h2>
<ul class="info-list">
{{# relatedInfo}}
<li>
<a href={{url}}>
<img class="lazy {{#if squareThumb}}square{{/if}}" data-original={{thumb}}>
<span class="title">{{title}}</span>
<span class="publish-time">
<i class="iconfont">&#xe603;</i>
{{publishTime}}
</span>
</a>
</li>
{{/ relatedInfo}}
</ul>
</div>
{{/if}}
</div>
</div>
{{/ guang}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
class DetailController extends AbstractAction
{
public function indexAction()
{
$data = array(
'id' => 1,
'author' => array(
'avatar' => 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
'name' => '山本耀司',
'intro' => '日本设计界一代宗师,分享一些个人区委分享内容不求有用但求有趣区委分享内容不求有用但求有趣区委分享内容不求有用但求有趣区委分享内容不求有用但求有趣',
'url' => ''
),
'detail' => array(
'title' => 'Skin Art Series INN 2015新品',
'publishTime' => '2月13日 12:34',
'pageView' => 3445,
'content' => array(
array(
'text' => '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka也动作频频'
),
array(
'bigImage' => 'http://img10.static.yhbimg.com/yhb-img01/2015/06/11/15/017b3fa0478e26a3ded2ac75d341fe3ab6.jpg?imageView/2/w/640/h/640'
),
array(
'relatedReco' => array(
'onlyOne' => true,
'id' => 1,
'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'GAWS DIGI 丛林数码印花拼接卫衣看看两行文字以上能不能切字啦，样式应该不会乱的吧',
'isLike' => false,
'price' => 1268,
'salePrice' => 589,
'url' => ''
)
),
array(
'collocation' => array(
array(
'thumb' => 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
'type' => 'pants',
'goods' => array(
'id' => 1,
'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'GAWS DIGI 丛林数码印花拼接卫衣',
'price' => 1268,
'salePrice' => 589,
'tags' => array(
array(
'isNew' => true
)
),
'isFew' => true,
'url' => ''
)
)
)
)
)
),
'relatedBrand' => array(
array(
'thumb' => 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
'name' => 'HALFGIRL测试名字长的情况',
'url' => ''
),
array(
'thumb' => 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
'name' => '黄伟文Wyman',
'url' => ''
),
array(
'thumb' => 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
'name' => 'HIPANDA',
'url' => ''
)
),
'relatedTag' => array(
array(
'name' => '棒球服',
'url' => ''
)
),
'relatedInfo' => array(
array(
'thumb' => 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
'title' => '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
'url' => '',
'publishTime' => '2月13日 12:34'
)
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('index', array('modulePath' => 'guang/detail', 'guang' => $data));
}
}
\ No newline at end of file
... ...