fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit f616cbafbe2ade1d36cd02021ab7c05f8cdbdc43 1 parent 058d5584

新个人中心

Inline Side-by-side
Showing 12 changed files with 185 additions and 78 deletions
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 2
3 const mRoot = '../models'; 3 const mRoot = '../models';
4 const headerModel = require('../../../doraemon/models/header'); // 头部model 4 const headerModel = require('../../../doraemon/models/header'); // 头部model
  5 +const footerModel = require('../../../doraemon/models/footer_tab'); // 底部tab
5 const newHomeModel = require(`${mRoot}/new-home`); 6 const newHomeModel = require(`${mRoot}/new-home`);
6 7
7 let yhchannels = { 8 let yhchannels = {
@@ -25,11 +26,17 @@ exports.index = (req, res, next) => { @@ -25,11 +26,17 @@ exports.index = (req, res, next) => {
25 navTitle: '个人中心' 26 navTitle: '个人中心'
26 }), 27 }),
27 title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停', 28 title: '个人中心 | Yoho!Buy有货 | 潮流购物逛不停',
  29 + showFooterTab: footerModel.getUrlData('mine'),
28 width750: true, 30 width750: true,
29 localCss: true, 31 localCss: true,
30 - pageFooter: true 32 + pageFooter: true,
  33 + isWechat: req.yoho.isWechat
31 }; 34 };
32 35
  36 + if (req.yoho.isWechat) {
  37 + responseData.pageFooter = false;
  38 + }
  39 +
