fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit 7f2d9070a5e6ee9d7356cfd8cefd4e051385c5a8 1 parent ee04ae1c

个人中心改版

Inline Side-by-side
Showing 10 changed files with 458 additions and 0 deletions
  1 +'use strict';
  2 +
  3 +const headerModel = require('../../../doraemon/models/header'); // 头部model
  4 +
  5 +exports.index = (req, res) => {
  6 + let responseData = {
  7 + module: 'home',
  8 + page: 'new-home',
  9 + pageHeader: headerModel.setNav({
  10 + navTitle: '个人中心'
  11 + }),
  12 + title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停',
  13 + width750: true,
  14 + localCss: true,
  15 + pageFooter: true
  16 + };
  17 +
  18 + res.render('new-home', Object.assign(responseData, ''));
  19 +};
@@ -32,6 +32,8 @@ const refund = require(`${cRoot}/refund`); @@ -32,6 +32,8 @@ const refund = require(`${cRoot}/refund`);
32 const exchange = require(`${cRoot}/exchange`); 32 const exchange = require(`${cRoot}/exchange`);
33 const tideCommand = require(`${cRoot}/tide-command`); 33 const tideCommand = require(`${cRoot}/tide-command`);
34 34
  35 +const newHome = require(`${cRoot}/new-home`);
  36 +
35 // const myDetail = require(`${cRoot}/myDetail); 37 // const myDetail = require(`${cRoot}/myDetail);
36 38
37 39
@@ -175,4 +177,6 @@ router.post('/return/exchange/submit', auth, exchange.submit); // AJAX 提交换 @@ -175,4 +177,6 @@ router.post('/return/exchange/submit', auth, exchange.submit); // AJAX 提交换
175 router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJAX 取消换货申请 177 router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJAX 取消换货申请
176 178
177 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令 179 router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
  180 +
  181 +router.get('/new-home', auth, newHome.index); // 设置潮流口令
