Authored by xuqi

plus + star 页面框架和数据结构

... ... @@ -549,7 +549,7 @@ module.exports = function(flag) {
'为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
publishTime: '2月13日 12:34',
pageView: 3445,
like: true,
like: 80,
share: false //不显示share标签
}
},
... ... @@ -566,10 +566,91 @@ module.exports = function(flag) {
'为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
publishTime: '2月13日 12:34',
pageView: 3445,
like: true,
like: 80,
share: false
}
}
];
//plus+star页模拟数据
case 'ps':
return {
banner: 'http://7xidk0.com1.z0.glb.clouddn.com/star-banner.png',
logo: 'http://7xidk0.com1.z0.glb.clouddn.com/star-brand.png',
name: 'SSUR',
isLike: false,
intro: '纽约地下街头品牌SSUR,由艺术家Russell所成立,近年来以恶搞、讽刺各大' +
'品牌而闻名,包括了CHANEL、ROLEX、Cartier等等。Ssur的创办人是艺术家' +
'Russell, ssur就是其名字反过来写。',
newArrival: [
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
isLike: false,
price: 1268,
salePrice: 589,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
],
info: [
{
img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
title: '副线不知为何总是好看点',
content: '具有绅士气质的英伦风格是永走前沿的经典,在众多的Made ' +
'In England中Panul Smith缔造了一个传奇',
publishTime: '2月13日 12:34',
pageView: 3445,
like: 23,
share: true,
url: ''
},
{
img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
title: '副线不知为何总是好看点',
content: '具有绅士气质的英伦风格是永走前沿的经典,在众多的Made ' +
'In England中Panul Smith缔造了一个传奇',
publishTime: '2月13日 12:34',
pageView: 3445,
like: 23,
share: true,
url: ''
}
]
}
}
};
\ No newline at end of file
... ...
seajs.use(['jquery/1.8.3/jquery-debug'], function($) {
$("#container").removeClass('hide');
});
\ No newline at end of file
... ...
... ... @@ -5,13 +5,22 @@
.iconfont {
vertical-align: 9%;
margin: 0 4px 0 0;
margin: 0 4rem / $pxConvertRem 0 0;
font-size: 24rem / $pxConvertRem;
}
.like-btn, .share-btn {
.like-share-container {
display: inline-block;
float: right;
margin-top: -3rem / $pxConvertRem;
.like-btn, .share-btn {
color: #b0b0b0;
font-size: 34rem / $pxConvertRem;
}
.share-btn {
margin-left: 20rem / $pxConvertRem;
}
}
}
\ No newline at end of file
... ...
@import "compass", "compass/reset";
$pxConvertRem : 40;
body {
font-family: helvetica,Arial,"黑体";
background: #f0f0f0;
}
ol, ul {
list-style: none;
}
.hide {
display: none;
}
/**
* 闭合浮动
* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6-7 触发 hasLayout */
}
/**
* 字体图标样式
*/
@font-face {
font-family: "iconfont";
src: url('../fonts/iconfont.eot'); /* IE9*/
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff') format('woff'), /* chromefirefox */
url('../fonts/iconfont.ttf') format('truetype'), /* chromefirefoxoperaSafari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-sharedviewicon:before {
content: "\e60c";
}
.icon-sharedtimeicon:before {
content: "\e60d";
}
.icon-sharedlikebuttomhighlighted:before {
content: "\e60f";
}
.icon-sharedenterbuttomnormal:before {
content: "\e612";
}
/*以上为common部分 代码合并develop后移除*/
@import "common/time-view-like-share", "common/good-info";
.ps-container {
.ps-block {
margin-bottom: 30rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
background-color: #fff;
&.header, &.infos {
border-top: none;
}
&.infos {
margin-bottom: 0;
background-color: #f0f0f0;
}
}
.header {
position: relative;
.banner {
width: 100%;
height: 310rem / $pxConvertRem;
}
.logo {
position: absolute;
height: 168rem / $pxConvertRem;
width: 168rem / $pxConvertRem;
top: 226rem / $pxConvertRem;
left: 50rem / $pxConvertRem;
}
.header-content {
padding: 0 30rem / $pxConvertRem;
}
.name-islike-container {
padding-left: 248rem / $pxConvertRem;
margin-top: 24rem / $pxConvertRem;
}
.name {
font-size: 34rem / $pxConvertRem;
color: #000;
height: 41rem / $pxConvertRem;
width: 295rem / $pxConvertRem;
}
.brand-islike {
float: right;
}
.intro {
margin-top: 49rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
color: #444;
line-height: 150%;
}
.more-intro {
padding: 30rem / $pxConvertRem 0;
font-size: 28rem / $pxConvertRem;
line-height: 104%;
color: #bbb;
text-align: right;
}
.more-intro-text {
margin-right: 15rem / $pxConvertRem;
}
}
.new-arrival {
padding-left: 0 30rem / $pxConvertRem;
.new-arrival-header {
padding-left: 222rem / $pxConvertRem;
padding-top: 33rem / $pxConvertRem;
.header-text {
font-size: 28rem / $pxConvertRem;
color: #000;
line-height: 122%;
font-weight: bold;
}
}
.new-arrival-content {
padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
}
.more-goods-container {
height: 90rem / $pxConvertRem;
padding: 0 30rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
color: #000;
}
.mg-text {
height: 100%;
line-height: 90rem / $pxConvertRem;
}
}
.info-title {
margin: 0 29rem / $pxConvertRem;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
background-color: #fff;
}
.info-block {
width: 100%;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 30rem / $pxConvertRem;
background-color: #fff;
padding-bottom: 30rem / $pxConvertRem;
&:last-child {
margin-bottom: 0;
}
.info-block-img {
width: 100%;
height: 400rem / $pxConvertRem;
}
.info-eximg-container {
padding: 0 30rem / $pxConvertRem;
margin-top: 32rem / $pxConvertRem;
.info-block-title {
line-height: 44rem / $pxConvertRem;
color: #000;
font-size: 40rem / $pxConvertRem;
font-weight:bold;
}
.info-block-content {
margin: 16rem / $pxConvertRem 0 0 0;
line-height: 46rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
color: #444;
}
.time-view-like-share {
margin-top: 16rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -4,11 +4,14 @@
* @date: 2015/3/27
*/
var saunter = require('./views/controller/saunter'),
tag = require('./views/controller/tag');
tag = require('./views/controller/tag'),
ps = require('./views/controller/ps');
module.exports = function(app) {
app.get('/', saunter.show); //着陆页
app.get('/optimize', saunter.optimize); //优化着陆页
app.get('/tag', tag.show); //标签页
app.get('/ps', ps.show); //plus + star
};
\ No newline at end of file
... ...
/**
* plus/star页控制器文件
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/4/15
*/
var data = require('../../public/js/data')('ps');
exports.show = function(req, res) {
res.render('pages/ps', {
data: data,
layout: '../layouts/layout',
css: '../css/ps.css',
usejs: 'ps/footer'
});
};
\ No newline at end of file
... ...
<div class="ps-container">
{{# data}}
<div class="header ps-block">
<img class="banner" src="{{banner}}">
<img class="logo" src="{{logo}}">
<div class="header-content">
<p class="name-islike-container">
<span class="name">{{name}}</span>
<a class="brand-islike {{# isLike}}like{{/ isLike}}" href="javascript:void(0)">
&#xe605;
</a>
</p>
<p class="intro">
{{intro}}
</p>
<div class="more-intro">
<span class="more-intro-text">more</span>
<span class="more-intro-icon"></span>
</div>
</div>
</div>
<div class="new-arrival ps-block">
<div class="new-arrival-header">
<span class="header-text">NEW ARRIVAL</span>
</div>
<div class="new-arrival-content clearfix">
{{# newArrival}}
{{> common/good_info}}
{{/ newArrival}}
</div>
<div class="more-goods-container">
<p class="mg-text">更多商品</p>
</div>
</div>
<div class="infos ps-block">
<div class="info-title-container">
<h2 class="info-title">相关文章</div>
</div>
<div class="info-content">
{{# info}}
{{> ps/info_item}}
{{/ info}}
</div>
</div>
{{/ data}}
</div>
\ No newline at end of file
... ...
<p class="time-view-like-share clearfix">
<div class="time-view-like-share clearfix">
<i class="iconfont">&#xe603;</i>
{{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
<i class="iconfont">&#xe602;</i>
{{pageView}}
<div class="like-share-container">
{{# like}}
<a href="javascript:;" class="iconfont like-btn">&#xe601;</a>
{{.}}
{{/ like}}
{{# share}}
<a href="javascript:;" class="iconfont share-btn">&#xe600;</a>
{{/ share}}
</p>
\ No newline at end of file
</div>
</div>
\ No newline at end of file
... ...
<div class="info-block">
<a href="{{src}}">
<img class="info-block-img" src="{{img}}">
</a>
<div class="info-eximg-container">
<h2 class="info-block-title">{{title}}</h2>
<p class="info-block-content">{{content}}</p>
{{> common/time_view_like_share}}
</div>
</div>
\ No newline at end of file
... ...