fe / YOHOBUYWAP · Commits

Go to a project

Authored by Lynnic
Commit 942c7780560eb59059a6fc7fcfd2a8776d57eb6b 1 parent ededf149

添加商品详情数据结构

Inline Side-by-side
Showing 3 changed files with 876 additions and 977 deletions
@@ -1058,222 +1058,159 @@ @@ -1058,222 +1058,159 @@
1058 'pageHeader': { 1058 'pageHeader': {
1059 'navBack': 'sss ', 1059 'navBack': 'sss ',
1060 'navHome': 'sss ', 1060 'navHome': 'sss ',
1061 - 'navTitle': '商品详情TEST' 1061 + 'navTitle': '商品详情'
1062 }, 1062 },
1063 1063
1064 'bannerTop': { 1064 'bannerTop': {
1065 - 'list': {  
1066 - array (  
1067 - 'url' => '',  
1068 - 'img' => 'http://img13.static.yhbimg.com/goodsimg/2015/10/18/03/0250c3935f86dbd2baa7d45603d19fd637.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'  
1069 - ),  
1070 - array (  
1071 - 'url' => '',  
1072 - 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/12/03/01bf4cf4444035a1930d33a9d0f8bff4fa.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90' ),  
1073 - array (  
1074 - 'url' => '',  
1075 - 'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/12/03/01d7ef2f624eeea15e80bb374607aea317.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'  
1076 - )  
1077 - } 1065 + 'list': [
  1066 + {
  1067 + 'url' : '',
  1068 + 'img' : 'http://img13.static.yhbimg.com/goodsimg/2015/10/18/03/0250c3935f86dbd2baa7d45603d19fd637.jpg?imageMogr2/thumbnail/450x600/extent/450x600/background/d2hpdGU=/position/center/quality/90'
  1069 + },
  1070 + ...
  1071 + ]
  1072 + },
  1073 + 'goodsName' : 'Stussy No. 4 BOX TEE ',
  1074 + 'goodsSubtitle' : '【全民拼抢购】经典印花T恤，满4件免一件！',
  1075 +
  1076 + 'goodsPrice' : {
  1077 + 'currentPrice' : '¥298.00',
  1078 + 'previousPrice' : '¥598.00'
  1079 + },
  1080 + 'periodOfMarket' : '11月',
  1081 + 'goodsTitle' : '¥298.00',
  1082 + 'vipLevel' : {
  1083 + 'list' : [
  1084 + {
  1085 + 'img':'http://static.dev.yohobuy.com/img/product/silver.png',
  1086 + 'text' : '¥284.00'
  1087 + },
  1088 + ...
  1089 + ]
  1090 + },
  1091 + 'goodsDiscount' : {
  1092 + 'list' : [
  1093 + {
  1094 + 'text' : '【BACK TO SCHOOL】满￥499赠送Paul
  1095 + Franke帽子一个，多买多送！'
  1096 + },
  1097 + ...
  1098 + ],
  1099 + 'feedbacks' : {
  1100 + 'commentsNum' : 0,
  1101 + 'consultsNum' : 1,
  1102 + 'link' : '',
  1103 + 'comments' : [
  1104 + {
  1105 + 'userName' : 'Lynnic',
  1106 + 'desc' : '购买了白色Mate7',
  1107 + 'content' : '活动时买的，挺超值。上身效果也不错。质量
  1108 +很好，买送人的，很满意。而且物流相当给...',
  1109 + 'time' : '2014-08-12 10:24:26'
  1110 + },
  1111 + ...
  1112 + ],
  1113 + 'consults' : [
  1114 + {
  1115 + 'question' : '您好 我一米七七 140斤 穿M的行吗',
  1116 + 'time' : '2014-08-12 10:24:26',
  1117 + 'answer' : '您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'
  1118 + },
  1119 + ...
  1120 + ]
  1121 + },
  1122 +
  1123 + 'enterStore' : {
  1124 + 'img' : 'http://static.dev.yohobuy.com/img/product/store.png',
  1125 + 'storeName' : 'Stussy',
  1126 + 'url' : 'http://stussy.m.yohobuy.com/'
1078 }, 1127 },
1079 - 'goodsName' => 'Stussy No. 4 BOX TEE DC SPAR HIGH WC  
1080 -SHOE BQT KEN BLOCK',  
1081 - 'goodsSubtitle'=>'【全民拼抢购】经典印花T恤，满4件免一件！全场低至  
1082 -9.9元，拼购时代High起来。',  
1083 -  
1084 - 'goodsPrice' =>array(  
1085 - 'currentPrice'=>'¥298.00',  
1086 - 'previousPrice'=>'¥598.00'  
1087 - ),  
1088 - 'periodOfMarket'=>'11月',  
1089 - 'goodsTitle' => '¥298.00',  
1090 - 'vipLevel' => array (  
1091 - 'list' => array (  
1092 - array (  
1093 - 'img'=>'http://static.dev.yohobuy.com/img/product/silver.png',  
1094 - 'text' => '¥284.00'  
1095 - ),  
1096 - array ( 'img'=>'http://static.dev.yohobuy.com/img/product/golden.png',  
1097 - 'text' => '¥269.00'  
1098 - ),  
1099 - array (  
1100 - 'img'=>'http://static.dev.yohobuy.com/img/product/platinum.png',  
1101 - 'text' => '¥263.00'  
1102 - )  
1103 - )  
1104 -// ),  
1105 -// 'goodsDiscount'=>array(  
1106 -// 'list'=>array(  
1107 -// '【summer final sale】满¥499立享6.8折',  
1108 -// '【BACK TO SCHOOL】满￥499赠送Paul  
1109 -// Franke帽子一个，多买多送！',  
1110 -// '【BACK TO SCHOOL】满￥499赠送Paul  
1111 -// Franke帽子一个，多买多送！'  
1112 -// )  
1113 -// ),  
1114 -// 'feedbacks'=>array(  
1115 -// 'commentsNum'=>0,  
1116 -// 'consultsNum'=>1,  
1117 -// // 'commentName'=>'商品评价',  
1118 -// // 'consultName' =>'购买咨询',  
1119 -// 'link'=>'',  
1120 -// 'comments'=>array(  
1121 -// array(  
1122 -// 'userName'=>'Lynnic',  
1123 -// 'desc'=>'购买了白色Mate7',  
1124 -// 'content'=>'活动时买的，挺超值。上身效果也不错。质量  
1125 -//很好，买送人的，很满意。而且物流相当给...',  
1126 -// 'time'=>'2014-08-12 10:24:26'  
1127 -// )  
1128 -// ),  
1129 -// 'consults'=>array(  
1130 -// array(  
1131 -// 'question' =>'您好 我一米七七 140斤 穿M的行吗',  
1132 -// 'time'=>'2014-08-12 10:24:26',  
1133 -// 'answer'=>'您好，建议您参考XL的款式，由于版型和个人穿衣风格不同，需要'  
1134 -// )  
1135 -// )  
1136 -// ),  
1137 -//  
1138 -// 'enterStore'=>array(  
1139 -// 'img'=>'http://static.dev.yohobuy.com/img/product/store.png',  
1140 -// 'storeName'=>'Stussy',  
1141 -// 'url'=>'http://stussy.m.yohobuy.com/'  
1142 -// ),  
1143 -//  
1144 -// 'goodsDescription'=>array(  
1145 -// 'title' =>'商品描述',  
1146 -// 'enTitle'=>'DESCRIPTON',  
1147 -//  
1148 -// 'detail'=>array(  
1149 -// 'nubmer' =>'51018059',  
1150 -// 'color' =>'黑',  
1151 -// 'type' =>'帽子',  
1152 -// 'gender' =>'女款',  
1153 -// 'hatType' =>'棒球帽',  
1154 -// 'bongrace' =>'平檐款式',  
1155 -// 'goodsDetail'=>'字母图案',  
1156 -// 'style'=>'街头'  
1157 -// )  
1158 -// ),  
1159 -//  
1160 -// 'sizeInfo'=>array(  
1161 -// 'title' => '尺码信息',  
1162 -// 'enTitle' =>'xSIZE INFO',  
1163 -//  
1164 -// 'detail' =>array(  
1165 -// 'list'=>array(  
1166 -// array(  
1167 -// 'name'=>'尺寸',  
1168 -// 'sizem'=>'m',  
1169 -// 'sizexl' =>'XL'  
1170 -// ),  
1171 -// array(  
1172 -// 'name'=>'肩宽',  
1173 -// 'sizem'=>'43',  
1174 -// 'sizexl' =>'46'  
1175 -// ),  
1176 -// array(  
1177 -// 'name'=>'衣长',  
1178 -// 'sizem'=>'102',  
1179 -// 'sizexl' =>'106'  
1180 -// ),  
1181 -// array(  
1182 -// 'name'=>'肩宽',  
1183 -// 'sizem'=>'90',  
1184 -// 'sizexl' =>'96'  
1185 -// ),  
1186 -// array(  
1187 -// 'name'=>'胸围',  
1188 -// 'sizem'=>'90',  
1189 -// 'sizexl' =>'96'  
1190 -// ),  
1191 -// array(  
1192 -// 'name'=>'xx',  
1193 -// 'sizem'=>'xx',  
1194 -// 'sizexl' =>'xx'  
1195 -// )  
1196 -// )  
1197 -// )  
1198 -// ),  
1199 -//  
1200 -// 'measurementMethod'=>array(  
1201 -// 'title' => '测量方式',  
1202 -// 'enTitle' =>'MEASUREMENT METHOD',  
1203 -//  
1204 -// 'detail'=>array(  
1205 -// 'sort' =>'上衣' ,  
1206 -// 'enSort'=>'TOPS',  
1207 -// 'img' =>'http://static.dev.yohobuy.com/img/product/tops.png',  
1208 -// 'items'=>array(  
1209 -// '肩宽(两端肩线间的直线长度)',  
1210 -// '胸围(两端肩线间的直线长度)',  
1211 -// '肩宽(两端肩线间的直线长度)',  
1212 -// '肩宽(两端肩线间的直线长度)',  
1213 -// '肩宽(两端肩线间的直线长度)',  
1214 -// '肩宽(两端肩线间的直线长度)'  
1215 -// )  
1216 -// )  
1217 -// ),  
1218 -//  
1219 -// 'reference' => array(  
1220 -// 'title' => '模特试穿',  
1221 -// 'enTitle' =>'REFERENCE',  
1222 -//  
1223 -// 'detail' =>array(  
1224 -// 'list'=>array(  
1225 -// array(  
1226 -// 'fieldName'=>'1 ',  
1227 -// 'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',  
1228 -// 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'  
1229 -// ),  
1230 -// array(  
1231 -// 'fieldName'=>'模特',  
1232 -// 'firstModel'=>'Oliver',  
1233 -// 'secondModel' =>'Jvly'  
1234 -// ),  
1235 -// array(  
1236 -// 'fieldName'=>'身高',  
1237 -// 'firstModel'=>'175',  
1238 -// 'secondModel' =>'170'  
1239 -// ),  
1240 -// array(  
1241 -// 'fieldName'=>'体重',  
1242 -// 'firstModel'=>'53',  
1243 -// 'secondModel' =>'59'  
1244 -// ),  
1245 -// array(  
1246 -// 'fieldName'=>'三围',  
1247 -// 'firstModel'=>'78/70/87',  
1248 -// 'secondModel' =>'78/70/87'  
1249 -// ),  
1250 -// array(  
1251 -// 'fieldName'=>'吊牌尺',  
1252 -// 'firstModel'=>'S',  
1253 -// 'secondModel' =>'L'  
1254 -// )  
1255 -// )  
1256 -// )  
1257 -// ),  
1258 -//  
1259 -// 'materials' => array(  
1260 -// 'title' => '商品材质',  
1261 -// 'enTitle' =>'MATERIALS',  
1262 -// 'img' => 'http://static.dev.yohobuy.com/img/product/material.png',  
1263 -// 'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。',  
1264 -// 'materialType'=>'http://static.dev.yohobuy.com/img/product/material-type.png'  
1265 -// ),  
1266 -//  
1267 -// 'productDetail' =>array(  
1268 -// 'title' => '商品详情',  
1269 -// 'enTitle' =>'DETAILS',  
1270 -// 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',  
1271 -// 'img' =>'http://static.dev.yohobuy.com/img/product/product.png'  
1272 -// ),  
1273 -//  
1274 -// 'cartInfo' =>array(  
1275 -// 'numInCart' => 3,  
1276 -// 'goodsInstore'=>0  
1277 -// )  
1278 -//  
1279 -// );  
  1128 +
  1129 + 'goodsDescription' : {
  1130 + 'title' : '商品描述',
  1131 + 'enTitle' : 'DESCRIPTON',
  1132 +
  1133 + 'detail' : {
  1134 + 'nubmer' : '51018059',
  1135 + 'color' : '黑',
  1136 + 'type' : '帽子',
  1137 + 'gender' : '女款',
  1138 + 'hatType' : '棒球帽',
  1139 + 'bongrace' : '平檐款式',
  1140 + 'goodsDetail' : '字母图案',
  1141 + 'style' : '街头'
  1142 + }
  1143 + },
  1144 +
  1145 + 'sizeInfo' : {
  1146 + 'title' : '尺码信息',
  1147 + 'enTitle' : 'xSIZE INFO',
  1148 +
  1149 + 'detail' : {
  1150 + 'list' : [
  1151 + {
  1152 + 'name' : '尺寸',
  1153 + 'sizem' : 'm',
  1154 + 'sizexl' : 'XL'
  1155 + },
  1156 + ...
  1157 + ]
  1158 + }
  1159 + },
  1160 +
  1161 + 'measurementMethod' : {
  1162 + 'title' : '测量方式',
  1163 + 'enTitle' : 'MEASUREMENT METHOD',
  1164 +
  1165 + 'detail' : {
  1166 + 'sort' : '上衣' ,
  1167 + 'enSort' : 'TOPS',
  1168 + 'img' : 'http://static.dev.yohobuy.com/img/product/tops.png',
  1169 + 'items' : [
  1170 + 'item' : '肩宽(两端肩线间的直线长度)',
  1171 + ...
  1172 + ]
  1173 + }
  1174 + },
  1175 +
  1176 + 'reference' : {
  1177 + 'title' : '模特试穿',
  1178 + 'enTitle' : 'REFERENCE',
  1179 +
  1180 + 'detail' : {
  1181 + 'list' : [
  1182 + array{
  1183 + 'fieldName' : '头像',
  1184 + 'firstModel' : 'http://static.dev.yohobuy.com/img/product/avatar1.png',
  1185 + 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
  1186 + },
  1187 + {
  1188 + 'fieldName' : '模特',
  1189 + 'firstModel' : 'Oliver',
  1190 + 'secondModel' : 'Jvly'
  1191 + },
  1192 + ...
  1193 + ]
  1194 + }
  1195 + },
  1196 +
  1197 + 'materials' : {
  1198 + 'title' : '商品材质',
  1199 + 'enTitle' : 'MATERIALS',
  1200 + 'img' : 'http://static.dev.yohobuy.com/img/product/material.png',
  1201 + 'desc' : '用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。',
  1202 + 'materialType' : 'http://static.dev.yohobuy.com/img/product/material-type.png'
  1203 + },
  1204 +
  1205 + 'productDetail' : {
  1206 + 'title' : '商品详情',
  1207 + 'enTitle' : 'DETAILS',
  1208 + 'desc' : 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
  1209 + 'img' : 'http://static.dev.yohobuy.com/img/product/product.png'
  1210 + },
  1211 +
  1212 + 'cartInfo' : {
  1213 + 'numInCart' : 3,
  1214 + 'goodsInstore' : 0
  1215 + }
  1216 + }
@@ -3,637 +3,600 @@ $subFontC:#b0b0b0; @@ -3,637 +3,600 @@ $subFontC:#b0b0b0;
3 $borderC:#e0e0e0; 3 $borderC:#e0e0e0;
4 $tableCellC:#eee; 4 $tableCellC:#eee;
5 $basicBtnC:#eb0313; 5 $basicBtnC:#eb0313;
6 -  
7 .my-swiper-button-prev, 6 .my-swiper-button-prev,
8 .my-swiper-button-next { 7 .my-swiper-button-next {
9 - position: absolute;  
10 - top: 50%;  
11 - width: pxToRem(48px);  
12 - height: pxToRem(48px);  
13 - margin-top: pxToRem(-44px);  
14 - cursor: pointer;  
15 - -moz-background-size: pxToRem(48px) pxToRem(48px);  
16 - -webkit-background-size: pxToRem(48px) pxToRem(48px);  
17 - background-size: pxToRem(48px) pxToRem(48px);  
18 - background-position: center;  
19 - background-repeat: no-repeat; 8 + position: absolute;
  9 + top: 50%;
  10 + width: pxToRem(48px);
  11 + height: pxToRem(48px);
  12 + margin-top: pxToRem(-44px);
  13 + cursor: pointer;
  14 + -moz-background-size: pxToRem(48px) pxToRem(48px);
  15 + -webkit-background-size: pxToRem(48px) pxToRem(48px);
  16 + background-size: pxToRem(48px) pxToRem(48px);
  17 + background-position: center;
  18 + background-repeat: no-repeat;
20 } 19 }
21 20
22 .next-grey { 21 .next-grey {
23 - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");  
24 - right: pxToRem(30px);  
25 - left: auto; 22 + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
  23 + right: pxToRem(30px);
  24 + left: auto;
26 } 25 }
27 26
28 .prev-grey { 27 .prev-grey {
29 - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");  
30 - left: pxToRem(30px);  
31 - right: auto; 28 + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f0f0f0'%2F%3E%3C%2Fsvg%3E");
  29 + left: pxToRem(30px);
  30 + right: auto;
32 } 31 }
33 32
34 .good-detail-page { 33 .good-detail-page {
35 - overflow: hidden;  
36 -  
37 - .page-block{  
38 - box-sizing:border-box;  
39 - width: 100%;  
40 - border-bottom: 2px solid $borderC;  
41 - border-top: 1px solid $borderC;  
42 - padding: 0 pxToRem(28px);  
43 - >.title{  
44 - line-height: pxToRem(88px);  
45 - color: $mainFontC;  
46 - font-size : pxToRem(28px);  
47 - border-bottom: 1px solid $borderC;  
48 -  
49 - span{  
50 - color:#a0a0a0;  
51 - font-size:pxToRem(18px);  
52 - }  
53 - }  
54 - .detail{  
55 - margin-top: pxToRem(20px);  
56 - margin-bottom: pxToRem(20px);  
57 - font-size: pxToRem(24px);  
58 - line-height: pxToRem(36px);  
59 -  
60 - &.table{  
61 - display: table;  
62 - width: 100%;  
63 - .row{  
64 - display: table-row;  
65 - .column{  
66 - display: table-cell;  
67 - padding: 0.4em 0.8em;  
68 - border:1px solid #fff;  
69 - font-size: pxToRem(24px);  
70 - background-color: $tableCellC;  
71 - }  
72 - }  
73 - }  
74 - }  
75 - }  
76 -  
77 - .gap-block{  
78 - min-height: 30rem/$pxConvertRem;  
79 - background-color: #f0f0f0;  
80 - }  
81 -  
82 - .banner-container{  
83 - position: relative;  
84 - // overflow: hidden;  
85 - .is-new-lable{  
86 - position: absolute;  
87 - left: pxToRem(108px);  
88 - top:pxToRem(40px);  
89 - height: pxToRem(35px);  
90 - width:pxToRem(70px);  
91 -  
92 - color:#fff;  
93 - text-align: center;  
94 - font-size: pxToRem(20px);  
95 - line-height: pxToRem(35px);  
96 - background-color: #7cd881;  
97 - // z-index: 16;  
98 - }  
99 - }  
100 - .banner-top{  
101 - // width: 100%;  
102 - min-height: 660rem / $pxConvertRem;  
103 - overflow: hidden;  
104 - position: relative;  
105 -  
106 - .swiper-pagination{  
107 - position:absolute;  
108 - bottom: pxToRem(40px);  
109 - .swiper-pagination-bullet {  
110 - margin-right: 2px;  
111 - }  
112 - .swiper-pagination-bullet-active {  
113 - background-color: #000; 34 + overflow: hidden;
  35 + .page-block {
  36 + box-sizing: border-box;
  37 + width: 100%;
  38 + border-bottom: 2px solid $borderC;
  39 + border-top: 1px solid $borderC;
  40 + padding: 0 pxToRem(28px);
  41 + >.title {
  42 + line-height: pxToRem(88px);
  43 + color: $mainFontC;
  44 + font-size: pxToRem(28px);
  45 + border-bottom: 1px solid $borderC;
  46 + span {
  47 + color: #a0a0a0;
  48 + font-size: pxToRem(18px);
  49 + }
  50 + }
  51 + .detail {
  52 + margin-top: pxToRem(20px);
  53 + margin-bottom: pxToRem(20px);
  54 + font-size: pxToRem(24px);
  55 + line-height: pxToRem(36px);
  56 + &.table {
  57 + display: table;
  58 + width: 100%;
  59 + .row {
  60 + display: table-row;
  61 + .column {
  62 + display: table-cell;
  63 + padding: 0.4em 0.8em;
  64 + border: 1px solid #fff;
  65 + font-size: pxToRem(24px);
  66 + background-color: $tableCellC;
  67 + }
114 } 68 }
115 -  
116 - }  
117 -  
118 - }  
119 -  
120 - .banner-swiper {  
121 - min-height: pxToRem(600px);  
122 - min-width: pxToRem(448px);  
123 - margin: pxToRem(30px) pxToRem(96px);  
124 - // position: relative;  
125 - overflow: hidden;  
126 - ul {  
127 - position: relative;  
128 - height: 100%;  
129 - li {  
130 - float: left;  
131 - height: 100%;  
132 - }  
133 - }  
134 -  
135 - }  
136 -  
137 -  
138 - .goodsName {  
139 - box-sizing:border-box;  
140 - width: 100%;  
141 - min-height: pxToRem(83px);  
142 - font-size: pxToRem(28px);  
143 - color: #fff;  
144 - padding-left: pxToRem(25px);  
145 - padding-right: pxToRem(25px);  
146 - line-height: pxToRem(36px);  
147 - background-color: #515150;  
148 - }  
149 -  
150 - .goodsSubtitle{  
151 - min-height: pxToRem(87px);  
152 - font-size: pxToRem(24px);  
153 - line-height: pxToRem(36px);  
154 - color:$subFontC;  
155 - padding-left:pxToRem(28px);  
156 - padding-right:pxToRem(28px);  
157 - border-bottom:1px solid $borderC;  
158 - background-color: #f4f4f4;  
159 - }  
160 -  
161 - .price-date{  
162 - // width: 100%;  
163 - color:$subFontC;  
164 - min-height: pxToRem(88px);  
165 - padding-left:pxToRem(28px);  
166 - padding-right:pxToRem(28px);  
167 - border-bottom: 1px solid $borderC;  
168 - }  
169 - .goodsPrice{  
170 - float: left;  
171 - font-size: pxToRem(34.59px);  
172 - h1{  
173 - display: inline-block;  
174 - line-height: pxToRem(88px);  
175 - }  
176 - .currentPrice{  
177 - color:red;  
178 - margin-right: pxToRem(10px);  
179 - }  
180 - .previousPrice{  
181 - text-decoration:line-through;  
182 - }  
183 - }  
184 - .periodOfMarket{  
185 - font-size: pxToRem(24px);  
186 - float: right;  
187 - h1{  
188 - display: inline-block;  
189 - line-height: pxToRem(88px);  
190 - }  
191 - }  
192 - .goodsName,  
193 - .goodsSubtitle{  
194 - // width: 100%;  
195 - display:table;  
196 - span{  
197 - display: table-cell;  
198 - vertical-align: middle;  
199 - }  
200 - }  
201 - .vipLevel {  
202 - width: 100%;  
203 - box-sizing:border-box;  
204 - display: table;  
205 - min-height: pxToRem(88px);  
206 - padding-left:pxToRem(28px);  
207 - padding-right:pxToRem(28px);  
208 - font-size: pxToRem(22px);  
209 - color: #999999;  
210 -  
211 - border-bottom: 1px solid $borderC;  
212 - span{  
213 - display: table-cell;  
214 - vertical-align: middle;  
215 - }  
216 - .vip-img{  
217 - padding-right: pxToRem(22px);  
218 - img{  
219 - width: pxToRem(52px);  
220 - height: pxToRem(32px);  
221 - }  
222 - }  
223 - .vip-price{  
224 - padding-right: pxToRem(55px);  
225 - }  
226 - .vip-price:last-child{  
227 - padding-right: 0;  
228 - }  
229 - }  
230 - .goodsDiscount{  
231 -  
232 - font-size: pxToRem(28px);  
233 - color: $mainFontC;  
234 - border-bottom: 1px solid $borderC;  
235 - h1{  
236 - padding : pxToRem(30px) pxToRem(28px); 69 + }
  70 + }
  71 + }
  72 + .gap-block {
  73 + min-height: 30rem/$pxConvertRem;
  74 + background-color: #f0f0f0;
  75 + }
  76 + .banner-container {
  77 + position: relative;
  78 + // overflow: hidden;
  79 + .is-new-lable {
  80 + position: absolute;
  81 + left: pxToRem(108px);
  82 + top: pxToRem(40px);
  83 + height: pxToRem(35px);
  84 + width: pxToRem(70px);
  85 + color: #fff;
  86 + text-align: center;
  87 + font-size: pxToRem(20px);
  88 + line-height: pxToRem(35px);
  89 + background-color: #7cd881;
  90 + // z-index: 16;
  91 + }
  92 + }
  93 + .banner-top {
  94 + // width: 100%;
  95 + min-height: 660rem / $pxConvertRem;
  96 + overflow: hidden;
  97 + position: relative;
  98 + .swiper-pagination {
  99 + position: absolute;
  100 + bottom: pxToRem(40px);
  101 + .swiper-pagination-bullet {
  102 + margin-right: 2px;
  103 + }
  104 + .swiper-pagination-bullet-active {
  105 + background-color: #000;
  106 + }
  107 + }
  108 + }
  109 + .banner-swiper {
  110 + min-height: pxToRem(600px);
  111 + min-width: pxToRem(448px);
  112 + margin: pxToRem(30px) pxToRem(96px);
  113 + // position: relative;
  114 + overflow: hidden;
  115 + ul {
  116 + position: relative;
  117 + height: 100%;
  118 + li {
  119 + float: left;
  120 + height: 100%;
  121 + }
  122 + }
  123 + }
  124 + .goodsName {
  125 + box-sizing: border-box;
  126 + width: 100%;
  127 + min-height: pxToRem(83px);
  128 + font-size: pxToRem(28px);
  129 + color: #fff;
  130 + padding-left: pxToRem(25px);
  131 + padding-right: pxToRem(25px);
  132 + line-height: pxToRem(36px);
  133 + background-color: #515150;
  134 + }
  135 + .goodsSubtitle {
  136 + min-height: pxToRem(87px);
  137 + font-size: pxToRem(24px);
237 line-height: pxToRem(36px); 138 line-height: pxToRem(36px);
238 - // line-height: pxToRem(88px); 139 + color: $subFontC;
  140 + padding-left: pxToRem(28px);
  141 + padding-right: pxToRem(28px);
  142 + border-bottom: 1px solid $borderC;
  143 + background-color: #f4f4f4;
  144 + }
  145 + .price-date {
  146 + // width: 100%;
  147 + color: $subFontC;
  148 + min-height: pxToRem(88px);
  149 + padding-left: pxToRem(28px);
  150 + padding-right: pxToRem(28px);
  151 + border-bottom: 1px solid $borderC;
  152 + }
  153 + .goodsPrice {
  154 + float: left;
  155 + font-size: pxToRem(34.59px);
  156 + h1 {
  157 + display: inline-block;
  158 + line-height: pxToRem(88px);
  159 + }
  160 + .currentPrice {
  161 + color: red;
  162 + margin-right: pxToRem(10px);
  163 + }
  164 + .previousPrice {
  165 + text-decoration: line-through;
  166 + }
239 } 167 }
240 - .iconfont{  
241 - display: inline-block;  
242 - width: pxToRem(35px);  
243 - font-size: pxToRem(45px); 168 + .periodOfMarket {
  169 + font-size: pxToRem(24px);
244 float: right; 170 float: right;
245 - color:#e0e0e0;  
246 - // padding-left:pxToRem(50px); 171 + h1 {
  172 + display: inline-block;
  173 + line-height: pxToRem(88px);
  174 + }
  175 + }
  176 + .goodsName,
  177 + .goodsSubtitle {
  178 + // width: 100%;
  179 + display: table;
  180 + span {
  181 + display: table-cell;
  182 + vertical-align: middle;
  183 + }
  184 + }
  185 + .vipLevel {
  186 + width: 100%;
  187 + box-sizing: border-box;
  188 + display: table;
  189 + min-height: pxToRem(88px);
  190 + padding-left: pxToRem(28px);
  191 + padding-right: pxToRem(28px);
  192 + font-size: pxToRem(22px);
  193 + color: #999999;
  194 + border-bottom: 1px solid $borderC;
  195 + span {
  196 + display: table-cell;
  197 + vertical-align: middle;
  198 + }
  199 + .vip-img {
  200 + padding-right: pxToRem(22px);
  201 + img {
  202 + width: pxToRem(52px);
  203 + height: pxToRem(32px);
  204 + }
  205 + }
  206 + .vip-price {
  207 + padding-right: pxToRem(55px);
  208 + }
  209 + .vip-price:last-child {
  210 + padding-right: 0;
  211 + }
  212 + }
  213 + .goodsDiscount {
  214 + font-size: pxToRem(28px);
  215 + color: $mainFontC;
  216 + border-bottom: 1px solid $borderC;
  217 + h1 {
  218 + padding: pxToRem(30px) pxToRem(28px);
  219 + line-height: pxToRem(36px);
  220 + // line-height: pxToRem(88px);
  221 + }
  222 + .iconfont {
  223 + display: inline-block;
  224 + width: pxToRem(35px);
  225 + font-size: pxToRem(45px);
  226 + float: right;
  227 + color: #e0e0e0;
  228 + // padding-left:pxToRem(50px);
  229 + }
  230 + .discount-folder {
  231 + .folder-item {
  232 + border-top: 1px solid $borderC;
  233 + }
  234 + display: none;
  235 + }
  236 + }
  237 + .goodsSubtitle,
  238 + .goodsDiscount {
  239 + text-indent: pxToRem(-14px);
247 } 240 }
248 - .discount-folder{  
249 - .folder-item{ 241 + .feedback-list {
  242 + padding-top: pxToRem(30px);
  243 + background-color: #f0f0f0;
  244 + .nav-tab {
  245 + width: 100%;
  246 + }
  247 + .nav-tab {
  248 + height: pxToRem(60px);
  249 + padding: pxToRem(10px) 0;
  250 + background-color: #fff;
250 border-top: 1px solid $borderC; 251 border-top: 1px solid $borderC;
  252 + border-bottom: 1px solid $borderC;
  253 + }
  254 + .comment-nav,
  255 + .consult-nav {
  256 + box-sizing: border-box;
  257 + float: left;
  258 + width: 50%;
  259 + height: pxToRem(60px);
  260 + line-height: pxToRem(60px);
  261 + font-size: pxToRem(28px);
  262 + text-align: center;
  263 + color: #ccc;
  264 + &.focus {
  265 + color: #000;
  266 + }
  267 + }
  268 + .comment-nav {
  269 + border-right: 1px solid #ccc;
  270 + }
  271 + .content {
  272 + .content-main {
  273 + background-color: #fff;
  274 + border-bottom: 1px solid $borderC;
  275 + &.comment-content-main {
  276 + .user-name {
  277 + font-size: pxToRem(24px);
  278 + line-height: pxToRem(62px);
  279 + color: $mainFontC;
  280 + padding-left: pxToRem(28px);
  281 + padding-right: pxToRem(18px);
  282 + }
  283 + .goods-spec,
  284 + .comment-time {
  285 + font-size: pxToRem(24px);
  286 + line-height: pxToRem(62px);
  287 + }
  288 + .detail-content {
  289 + // font-size: pxToRem(28px);
  290 + // line-height: pxToRem(36px);
  291 + font-size: pxToRem(24px);
  292 + line-height: pxToRem(62px);
  293 + color: $mainFontC;
  294 + padding-left: pxToRem(28px);
  295 + padding-right: pxToRem(18px);
  296 + }
  297 + .goods-spec,
  298 + .comment-time {
  299 + font-size: pxToRem(24px);
  300 + line-height: pxToRem(62px);
  301 + }
  302 + .detail-content {
  303 + font-size: pxToRem(28px);
  304 + line-height: pxToRem(36px);
  305 + }
  306 + .goods-spec,
  307 + .detail-content {
  308 + color: $mainFontC;
  309 + }
  310 + .detail-content,
  311 + .comment-time {
  312 + padding-left: pxToRem(28px);
  313 + }
  314 + .detail-content {
  315 + padding-right: pxToRem(28px);
  316 + padding-left: pxToRem(28px);
  317 + }
  318 + .detail-content {
  319 + padding-right: pxToRem(28px);
  320 + }
  321 + .comment-time {
  322 + color: #c1c1c1;
  323 + }
  324 + }
  325 + &.consult-content-main {
  326 + padding-right: pxToRem(28px);
  327 + padding-left: pxToRem(28px);
  328 + padding-top: pxToRem(20px);
  329 + padding-bottom: pxToRem(20px);
  330 + .question {
  331 + font-size: pxToRem(24px);
  332 + color: $mainFontC;
  333 + span {
  334 + display: block;
  335 + float: left;
  336 + font-size: inherit;
  337 + padding-right: pxToRem(15px);
  338 + }
  339 + p {
  340 + overflow: hidden;
  341 + }
  342 + }
  343 + .time {
  344 + font-size: pxToRem(22px);
  345 + color: $subFontC;
  346 + }
  347 + .answer {
  348 + font-size: pxToRem(24px);
  349 + line-height: pxToRem(36px);
  350 + color: $subFontC;
  351 + margin-top: pxToRem(14px);
  352 + span {
  353 + display: block;
  354 + float: left;
  355 + font-size: inherit;
  356 + color: $mainFontC;
  357 + padding-right: pxToRem(15px);
  358 + }
  359 + p {
  360 + overflow: hidden;
  361 + }
  362 + }
  363 + }
  364 + }
  365 + }
  366 + .comment-content-footer,
  367 + .consult-content-footer {
  368 + min-height: pxToRem(88px);
  369 + text-align: center;
  370 + background-color: #fff;
  371 + border-bottom: 1px solid $borderC;
  372 + line-height: pxToRem(88px);
  373 + font-size: pxToRem(28px);
  374 + a {
  375 + color: #e0e0e0;
  376 + .iconfont {
  377 + font-size: inherit;
  378 + }
  379 + }
  380 + }
  381 + .content.hide {
  382 + display: none;
251 } 383 }
252 - display: none;  
253 } 384 }
254 -  
255 -}  
256 - .goodsSubtitle,  
257 - .goodsDiscount{  
258 - text-indent: pxToRem(-14px);  
259 - }  
260 - .feedback-list {  
261 - padding-top: pxToRem(30px);  
262 - background-color: #f0f0f0;  
263 -  
264 - .nav-tab{  
265 - width: 100%;  
266 - }  
267 -  
268 - .nav-tab {  
269 - height: pxToRem(60px);  
270 - padding: pxToRem(10px) 0;  
271 - background-color: #fff;  
272 - border-top: 1px solid $borderC;  
273 - border-bottom: 1px solid $borderC;  
274 - }  
275 -  
276 - .comment-nav, .consult-nav {  
277 - box-sizing: border-box;  
278 - float: left;  
279 - width: 50%;  
280 - height: pxToRem(60px);  
281 - line-height: pxToRem(60px);  
282 - font-size: pxToRem(28px);  
283 - text-align: center;  
284 - color: #ccc;  
285 -  
286 - &.focus {  
287 - color: #000;  
288 - }  
289 - }  
290 - .comment-nav {  
291 - border-right: 1px solid #ccc;  
292 - }  
293 - .content{  
294 - .content-main{  
295 - background-color: #fff;  
296 - border-bottom: 1px solid $borderC;  
297 - &.comment-content-main{  
298 - .user-name{  
299 - font-size: pxToRem(24px);  
300 - line-height: pxToRem(62px);  
301 - color:$mainFontC;  
302 - padding-left: pxToRem(28px);  
303 - padding-right: pxToRem(18px);  
304 - }  
305 - .goods-spec,  
306 - .comment-time{  
307 - font-size: pxToRem(24px);  
308 - line-height: pxToRem(62px);  
309 - }  
310 - .detail-content{  
311 - // font-size: pxToRem(28px);  
312 - // line-height: pxToRem(36px);  
313 - font-size: pxToRem(24px);  
314 - line-height: pxToRem(62px);  
315 - color:$mainFontC;  
316 - padding-left: pxToRem(28px);  
317 - padding-right: pxToRem(18px);  
318 - }  
319 - .goods-spec,  
320 - .comment-time{  
321 - font-size: pxToRem(24px);  
322 - line-height: pxToRem(62px);  
323 - }  
324 - .detail-content{  
325 - font-size: pxToRem(28px);  
326 - line-height: pxToRem(36px);  
327 - }  
328 - .goods-spec,  
329 - .detail-content{  
330 - color:$mainFontC;  
331 - }  
332 - .detail-content,  
333 - .comment-time{  
334 - padding-left: pxToRem(28px);  
335 -  
336 - }  
337 - .detail-content{  
338 - padding-right: pxToRem(28px);  
339 - padding-left: pxToRem(28px);  
340 - }  
341 - .detail-content{  
342 - padding-right: pxToRem(28px);  
343 - }  
344 - .comment-time{  
345 - color:#c1c1c1;  
346 - }  
347 - }  
348 - &.consult-content-main{  
349 - padding-right: pxToRem(28px);  
350 - padding-left: pxToRem(28px);  
351 - padding-top: pxToRem(20px);  
352 - padding-bottom: pxToRem(20px);  
353 - .question{  
354 - font-size: pxToRem(24px);  
355 - color:$mainFontC;  
356 - span{  
357 - display: block;  
358 - float: left;  
359 - font-size: inherit;  
360 - padding-right: pxToRem(15px);  
361 - }  
362 - p{  
363 - overflow: hidden;  
364 - }  
365 - }  
366 - .time{  
367 - font-size: pxToRem(22px);  
368 - color:$subFontC;  
369 - }  
370 - .answer{  
371 - font-size: pxToRem(24px);  
372 - line-height: pxToRem(36px);  
373 - color:$subFontC;  
374 - margin-top: pxToRem(14px);  
375 - span{  
376 - display: block;  
377 - float: left;  
378 - font-size: inherit;  
379 - color:$mainFontC;  
380 - padding-right: pxToRem(15px);  
381 - }  
382 - p{  
383 - overflow: hidden;  
384 - }  
385 - }  
386 - }  
387 -  
388 - }  
389 -  
390 -  
391 - }  
392 - .comment-content-footer,  
393 - .consult-content-footer{  
394 -  
395 - min-height: pxToRem(88px);  
396 - text-align: center;  
397 - background-color: #fff;  
398 -  
399 - border-bottom: 1px solid $borderC;  
400 - line-height: pxToRem(88px);  
401 - font-size: pxToRem(28px);  
402 -  
403 - a{  
404 - color: #e0e0e0;  
405 - .iconfont{  
406 - font-size: inherit;  
407 - }  
408 - }  
409 -  
410 - }  
411 -  
412 - .content.hide {  
413 - display: none;  
414 - }  
415 - }  
416 -.feedback-list .nodata{  
417 - height: pxToRem(88px);  
418 - font-size: pxToRem(28px);  
419 - line-height: pxToRem(88px);  
420 - background-color: #fff;  
421 - padding:0 pxToRem(28px);  
422 - .go-consult{  
423 - float: right;  
424 - color: $subFontC;  
425 - span{ 385 + .feedback-list .nodata {
  386 + height: pxToRem(88px);
  387 + font-size: pxToRem(28px);
  388 + line-height: pxToRem(88px);
  389 + background-color: #fff;
  390 + padding: 0 pxToRem(28px);
  391 + .go-consult {
  392 + float: right;
  393 + color: $subFontC;
  394 + span {
  395 + font-size: pxToRem(28px);
  396 + }
  397 + }
  398 + }
  399 + .enter-store {
  400 + min-height: pxToRem(100px);
  401 + display: table;
  402 + a {
  403 + display: table-cell;
  404 + vertical-align: middle;
  405 + text-align: left;
  406 + }
  407 + .store-logo {
  408 + // padding-right: 35rem/$pxConvertRem;
  409 + img {
  410 + width: pxToRem(109px);
  411 + height: pxToRem(68px);
  412 + margin-left: 0;
  413 + margin-right: pxToRem(-25px);
  414 + }
  415 + }
  416 + .store-name {
  417 + font-size: pxToRem(34px);
  418 + color: $mainFontC;
  419 + }
  420 + .store-link {
426 font-size: pxToRem(28px); 421 font-size: pxToRem(28px);
  422 + color: $subFontC;
  423 + text-align: right;
  424 + span {
  425 + font-size: inherit;
  426 + }
427 } 427 }
428 } 428 }
429 -}  
430 - .enter-store{  
431 - min-height: pxToRem(100px);  
432 - display: table;  
433 - a{  
434 - display: table-cell;  
435 - vertical-align: middle;  
436 - text-align: left;  
437 - }  
438 - .store-logo{  
439 - // padding-right: 35rem/$pxConvertRem;  
440 - img{  
441 - width: pxToRem(109px);  
442 - height: pxToRem(68px);  
443 - margin-left: 0;  
444 - margin-right: pxToRem(-25px);  
445 - }  
446 - }  
447 - .store-name{  
448 - font-size: pxToRem(34px);  
449 - color:$mainFontC;  
450 - }  
451 - .store-link{  
452 - font-size:pxToRem(28px) ;  
453 - color:$subFontC;  
454 - text-align: right;  
455 - span{  
456 - font-size: inherit;  
457 - }  
458 - }  
459 - }  
460 - .goods-desc{  
461 - .service{  
462 - width: pxToRem(489px);  
463 - height: pxToRem(28px);  
464 - margin-top: pxToRem(22px);  
465 - }  
466 - }  
467 - .tips{  
468 - color:$subFontC;  
469 - font-size: pxToRem(18px);  
470 - margin-top: pxToRem(20px);  
471 - }  
472 - .materials{  
473 - .detail{  
474 - img{  
475 - display: block;  
476 - overflow: hidden;  
477 - width: pxToRem(90px);  
478 - height: pxToRem(120px);  
479 - padding-right: pxToRem(20px);  
480 - float: left;  
481 - }  
482 - .material-desc{  
483 - font-size: pxToRem(24px);  
484 - overflow: hidden;  
485 -  
486 - }  
487 - }  
488 - .material-type{  
489 - width: pxToRem(581px);  
490 - height: pxToRem(99px);  
491 - border-top: 1px solid $borderC;  
492 - padding: pxToRem(17px) 0;  
493 - }  
494 - }  
495 -  
496 - .product-detail{  
497 - .detail{  
498 - img{  
499 - margin-top: pxToRem(20px);  
500 - width: pxToRem(581px);  
501 - height: pxToRem(772px);  
502 - }  
503 - }  
504 - margin-bottom: pxToRem(120px);  
505 - }  
506 -  
507 - .detail-swiper{  
508 - .swiper-wrapper{ 429 + .goods-desc {
  430 + .service {
  431 + width: pxToRem(489px);
  432 + height: pxToRem(28px);
  433 + margin-top: pxToRem(22px);
  434 + }
  435 + }
  436 + .tips {
  437 + color: $subFontC;
  438 + font-size: pxToRem(18px);
  439 + margin-top: pxToRem(20px);
  440 + }
  441 + .materials {
  442 + .detail {
  443 + img {
  444 + display: block;
  445 + overflow: hidden;
  446 + width: pxToRem(90px);
  447 + height: pxToRem(120px);
  448 + padding-right: pxToRem(20px);
  449 + float: left;
  450 + }
  451 + .material-desc {
  452 + font-size: pxToRem(24px);
  453 + overflow: hidden;
  454 + }
  455 + }
  456 + .material-type {
  457 + width: pxToRem(581px);
  458 + height: pxToRem(99px);
  459 + border-top: 1px solid $borderC;
  460 + padding: pxToRem(17px) 0;
  461 + }
  462 + }
  463 + .product-detail {
  464 + .detail {
  465 + img {
  466 + margin-top: pxToRem(20px);
  467 + width: pxToRem(581px);
  468 + height: pxToRem(772px);
  469 + }
  470 + }
  471 + margin-bottom: pxToRem(120px);
  472 + }
  473 + .detail-swiper {
  474 + .swiper-wrapper {
509 height: pxToRem(200px); 475 height: pxToRem(200px);
510 overflow: hidden; 476 overflow: hidden;
511 - .swiper-slide{  
512 - width: pxToRem(114px);  
513 - div{  
514 - text-align: center;  
515 - &.cell{  
516 - font-size: pxToRem(24px);  
517 - background-color: $tableCellC;  
518 - padding:pxToRem(15px) 0;  
519 - border: 1px solid #fff;  
520 - }  
521 - }  
522 - }  
523 - }  
524 - }  
525 -  
526 - #reference-swiper-container{  
527 -  
528 - .first-group{  
529 - width: pxToRem(70px);  
530 - margin-top: pxToRem(66px);  
531 - .avatar{  
532 - line-height: pxToRem(40px);  
533 - width: pxToRem(40px);  
534 - height: pxToRem(40px);  
535 - margin: pxToRem(18px) 0;  
536 - }  
537 - }  
538 - }  
539 -  
540 - .measurement-method{  
541 - .detail{  
542 - width: 100%;  
543 - height: pxToRem(260px);  
544 - img{  
545 - float:left;  
546 - width: pxToRem(270px);  
547 - height: pxToRem(239px);  
548 - margin-top: pxToRem(18px);  
549 - margin-right: pxToRem(28px);  
550 - }  
551 - .right-part{  
552 - overflow: hidden;  
553 - .title{  
554 - >h1{  
555 - margin-top: pxToRem(10px);  
556 - display: inline-block;  
557 - padding-right: pxToRem(10px);  
558 - border-right: 1px solid $borderC;  
559 - line-height: 100%;  
560 - }  
561 - >span{  
562 - font-size: pxToRem(12px);  
563 - }  
564 - }  
565 - ul.items{  
566 - margin-top: pxToRem(20px);  
567 - padding: 0;  
568 - line-height: pxToRem(30px);  
569 - font-size: pxToRem(13px);  
570 - li{  
571 - span{  
572 - display: inline-block;  
573 - width: pxToRem(15px);  
574 - height: pxToRem(15px);  
575 - background-color: $basicBtnC;  
576 - border-radius: 50%;  
577 - color:#fff;  
578 - text-align: center;  
579 - line-height: pxToRem(15px);  
580 - font-size: pxToRem(13px);  
581 - margin-right: pxToRem(12px);  
582 - vertical-align: text-bottom;  
583 - }  
584 - }  
585 - }  
586 - }  
587 - clear:both;  
588 - }  
589 - }  
590 - .cart-bar{  
591 - position: relative;  
592 - box-sizing:border-box;  
593 - width: 100%;  
594 - height: pxToRem(120px);  
595 - position:fixed;  
596 - bottom: 0;  
597 - background-color: #fff;  
598 - z-index:2;  
599 - padding:pxToRem(20px) pxToRem(28px);  
600 - text-align: center;  
601 - a{  
602 - display: inline-block;  
603 - &.num-incart{  
604 - font-size: pxToRem(47px);  
605 - color:#444;  
606 - }  
607 - &.favorite{  
608 - font-size: pxToRem(34px);  
609 - color:$basicBtnC;  
610 - }  
611 - &.addto-cart,  
612 - &.sold-out{  
613 - height: pxToRem(80px);  
614 - width: pxToRem(260px);  
615 - margin:0 pxToRem(100px) 0 pxToRem(115px);  
616 - color: #fff;  
617 - background-color: $basicBtnC;  
618 - font-size: pxToRem(40px);  
619 - line-height: pxToRem(80px);  
620 - text-align: center;  
621 - }  
622 - &.sold-out{  
623 - background-color: #f58189;  
624 - }  
625 - }  
626 - .num-tag{  
627 - position: absolute;  
628 - left:pxToRem(66px);  
629 - height: pxToRem(20px);  
630 - display: block;  
631 - width: pxToRem(36px);  
632 - height: pxToRem(36px);  
633 - background-color: $basicBtnC;  
634 - border-radius: 50%;  
635 - color:#fff;  
636 - font-size: pxToRem(24px);  
637 - }  
638 - } 477 + .swiper-slide {
  478 + width: pxToRem(114px);
  479 + div {
  480 + text-align: center;
  481 + &.cell {
  482 + font-size: pxToRem(24px);
  483 + background-color: $tableCellC;
  484 + padding: pxToRem(15px) 0;
  485 + border: 1px solid #fff;
  486 + }
  487 + }
  488 + }
  489 + }
  490 + }
  491 + #reference-swiper-container {
  492 + .first-group {
  493 + width: pxToRem(70px);
  494 + margin-top: pxToRem(66px);
  495 + .avatar {
  496 + line-height: pxToRem(40px);
  497 + width: pxToRem(40px);
  498 + height: pxToRem(40px);
  499 + margin: pxToRem(18px) 0;
  500 + }
  501 + }
  502 + }
  503 + .measurement-method {
  504 + .detail {
  505 + width: 100%;
  506 + height: pxToRem(260px);
  507 + img {
  508 + float: left;
  509 + width: pxToRem(270px);
  510 + height: pxToRem(239px);
  511 + margin-top: pxToRem(18px);
  512 + margin-right: pxToRem(28px);
  513 + }
  514 + .right-part {
  515 + overflow: hidden;
  516 + .title {
  517 + >h1 {
  518 + margin-top: pxToRem(10px);
  519 + display: inline-block;
  520 + padding-right: pxToRem(10px);
  521 + border-right: 1px solid $borderC;
  522 + line-height: 100%;
  523 + }
  524 + >span {
  525 + font-size: pxToRem(12px);
  526 + }
  527 + }
  528 + ul.items {
  529 + margin-top: pxToRem(20px);
  530 + padding: 0;
  531 + line-height: pxToRem(30px);
  532 + font-size: pxToRem(13px);
  533 + li {
  534 + span {
  535 + display: inline-block;
  536 + width: pxToRem(15px);
  537 + height: pxToRem(15px);
  538 + background-color: $basicBtnC;
  539 + border-radius: 50%;
  540 + color: #fff;
  541 + text-align: center;
  542 + line-height: pxToRem(15px);
  543 + font-size: pxToRem(13px);
  544 + margin-right: pxToRem(12px);
  545 + vertical-align: text-bottom;
  546 + }
  547 + }
  548 + }
  549 + }
  550 + clear:both;
  551 + }
  552 + }
  553 + .cart-bar {
  554 + position: relative;
  555 + box-sizing: border-box;
  556 + width: 100%;
  557 + height: pxToRem(120px);
  558 + position: fixed;
  559 + bottom: 0;
  560 + background-color: #fff;
  561 + z-index: 2;
  562 + padding: pxToRem(20px) pxToRem(28px);
  563 + text-align: center;
  564 + a {
  565 + display: inline-block;
  566 + &.num-incart {
  567 + font-size: pxToRem(47px);
  568 + color: #444;
  569 + }
  570 + &.favorite {
  571 + font-size: pxToRem(34px);
  572 + color: $basicBtnC;
  573 + }
  574 + &.addto-cart,
  575 + &.sold-out {
  576 + height: pxToRem(80px);
  577 + width: pxToRem(260px);
  578 + margin: 0 pxToRem(100px) 0 pxToRem(115px);
  579 + color: #fff;
  580 + background-color: $basicBtnC;
  581 + font-size: pxToRem(40px);
  582 + line-height: pxToRem(80px);
  583 + text-align: center;
  584 + }
  585 + &.sold-out {
  586 + background-color: #f58189;
  587 + }
  588 + }
  589 + .num-tag {
  590 + position: absolute;
  591 + left: pxToRem(66px);
  592 + height: pxToRem(20px);
  593 + display: block;
  594 + width: pxToRem(36px);
  595 + height: pxToRem(36px);
  596 + background-color: $basicBtnC;
  597 + border-radius: 50%;
  598 + color: #fff;
  599 + font-size: pxToRem(24px);
  600 + }
  601 + }
639 } 602 }
@@ -22,138 +22,136 @@ @@ -22,138 +22,136 @@
22 <h1 class="previousPrice">{{previousPrice}}</h1> 22 <h1 class="previousPrice">{{previousPrice}}</h1>
23 </div> 23 </div>
24 {{/goodsPrice}} 24 {{/goodsPrice}}
  25 +