178 module.exports = router; 182 module.exports = router;
  1 +<div class="new-home-c yoho-page">
  2 + <div class="header">
  3 + <div class="left">
  4 + <div class="user-avator" style="background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917326278,3402237627&fm=27&gp=0.jpg)"></div>
  5 + <div class="level level-1"></div>
  6 + </div>
  7 + <div class="right">
  8 + <div class="name eps">李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖</div>
  9 + <div class="trend-code">
  10 + <div class="dot">#&nbsp;</div>
  11 + <div class="scroll-c go-scroll">
  12 + <div class="scroll-words">酷酷酷</div>
  13 + </div>
  14 + <div class="dot">&nbsp;#</div>
  15 + <div class="iconfont edit">&#xe61e;</div>
  16 + </div>
  17 + </div>
  18 + <a class="iconfont qrcode">&#xe64d;</a>
  19 + <div class="gif-part"></div>
  20 + </div>
  21 + <div class="list s-list">
  22 + <div class="list-item">
  23 + <div class="body">
  24 + <div class="main eps">默认购物频道</div>
  25 + <div class="value">男士MEN</div>
  26 + <div class="arr iconfont">&#xe604;</div>
  27 + </div>
  28 + </div>
  29 + </div>
  30 + <div class="list s-list">
  31 + <div class="list-item">
  32 + <div class="body">
  33 + <div class="main eps">我的订单</div>
  34 + <div class="value">全部订单</div>
  35 + <div class="arr iconfont">&#xe604;</div>
  36 + </div>
  37 + </div>
  38 + </div>
  39 + <div class="service">
  40 + <div class="service-item">
  41 + <div class="iconfont pic">&#xe634;</div>
  42 + <p class="name">商品收藏</p>
  43 + </div>
  44 + <div class="service-item">
  45 + <div class="iconfont pic">&#xe61b;</div>
  46 + <p class="name">商品收藏</p>
  47 + </div>
  48 + <div class="service-item">
  49 + <div class="iconfont pic">&#xe61b;</div>
  50 + <p class="name">商品收藏</p>
  51 + </div>
  52 + <div class="service-item">
  53 + <p class="num">265</p>
  54 + <p class="name">商品收藏</p>
  55 + </div>
  56 + <div class="service-item">
  57 + <p class="num">265</p>
  58 + <p class="name">商品收藏</p>
  59 + </div>
  60 + <div class="service-item">
  61 + <p class="num">265</p>
  62 + <p class="name">商品收藏</p>
  63 + </div>
  64 + </div>
  65 + <div class="list">
  66 + <div class="list-item">
  67 + <div class="pic iconfont">&#xe63a;</div>
  68 + <div class="body">
  69 + <div class="main eps">优惠券</div>
  70 + <div class="value">5张</div>
  71 + <div class="arr iconfont">&#xe604;</div>
  72 + </div>
  73 + </div>
  74 + <div class="list-item">
  75 + <div class="pic iconfont">&#xe715;</div>
  76 + <div class="body">
  77 + <div class="main eps">有货币</div>
  78 + <div class="value">688个</div>
  79 + <div class="arr iconfont">&#xe604;</div>
  80 + </div>
  81 + </div>
  82 + </div>
  83 + <div class="list">
  84 + <div class="list-item">
  85 + <div class="pic iconfont">&#xe63f;</div>
  86 + <div class="body">
  87 + <div class="main eps">消息</div>
  88 + <div class="value">8条未读</div>
  89 + <div class="arr iconfont">&#xe604;</div>
  90 + </div>
  91 + </div>
  92 + <div class="list-item">
  93 + <div class="pic iconfont">&#xe62b;</div>
  94 + <div class="body">
  95 + <div class="main eps">服务与反馈</div>
  96 + <div class="value"></div>
  97 + <div class="arr iconfont">&#xe604;</div>
  98 + </div>
  99 + </div>
  100 + </div>
  101 + <div class="ad-pic">
  102 + <img src="http://img0.imgtn.bdimg.com/it/u=2545963445,2564081921&fm=27&gp=0.jpg" />
  103 + </div>
  104 + <div class="ad-pic">
  105 + <img src="http://img2.imgtn.bdimg.com/it/u=2129117303,932344005&fm=11&gp=0.jpg" />
  106 + </div>
  107 + <div id="new-recommend-c">
  108 + <div class="toper">
  109 + <div class="title">为你优选</div>
  110 + </div>
  111 + <div class="container"></div>
  112 + </div>
  113 +</div>
  1 +import 'home/new-home.page.css';
  2 +import 'product/new-recommend.css';
  3 +import $ from 'yoho-jquery';
  4 +import Page from 'yoho-page';
  5 +
  6 +class NewHome extends Page {
  7 + constructor() {
  8 + super();
  9 +
  10 + this.selector = {
  11 + $scrollC: $('.scroll-c'),
  12 + $scrollWords: $('.scroll-words')
  13 + };
  14 +
  15 + this.init();
  16 + }
  17 +
  18 + init() {
  19 + this.autoScroll();
  20 + }
  21 +
  22 + autoScroll() {
  23 + let containerWidth = this.selector.$scrollC.width();
  24 + let innerWidth = this.selector.$scrollWords.width();
  25 +
  26 + if (innerWidth <= containerWidth) {
  27 + this.selector.$scrollC.removeClass('go-scroll');
  28 + }
  29 + }
  30 +}
  31 +
  32 +$(() => {
  33 + new NewHome();
  34 +});
  1 +.new-home-c {
  2 + background-color: #f0f0f0;
  3 +
  4 + .eps {
  5 + white-space: nowrap;
  6 + overflow: hidden;
  7 + text-overflow: ellipsis;
  8 + }
  9 +
  10 + .header {
  11 + width: 750px;
  12 + height: 204px;
  13 + background-image: resolve("home/index/header-bg.jpg");
  14 + background-size: cover;
  15 + padding: 46px 30px 58px;
  16 + position: relative;
  17 +
  18 + .left {
  19 + width: 100px;
  20 + height: 100px;
  21 + float: left;
  22 + position: relative;
  23 +
  24 + .user-avator {
  25 + width: 100%;
  26 + height: 100%;
  27 + background-size: cover;
  28 + background-position: center center;
  29 + border-radius: 50%;
  30 + overflow: hidden;
  31 + border: solid 3px #fff;
  32 + }
  33 +
  34 + .level {
  35 + width: 60px;
  36 + height: 25px;
  37 + background-size: 100% 100%;
  38 + position: absolute;
  39 + bottom: -12px;
  40 + left: 20px;
  41 + }
  42 +
  43 + .level-1 {
  44 + background-image: resolve("home/new-home/vip-1.png");
  45 + }
  46 +
  47 + .level-2 {
  48 + background-image: resolve("home/new-home/vip-2.png");
  49 + }
  50 +
  51 + .level-3 {
  52 + background-image: resolve("home/new-home/vip-3.png");
  53 + }
  54 + }
  55 +
  56 + .right {
  57 + width: 450px;
  58 + height: 100px;
  59 + float: left;
  60 + color: #fff;
  61 + margin-left: 20px;
  62 +
  63 + .name {
  64 + line-height: 50px;
  65 + font-size: 32px;
  66 + }
  67 +
  68 + .trend-code {
  69 + line-height: 50px;
  70 + float: left;
  71 +
  72 + div {
  73 + float: left;
  74 + }
  75 +
  76 + .scroll-c {
  77 + height: 50px;
  78 + max-width: 350px;
  79 + overflow: hidden;
  80 + position: relative;
  81 + }
  82 +
  83 + .scroll-c.go-scroll {
  84 + width: 350px;
  85 + }
  86 +
  87 + .scroll-words {
  88 + position: relative;
  89 + top: 0;
  90 + left: 0;
  91 + white-space: nowrap;
  92 + }
  93 +
  94 + .dot {
  95 + width: 30px;
  96 + }
  97 +
  98 + .edit {
  99 + width: 30px;
  100 + font-size: 30px;
  101 + vertical-align: middle;
  102 + margin-left: 10px;
  103 + }
  104 + }
  105 +
  106 + .go-scroll {
  107 + .scroll-words {
  108 + animation-name: autoScroll;
  109 + animation-duration: 5s;
  110 + animation-timing-function: linear;
  111 + animation-iteration-count: infinite;
  112 + animation-direction: alternate;
  113 + animation-delay: 2s;
  114 + }
  115 + }
  116 + }
  117 +
  118 + .gif-part {
  119 + width: 140px;
  120 + height: 140px;
  121 + position: absolute;
  122 + right: 0;
  123 + bottom: 0;
  124 + background-image: resolve("home/new-home/arr-page.gif");
  125 + background-size: 100% 100%;
  126 + }
  127 +
  128 + .qrcode {
  129 + width: 37px;
  130 + height: 37px;
  131 + font-size: 37px;
  132 + position: absolute;
  133 + top: 20px;
  134 + right: 30px;
  135 + color: #fff;
  136 + display: block;
  137 + }
  138 + }
  139 +
  140 + .list {
  141 + width: 750px;
  142 + background-color: #fff;
  143 + margin-bottom: 20px;
  144 + clear: both;
  145 +
  146 + .list-item {
  147 + width: 750px;
  148 + height: 88px;
  149 + line-height: 88px;
  150 + padding: 0 30px;
  151 +
  152 + div {
  153 + float: left;
  154 + font-size: 28px;
  155 + color: #444;
  156 + height: 88px;
  157 + }
  158 +
  159 + .pic {
  160 + font-size: 45px;
  161 + width: 60px;
  162 + }
  163 +
  164 + .body {
  165 + width: 630px;
  166 + border-bottom: solid 1px #e0e0e0;
  167 +
  168 + .main {
  169 + width: 400px;
  170 + }
  171 +
  172 + .value {
  173 + width: 200px;
  174 + text-align: right;
  175 + }
  176 +
  177 + .arr {
  178 + color: #e0e0e0;
  179 + font-size: 24px;
  180 + width: 30px;
  181 + text-align: right;
  182 + }
  183 + }
  184 +
  185 + &:last-child {
  186 + .body {
  187 + border-bottom: 0;
  188 + }
  189 + }
  190 + }
  191 + }
  192 +
  193 + .s-list {
  194 + .list-item {
  195 + height: 80px;
  196 + line-height: 80px;
  197 +
  198 + div {
  199 + height: 80px;
  200 + }
  201 +
  202 + .body {
  203 + width: 690px;
  204 + border-bottom: 0;
  205 +
  206 + .main {
  207 + width: 460px;
  208 + font-size: 32px;
  209 + }
  210 + }
  211 + }
  212 + }
  213 +
  214 + .service {
  215 + float: left;
  216 + background-color: #fff;
  217 + margin-bottom: 20px;
  218 + margin-top: -20px;
  219 +
  220 + .service-item {
  221 + float: left;
  222 + padding: 20px 75px;
  223 + width: 250px;
  224 + text-align: center;
  225 + color: #444;
  226 + height: 145px;
  227 + border-top: solid 1px #e0e0e0;
  228 +
  229 + .name {
  230 + font-size: 24px;
  231 + line-height: 55px;
  232 + height: 55px;
  233 + }
  234 +
  235 + .num {
  236 + font-size: 30px;
  237 + line-height: 50px;
  238 + height: 50px;
  239 + }
  240 +
  241 + .pic {
  242 + font-size: 45px;
  243 + line-height: 45px;
  244 + height: 55px;
  245 + padding-top: 10px;
  246 + }
  247 + }
  248 + }
  249 +
  250 + .ad-pic {
  251 + width: 750px;
  252 + margin-bottom: 20px;
  253 +
  254 + img {
  255 + width: 100%;
  256 + height: auto;
  257 + }
  258 + }
  259 +}
  260 +
  261 +@keyframes autoScroll {
  262 + from {
  263 + left: 0;
  264 + }
  265 +
  266 + to {
  267 + left: -120px;
  268 + }
  269 +}
  1 +#new-recommend-c {
  2 + width: 750px;
  3 + background-color: #fff;
  4 + padding-bottom: 80px;
  5 +
  6 + .toper {
  7 + padding: 24px 30px;
  8 + line-height: 32px;
  9 + height: 80px;
  10 + border-bottom: solid 1px #e0e0e0;
  11 +
  12 + .title {
  13 + font-size: 32px;
  14 + color: #444;
  15 + padding-left: 20px;
  16 + border-left: solid 4px #444;
  17 + }
  18 + }
  19 +}