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
'use strict';
const headerModel = require('../../../doraemon/models/header'); // 头部model
exports.index = (req, res) => {
let responseData = {
module: 'home',
page: 'new-home',
pageHeader: headerModel.setNav({
navTitle: '个人中心'
}),
title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停',
width750: true,
localCss: true,
pageFooter: true
};
res.render('new-home', Object.assign(responseData, ''));
};
... ...
... ... @@ -32,6 +32,8 @@ const refund = require(`${cRoot}/refund`);
const exchange = require(`${cRoot}/exchange`);
const tideCommand = require(`${cRoot}/tide-command`);
const newHome = require(`${cRoot}/new-home`);
// const myDetail = require(`${cRoot}/myDetail);
... ... @@ -175,4 +177,6 @@ router.post('/return/exchange/submit', auth, exchange.submit); // AJAX 提交换
router.post('/return/exchange/cancel-apply', auth, exchange.cancelApply); // AJAX 取消换货申请
router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口令
router.get('/new-home', auth, newHome.index); // 设置潮流口令
module.exports = router;
... ...
<div class="new-home-c yoho-page">
<div class="header">
<div class="left">
<div class="user-avator" style="background-image:url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917326278,3402237627&fm=27&gp=0.jpg)"></div>
<div class="level level-1"></div>
</div>
<div class="right">
<div class="name eps">李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖李靖</div>
<div class="trend-code">
<div class="dot">#&nbsp;</div>
<div class="scroll-c go-scroll">
<div class="scroll-words">酷酷酷</div>
</div>
<div class="dot">&nbsp;#</div>
<div class="iconfont edit">&#xe61e;</div>
</div>
</div>
<a class="iconfont qrcode">&#xe64d;</a>
<div class="gif-part"></div>
</div>
<div class="list s-list">
<div class="list-item">
<div class="body">
<div class="main eps">默认购物频道</div>
<div class="value">男士MEN</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
</div>
<div class="list s-list">
<div class="list-item">
<div class="body">
<div class="main eps">我的订单</div>
<div class="value">全部订单</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
</div>
<div class="service">
<div class="service-item">
<div class="iconfont pic">&#xe634;</div>
<p class="name">商品收藏</p>
</div>
<div class="service-item">
<div class="iconfont pic">&#xe61b;</div>
<p class="name">商品收藏</p>
</div>
<div class="service-item">
<div class="iconfont pic">&#xe61b;</div>
<p class="name">商品收藏</p>
</div>
<div class="service-item">
<p class="num">265</p>
<p class="name">商品收藏</p>
</div>
<div class="service-item">
<p class="num">265</p>
<p class="name">商品收藏</p>
</div>
<div class="service-item">
<p class="num">265</p>
<p class="name">商品收藏</p>
</div>
</div>
<div class="list">
<div class="list-item">
<div class="pic iconfont">&#xe63a;</div>
<div class="body">
<div class="main eps">优惠券</div>
<div class="value">5张</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
<div class="list-item">
<div class="pic iconfont">&#xe715;</div>
<div class="body">
<div class="main eps">有货币</div>
<div class="value">688个</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
</div>
<div class="list">
<div class="list-item">
<div class="pic iconfont">&#xe63f;</div>
<div class="body">
<div class="main eps">消息</div>
<div class="value">8条未读</div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
<div class="list-item">
<div class="pic iconfont">&#xe62b;</div>
<div class="body">
<div class="main eps">服务与反馈</div>
<div class="value"></div>
<div class="arr iconfont">&#xe604;</div>
</div>
</div>
</div>
<div class="ad-pic">
<img src="http://img0.imgtn.bdimg.com/it/u=2545963445,2564081921&fm=27&gp=0.jpg" />
</div>
<div class="ad-pic">
<img src="http://img2.imgtn.bdimg.com/it/u=2129117303,932344005&fm=11&gp=0.jpg" />
</div>
<div id="new-recommend-c">
<div class="toper">
<div class="title">为你优选</div>
</div>
<div class="container"></div>
</div>
</div>
\ No newline at end of file
... ...
import 'home/new-home.page.css';
import 'product/new-recommend.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
class NewHome extends Page {
constructor() {
super();
this.selector = {
$scrollC: $('.scroll-c'),
$scrollWords: $('.scroll-words')
};
this.init();
}
init() {
this.autoScroll();
}
autoScroll() {
let containerWidth = this.selector.$scrollC.width();
let innerWidth = this.selector.$scrollWords.width();
if (innerWidth <= containerWidth) {
this.selector.$scrollC.removeClass('go-scroll');
}
}
}
$(() => {
new NewHome();
});
... ...
.new-home-c {
background-color: #f0f0f0;
.eps {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header {
width: 750px;
height: 204px;
background-image: resolve("home/index/header-bg.jpg");
background-size: cover;
padding: 46px 30px 58px;
position: relative;
.left {
width: 100px;
height: 100px;
float: left;
position: relative;
.user-avator {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
border-radius: 50%;
overflow: hidden;
border: solid 3px #fff;
}
.level {
width: 60px;
height: 25px;
background-size: 100% 100%;
position: absolute;
bottom: -12px;
left: 20px;
}
.level-1 {
background-image: resolve("home/new-home/vip-1.png");
}
.level-2 {
background-image: resolve("home/new-home/vip-2.png");
}
.level-3 {
background-image: resolve("home/new-home/vip-3.png");
}
}
.right {
width: 450px;
height: 100px;
float: left;
color: #fff;
margin-left: 20px;
.name {
line-height: 50px;
font-size: 32px;
}
.trend-code {
line-height: 50px;
float: left;
div {
float: left;
}
.scroll-c {
height: 50px;
max-width: 350px;
overflow: hidden;
position: relative;
}
.scroll-c.go-scroll {
width: 350px;
}
.scroll-words {
position: relative;
top: 0;
left: 0;
white-space: nowrap;
}
.dot {
width: 30px;
}
.edit {
width: 30px;
font-size: 30px;
vertical-align: middle;
margin-left: 10px;
}
}
.go-scroll {
.scroll-words {
animation-name: autoScroll;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 2s;
}
}
}
.gif-part {
width: 140px;
height: 140px;
position: absolute;
right: 0;
bottom: 0;
background-image: resolve("home/new-home/arr-page.gif");
background-size: 100% 100%;
}
.qrcode {
width: 37px;
height: 37px;
font-size: 37px;
position: absolute;
top: 20px;
right: 30px;
color: #fff;
display: block;
}
}
.list {
width: 750px;
background-color: #fff;
margin-bottom: 20px;
clear: both;
.list-item {
width: 750px;
height: 88px;
line-height: 88px;
padding: 0 30px;
div {
float: left;
font-size: 28px;
color: #444;
height: 88px;
}
.pic {
font-size: 45px;
width: 60px;
}
.body {
width: 630px;
border-bottom: solid 1px #e0e0e0;
.main {
width: 400px;
}
.value {
width: 200px;
text-align: right;
}
.arr {
color: #e0e0e0;
font-size: 24px;
width: 30px;
text-align: right;
}
}
&:last-child {
.body {
border-bottom: 0;
}
}
}
}
.s-list {
.list-item {
height: 80px;
line-height: 80px;
div {
height: 80px;
}
.body {
width: 690px;
border-bottom: 0;
.main {
width: 460px;
font-size: 32px;
}
}
}
}
.service {
float: left;
background-color: #fff;
margin-bottom: 20px;
margin-top: -20px;
.service-item {
float: left;
padding: 20px 75px;
width: 250px;
text-align: center;
color: #444;
height: 145px;
border-top: solid 1px #e0e0e0;
.name {
font-size: 24px;
line-height: 55px;
height: 55px;
}
.num {
font-size: 30px;
line-height: 50px;
height: 50px;
}
.pic {
font-size: 45px;
line-height: 45px;
height: 55px;
padding-top: 10px;
}
}
}
.ad-pic {
width: 750px;
margin-bottom: 20px;
img {
width: 100%;
height: auto;
}
}
}
@keyframes autoScroll {
from {
left: 0;
}
to {
left: -120px;
}
}
... ...
#new-recommend-c {
width: 750px;
background-color: #fff;
padding-bottom: 80px;
.toper {
padding: 24px 30px;
line-height: 32px;
height: 80px;
border-bottom: solid 1px #e0e0e0;
.title {
font-size: 32px;
color: #444;
padding-left: 20px;
border-left: solid 4px #444;
}
}
}
... ...