25 {{#periodOfMarket}} 26 {{#periodOfMarket}}
26 <div class="periodOfMarket"> 27 <div class="periodOfMarket">
27 <h1>上市期：</h1> 28 <h1>上市期：</h1>
28 <h1 >{{.}}</h1> 29 <h1 >{{.}}</h1>
29 </div> 30 </div>
30 {{/periodOfMarket}} 31 {{/periodOfMarket}}
31 -</div>  
32 -  
33 -{{# vipLevel}}  
34 -<div class="vipLevel">  
35 - {{# list}}  
36 -<span class="vip-img">  
37 - <img class="lazy" data-original="http://static.dev.yohobuy.com/img/product/silver.png" alt="">  
38 -</span>  
39 - <span class="vip-price">{{text}}</span>  
40 - {{/ list}}  
41 -</div>  
42 -{{/ vipLevel}} 32 + </div>
43 33
44 -{{#goodsDiscount}}  
45 -<div class="goodsDiscount">  
46 - {{#each list}}  
47 - {{#if @first}}  
48 - <h1 class="first-item">{{title}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>  
49 - <div class="discount-folder">  
50 - {{else}}  
51 - <h1 class="folder-item">{{title}}</h1>  
52 - {{/if}}  
53 - {{/list}} 34 + {{# vipLevel}}
  35 + <div class="vipLevel">
  36 + {{# list}}
  37 + <span class="vip-img">
  38 + <img class="lazy" data-original="http://static.dev.yohobuy.com/img/product/silver.png" alt="">
  39 + </span>
  40 + <span class="vip-price">{{text}}</span>
  41 + {{/ list}}
54 </div> 42 </div>
55 -</div>  
56 -{{/goodsDiscount}} 43 + {{/ vipLevel}}
57 44
58 -<div class="feedback-list ">  
59 - {{# feedbacks}}  
60 - {{#if commentsNum}}  
61 - <!--tab begin-->  
62 - {{> product/feedback-tab}}  
63 - <!--/tab end-->  
64 - {{else}}  
65 - {{#if consultsNum}}  
66 - <!--tab begin-->  
67 - {{> product/feedback-tab}}  
68 - <!--/tab end-->  
69 - {{else}}  
70 - <div class="nodata">  
71 - <span>暂无商品评价和咨询</span>  
72 - <a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a> 45 + {{#goodsDiscount}}
  46 + <div class="goodsDiscount">
  47 + {{#each list}}
  48 + {{#if @first}}
  49 + <h1 class="first-item">{{title}}<span class="icon-down iconfont dropdown">&#xe609;</span></h1>
  50 + <div class="discount-folder">
  51 + {{else}}
  52 + <h1 class="folder-item">{{title}}</h1>
  53 + {{/if}}
  54 + {{/list}}
73 </div> 55 </div>
74 - {{/if}}  
75 - {{/if}}  
76 -  
77 - 56 + </div>
  57 + {{/goodsDiscount}}
78 58
79 - {{/ feedbacks}}  
80 -</div> 59 + <div class="feedback-list ">
  60 + {{# feedbacks}}
  61 + {{#if commentsNum}}
  62 + <!--tab begin-->
  63 + {{> product/feedback-tab}}
  64 + <!--/tab end-->
  65 + {{else}}
  66 + {{#if consultsNum}}
  67 + <!--tab begin-->
  68 + {{> product/feedback-tab}}
  69 + <!--/tab end-->
  70 + {{else}}
  71 + <div class="nodata">
  72 + <span>暂无商品评价和咨询</span>
  73 + <a class="go-consult">我要咨询<span class="iconfont">&#xe604;</span></a>
  74 + </div>
  75 + {{/if}}
  76 + {{/if}}
  77 + {{/ feedbacks}}
  78 + </div>
81 79
82 -<div class="gap-block"></div> 80 + <div class="gap-block"></div>
83 81
84 -{{# enterStore}}  
85 -<div class="enter-store page-block">  
86 - <a class="store-logo" href="{{url}}" style="">  
87 - <img class="lazy" data-original="{{img}}" alt="{{storeName}}">  
88 - </a>  
89 - <a class="store-name" href="{{url}}">{{storeName}}</a>  
90 - <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>  
91 -</div>  
92 -{{/ enterStore}} 82 + {{# enterStore}}
  83 + <div class="enter-store page-block">
  84 + <a class="store-logo" href="{{url}}" style="">
  85 + <img class="lazy" data-original="{{img}}" alt="{{storeName}}">
  86 + </a>
  87 + <a class="store-name" href="{{url}}">{{storeName}}</a>
  88 + <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
  89 + </div>
  90 + {{/ enterStore}}
93 91
94 -<div class="gap-block"></div> 92 + <div class="gap-block"></div>
95 93
96 -{{#goodsDescription}}  
97 -<div class="goods-desc page-block">  
98 - <img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">  
99 - <h1 class="title">  
100 - {{title}}  
101 - <span class="en-title">{{enTitle}}</span>  
102 -</h1>  
103 -{{#detail}}  
104 -<div class="detail table">  
105 - <div class="row">  
106 - <div class="column">编号：{{nubmer}}</div>  
107 - <div class="column">帽型：{{hatType}}</div> 94 + {{#goodsDescription}}
  95 + <div class="goods-desc page-block">
  96 + <img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
  97 + <h1 class="title">
  98 + {{title}}
  99 + <span class="en-title">{{enTitle}}</span>
  100 + </h1>
  101 + {{#detail}}
  102 + <div class="detail table">
  103 + <div class="row">
  104 + <div class="column">编号：{{nubmer}}</div>
  105 + <div class="column">帽型：{{hatType}}</div>
  106 + </div>
  107 + <div class="row">
  108 + <div class="column">颜色：{{color}}</div>
  109 + <div class="column">帽檐：{{bongrace}}</div>
  110 + </div>
  111 + <div class="row">
  112 + <div class="column">类型：{{type}}</div>
  113 + <div class="column">细节：{{goodsDetail}}</div>
  114 + </div>
  115 + <div class="row">
  116 + <div class="column">性别：{{gender}}</div>
  117 + <div class="column">风格：{{style}}</div>
  118 + </div>
108 </div> 119 </div>
109 - <div class="row">  
110 - <div class="column">颜色：{{color}}</div>  
111 - <div class="column">帽檐：{{bongrace}}</div>  
112 - </div>  
113 - <div class="row">  
114 - <div class="column">类型：{{type}}</div>  
115 - <div class="column">细节：{{goodsDetail}}</div>  
116 - </div>  
117 - <div class="row">  
118 - <div class="column">性别：{{gender}}</div>  
119 - <div class="column">风格：{{style}}</div>  
120 - </div>  
121 -</div>  
122 -{{/detail}}  
123 -</div>  
124 -{{/goodsDescription}} 120 + {{/detail}}
  121 + </div>
  122 + {{/goodsDescription}}
125 123
126 -<div class="gap-block"></div> 124 + <div class="gap-block"></div>
127 125
128 -{{#sizeInfo}}  
129 -<div class="size-info page-block">  
130 - <h1 class="title">  
131 - {{title}}  
132 - <span class="en-title">{{enTitle}}</span>  
133 -</h1>  
134 -{{#detail}}  
135 -<div class="detail">  
136 - <div class="swiper-container detail-swiper" id="size-swiper-container">  
137 - <div class="swiper-wrapper">  
138 - {{#list}}  
139 - <div class="swiper-slide " >  
140 - <div class="size-name cell">{{name}}</div>  
141 - <div class="size-m cell">{{sizem}}</div>  
142 - <div class="size-xl cell">{{sizexl}}</div> 126 + {{#sizeInfo}}
  127 + <div class="size-info page-block">
  128 + <h1 class="title">
  129 + {{title}}
  130 + <span class="en-title">{{enTitle}}</span>
  131 + </h1>
  132 + {{#detail}}
  133 + <div class="detail">
  134 + <div class="swiper-container detail-swiper" id="size-swiper-container">
  135 + <div class="swiper-wrapper">
  136 + {{#list}}
  137 + <div class="swiper-slide " >
  138 + <div class="size-name cell">{{name}}</div>
  139 + <div class="size-m cell">{{sizem}}</div>
  140 + <div class="size-xl cell">{{sizexl}}</div>
  141 + </div>
  142 + {{/list}}
  143 + </div>
143 </div> 144 </div>
144 - {{/list}} 145 + <p class="tips">提示：左滑查看完整表格信息</p>
  146 + </div>
  147 + {{/detail}}
145 </div> 148 </div>
146 -</div>  
147 -<p class="tips">提示：左滑查看完整表格信息</p>  
148 -</div>  
149 -{{/detail}}  
150 -</div>  
151 -{{/sizeInfo}} 149 + {{/sizeInfo}}
152 150
153 -<div class="gap-block"></div> 151 + <div class="gap-block"></div>
154 152
155 -{{#measurementMethod}}  
156 -<div class="measurement-method page-block"> 153 + {{#measurementMethod}}
  154 + <div class="measurement-method page-block">
157 <h1 class="title"> 155 <h1 class="title">
158 {{title}} 156 {{title}}
159 <span class="en-title">{{enTitle}}</span> 157 <span class="en-title">{{enTitle}}</span>
@@ -210,53 +208,54 @@ @@ -210,53 +208,54 @@
210 <p class="tips">提示:左滑查看完整表格信息</p> 208 <p class="tips">提示:左滑查看完整表格信息</p>
211 </div> 209 </div>
212 {{/detail}} 210 {{/detail}}
213 -</div>  
214 -{{/reference}} 211 + </div>
  212 + {{/reference}}
215 213
216 -<div class="gap-block"></div> 214 + <div class="gap-block"></div>
217 215
218 -{{#materials}}  
219 -<div class="materials page-block">  
220 - <h1 class="title">  
221 - {{title}}  
222 - <span class="en-title">{{enTitle}}</span>  
223 -</h1>  
224 -<div class="detail">  
225 - <img class="lazy" data-original="{{img}}" alt="">  
226 - <p class="material-desc">  
227 - {{desc}}  
228 - </p>  
229 -</div>  
230 -<img class="lazy material-type" data-original="{{materialType}}" alt="" >  
231 -</div>  
232 -{{/materials}} 216 + {{#materials}}
  217 + <div class="materials page-block">
  218 + <h1 class="title">
  219 + {{title}}
  220 + <span class="en-title">{{enTitle}}</span>
  221 + </h1>
  222 + <div class="detail">
  223 + <img class="lazy" data-original="{{img}}" alt="">
  224 + <p class="material-desc">
  225 + {{desc}}
  226 + </p>
  227 + </div>
  228 + <img class="lazy material-type" data-original="{{materialType}}" alt="" >
  229 + </div>
  230 + {{/materials}}
233 231
234 -<div class="gap-block"></div> 232 + <div class="gap-block"></div>
235 233
236 -{{#productDetail}}  
237 -<div class="product-detail page-block">  
238 - <h1 class="title">  
239 - {{title}}  
240 - <span class="en-title">{{enTitle}}</span>  
241 -</h1>  
242 -<div class="detail">  
243 - <p>{{desc}}</p>  
244 - <img class="lazy" data-original="{{img}}" alt="">  
245 -</div>  
246 -</div>  
247 -{{/productDetail}} 234 + {{#productDetail}}
  235 + <div class="product-detail page-block">
  236 + <h1 class="title">
  237 + {{title}}
  238 + <span class="en-title">{{enTitle}}</span>
  239 + </h1>
  240 + <div class="detail">
  241 + <p>{{desc}}</p>
  242 + <img class="lazy" data-original="{{img}}" alt="">
  243 + </div>
  244 + </div>
  245 + {{/productDetail}}
  246 +
  247 + {{#cartInfo}}
  248 + <div class="cart-bar">
  249 + <span class="num-tag">{{numInCart}}</span>
  250 + <a href="" class="num-incart iconfont">&#xe62c;</a>
  251 + {{#if goodsInstore}}
  252 + <a href="" class="addto-cart ">加入购物车</a>
  253 + {{else}}
  254 + <a href="" class="sold-out">已售罄</a>
  255 + {{/if}}
  256 + <a href="" class="favorite iconfont">&#xe605;</a>
  257 + </div>
  258 + {{/cartInfo}}
248 259
249 -{{#cartInfo}}  
250 -<div class="cart-bar">  
251 - <span class="num-tag">{{numInCart}}</span>  
252 - <a href="" class="num-incart iconfont">&#xe62c;</a>  
253 - {{#if goodsInstore}}  
254 - <a href="" class="addto-cart ">加入购物车</a>  
255 - {{else}}  
256 - <a href="" class="sold-out">已售罄</a>  
257 - {{/if}}  
258 - <a href="" class="favorite iconfont">&#xe605;</a>  
259 -</div>  
260 -{{/cartInfo}}  
261 </div> 260 </div>
262 {{> layout/footer}} 261 {{> layout/footer}}