fe / YOHOBUYPC · Commits

Go to a project

Authored by uedxwg
Commit 2bd4f8b1e2d4d9db7b94e7b0ca5c213a38b19616 2 parents 6056ad49 1e24e50c

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

Inline Side-by-side
Showing 7 changed files with 328 additions and 144 deletions
@@ -6,7 +6,10 @@ @@ -6,7 +6,10 @@
6 var $ = require('jquery'), 6 var $ = require('jquery'),
7 Swiper = require('yoho.iswiper'), 7 Swiper = require('yoho.iswiper'),
8 lazyLoad = require('yoho.lazyload'), 8 lazyLoad = require('yoho.lazyload'),
9 - goodsSwiper; 9 + goodsSwiper,
  10 + sizeSwiper,
  11 + refSwiper;
  12 +
10 13
11 lazyLoad($('img.lazy')); 14 lazyLoad($('img.lazy'));
12 15
@@ -39,6 +42,14 @@ $('#nav-tab li').on('click', function() { @@ -39,6 +42,14 @@ $('#nav-tab li').on('click', function() {
39 } 42 }
40 }); 43 });
41 44
  45 +sizeSwiper = new Swiper('#size-swiper-container',{
  46 + slidesPerView: 'auto'
  47 +});
  48 +
  49 +refSwiper = new Swiper('#reference-swiper-container',{
  50 + slidesPerView: 'auto'
  51 +});
  52 +
