fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit 0bdd1bf5056162819a3e90a378b6217b92e14291 1 parent afc365f1

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

Inline Side-by-side
Showing 10 changed files with 415 additions and 15 deletions
@@ -549,7 +549,7 @@ module.exports = function(flag) { @@ -549,7 +549,7 @@ module.exports = function(flag) {
549 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”', 549 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
550 publishTime: '2月13日 12:34', 550 publishTime: '2月13日 12:34',
551 pageView: 3445, 551 pageView: 3445,
552 - like: true, 552 + like: 80,
553 share: false //不显示share标签 553 share: false //不显示share标签
554 } 554 }
555 }, 555 },
@@ -566,10 +566,91 @@ module.exports = function(flag) { @@ -566,10 +566,91 @@ module.exports = function(flag) {
566 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”', 566 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
567 publishTime: '2月13日 12:34', 567 publishTime: '2月13日 12:34',
568 pageView: 3445, 568 pageView: 3445,
569 - like: true, 569 + like: 80,
570 share: false 570 share: false
571 } 571 }
572 } 572 }
573 ]; 573 ];
  574 + //plus+star页模拟数据
  575 + case 'ps':
  576 + return {
  577 + banner: 'http://7xidk0.com1.z0.glb.clouddn.com/star-banner.png',
  578 + logo: 'http://7xidk0.com1.z0.glb.clouddn.com/star-brand.png',
  579 + name: 'SSUR',
  580 + isLike: false,
  581 + intro: '纽约地下街头品牌SSUR，由艺术家Russell所成立，近年来以恶搞、讽刺各大' +
  582 + '品牌而闻名，包括了CHANEL、ROLEX、Cartier等等。Ssur的创办人是艺术家' +
  583 + 'Russell, ssur就是其名字反过来写。',
  584 + newArrival: [
  585 + {
  586 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  587 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  588 + isLike: false,
  589 + price: 1268,
  590 + salePrice: 589,
  591 + isSale: true,
  592 + isFew: true,
  593 + isNew: false,
  594 + url: ''
  595 + },
  596 + {
  597 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  598 + name: 'CLOTtee 撞色连帽外套',
  599 + isLike: false,
  600 + price: 488,
  601 + salePrice: 139,
  602 + isSale: true,
  603 + isFew: true,
  604 + isNew: false,
  605 + url: ''
  606 + },
  607 + {
  608 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  609 + name: 'HALFGIRL 插肩棒球服短裙套装',
  610 + isLike: true,
  611 + price: 478,
  612 + salePrice: 208,
  613 + isSale: true,
  614 + isFew: true,
  615 + isNew: false,
  616 + url: ''
  617 + },
  618 + {
  619 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  620 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  621 + isLike: false,
  622 + price: 589,
  623 + salePrice: 148,
  624 + isSale: false,
  625 + isFew: false,
  626 + isNew: true,
  627 + url: ''
  628 + }
  629 + ],
  630 + info: [
  631 + {
  632 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  633 + title: '副线不知为何总是好看点',
  634 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  635 + 'In England中Panul Smith缔造了一个传奇',
  636 + publishTime: '2月13日 12:34',
  637 + pageView: 3445,
  638 + like: 23,
  639 + share: true,
  640 + url: ''
  641 + },
  642 + {
  643 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  644 + title: '副线不知为何总是好看点',
  645 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  646 + 'In England中Panul Smith缔造了一个传奇',
  647 + publishTime: '2月13日 12:34',
  648 + pageView: 3445,
  649 + like: 23,
  650 + share: true,
  651 + url: ''
  652 + }
  653 + ]
  654 + }
574 } 655 }
575 }; 656 };
  1 +seajs.use(['jquery/1.8.3/jquery-debug'], function($) {
  2 + $("#container").removeClass('hide');
  3 +});