33 let params = { 40 let params = {
34 uid: req.user.uid, 41 uid: req.user.uid,
35 udid: require('yoho-md5')(req.ip), 42 udid: require('yoho-md5')(req.ip),
@@ -46,6 +46,13 @@ @@ -46,6 +46,13 @@
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
  49 + <div class="notice-c hide">
  50 + <div class="title">
  51 + <span>有货</span>
  52 + <span class="red">公告</span>
  53 + </div>
  54 + <div class="main eps">礼品卡功能上线，需要采购请联系有货客服</div>
  55 + </div>
49 <div class="list s-list"> 56 <div class="list s-list">
50 <div class="list-item"> 57 <div class="list-item">
51 <div class="body"> 58 <div class="body">
@@ -154,4 +161,12 @@ @@ -154,4 +161,12 @@
154 <div class="container clearfix"></div> 161 <div class="container clearfix"></div>
155 </div> 162 </div>
156 {{> common/set-trend-world}} 163 {{> common/set-trend-world}}
157 -</div>  
  164 + {{#if @root.isWechat}}
  165 + <div class="yoho-logo-c">
  166 + <div class="yoho-logo"></div>
  167 + </div>
  168 + {{/if}}
  169 +</div>
  170 +{{#if @root.isWechat}}
  171 +{{> footer-tab}}
  172 +{{/if}}
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <footer id="yoho-footer" class="yoho-footer {{#isErr}}bottom{{/isErr}}"> 2 <footer id="yoho-footer" class="yoho-footer {{#isErr}}bottom{{/isErr}}">
3 <p class="op-row"> 3 <p class="op-row">
4 <span class="back-to-top"> 4 <span class="back-to-top">
5 - Back to top 5 + 回到顶部
6 <i class="iconfont">&#xe608;</i> 6 <i class="iconfont">&#xe608;</i>
7 </span> 7 </span>
8 <div class="float-top "></div> 8 <div class="float-top "></div>
@@ -19,6 +19,11 @@ class NewHome extends Page { @@ -19,6 +19,11 @@ class NewHome extends Page {
19 $trendCode: $('.trend-code') 19 $trendCode: $('.trend-code')
20 }; 20 };
21 21
  22 + this.time = 6000;
  23 + this.containerWidth = 0;
  24 + this.innerWidth = 0;
  25 + this.moveLength = 0;
  26 + this.interval = '';
22 this.init(); 27 this.init();
23 } 28 }
24 29
@@ -28,6 +33,7 @@ class NewHome extends Page { @@ -28,6 +33,7 @@ class NewHome extends Page {
28 this.bindEvents(); 33 this.bindEvents();
29 this.swiper(); 34 this.swiper();
30 this.showTrend(); 35 this.showTrend();
  36 + window.reMarginFooter('.footer-tab');
31 } 37 }
32 38
33 // 首次进入个人中心，且登陆，且没有设置潮流口令，打开弹框子 39 // 首次进入个人中心，且登陆，且没有设置潮流口令，打开弹框子
@@ -44,6 +50,7 @@ class NewHome extends Page { @@ -44,6 +50,7 @@ class NewHome extends Page {
44 bindEvents() { 50 bindEvents() {
45 this.selector.$codeSet.on('click', this.codeSet.bind(this)); 51 this.selector.$codeSet.on('click', this.codeSet.bind(this));
46 this.selector.$resYas.on('click', this.yas.bind(this)); 52 this.selector.$resYas.on('click', this.yas.bind(this));
  53 + this.selector.$scrollWords.on('DOMNodeInserted', this.chanScroll.bind(this));
47 } 54 }
48 55
49 // 资源位 56 // 资源位
@@ -104,17 +111,41 @@ class NewHome extends Page { @@ -104,17 +111,41 @@ class NewHome extends Page {
104 codeSet(e) { 111 codeSet(e) {
105 e.preventDefault(); 112 e.preventDefault();
106 $('.set-trend-world').show(); 113 $('.set-trend-world').show();
  114 + return false;
107 } 115 }
108 116
109 - // 潮流口令滚动  
110 - autoScroll() {  
111 - let containerWidth = this.selector.$scrollC.width();  
112 - let innerWidth = this.selector.$scrollWords.width(); 117 + // 触发修改滚动
  118 + chanScroll() {
  119 + this.selector.$scrollWords.stop(true, true);
  120 + clearInterval(this.interval);
  121 + setTimeout(() => {
  122 + this.autoScroll();
  123 + }, 500);
  124 + }
113 125
114 - if (innerWidth <= containerWidth) {  
115 - this.selector.$scrollC.removeClass('go-scroll'); 126 + // 判断滚动
  127 + autoScroll() {
  128 + this.containerWidth = this.selector.$scrollC.width();
  129 + this.innerWidth = this.selector.$scrollWords.width();
  130 + this.moveLength = this.innerWidth - this.containerWidth;
  131 + if (this.innerWidth > (this.containerWidth + 1)) {
  132 + this.goScroll();
  133 + this.interval = setInterval(() => {
  134 + this.goScroll();
  135 + }, this.time);
  136 + } else {
  137 + clearInterval(this.interval);
116 } 138 }
117 } 139 }
  140 +
  141 + // 滚动
  142 + goScroll() {
  143 + let $animateObj = this.selector.$scrollWords;
  144 +
  145 + $animateObj.animate({left: `-${this.moveLength}px`}, this.time / 2, 'linear', () => {
  146 + $animateObj.animate({left: '0'}, this.time / 2, 'linear');
  147 + });
  148 + }
118 } 149 }
119 150
120 $(() => { 151 $(() => {
@@ -79,3 +79,21 @@ @@ -79,3 +79,21 @@
79 } 79 }
80 } 80 }
81 } 81 }
  82 +
  83 +.width750 {
  84 + .footer-tab {
  85 + height: 120px;
  86 + width: 750px;
  87 + max-width: 750px;
  88 + margin-left: -375px;
  89 + padding-top: 25px;
  90 +
  91 + .tab-icon {
  92 + font-size: 45px;
  93 + }
  94 +
  95 + .tab-name {
  96 + font-size: 24px;
  97 + }
  98 + }
  99 +}
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 @import "channel/divide-image"; 3 @import "channel/divide-image";
4 @import "channel/banner-center"; 4 @import "channel/banner-center";
5 @import "layout/swiper"; 5 @import "layout/swiper";
  6 +@import "channel/footer-tab";
6 7
7 .new-home-c { 8 .new-home-c {
8 background-color: #f0f0f0; 9 background-color: #f0f0f0;
@@ -93,16 +94,12 @@ @@ -93,16 +94,12 @@
93 } 94 }
94 95
95 .scroll-c { 96 .scroll-c {
  97 + max-width: 190px;
96 height: 50px; 98 height: 50px;
97 - max-width: 350px;  
98 overflow: hidden; 99 overflow: hidden;
99 position: relative; 100 position: relative;
100 } 101 }
101 102
102 - .scroll-c.go-scroll {  
103 - width: 350px;  
104 - }  
105 -  
106 .scroll-words { 103 .scroll-words {
107 position: relative; 104 position: relative;
108 top: 0; 105 top: 0;
@@ -121,17 +118,6 @@ @@ -121,17 +118,6 @@
121 margin-left: 10px; 118 margin-left: 10px;
122 } 119 }
123 } 120 }
124 -  
125 - .go-scroll {  
126 - .scroll-words {  
127 - animation-name: autoScroll;  
128 - animation-duration: 5s;  
129 - animation-timing-function: linear;  
130 - animation-iteration-count: infinite;  
131 - animation-direction: alternate;  
132 - animation-delay: 2s;  
133 - }  
134 - }  
135 } 121 }
136 122
137 .gif-part { 123 .gif-part {
@@ -156,6 +142,46 @@ @@ -156,6 +142,46 @@
156 } 142 }
157 } 143 }
158 144
  145 + .notice-c {
  146 + height: 80px;
  147 + line-height: 80px;
  148 + background-color: #fff;
  149 + margin-bottom: 20px;
  150 + padding: 0 30px;
  151 +
  152 + .title {
  153 + float: left;
  154 + font-size: 0;
  155 + color: #444;
  156 + line-height: 0;
  157 + width: 140px;
  158 +
  159 + span {
  160 + font-size: 28px;
  161 + line-height: 40px;
  162 + margin: 20px 0;
  163 + display: inline-block;
  164 + font-weight: bold;
  165 + }
  166 +
  167 + .red {
  168 + color: #df1b24;
  169 + border-right: solid 1px #e0e0e0;
  170 + padding-right: 20px;
  171 + }
  172 + }
  173 +
  174 + .main {
  175 + margin-left: 18px;
  176 + width: 530px;
  177 + float: left;
  178 + font-size: 24px;
  179 + color: #444;
  180 + line-height: 80px;
  181 + height: 80px;
  182 + }
  183 + }
  184 +
