fe / YOHOBUYPC · Commits

Go to a project

Authored by Rock Zhang
Commit 66e9a71a38b60eb7e23064a078a83fdb90105535 2 parents 316e7867 7ba786e9

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

Inline Side-by-side
Showing 10 changed files with 542 additions and 165 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);
@@ -8,10 +8,11 @@ var page = 1, @@ -8,10 +8,11 @@ var page = 1,
8 hotnav, 8 hotnav,
9 listTop, 9 listTop,
10 navSwiper, 10 navSwiper,
  11 + notab=0,
11 sort = '', 12 sort = '',
12 id = ''; 13 id = '';
13 14
14 -function hotrank(page, sort, tabId) { 15 +function hotrank(page, sort, tabId, notab) {
15 $.ajax({ 16 $.ajax({
16 type: 'GET', 17 type: 'GET',
17 url: '/product/newsale/selectHotrank', 18 url: '/product/newsale/selectHotrank',
@@ -19,13 +20,19 @@ function hotrank(page, sort, tabId) { @@ -19,13 +20,19 @@ function hotrank(page, sort, tabId) {
19 data: { 20 data: {
20 page: page, 21 page: page,
21 sort: sort, 22 sort: sort,
22 - tab_id: tabId 23 + tab_id: tabId,
  24 + notab: notab
23 }, 25 },
24 success: function(data) { 26 success: function(data) {
25 if (page === 1) { 27 if (page === 1) {
26 - $('#hotRank').html(''); 28 + $('.rank-main').html('');
  29 + }
  30 + console.log(notab);
  31 + if (notab === 1) {
  32 + $('.rank-main').append(data);
  33 + } else {
  34 + $('#hotRank').append(data);
27 } 35 }
28 - $('#hotRank').append(data);  
29 lazyLoad($('img.lazy')); 36 lazyLoad($('img.lazy'));
30 $('#yoho-footer').css('position', 'static'); 37 $('#yoho-footer').css('position', 'static');
31 $('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top'); 38 $('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top');
@@ -43,9 +50,9 @@ function hotrank(page, sort, tabId) { @@ -43,9 +50,9 @@ function hotrank(page, sort, tabId) {
43 var navItme = $('.s-goods-nav .nav-item').eq(index); 50 var navItme = $('.s-goods-nav .nav-item').eq(index);
44 51
45 id = navItme.data('id') ? navItme.data('id') : ''; 52 id = navItme.data('id') ? navItme.data('id') : '';
46 - sort = navItme.data('sort') ? navItme.data('sort') : '';  
47 page = 1; 53 page = 1;
48 - hotrank(page, sort, id); 54 + notab = 1;
  55 + hotrank(page, sort, id, notab);
49 }); 56 });
50 }); 57 });
51 } 58 }
@@ -60,7 +67,8 @@ $(window).scroll(function () { @@ -60,7 +67,8 @@ $(window).scroll(function () {
60 return; 67 return;
61 } 68 }
62 page = 2; 69 page = 2;
63 - hotrank(page, sort, id); 70 + notab = 1;
  71 + hotrank(page, sort, id, notab);
64 72
65 }); 73 });
66 -hotrank(page, sort, id); 74 +hotrank(page, sort, id, notab);
  1 +@function rem($n) {
  2 + @return $n / 40 * 1rem;
  3 +}
  4 +
  5 +.online-service-detail-page{
  6 + .question {
  7 + background: #fff;
  8 + }
  9 +
  10 + .question-title {
  11 + padding: rem(20) rem(30);
  12 + font-size: rem(28);
  13 + line-height: 1;
  14 + color: #b0b0b0;
  15 + }
  16 +
  17 + .question-tab {
  18 + padding: rem(10) rem(30) rem(30);
  19 + font-size: rem(32);
  20 + line-height: rem(58);
  21 + text-align: center;
  22 + color: #b0b0b0;
  23 + .current {
  24 + color: #444;
  25 + }
  26 + .line {
  27 + padding: 0 rem(32);
  28 + }
  29 + }
  30 +
  31 + .question-list {
  32 + display: none;
  33 + border-top: 1px solid #ccc;
  34 + border-bottom: 1px solid #ccc;
  35 + &.current {
  36 + display: block;
  37 + }
  38 + li {
  39 + margin-left: rem(30);
  40 + width: rem(610);
  41 + font-size: rem(28);
  42 + line-height: rem(90);
  43 + border-bottom: 1px solid #ccc;
  44 + a {
  45 + display: block;
  46 + color: #444;
  47 + }
  48 + .iconfont {
  49 + float: right;
  50 + margin-right: rem(30);
  51 + color: #ccc;
  52 + }
  53 + &:last-child {
  54 + border-bottom: none;
  55 + }
  56 + }
  57 + }
  58 +
  59 + .connect-info {
  60 + margin-top: 30px;
  61 + font-size: rem(28);
  62 + line-height: rem(50);
  63 + background: #fff;
  64 + border-top: 1px solid #ccc;
  65 + border-bottom: 1px solid #ccc;
  66 + p {
  67 + margin-top: rem(25);
  68 + margin-left: rem(-72);
  69 + line-height: 1.5;
  70 + }
  71 + .iconfont {
  72 + float: right;
  73 + color: #ccc;
  74 + }
  75 + .connect-item {
  76 + position: relative;
  77 + a {
  78 + display: block;
  79 + padding: rem(20) rem(30) rem(20) rem(94);
  80 + color: #444;
  81 + }
  82 + &:after {
  83 + content: '';
  84 + position: absolute;
  85 + right: 0;
  86 + bottom: 0;
  87 + width: rem(548);
  88 + height: 1px;
  89 + background: #ccc;
  90 + }
  91 + &:last-child {
  92 + &:after {
  93 + content: none;
  94 + }
  95 + }
  96 + }
  97 + .icon-chat {
  98 + @include retina-sprite($customerIcons, chat);
  99 + }
  100 + .icon-tel {
  101 + @include retina-sprite($customerIcons, tel);
  102 + }
  103 + .icon {
  104 + display: inline-block;
  105 + margin-right: rem(14);
  106 + margin-left: rem(-70);
  107 + vertical-align:middle;
  108 + }
  109 + }
  110 +}
  111 +
  112 +.online-service-detail-page {
  113 + .qa-list {
  114 + background: #f0f0f0;
  115 + .question-item {
  116 + margin-bottom: rem(32);
  117 + border-top: 1px solid #c8c7cc;
  118 + border-bottom: 1px solid #c8c7cc;
  119 + background: #fff;
  120 + &:last-child {
  121 + margin-bottom: 0;
  122 + }
  123 + }
  124 + %qa {
  125 + margin-left: rem(30);
  126 + padding: 0 rem(40) 0 rem(10);
  127 + font-size: rem(30);
  128 + line-height: rem(76);
  129 + font-weight: bold;
  130 + }
  131 + .question {
  132 + @extend %qa;
  133 + position: relative;
  134 + &:after {
  135 + content: '';
  136 + position: absolute;
  137 + left: 0;
  138 + bottom: 0;
  139 + width: 100%;
  140 + border-top: 1px solid #c8c7cc;
  141 + }
  142 + }
  143 + .answer {
  144 + @extend %qa;
  145 + }
  146 + }
  147 +}
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 {  
40 - width: 100%;  
41 - tbody td{ 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;
  36 + width: 100%;
  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 + }
  46 + }