@@ -5,13 +5,22 @@ @@ -5,13 +5,22 @@
5 5
6 .iconfont { 6 .iconfont {
7 vertical-align: 9%; 7 vertical-align: 9%;
8 - margin: 0 4px 0 0; 8 + margin: 0 4rem / $pxConvertRem 0 0;
9 font-size: 24rem / $pxConvertRem; 9 font-size: 24rem / $pxConvertRem;
10 } 10 }
11 11
12 - .like-btn, .share-btn { 12 + .like-share-container {
  13 + display: inline-block;
13 float: right; 14 float: right;
14 - color: #b0b0b0;  
15 - font-size: 34rem / $pxConvertRem; 15 + margin-top: -3rem / $pxConvertRem;
  16 +
  17 + .like-btn, .share-btn {
  18 + color: #b0b0b0;
  19 + font-size: 34rem / $pxConvertRem;
  20 + }
  21 +
  22 + .share-btn {
  23 + margin-left: 20rem / $pxConvertRem;
  24 + }
16 } 25 }
17 } 26 }
  1 +@import "compass", "compass/reset";
  2 +$pxConvertRem : 40;
  3 +
  4 +body {
  5 + font-family: helvetica,Arial,"黑体";
  6 + background: #f0f0f0;
  7 +}
  8 +
  9 +ol, ul {
  10 + list-style: none;
  11 +}
  12 +
  13 +.hide {
  14 + display: none;
  15 +}
  16 +
  17 +/**
  18 + * 闭合浮动
  19 + * @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
  20 + */
  21 +
  22 +.clearfix:before,
  23 +.clearfix:after {
  24 + content: "";
  25 + display: table;
  26 +}
  27 +
  28 +.clearfix:after {
  29 + clear: both;
  30 +}
  31 +
  32 +.clearfix {
  33 + *zoom: 1; /* IE6-7 触发 hasLayout */
  34 +}
  35 +
  36 +
  37 +/**
  38 + * 字体图标样式
  39 + */
  40 +@font-face {
  41 + font-family: "iconfont";
  42 + src: url('../fonts/iconfont.eot'); /* IE9*/
  43 + src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  44 + url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  45 + url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  46 + url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  47 +}
  48 +
  49 +.iconfont {
  50 + font-family: "iconfont" !important;
  51 + font-size: 16px;
  52 + font-style: normal;
  53 + -webkit-font-smoothing: antialiased;
  54 + -webkit-text-stroke-width: 0.2px;
  55 + -moz-osx-font-smoothing: grayscale;
  56 +}
  57 +.icon-sharedviewicon:before {
  58 + content: "\e60c";
  59 +}
  60 +.icon-sharedtimeicon:before {
  61 + content: "\e60d";
  62 +}
  63 +.icon-sharedlikebuttomhighlighted:before {
  64 + content: "\e60f";
  65 +}
  66 +.icon-sharedenterbuttomnormal:before {
  67 + content: "\e612";
  68 +}
  69 +/*以上为common部分 代码合并develop后移除*/
  70 +
  71 +@import "common/time-view-like-share", "common/good-info";
  72 +
  73 +.ps-container {
  74 + .ps-block {
  75 + margin-bottom: 30rem / $pxConvertRem;
  76 + border-bottom: 1px solid #e0e0e0;
  77 + border-top: 1px solid #e0e0e0;
  78 + background-color: #fff;
  79 +
  80 + &.header, &.infos {
  81 + border-top: none;
  82 + }
  83 +
  84 + &.infos {
  85 + margin-bottom: 0;
  86 + background-color: #f0f0f0;
  87 + }
  88 + }
  89 +
  90 + .header {
  91 + position: relative;
  92 +
  93 + .banner {
  94 + width: 100%;
  95 + height: 310rem / $pxConvertRem;
  96 + }
  97 +
  98 + .logo {
  99 + position: absolute;
  100 + height: 168rem / $pxConvertRem;
  101 + width: 168rem / $pxConvertRem;
  102 + top: 226rem / $pxConvertRem;
  103 + left: 50rem / $pxConvertRem;
  104 + }
  105 +
  106 + .header-content {
  107 + padding: 0 30rem / $pxConvertRem;
  108 + }
  109 +
  110 + .name-islike-container {
  111 + padding-left: 248rem / $pxConvertRem;
  112 + margin-top: 24rem / $pxConvertRem;
  113 + }
  114 +
  115 + .name {
  116 + font-size: 34rem / $pxConvertRem;
  117 + color: #000;
  118 + height: 41rem / $pxConvertRem;
  119 + width: 295rem / $pxConvertRem;
  120 + }
  121 +
  122 + .brand-islike {
  123 + float: right;
  124 + }
  125 +
  126 + .intro {
  127 + margin-top: 49rem / $pxConvertRem;
  128 + font-size: 24rem / $pxConvertRem;
  129 + color: #444;
  130 + line-height: 150%;
  131 + }
  132 +
  133 + .more-intro {
  134 + padding: 30rem / $pxConvertRem 0;
  135 + font-size: 28rem / $pxConvertRem;
  136 + line-height: 104%;
  137 + color: #bbb;
  138 + text-align: right;
  139 + }
  140 +
  141 + .more-intro-text {
  142 + margin-right: 15rem / $pxConvertRem;
  143 + }
  144 + }
  145 +
  146 + .new-arrival {
  147 + padding-left: 0 30rem / $pxConvertRem;
  148 +
  149 + .new-arrival-header {
  150 + padding-left: 222rem / $pxConvertRem;
  151 + padding-top: 33rem / $pxConvertRem;
  152 +
  153 + .header-text {
  154 + font-size: 28rem / $pxConvertRem;
  155 + color: #000;
  156 + line-height: 122%;
  157 + font-weight: bold;
  158 + }
  159 + }
  160 +
  161 + .new-arrival-content {
  162 + padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
  163 + }
  164 +
  165 + .more-goods-container {
  166 + height: 90rem / $pxConvertRem;
  167 + padding: 0 30rem / $pxConvertRem;
  168 + border-top: 1px solid #e0e0e0;
  169 + color: #000;
  170 + }
  171 +
  172 + .mg-text {
  173 + height: 100%;
  174 + line-height: 90rem / $pxConvertRem;
  175 + }
  176 + }
  177 +
  178 +
  179 + .info-title {
  180 + margin: 0 29rem / $pxConvertRem;
  181 + border: 1px solid #e0e0e0;
  182 + border-bottom: none;
  183 + line-height: 72rem / $pxConvertRem;
  184 + font-size: 30rem / $pxConvertRem;
  185 + color: #b0b0b0;
  186 + text-align: center;
  187 + background-color: #fff;
  188 + }
  189 +
  190 + .info-block {
  191 + width: 100%;
  192 + border-bottom: 1px solid #e0e0e0;
  193 + margin-bottom: 30rem / $pxConvertRem;
  194 + background-color: #fff;
  195 + padding-bottom: 30rem / $pxConvertRem;
  196 +
  197 + &:last-child {
  198 + margin-bottom: 0;
  199 + }
  200 +
  201 + .info-block-img {
  202 + width: 100%;
  203 + height: 400rem / $pxConvertRem;
  204 + }
  205 +
  206 + .info-eximg-container {
  207 + padding: 0 30rem / $pxConvertRem;
  208 + margin-top: 32rem / $pxConvertRem;
  209 +
  210 + .info-block-title {
  211 + line-height: 44rem / $pxConvertRem;
  212 + color: #000;
  213 + font-size: 40rem / $pxConvertRem;
  214 + font-weight:bold;
  215 + }
  216 +
  217 + .info-block-content {
  218 + margin: 16rem / $pxConvertRem 0 0 0;
  219 + line-height: 46rem / $pxConvertRem;
  220 + font-size: 28rem / $pxConvertRem;
  221 + color: #444;
  222 + }
  223 +
  224 + .time-view-like-share {
  225 + margin-top: 16rem / $pxConvertRem;
  226 + }
  227 + }
  228 + }
  229 +
  230 +}
