fe / YOHOBUYPC · Commits

Go to a project

Authored by 梁志锋
Commit aa9e081b8fbae61fc7454316703f77875356de83 2 parents 0fc4ad4c f57e2ffe

update

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