47 } 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 + // }
48 } 58 }
49 } 59 }
50 .gap-block{ 60 .gap-block{
@@ -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{
  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 + }
344 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 + <div class="question">
  4 + <div class="question-title">问题查询</div>
  5 + <div class="question-tab">
  6 + <span class="tab-item" data-tab="order">订单问题</span>
  7 + <span class="line">|</span>
  8 + <span class="tab-item current" data-tab="shopping">购物问题</span>
  9 + <span class="line">|</span>
  10 + <span class="tab-item" data-tab="other">其他问题</span>
  11 + </div>
  12 + {{#question}}
  13 + <ul class="question-list {{#current}}current{{/current}}" data-tab-name="{{name}}">
  14 + {{#list}}
  15 + <li class="question-item">
  16 + <a href="{{link}}" title="{{title}}">
  17 + {{title}}
  18 + <span class="iconfont icon-yoho-enter"></span>
  19 + </a>
  20 + </li>
  21 + {{/list}}
  22 + </ul>
  23 + {{/question}}
  24 + </div>
  25 + <div class="connect-info">
  26 + <div class="connect-item connect-online">
  27 + <a href="#" title="在线客服">
  28 + <span class="icon icon-chat"></span>
  29 + 在线客服
  30 + <span class="iconfont icon-yoho-enter"></span>
  31 + </a>
  32 + </div>
  33 + <div class="connect-item connect-tel">
  34 + <a href="tel:400-889-9649" title="电话客服">
  35 + <span class="icon icon-tel"></span>
  36 + 电话客服
  37 + <p>
  38 + 400-889-9649 &nbsp;&nbsp; 09:00 - 22:30 &nbsp; (周一至周日)
  39 + </p>
  40 + </a>
  41 +
  42 + </div>
  43 + </div>
  44 +</div>
  45 +{{> layout/footer}}
  1 +{{> layout/header}}
  2 +<div class="online-service-detail-page yoho-page">
  3 + <div class="qa-list">
  4 + {{# list}}
  5 + <div class="question-item">
  6 + <div class="question">Q：{{q}}</div>
  7 + <div class="answer">{{a}}</div>
  8 + </div>
  9 + {{/ list}}
  10 + </div>
  11 +</div>
  12 +{{> 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 -  
163 - </div> 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>
  171 + </div>
  172 + </div>
  173 + {{/detail}}
164 </div> 174 </div>
  175 + {{/sizeInfo}}
165 176
166 <div class="gap-block"></div> 177 <div class="gap-block"></div>
167 178
@@ -176,6 +187,32 @@ @@ -176,6 +187,32 @@
176 </div> 187 </div>
177 188
178 <div class="gap-block"></div> 189 <div class="gap-block"></div>
  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>
179 216
180 {{#materials}} 217 {{#materials}}
181 <div class="materials page-block"> 218 <div class="materials page-block">
@@ -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}}
@@ -166,12 +166,14 @@ class HomeController extends AbstractAction @@ -166,12 +166,14 @@ class HomeController extends AbstractAction
166 $this->setTitle('优惠券'); 166 $this->setTitle('优惠券');
167 $this->setNavHeader('优惠券', true, SITE_MAIN); 167 $this->setNavHeader('优惠券', true, SITE_MAIN);
168 // $uid = $this->getUid(); 168 // $uid = $this->getUid();
169 - $uid = 967016; 169 + $uid = 8826435;
170 $status = $this->get('status', 0); 170 $status = $this->get('status', 0);
171 $coupons = array( 171 $coupons = array(
172 'couponsUrl' => \Index\UserModel::getCouponData($uid, $status), 172 'couponsUrl' => \Index\UserModel::getCouponData($uid, $status),
173 'couponsPage' => true 173 'couponsPage' => true
174 ); 174 );
  175 +
  176 + print_r($coupons);
175 $this->_view->display('coupons', $coupons); 177 $this->_view->display('coupons', $coupons);
176 178
177 } 179 }
@@ -246,6 +248,12 @@ class HomeController extends AbstractAction @@ -246,6 +248,12 @@ class HomeController extends AbstractAction
246 $service = \Index\UserModel::getOnlineServiceData(); 248 $service = \Index\UserModel::getOnlineServiceData();
247 249
248 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 + ));
249 } 257 }
250 258
251 /** 259 /**
@@ -110,20 +110,36 @@ SHOE BQT KEN BLOCK', @@ -110,20 +110,36 @@ 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'  
118 - ), 113 + 'name'=>'尺寸',
  114 + 'sizem'=>'m',
  115 + 'sizexl' =>'XL'
  116 + ),
119 array( 117 array(
120 - 'size'=>'XL',  
121 - 'shoulderWidth'=>'46',  
122 - 'bodyLength'=>'106',  
123 - 'sleevesLength'=>'69',  
124 - 'chestMeasurement'=>'96'  
125 - )  
126 - ) 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'
  141 + )
  142 + )
127 ) 143 )
128 ), 144 ),
129 145
@@ -143,26 +159,40 @@ SHOE BQT KEN BLOCK', @@ -143,26 +159,40 @@ SHOE BQT KEN BLOCK',
143 'title' => '模特试穿', 159 'title' => '模特试穿',
144 'enTitle' =>'REFERENCE', 160 'enTitle' =>'REFERENCE',
145 161
146 - 'detail'=>array(  
147 - 'list' => array(  
148 - array(  
149 - 'avatar' =>'',  
150 - 'name' =>'Oliver',  
151 - 'height' => '170',  
152 - 'weight' =>'55',  
153 - 'BWH' =>'78/70/87',  
154 - 'size' =>'S'  
155 - ),  
156 - array(  
157 - 'avatar' =>'',  
158 - 'name' =>'Jvly',  
159 - 'height' => '170',  
160 - 'weight' =>'59',  
161 - 'BWH' =>'78/70/87',  
162 - 'size' =>'L'  
163 - )  
164 - )  
165 - ) 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 + ),
  174 + array(
  175 + 'name'=>'身高',
  176 + 'firstModel'=>'175',
  177 + 'secondModel' =>'170'
  178 + ),
  179 + array(
  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'
  193 + )
  194 + )
  195 + )
166 ), 196 ),
167 197
168 'materials' => array( 198 'materials' => array(
@@ -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 );