fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit 30d381f44ef0ab905f6b6b50d5e1aba644bbf644 1 parent 019e740b

潮流优先首页

Inline Side-by-side
Showing 5 changed files with 263 additions and 3 deletions
@@ -14,8 +14,7 @@ const plusstarModel = require(`${mRoot}/plusstar`); @@ -14,8 +14,7 @@ const plusstarModel = require(`${mRoot}/plusstar`);
14 */ 14 */
15 let index = (req, res) => { 15 let index = (req, res) => {
16 res.render('plusstar/index', { 16 res.render('plusstar/index', {
17 - module: 'plusstar',  
18 - page: 'index', 17 + page: 'plusstar-index',
19 title: '潮流优选' 18 title: '潮流优选'
20 }); 19 });
21 }; 20 };
1 -4444444444444t666  
  1 +<div class='plusstar-page'>
  2 +
  3 + <div class="channel-tab">
  4 + <div class="channel">
  5 + <span class="name">男生</span>
  6 + </div>
  7 + <div class="channel">
  8 + <span class="name">女生</span>
  9 + </div>
  10 + <div class="channel">
  11 + <span class="name">生活</span>
  12 + </div>
  13 + </div>
  14 + <!--/ channel-tab-->
  15 +
  16 + <div class="resources">
  17 +
  18 + <div class="header-title">
  19 + 新品抢先看
  20 + <a class="more" href="/new">···</a>
  21 + </div>
  22 + <div class="title-image">
  23 + <a class="image" href="http://m.yohoblk.com//brands">
  24 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/15/019a301e1c1c2cb233d71e8853275bb4b0.png?imageView2/2/w/750/h/364">
  25 + </a>
  26 + </div>
  27 +
  28 +
  29 + <div class="header-title">
  30 + 经典品牌
  31 + <a class="more" href="http://m.yohoblk.com/brand">···</a>
  32 + </div>
  33 + <div class="title-image">
  34 + <a class="image" href="jdpp.yoho">
  35 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/15/01e84b9b4946444cc8287437f82e9fe08e.png?imageView2/2/w/750/h/364">
  36 + </a>
  37 + </div>
  38 +
  39 + <div class="focus-left-right">
  40 + <a href="list.pp" title="">
  41 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/15/0184e6dc50a9b58e271da4997de7b3cbbc.png?imageView2/2/w/250/h/250">
  42 + </a>
  43 + <a href="pp2" title="">
  44 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/15/01c5da274eeddb5b00b95b7479af3436cc.png?imageView2/2/w/250/h/250">
  45 + </a>
  46 + <a href="pp3" title="">
  47 + <img lazy="loaded" src="http://img11.static.yhbimg.com/yhb-img01/2016/07/18/15/0168483eb410b255504a27ff198991e54b.png?imageView2/2/w/250/h/250">
  48 + </a>
  49 + </div>
  50 + <!--/focus-left-right-->
  51 +
  52 +
  53 + <div class="header-title">
  54 + 热门品类
  55 + <a class="more" href="http://m.yohoblk.com/brand">···</a>
  56 + </div>
  57 + <div class="recommend-content-five">
  58 + <a href="http://m.yohoblk.com/product/shop?domain=sctest1" title="">
  59 + <img lazy="loaded" src="http://img11.static.yhbimg.com/yhb-img01/2016/07/18/16/011bb0c89f2d3b167f03bd51f7df150d1f.png?imageView2/2/w/375/h/375">
  60 + </a>
  61 + <a href="http://m.yohoblk.com/product/new" title="">
  62 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/16/01a21d6a9cf727b5d29219be984427b4a3.png?imageView2/2/w/375/h/375">
  63 + </a><a href="http://m.yohoblk.com/product/new" title="">
  64 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/16/01a21d6a9cf727b5d29219be984427b4a3.png?imageView2/2/w/375/h/375">
  65 + </a><a href="http://m.yohoblk.com/product/new" title="">
  66 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/16/01a21d6a9cf727b5d29219be984427b4a3.png?imageView2/2/w/375/h/375">
  67 + </a><a href="http://m.yohoblk.com/product/new" title="">
  68 + <img lazy="loaded" src="http://img10.static.yhbimg.com/yhb-img01/2016/07/18/16/01a21d6a9cf727b5d29219be984427b4a3.png?imageView2/2/w/375/h/375">
  69 + </a>
  70 + </div>
  71 +
  72 + <div class="header-title">
  73 + 热门商品
  74 + <a class="more" href="http://m.yohoblk.com/list">···</a>
  75 + </div>
  76 + <div class="goods">
  77 + <!--商品--->
  78 + </div>
  79 +
  80 + </div><!--/resources-->
  81 +
  82 +</div><!--/plusstar-page-->