@@ -4,11 +4,14 @@ @@ -4,11 +4,14 @@
4 * @date: 2015/3/27 4 * @date: 2015/3/27
5 */ 5 */
6 var saunter = require('./views/controller/saunter'), 6 var saunter = require('./views/controller/saunter'),
7 - tag = require('./views/controller/tag'); 7 + tag = require('./views/controller/tag'),
  8 + ps = require('./views/controller/ps');
8 9
9 module.exports = function(app) { 10 module.exports = function(app) {
10 app.get('/', saunter.show); //着陆页 11 app.get('/', saunter.show); //着陆页
11 app.get('/optimize', saunter.optimize); //优化着陆页 12 app.get('/optimize', saunter.optimize); //优化着陆页
12 13
13 app.get('/tag', tag.show); //标签页 14 app.get('/tag', tag.show); //标签页
  15 +
  16 + app.get('/ps', ps.show); //plus + star
14 }; 17 };
  1 +/**
  2 + * plus/star页控制器文件
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/4/15
  5 + */
  6 +var data = require('../../public/js/data')('ps');
  7 +
  8 +exports.show = function(req, res) {
  9 + res.render('pages/ps', {
  10 + data: data,
  11 + layout: '../layouts/layout',
  12 + css: '../css/ps.css',
  13 + usejs: 'ps/footer'
  14 + });
  15 +};
  1 +<div class="ps-container">
  2 + {{# data}}
  3 + <div class="header ps-block">
  4 + <img class="banner" src="{{banner}}">
  5 + <img class="logo" src="{{logo}}">
  6 + <div class="header-content">
  7 + <p class="name-islike-container">
  8 + <span class="name">{{name}}</span>
  9 + <a class="brand-islike {{# isLike}}like{{/ isLike}}" href="javascript:void(0)">
  10 + &#xe605;
  11 + </a>
  12 + </p>
  13 + <p class="intro">
  14 + {{intro}}
  15 + </p>
  16 + <div class="more-intro">
  17 + <span class="more-intro-text">more</span>
  18 + <span class="more-intro-icon"></span>
  19 + </div>
  20 + </div>
  21 + </div>
  22 + <div class="new-arrival ps-block">
  23 + <div class="new-arrival-header">
  24 + <span class="header-text">NEW ARRIVAL</span>
  25 + </div>
  26 + <div class="new-arrival-content clearfix">
  27 + {{# newArrival}}
  28 + {{> common/good_info}}
  29 + {{/ newArrival}}
  30 + </div>
  31 + <div class="more-goods-container">
  32 + <p class="mg-text">更多商品</p>
  33 + </div>
  34 + </div>
  35 + <div class="infos ps-block">
  36 + <div class="info-title-container">
  37 + <h2 class="info-title">相关文章</div>
  38 + </div>
  39 + <div class="info-content">
  40 + {{# info}}
  41 + {{> ps/info_item}}
  42 + {{/ info}}
  43 + </div>
  44 + </div>
  45 + {{/ data}}
  46 +</div>
1 -<p class="time-view-like-share clearfix"> 1 +<div class="time-view-like-share clearfix">
2 <i class="iconfont">&#xe603;</i> 2 <i class="iconfont">&#xe603;</i>
3 {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp; 3 {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
4 <i class="iconfont">&#xe602;</i> 4 <i class="iconfont">&#xe602;</i>
5 {{pageView}} 5 {{pageView}}
6 - {{# like}}  
7 - <a href="javascript:;" class="iconfont like-btn">&#xe601;</a>  
8 - {{/ like}}  
9 - {{# share}}  
10 - <a href="javascript:;" class="iconfont share-btn">&#xe600;</a>  
11 - {{/ share}}  
12 -</p>  
  6 + <div class="like-share-container">
  7 + {{# like}}
  8 + <a href="javascript:;" class="iconfont like-btn">&#xe601;</a>
  9 + {{.}}
  10 + {{/ like}}
  11 + {{# share}}
  12 + <a href="javascript:;" class="iconfont share-btn">&#xe600;</a>
  13 + {{/ share}}
  14 + </div>
  15 +</div>
  1 +<div class="info-block">
  2 + <a href="{{src}}">
  3 + <img class="info-block-img" src="{{img}}">
  4 + </a>
  5 + <div class="info-eximg-container">
  6 + <h2 class="info-block-title">{{title}}</h2>
  7 + <p class="info-block-content">{{content}}</p>
  8 + {{> common/time_view_like_share}}
  9 + </div>
  10 +</div>