42 // $('#iframe').load(function() { 53 // $('#iframe').load(function() {
43 // var mainheight = $(this).contents().find('body').height() + 30; 54 // var mainheight = $(this).contents().find('body').height() + 30;
44 // $(this).height(mainheight); 55 // $(this).height(mainheight);
1 $mainFontC:#444444; 1 $mainFontC:#444444;
2 $subFontC:#b0b0b0; 2 $subFontC:#b0b0b0;
3 -$borderC:#e0e0e0; 3 +$borderC:#b0b0b0;
4 $tableCellC:#eee; 4 $tableCellC:#eee;
5 5
6 -@function px2rem($px){  
7 - @return $px*1rem/$pxConvertRem;  
8 -}  
9 -  
10 .good-detail-page { 6 .good-detail-page {
11 7
12 /* basic component */ 8 /* basic component */
13 .page-block{ 9 .page-block{
14 box-sizing:border-box; 10 box-sizing:border-box;
15 width: 100%; 11 width: 100%;
16 - border-bottom: 1px solid $borderC;  
17 - border-top: 1px solid $borderC;  
18 - padding: 0 px2rem(28); 12 + border-bottom: 2px solid $borderC;
  13 + border-top: 2px solid $borderC;
  14 + padding: 0 pxToRem(28px);
19 .title{ 15 .title{
20 - min-height: px2rem(88);  
21 - line-height: px2rem(88); 16 + min-height: pxToRem(88px);
  17 + line-height: pxToRem(88px);
22 color: $mainFontC; 18 color: $mainFontC;
23 - font:{  
24 - size : px2rem(28);  
25 - }  
26 - border-bottom: 1px solid $borderC; 19 + font-size : pxToRem(28px);
  20 + border-bottom: 2px solid $borderC;
27 21
28 span{ 22 span{
29 color:#a0a0a0; 23 color:#a0a0a0;
30 - font:{  
31 - size:px2rem(18);  
32 - } 24 + font-size:pxToRem(18px);
33 // vertical-align: baseline; 25 // vertical-align: baseline;
34 } 26 }
35 } 27 }
36 .detail{ 28 .detail{
37 - margin-top: px2rem(20);  
38 - margin-bottom: px2rem(20);  
39 - table { 29 + margin-top: pxToRem(20px);
  30 + margin-bottom: pxToRem(20px);
  31 + font-size: pxToRem(24px);
  32 + line-height: pxToRem(36px);
  33 +
  34 + &.table{
  35 + display: table;
40 width: 100%; 36 width: 100%;
41 - tbody td{ 37 + .row{
  38 + display: table-row;
  39 + .column{
  40 + display: table-cell;
42 padding: 0.4em 0.8em; 41 padding: 0.4em 0.8em;
43 - border:3px solid white;  
44 - font-size: px2rem(24); 42 + border:2px solid white;
  43 + font-size: pxToRem(24px);
45 background-color: $tableCellC; 44 background-color: $tableCellC;
46 } 45 }
47 } 46 }
48 } 47 }
  48 +
  49 + // table {
  50 + // width: 100%;
  51 + // tbody td{
  52 + // padding: 0.4em 0.8em;
  53 + // border:3px solid white;
  54 + // font-size: pxToRem(24px);
  55 + // background-color: $tableCellC;
  56 + // }
  57 + // }
  58 + }
49 } 59 }
50 .gap-block{ 60 .gap-block{
51 min-height: 30rem/$pxConvertRem; 61 min-height: 30rem/$pxConvertRem;
@@ -57,15 +67,15 @@ $tableCellC:#eee; @@ -57,15 +67,15 @@ $tableCellC:#eee;
57 // overflow: hidden; 67 // overflow: hidden;
58 .is-new-lable{ 68 .is-new-lable{
59 position: absolute; 69 position: absolute;
60 - left: px2rem(108);  
61 - top:px2rem(40);  
62 - height: px2rem(35);  
63 - width:px2rem(70); 70 + left: pxToRem(108px);
  71 + top:pxToRem(40px);
  72 + height: pxToRem(35px);
  73 + width:pxToRem(70px);
64 74
65 color:#fff; 75 color:#fff;
66 text-align: center; 76 text-align: center;
67 - font-size: px2rem(20);  
68 - line-height: px2rem(35); 77 + font-size: pxToRem(20px);
  78 + line-height: pxToRem(35px);
69 background-color: #7cd881; 79 background-color: #7cd881;
70 z-index: 16; 80 z-index: 16;
71 } 81 }
@@ -78,7 +88,7 @@ $tableCellC:#eee; @@ -78,7 +88,7 @@ $tableCellC:#eee;
78 88
79 .swiper-pagination{ 89 .swiper-pagination{
80 position:absolute; 90 position:absolute;
81 - bottom: px2rem(40); 91 + bottom: pxToRem(40px);
82 .swiper-pagination-bullet { 92 .swiper-pagination-bullet {
83 margin-right: 2px; 93 margin-right: 2px;
84 } 94 }
@@ -90,9 +100,9 @@ $tableCellC:#eee; @@ -90,9 +100,9 @@ $tableCellC:#eee;
90 } 100 }
91 101
92 .banner-swiper { 102 .banner-swiper {
93 - min-height: px2rem(600);  
94 - min-width: px2rem(448);  
95 - margin: px2rem(30) px2rem(96); 103 + min-height: pxToRem(600px);
  104 + min-width: pxToRem(448px);
  105 + margin: pxToRem(30px) pxToRem(96px);
96 // position: relative; 106 // position: relative;
97 overflow: hidden; 107 overflow: hidden;
98 ul { 108 ul {
@@ -107,55 +117,55 @@ $tableCellC:#eee; @@ -107,55 +117,55 @@ $tableCellC:#eee;
107 117
108 118
109 .goodsName { 119 .goodsName {
110 - min-height: px2rem(83);  
111 - font-size: px2rem(28); 120 + min-height: pxToRem(83px);
  121 + font-size: pxToRem(28px);
112 color: #fff; 122 color: #fff;
113 - padding-left: px2rem(25);  
114 - padding-right: px2rem(25);  
115 - line-height: px2rem(36); 123 + padding-left: pxToRem(25px);
  124 + padding-right: pxToRem(25px);
  125 + line-height: pxToRem(36px);
116 background-color: #515150; 126 background-color: #515150;
117 } 127 }
118 128
119 .goodsSubtitle{ 129 .goodsSubtitle{
120 - min-height: px2rem(87);  
121 - font-size: px2rem(24);  
122 - line-height: px2rem(36); 130 + min-height: pxToRem(87px);
  131 + font-size: pxToRem(24px);
  132 + line-height: pxToRem(36px);
123 color:$subFontC; 133 color:$subFontC;
124 - padding-left:px2rem(28);  
125 - padding-right:px2rem(28);  
126 - border-bottom: 1px solid $borderC; 134 + padding-left:pxToRem(28px);
  135 + padding-right:pxToRem(28px);
  136 + border-bottom: 2px solid $borderC;
127 background-color: #f4f4f4; 137 background-color: #f4f4f4;
128 } 138 }
129 139
130 .price-date{ 140 .price-date{
131 // width: 100%; 141 // width: 100%;
132 color:$subFontC; 142 color:$subFontC;
133 - min-height: px2rem(88);  
134 - padding-left:px2rem(28);  
135 - padding-right:px2rem(28);  
136 - border-bottom: 1px solid $borderC; 143 + min-height: pxToRem(88px);
  144 + padding-left:pxToRem(28px);
  145 + padding-right:pxToRem(28px);
  146 + border-bottom: 2px solid $borderC;
137 } 147 }
138 .goodsPrice{ 148 .goodsPrice{
139 float: left; 149 float: left;
140 - font-size: px2rem(34.59); 150 + font-size: pxToRem(34.59px);
141 h1{ 151 h1{
142 display: inline-block; 152 display: inline-block;
143 - line-height: px2rem(88); 153 + line-height: pxToRem(88px);
144 } 154 }
145 .currentPrice{ 155 .currentPrice{
146 color:red; 156 color:red;
147 - margin-right: px2rem(10); 157 + margin-right: pxToRem(10px);
148 } 158 }
149 .previousPrice{ 159 .previousPrice{
150 text-decoration:line-through; 160 text-decoration:line-through;
151 } 161 }
152 } 162 }
153 .periodOfMarket{ 163 .periodOfMarket{
154 - font-size: px2rem(24); 164 + font-size: pxToRem(24px);
155 float: right; 165 float: right;
156 h1{ 166 h1{
157 display: inline-block; 167 display: inline-block;
158 - line-height: px2rem(88); 168 + line-height: pxToRem(88px);
159 } 169 }
160 } 170 }
161 .goodsName, 171 .goodsName,
@@ -169,39 +179,40 @@ $tableCellC:#eee; @@ -169,39 +179,40 @@ $tableCellC:#eee;
169 } 179 }
170 .vipLevel { 180 .vipLevel {
171 display: table; 181 display: table;
172 - min-height: px2rem(88);  
173 - padding-left:px2rem(28);  
174 - padding-right:px2rem(28);  
175 - font-size: px2rem(22); 182 + min-height: pxToRem(88px);
  183 + padding-left:pxToRem(28px);
  184 + padding-right:pxToRem(28px);
  185 + font-size: pxToRem(22px);
176 color: #999999; 186 color: #999999;
177 187
178 - border-bottom: 1px solid $borderC; 188 + border-bottom: 2px solid $borderC;
179 span{ 189 span{
180 display: table-cell; 190 display: table-cell;
181 vertical-align: middle; 191 vertical-align: middle;
182 } 192 }
183 .vip-img{ 193 .vip-img{
184 - padding-right: px2rem(22); 194 + padding-right: pxToRem(22px);
185 img{ 195 img{
186 - width: px2rem(52);  
187 - height: px2rem(32); 196 + width: pxToRem(52px);
  197 + height: pxToRem(32px);
188 } 198 }
189 } 199 }
190 .vip-price{ 200 .vip-price{
191 - padding-right: px2rem(55); 201 + padding-right: pxToRem(55px);
192 } 202 }
193 .vip-price:last-child{ 203 .vip-price:last-child{
194 padding-right: 0; 204 padding-right: 0;
195 } 205 }
196 } 206 }
197 .goodsDiscount{ 207 .goodsDiscount{
198 - min-height: px2rem(88);  
199 - padding-left:px2rem(28);  
200 - padding-right:px2rem(28);  
201 - font-size: px2rem(28); 208 + min-height: pxToRem(88px);
  209 + padding-left:pxToRem(28px);
  210 + padding-right:pxToRem(28px);
  211 + font-size: pxToRem(28px);
202 color: $mainFontC; 212 color: $mainFontC;
203 - line-height: px2rem(88);  
204 - border-bottom: 1px solid $borderC; 213 + line-height: pxToRem(88px);
  214 + border-bottom: 2px solid $borderC;
  215 +
205 .iconfont{ 216 .iconfont{
206 // padding-right:28rem/$pxConvertRem; 217 // padding-right:28rem/$pxConvertRem;
207 font-size: inherit; 218 font-size: inherit;
@@ -212,7 +223,7 @@ $tableCellC:#eee; @@ -212,7 +223,7 @@ $tableCellC:#eee;
212 } 223 }
213 224
214 .feedback-list-page { 225 .feedback-list-page {
215 - padding-top: px2rem(30); 226 + padding-top: pxToRem(30px);
216 background-color: #f0f0f0; 227 background-color: #f0f0f0;
217 228
218 .nav-tab{ 229 .nav-tab{
@@ -220,20 +231,20 @@ $tableCellC:#eee; @@ -220,20 +231,20 @@ $tableCellC:#eee;
220 } 231 }
221 232
222 .nav-tab { 233 .nav-tab {
223 - height: px2rem(60);  
224 - padding: px2rem(10) 0; 234 + height: pxToRem(60px);
  235 + padding: pxToRem(10px) 0;
225 background-color: #fff; 236 background-color: #fff;
226 - border-top: 1px solid $borderC;  
227 - border-bottom: 1px solid $borderC; 237 + border-top: 2px solid $borderC;
  238 + border-bottom: 2px solid $borderC;
228 } 239 }
229 240
230 .comment-nav, .consult-nav { 241 .comment-nav, .consult-nav {
231 box-sizing: border-box; 242 box-sizing: border-box;
232 float: left; 243 float: left;
233 width: 50%; 244 width: 50%;
234 - height: px2rem(60);  
235 - line-height: px2rem(60);  
236 - font-size: px2rem(28); 245 + height: pxToRem(60px);
  246 + line-height: pxToRem(60px);
  247 + font-size: pxToRem(28px);
237 text-align: center; 248 text-align: center;
238 color: #ccc; 249 color: #ccc;
239 250
@@ -243,13 +254,13 @@ $tableCellC:#eee; @@ -243,13 +254,13 @@ $tableCellC:#eee;
243 } 254 }
244 255
245 .comment-nav { 256 .comment-nav {
246 - border-right: 1px solid #ccc; 257 + border-right: 2px solid #ccc;
247 } 258 }
248 259
249 .comment-content{ 260 .comment-content{
250 .comment-content-main{ 261 .comment-content-main{
251 background-color: #fff; 262 background-color: #fff;
252 - border-bottom: 1px solid $borderC; 263 + border-bottom: 2px solid $borderC;
253 .user-name{ 264 .user-name{
254 font-size: px2rem(24); 265 font-size: px2rem(24);
255 line-height: px2rem(62); 266 line-height: px2rem(62);
@@ -265,6 +276,20 @@ $tableCellC:#eee; @@ -265,6 +276,20 @@ $tableCellC:#eee;
265 .detail-content{ 276 .detail-content{
266 font-size: px2rem(28); 277 font-size: px2rem(28);
267 line-height: px2rem(36); 278 line-height: px2rem(36);
  279 + font-size: pxToRem(24px);
  280 + line-height: pxToRem(62px);
  281 + color:$mainFontC;
  282 + padding-left: pxToRem(28px);
  283 + padding-right: pxToRem(18px);
  284 + }
  285 + .goods-spec,
  286 + .comment-time{
  287 + font-size: pxToRem(24px);
  288 + line-height: pxToRem(62px);
  289 + }
  290 + .detail-content{
  291 + font-size: pxToRem(28px);
  292 + line-height: pxToRem(36px);
268 } 293 }
269 .goods-spec, 294 .goods-spec,
270 .detail-content{ 295 .detail-content{
@@ -277,6 +302,11 @@ $tableCellC:#eee; @@ -277,6 +302,11 @@ $tableCellC:#eee;
277 } 302 }
278 .detail-content{ 303 .detail-content{
279 padding-right: px2rem(28); 304 padding-right: px2rem(28);
  305 + padding-left: pxToRem(28px);
  306 +
  307 + }
  308 + .detail-content{
  309 + padding-right: pxToRem(28px);
280 310
281 } 311 }
282 .comment-time{ 312 .comment-time{
@@ -285,13 +315,14 @@ $tableCellC:#eee; @@ -285,13 +315,14 @@ $tableCellC:#eee;
285 } 315 }
286 316
287 .comment-content-footer{ 317 .comment-content-footer{
288 - min-height: px2rem(88); 318 + min-height: pxToRem(88px);
289 text-align: center; 319 text-align: center;
290 background-color: #fff; 320 background-color: #fff;
291 321
292 - border-bottom: 1px solid $borderC;  
293 - line-height: px2rem(88);  
294 - font-size: px2rem(28); 322 + border-bottom: 2px solid $borderC;
  323 + line-height: pxToRem(88px);
  324 + font-size: pxToRem(28px);
  325 +
295 a{ 326 a{
296 color: #e0e0e0; 327 color: #e0e0e0;
297 .iconfont{ 328 .iconfont{
@@ -308,7 +339,7 @@ $tableCellC:#eee; @@ -308,7 +339,7 @@ $tableCellC:#eee;
308 } 339 }
309 340
310 .enter-store{ 341 .enter-store{
311 - min-height: px2rem(100); 342 + min-height: pxToRem(100px);
312 display: table; 343 display: table;
313 a{ 344 a{
314 display: table-cell; 345 display: table-cell;
@@ -319,19 +350,19 @@ $tableCellC:#eee; @@ -319,19 +350,19 @@ $tableCellC:#eee;
319 // padding-right: 35rem/$pxConvertRem; 350 // padding-right: 35rem/$pxConvertRem;
320 img{ 351 img{
321 352
322 - width: px2rem(109);  
323 - height: px2rem(68); 353 + width: pxToRem(109px);
  354 + height: pxToRem(68px);
324 355
325 margin-left: 0; 356 margin-left: 0;
326 - margin-right: px2rem(-25); 357 + margin-right: pxToRem(-25px);
327 } 358 }
328 } 359 }
329 .store-name{ 360 .store-name{
330 - font-size: px2rem(34); 361 + font-size: pxToRem(34px);
331 color:$mainFontC; 362 color:$mainFontC;
332 } 363 }
333 .store-link{ 364 .store-link{
334 - font-size:px2rem(28) ; 365 + font-size:pxToRem(28px) ;
335 color:$subFontC; 366 color:$subFontC;
336 text-align: right; 367 text-align: right;
337 span{ 368 span{
@@ -339,9 +370,51 @@ $tableCellC:#eee; @@ -339,9 +370,51 @@ $tableCellC:#eee;
339 } 370 }
340 } 371 }
341 } 372 }
342 - .goods-desc{  
343 - table{ 373 + // .goods-desc{
  374 + // table{
344 375
  376 + // }
  377 + // }
  378 + .materials{
  379 + .detail{
  380 + img{
  381 + display: block;
  382 + overflow: hidden;
  383 + width: pxToRem(90px);
  384 + height: pxToRem(120px);
  385 + padding-right: pxToRem(20px);
  386 + float: left;
  387 + }
  388 + .material-desc{
  389 + // float: left;
  390 + font-size: pxToRem(24px);
  391 + }
  392 + }
  393 + }
  394 +
  395 + .product-detail{
  396 + .detail{
  397 + img{
  398 + margin-top: pxToRem(20px);
  399 + width: pxToRem(581px);
  400 + height: pxToRem(772px);
  401 + }
  402 + }
  403 + }
  404 +
  405 + .detail-swiper{
  406 + .swiper-wrapper{
  407 + .swiper-slide{
  408 + width: pxToRem(114px);
  409 + div{
  410 + text-align: center;
  411 + }
  412 + div.cell{
  413 + background-color: $tableCellC;
  414 + padding:pxToRem(15px) 0;
  415 + border: 1px solid #fff;
  416 + }
  417 + }
345 } 418 }
346 } 419 }
347 } 420 }
  1 +{{> layout/header}}
  2 +<div class="online-service-page yoho-page">
  3 + <form class="question-search">
  4 +
  5 + </form>
  6 + <ul class="question-list">
  7 + <li class="question-item">
  8 + 问题问
  9 + <span class="iconfont">&#xe604;</span>
  10 + </li>
  11 + <li class="question-item">
  12 + 问题问
  13 + <span class="iconfont">&#xe604;</span>
  14 + </li>
  15 + <li class="question-item">
  16 + 问题问
  17 + <span class="iconfont">&#xe604;</span>
  18 + </li>
  19 + </ul>
  20 +</div>
  21 +{{> layout/footer}}
  1 +
1 {{> layout/header}} 2 {{> layout/header}}
2 <div class="good-detail-page yoho-page"> 3 <div class="good-detail-page yoho-page">
3 4
@@ -125,27 +126,23 @@ @@ -125,27 +126,23 @@
125 <span class="en-title">{{enTitle}}</span> 126 <span class="en-title">{{enTitle}}</span>
126 </h1> 127 </h1>
127 {{#detail}} 128 {{#detail}}
128 - <div class="detail">  
129 - <table>  
130 - <tbody>  
131 - <tr>  
132 - <td>编号：{{nubmer}}</td>  
133 - <td>帽型：{{hatType}}</td>  
134 - </tr>  
135 - <tr>  
136 - <td>颜色：{{color}}</td>  
137 - <td>帽檐：{{bongrace}}</td>  
138 - </tr>  
139 - <tr>  
140 - <td>类型：{{type}}</td>  
141 - <td>细节：{{goodsDetail}}</td>  
142 - </tr>  
143 - <tr>  
144 - <td>性别：{{gender}}</td>  
145 - <td>风格：{{style}}</td>  
146 - </tr>  
147 - </tbody>  
148 - </table> 129 + <div class="detail table">
  130 + <div class="row">
  131 + <div class="column">编号：{{nubmer}}</div>
  132 + <div class="column">帽型：{{hatType}}</div>
  133 + </div>
  134 + <div class="row">
  135 + <div class="column">颜色：{{color}}</div>
  136 + <div class="column">帽檐：{{bongrace}}</div>
  137 + </div>
  138 + <div class="row">
  139 + <div class="column">类型：{{type}}</div>
  140 + <div class="column">细节：{{goodsDetail}}</div>
  141 + </div>
  142 + <div class="row">
  143 + <div class="column">性别：{{gender}}</div>
  144 + <div class="column">风格：{{style}}</div>
  145 + </div>
149 </div> 146 </div>
150 {{/detail}} 147 {{/detail}}
151 </div> 148 </div>
@@ -153,15 +150,29 @@ @@ -153,15 +150,29 @@
153 150
154 <div class="gap-block"></div> 151 <div class="gap-block"></div>
155 152
  153 + {{#sizeInfo}}
156 <div class="size-info page-block"> 154 <div class="size-info page-block">
157 <h1 class="title"> 155 <h1 class="title">
158 - 尺码信息  
159 - <span class="en-title">SIZE INFO</span> 156 + {{title}}
  157 + <span class="en-title">{{enTitle}}</span>
160 </h1> 158 </h1>
  159 + {{#detail}}
161 <div class="detail"> 160 <div class="detail">
162 - 161 + <div class="swiper-container detail-swiper" id="size-swiper-container">
  162 + <div class="swiper-wrapper">
  163 + {{#list}}
  164 + <div class="swiper-slide blue-slide" >
  165 + <div class="size-name cell">{{name}}</div>
  166 + <div class="size-m cell">{{sizem}}</div>
  167 + <div class="size-xl cell">{{sizexl}}</div>
  168 + </div>
  169 + {{/list}}
  170 + </div>
163 </div> 171 </div>
164 </div> 172 </div>
  173 + {{/detail}}
  174 + </div>
  175 + {{/sizeInfo}}
165 176
166 <div class="gap-block"></div> 177 <div class="gap-block"></div>
167 178
@@ -177,6 +188,32 @@ @@ -177,6 +188,32 @@
177 188
178 <div class="gap-block"></div> 189 <div class="gap-block"></div>
179 190
  191 + {{#reference}}
  192 + <div class="size-info page-block">
  193 + <h1 class="title">
  194 + {{title}}
  195 + <span class="en-title">{{enTitle}}</span>
  196 + </h1>
  197 + {{#detail}}
  198 + <div class="detail">
  199 + <div class="swiper-container detail-swiper" id="reference-swiper-container">
  200 + <div class="swiper-wrapper">
  201 + {{#list}}
  202 + <div class="swiper-slide blue-slide" >
  203 + <div class="model-name cell">{{name}}</div>
  204 + <div class="first-model cell">{{firstModel}}</div>
  205 + <div class="second-model cell">{{secondModel}}</div>
  206 + </div>
  207 + {{/list}}
  208 + </div>
  209 + </div>
  210 + </div>
  211 + {{/detail}}
  212 + </div>
  213 + {{/reference}}
  214 +
  215 + <div class="gap-block"></div>
  216 +
180 {{#materials}} 217 {{#materials}}
181 <div class="materials page-block"> 218 <div class="materials page-block">
182 <h1 class="title"> 219 <h1 class="title">
@@ -186,6 +223,7 @@ @@ -186,6 +223,7 @@
186 <div class="detail"> 223 <div class="detail">
187 <img src="{{img}}" alt=""> 224 <img src="{{img}}" alt="">
188 <p class="material-desc"> 225 <p class="material-desc">
  226 +
189 {{desc}} 227 {{desc}}
190 </p> 228 </p>
191 </div> 229 </div>
@@ -194,15 +232,18 @@ @@ -194,15 +232,18 @@
194 232
195 <div class="gap-block"></div> 233 <div class="gap-block"></div>
196 234
197 - <div class="size-info page-block"> 235 + {{#productDetail}}
  236 + <div class="product-detail page-block">
198 <h1 class="title"> 237 <h1 class="title">
199 - 商品详情  
200 - <span class="en-title">SIZE INFO</span> 238 + {{title}}
  239 + <span class="en-title">{{enTitle}}</span>
201 </h1> 240 </h1>
202 <div class="detail"> 241 <div class="detail">
203 - 242 + <p>{{desc}}</p>
  243 + <img src="{{img}}" alt="">
204 </div> 244 </div>
205 </div> 245 </div>
  246 + {{/productDetail}}
206 247
207 </div> 248 </div>
208 {{> layout/footer}} 249 {{> layout/footer}}
@@ -248,6 +248,12 @@ class HomeController extends AbstractAction @@ -248,6 +248,12 @@ class HomeController extends AbstractAction
248 $service = \Index\UserModel::getOnlineServiceData(); 248 $service = \Index\UserModel::getOnlineServiceData();
249 249
250 print_r($service); 250 print_r($service);
  251 +
  252 + $this->_view->display('online_service', array(
  253 + 'onlineServicePage' => true,
  254 + 'pageFooter' => true,
  255 + 'service' => $service
  256 + ));
251 } 257 }
252 258
253 /** 259 /**
@@ -110,18 +110,34 @@ SHOE BQT KEN BLOCK', @@ -110,18 +110,34 @@ SHOE BQT KEN BLOCK',
110 'detail' =>array( 110 'detail' =>array(
111 'list'=>array( 111 'list'=>array(
112 array( 112 array(
113 - 'size'=>'M',  
114 - 'shoulderWidth'=>'43',  
115 - 'bodyLength'=>'102',  
116 - 'sleevesLength'=>'65',  
117 - 'chestMeasurement'=>'90' 113 + 'name'=>'尺寸',
  114 + 'sizem'=>'m',
  115 + 'sizexl' =>'XL'
118 ), 116 ),
119 array( 117 array(
120 - 'size'=>'XL',  
121 - 'shoulderWidth'=>'46',  
122 - 'bodyLength'=>'106',  
123 - 'sleevesLength'=>'69',  
124 - 'chestMeasurement'=>'96' 118 + 'name'=>'肩宽',
  119 + 'sizem'=>'43',
  120 + 'sizexl' =>'46'
  121 + ),
  122 + array(
  123 + 'name'=>'衣长',
  124 + 'sizem'=>'102',
  125 + 'sizexl' =>'106'
  126 + ),
  127 + array(
  128 + 'name'=>'肩宽',
  129 + 'sizem'=>'90',
  130 + 'sizexl' =>'96'
  131 + ),
  132 + array(
  133 + 'name'=>'胸围',
  134 + 'sizem'=>'90',
  135 + 'sizexl' =>'96'
  136 + ),
  137 + array(
  138 + 'name'=>'xx',
  139 + 'sizem'=>'xx',
  140 + 'sizexl' =>'xx'
125 ) 141 )
126 ) 142 )
127 ) 143 )
@@ -143,23 +159,37 @@ SHOE BQT KEN BLOCK', @@ -143,23 +159,37 @@ SHOE BQT KEN BLOCK',
143 'title' => '模特试穿', 159 'title' => '模特试穿',
144 'enTitle' =>'REFERENCE', 160 'enTitle' =>'REFERENCE',
145 161
146 - 'detail'=>array(  
147 - 'list' => array( 162 + 'detail' =>array(
  163 + 'list'=>array(
  164 + array(
  165 + 'name'=>'头像',
  166 + 'firstModel'=>'',
  167 + 'secondModel' =>''
  168 + ),
  169 + array(
  170 + 'name'=>'模特',
  171 + 'firstModel'=>'Oliver',
  172 + 'secondModel' =>'Jvly'
  173 + ),
148 array( 174 array(
149 - 'avatar' =>'',  
150 - 'name' =>'Oliver',  
151 - 'height' => '170',  
152 - 'weight' =>'55',  
153 - 'BWH' =>'78/70/87',  
154 - 'size' =>'S' 175 + 'name'=>'身高',
  176 + 'firstModel'=>'175',
  177 + 'secondModel' =>'170'
155 ), 178 ),
156 array( 179 array(
157 - 'avatar' =>'',  
158 - 'name' =>'Jvly',  
159 - 'height' => '170',  
160 - 'weight' =>'59',  
161 - 'BWH' =>'78/70/87',  
162 - 'size' =>'L' 180 + 'name'=>'体重',
  181 + 'firstModel'=>'53',
  182 + 'secondModel' =>'59'
  183 + ),
  184 + array(
  185 + 'name'=>'三围',
  186 + 'firstModel'=>'78/70/87',
  187 + 'secondModel' =>'78/70/87'
  188 + ),
  189 + array(
  190 + 'name'=>'吊牌尺',
  191 + 'firstModel'=>'S',
  192 + 'secondModel' =>'L'
163 ) 193 )
164 ) 194 )
165 ) 195 )
@@ -173,8 +203,10 @@ SHOE BQT KEN BLOCK', @@ -173,8 +203,10 @@ SHOE BQT KEN BLOCK',
173 ), 203 ),
174 204
175 'productDetail' =>array( 205 'productDetail' =>array(
  206 + 'title' => '商品详情',
  207 + 'enTitle' =>'DETAILS',
176 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。', 208 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
177 - 'img' =>'' 209 + 'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
178 ) 210 )
179 211
180 ); 212 );