1 @import "star/index"; 1 @import "star/index";
  2 +@import "plusstar/index";
  1 +.plusstar-page {
  2 + position: relative;
  3 + margin-right: auto;
  4 + margin-left: auto;
  5 + width: 100%;
  6 + max-width: 750px;
  7 +
  8 + .channel-tab {
  9 + position: fixed;
  10 + top: 0;
  11 + left: 0;
  12 + z-index: 1;
  13 + width: 100%;
  14 + height: 90px;
  15 + font-size: 24px;
  16 + text-align: center;
  17 + background: #fff;
  18 +
  19 + .channel {
  20 + display: inline-block;
  21 + line-height: 90px;
  22 + width: 33%;
  23 + color: #999;
  24 +
  25 + &.focus {
  26 + color: #000;
  27 + }
  28 + }
  29 +
  30 + .name {
  31 + padding: 9px 0;
  32 +
  33 + &.focus {
  34 + border-bottom: 4px solid #000;
  35 + }
  36 + }
  37 +
  38 + .focus {
  39 + .name {
  40 + border-bottom: 4px solid #000;
  41 + }
  42 + }
  43 + }
  44 +
  45 + .resources {
  46 + background: #f6f6f6;
  47 +
  48 + .title-image {
  49 + a {
  50 + display: block;
  51 + }
  52 +
  53 + .image {
  54 + width: 100%;
  55 + height: 364px;
  56 + }
  57 +
  58 + img {
  59 + width: 100%;
  60 + height: 100%;
  61 + }
  62 + }
  63 +
  64 + .header-title {
  65 + position: relative;
  66 + width: 100%;
  67 + height: 100px;
  68 + font-size: 32px;
  69 + line-height: 100px;
  70 + text-align: center;
  71 + font-weight: bold;
  72 + border-top: 1px solid #eee;
  73 + margin: 0;
  74 + margin-top: 20px;
  75 + background: #fff;
  76 +
  77 + .more {
  78 + position: absolute;
  79 + top: 0;
  80 + right: 0;
  81 + width: 100px;
  82 + height: 100px;
  83 + }
  84 + }
  85 +
  86 + .focus {
  87 +
  88 + .swipe {
  89 + height: 100%;
  90 + }
  91 +
  92 + .swipe-1 {
  93 +
  94 + .swipe-indicators {
  95 + display: none;
  96 + }
  97 +
  98 + }
  99 +
  100 + .swipe-item {
  101 +
  102 + a {
  103 + display: block;
  104 + }
  105 +
  106 + img {
  107 + width: 100%;
  108 + height: 100%;
  109 + }
  110 +
  111 + }
  112 +
  113 + .swipe-indicators {
  114 + left: initial;
  115 + right: 20px;
  116 + }
  117 +
  118 + .swipe-indicator {
  119 + width: 8px;
  120 + height: 8px;
  121 + background: #ccc;
  122 + opacity: 1;
  123 + vertical-align: middle;
  124 +
  125 + &.active {
  126 + width: 12px;
  127 + height: 12px;
  128 + background: #fff;
  129 + }
  130 + }
  131 + }
  132 +
  133 + .focus-left-right {
  134 + padding: 30px 15px;
  135 + width: 100%;
  136 + overflow-x: auto;
  137 + white-space: nowrap;
  138 + font-size: 0;
  139 + background: #fff;
  140 + border-bottom: 1px solid #eee;
  141 + -webkit-overflow-scrolling: touch;
  142 +
  143 + /* stylelint-disable */
  144 + &::-webkit-scrollbar {
  145 + display:none;
  146 + }
  147 + /* stylelint-enable */
  148 +
  149 + a {
  150 + display: inline-block;
  151 + margin: 0 15px;
  152 + width: 250px;
  153 + height: 250px;
  154 + }
  155 +
  156 + img {
  157 + width: 100%;
  158 + height: 100%;
  159 + }
  160 + }
  161 +
  162 + .recommend-content-five {
  163 + width: 100%;
  164 + font-size: 0;
  165 +
  166 + a {
  167 + display: inline-block;
  168 + width: 50%;
  169 + height: 375px;
  170 + }
  171 +
  172 + img {
  173 + width: 100%;
  174 + height: 100%;
  175 + }
  176 + }
  177 + }
  178 +}