Authored by 李靖

新个人中心

... ... @@ -2,6 +2,7 @@
const mRoot = '../models';
const headerModel = require('../../../doraemon/models/header'); // 头部model
const footerModel = require('../../../doraemon/models/footer_tab'); // 底部tab
const newHomeModel = require(`${mRoot}/new-home`);
let yhchannels = {
... ... @@ -25,11 +26,17 @@ exports.index = (req, res, next) => {
navTitle: '个人中心'
}),
title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停',
showFooterTab: footerModel.getUrlData('mine'),
width750: true,
localCss: true,
pageFooter: true
pageFooter: true,
isWechat: req.yoho.isWechat
};
if (req.yoho.isWechat) {
responseData.pageFooter = false;
}
let params = {
uid: req.user.uid,
udid: require('yoho-md5')(req.ip),
... ...
... ... @@ -46,6 +46,13 @@
</div>
</div>
</div>
<div class="notice-c hide">
<div class="title">
<span>有货</span>
<span class="red">公告</span>
</div>
<div class="main eps">礼品卡功能上线,需要采购请联系有货客服</div>
</div>
<div class="list s-list">
<div class="list-item">
<div class="body">
... ... @@ -154,4 +161,12 @@
<div class="container clearfix"></div>
</div>
{{> common/set-trend-world}}
{{#if @root.isWechat}}
<div class="yoho-logo-c">
<div class="yoho-logo"></div>
</div>
{{/if}}
</div>
{{#if @root.isWechat}}
{{> footer-tab}}
{{/if}}
\ No newline at end of file
... ...
... ... @@ -2,7 +2,7 @@
<footer id="yoho-footer" class="yoho-footer {{#isErr}}bottom{{/isErr}}">
<p class="op-row">
<span class="back-to-top">
Back to top
回到顶部
<i class="iconfont">&#xe608;</i>
</span>
<div class="float-top "></div>
... ...
... ... @@ -19,6 +19,11 @@ class NewHome extends Page {
$trendCode: $('.trend-code')
};
this.time = 6000;
this.containerWidth = 0;
this.innerWidth = 0;
this.moveLength = 0;
this.interval = '';
this.init();
}
... ... @@ -28,6 +33,7 @@ class NewHome extends Page {
this.bindEvents();
this.swiper();
this.showTrend();
window.reMarginFooter('.footer-tab');
}
// 首次进入个人中心,且登陆,且没有设置潮流口令,打开弹框子
... ... @@ -44,6 +50,7 @@ class NewHome extends Page {
bindEvents() {
this.selector.$codeSet.on('click', this.codeSet.bind(this));
this.selector.$resYas.on('click', this.yas.bind(this));
this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
}
// 资源位
... ... @@ -104,17 +111,41 @@ class NewHome extends Page {
codeSet(e) {
e.preventDefault();
$('.set-trend-world').show();
return false;
}
// 潮流口令滚动
autoScroll() {
let containerWidth = this.selector.$scrollC.width();
let innerWidth = this.selector.$scrollWords.width();
// 触发修改滚动
chanScroll() {
this.selector.$scrollWords.stop(true, true);
clearInterval(this.interval);
setTimeout(() => {
this.autoScroll();
}, 500);
}
if (innerWidth <= containerWidth) {
this.selector.$scrollC.removeClass('go-scroll');
// 判断滚动
autoScroll() {
this.containerWidth = this.selector.$scrollC.width();
this.innerWidth = this.selector.$scrollWords.width();
this.moveLength = this.innerWidth - this.containerWidth;
if (this.innerWidth > (this.containerWidth + 1)) {
this.goScroll();
this.interval = setInterval(() => {
this.goScroll();
}, this.time);
} else {
clearInterval(this.interval);
}
}
// 滚动
goScroll() {
let $animateObj = this.selector.$scrollWords;
$animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
$animateObj.animate({left: '0'}, this.time / 2, 'linear');
});
}
}
$(() => {
... ...
... ... @@ -79,3 +79,21 @@
}
}
}
.width750 {
.footer-tab {
height: 120px;
width: 750px;
max-width: 750px;
margin-left: -375px;
padding-top: 25px;
.tab-icon {
font-size: 45px;
}
.tab-name {
font-size: 24px;
}
}
}
... ...
... ... @@ -3,6 +3,7 @@
@import "channel/divide-image";
@import "channel/banner-center";
@import "layout/swiper";
@import "channel/footer-tab";
.new-home-c {
background-color: #f0f0f0;
... ... @@ -93,16 +94,12 @@
}
.scroll-c {
max-width: 190px;
height: 50px;
max-width: 350px;
overflow: hidden;
position: relative;
}
.scroll-c.go-scroll {
width: 350px;
}
.scroll-words {
position: relative;
top: 0;
... ... @@ -121,17 +118,6 @@
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 {
... ... @@ -156,6 +142,46 @@
}
}
.notice-c {
height: 80px;
line-height: 80px;
background-color: #fff;
margin-bottom: 20px;
padding: 0 30px;
.title {
float: left;
font-size: 0;
color: #444;
line-height: 0;
width: 140px;
span {
font-size: 28px;
line-height: 40px;
margin: 20px 0;
display: inline-block;
font-weight: bold;
}
.red {
color: #df1b24;
border-right: solid 1px #e0e0e0;
padding-right: 20px;
}
}
.main {
margin-left: 18px;
width: 530px;
float: left;
font-size: 24px;
color: #444;
line-height: 80px;
height: 80px;
}
}
.list {
width: 750px;
background-color: #fff;
... ... @@ -324,14 +350,18 @@
}
}
}
}
@keyframes autoScroll {
from {
left: 0;
}
.yoho-logo-c {
height: 80px;
padding-top: 22px;
margin-bottom: 120px;
to {
left: -120px;
.yoho-logo {
width: 180px;
height: 35px;
margin: 0 auto;
background-size: 100% 100%;
background-image: resolve("yohologo02.png");
}
}
}
... ...
.width750 {
.yoho-footer {
font-size: 28px;
border-top: solid 1px #e0e0e0;
}
.op-row {
... ... @@ -24,8 +25,8 @@
}
.copyright {
height: 140px;
line-height: 140px;
height: 110px !important;
line-height: 110px !important;
}
}
... ... @@ -62,12 +63,15 @@
}
.user-name {
margin-right: 1em;
margin-left: 0.3em;
max-width: 200px;
text-decoration: underline;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
border-right: solid 1px #e0e0e0;
margin: 45px 1em 45px 0.3em;
padding-right: 30px;
height: 30px;
line-height: 30px;
}
.back-to-top {
... ... @@ -107,12 +111,11 @@
.copyright {
height: 60PX;
border-top: 1px solid #ccc;
background-color: #eee;
color: #666;
text-align: center;
line-height: 60PX;
font-size: 12PX;
font-size: 24px;
}
&.bottom {
... ...
... ... @@ -17,14 +17,14 @@
line-height: 105px;
.nav-back {
left: 12px;
left: 0;
width: 105px;
height: 105px;
line-height: 105px;
}
.nav-home {
right: 12px;
right: 0;
width: 105px;
height: 105px;
line-height: 105px;
... ... @@ -184,79 +184,82 @@
.width750 {
.homebuttom {
height: 105px;
ul {
padding-top: 14px;
li {
i {
margin-bottom: 9px;
}
span {
line-height: 47px;
font-size: 16px;
}
}
}
height: 355px;
top: 105px;
}
}
.homebuttom {
position: relative;
width: 280px;
height: 355px;
position: absolute;
top: 90px;
right: 12px;
z-index: 2;
overflow: hidden;
width: 100%;
height: 90px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
background-size: 100% 100%;
padding-top: 17px;
&.boys {
background-image: linear-gradient(#323232, #414141);
background-image: resolve("common/homebuttom-bg.png");
li {
span {
border-bottom: solid 1px #444;
}
}
}
&.girls {
background: #ff88ae;
background-image: resolve("common/homebuttom-bg-1.png");
}
&.kids {
background: #7ad9f9;
background-image: resolve("common/homebuttom-bg-2.png");
}
&.life-style {
background: #4f4138;
background-image: resolve("common/homebuttom-bg-3.png");
}
ul {
overflow: hidden;
padding-top: 12px;
width: 100%;
height: 90%;
height: 338px;
padding: 1px 0;
li {
float: left;
overflow: hidden;
width: 25%;
height: 100%;
text-align: center;
width: 100%;
height: 84px;
line-height: 84px;
padding-left: 40px;
i {
display: block;
margin-bottom: 8px;
width: 100%;
height: 40%;
float: left;
font-size: 30px;
color: #fff;
width: 70px;
}
span {
display: block;
overflow: hidden;
width: 100%;
height: auto;
float: left;
font-size: 28px;
color: #fff;
line-height: 40px;
font-size: 14PX;
width: 170px;
height: 84px;
border-bottom: solid 1px #fff;
padding-left: 20px;
}
}
li:last-child {
span {
border-bottom: 0;
}
}
}
... ...