159 .list { 185 .list {
160 width: 750px; 186 width: 750px;
161 background-color: #fff; 187 background-color: #fff;
@@ -324,14 +350,18 @@ @@ -324,14 +350,18 @@
324 } 350 }
325 } 351 }
326 } 352 }
327 -}  
328 353
329 -@keyframes autoScroll {  
330 - from {  
331 - left: 0;  
332 - } 354 + .yoho-logo-c {
  355 + height: 80px;
  356 + padding-top: 22px;
  357 + margin-bottom: 120px;
333 358
334 - to {  
335 - left: -120px; 359 + .yoho-logo {
  360 + width: 180px;
  361 + height: 35px;
  362 + margin: 0 auto;
  363 + background-size: 100% 100%;
  364 + background-image: resolve("yohologo02.png");
  365 + }
336 } 366 }
337 } 367 }
1 .width750 { 1 .width750 {
2 .yoho-footer { 2 .yoho-footer {
3 font-size: 28px; 3 font-size: 28px;
  4 + border-top: solid 1px #e0e0e0;
4 } 5 }
5 6
6 .op-row { 7 .op-row {
@@ -24,8 +25,8 @@ @@ -24,8 +25,8 @@
24 } 25 }
25 26
26 .copyright { 27 .copyright {
27 - height: 140px;  
28 - line-height: 140px; 28 + height: 110px !important;
  29 + line-height: 110px !important;
29 } 30 }
30 } 31 }
31 32
@@ -62,12 +63,15 @@ @@ -62,12 +63,15 @@
62 } 63 }
63 64
64 .user-name { 65 .user-name {
65 - margin-right: 1em;  
66 - margin-left: 0.3em;  
67 max-width: 200px; 66 max-width: 200px;
68 - text-decoration: underline; 67 + text-decoration: none;
69 text-overflow: ellipsis; 68 text-overflow: ellipsis;
70 white-space: nowrap; 69 white-space: nowrap;
  70 + border-right: solid 1px #e0e0e0;
  71 + margin: 45px 1em 45px 0.3em;
  72 + padding-right: 30px;
  73 + height: 30px;
  74 + line-height: 30px;
71 } 75 }
72 76
73 .back-to-top { 77 .back-to-top {
@@ -107,12 +111,11 @@ @@ -107,12 +111,11 @@
107 111
108 .copyright { 112 .copyright {
109 height: 60PX; 113 height: 60PX;
110 - border-top: 1px solid #ccc;  
111 background-color: #eee; 114 background-color: #eee;
112 color: #666; 115 color: #666;
113 text-align: center; 116 text-align: center;
114 line-height: 60PX; 117 line-height: 60PX;
115 - font-size: 12PX; 118 + font-size: 24px;
116 } 119 }
117 120
118 &.bottom { 121 &.bottom {
@@ -17,14 +17,14 @@ @@ -17,14 +17,14 @@
17 line-height: 105px; 17 line-height: 105px;
18 18
19 .nav-back { 19 .nav-back {
20 - left: 12px; 20 + left: 0;
21 width: 105px; 21 width: 105px;
22 height: 105px; 22 height: 105px;
23 line-height: 105px; 23 line-height: 105px;
24 } 24 }
25 25
26 .nav-home { 26 .nav-home {
27 - right: 12px; 27 + right: 0;
28 width: 105px; 28 width: 105px;
29 height: 105px; 29 height: 105px;
30 line-height: 105px; 30 line-height: 105px;
@@ -184,79 +184,82 @@ @@ -184,79 +184,82 @@
184 184
185 .width750 { 185 .width750 {
186 .homebuttom { 186 .homebuttom {
187 - height: 105px;  
188 -  
189 - ul {  
190 - padding-top: 14px;  
191 -  
192 - li {  
193 - i {  
194 - margin-bottom: 9px;  
195 - }  
196 -  
197 - span {  
198 - line-height: 47px;  
199 - font-size: 16px;  
200 - }  
201 - }  
202 - } 187 + height: 355px;
  188 + top: 105px;
203 } 189 }
204 } 190 }
205 191
206 .homebuttom { 192 .homebuttom {
207 - position: relative; 193 + width: 280px;
  194 + height: 355px;
  195 + position: absolute;
  196 + top: 90px;
  197 + right: 12px;
208 z-index: 2; 198 z-index: 2;
209 overflow: hidden; 199 overflow: hidden;
210 - width: 100%;  
211 - height: 90px;  
212 - border-top: 1px solid rgba(255, 255, 255, 0.5);  
213 color: #fff; 200 color: #fff;
  201 + background-size: 100% 100%;
  202 + padding-top: 17px;
214 203
215 &.boys { 204 &.boys {
216 - background-image: linear-gradient(#323232, #414141); 205 + background-image: resolve("common/homebuttom-bg.png");
  206 +
  207 + li {
  208 + span {
  209 + border-bottom: solid 1px #444;
  210 + }
  211 + }
217 } 212 }
218 213
219 &.girls { 214 &.girls {
220 - background: #ff88ae; 215 + background-image: resolve("common/homebuttom-bg-1.png");
221 } 216 }
222 217
223 &.kids { 218 &.kids {
224 - background: #7ad9f9; 219 + background-image: resolve("common/homebuttom-bg-2.png");
225 } 220 }
226 221
227 &.life-style { 222 &.life-style {
228 - background: #4f4138; 223 + background-image: resolve("common/homebuttom-bg-3.png");
229 } 224 }
230 225
231 ul { 226 ul {
232 overflow: hidden; 227 overflow: hidden;
233 - padding-top: 12px;  
234 width: 100%; 228 width: 100%;
235 - height: 90%; 229 + height: 338px;
  230 + padding: 1px 0;
236 231
237 li { 232 li {
238 float: left; 233 float: left;
239 overflow: hidden; 234 overflow: hidden;
240 - width: 25%;  
241 - height: 100%;  
242 - text-align: center; 235 + width: 100%;
  236 + height: 84px;
  237 + line-height: 84px;
  238 + padding-left: 40px;
243 239
244 i { 240 i {
245 display: block; 241 display: block;
246 - margin-bottom: 8px;  
247 - width: 100%;  
248 - height: 40%; 242 + float: left;
  243 + font-size: 30px;
249 color: #fff; 244 color: #fff;
  245 + width: 70px;
250 } 246 }
251 247
252 span { 248 span {
253 display: block; 249 display: block;
254 - overflow: hidden;  
255 - width: 100%;  
256 - height: auto; 250 + float: left;
  251 + font-size: 28px;
257 color: #fff; 252 color: #fff;
258 - line-height: 40px;  
259 - font-size: 14PX; 253 + width: 170px;
  254 + height: 84px;
  255 + border-bottom: solid 1px #fff;
  256 + padding-left: 20px;
  257 + }
  258 + }
  259 +
  260 + li:last-child {
  261 + span {
  262 + border-bottom: 0;
260 } 263 }
261 } 264 }
262 } 265 }