fe / YOHOBUYPC · Commits

Go to a project

Authored by 毕凯
Commit 6ede8e870c2a0536e808ce81eb7031613c02b48e 1 parent a9cc6a33

H5 product scss => css

Inline Side-by-side
Showing 13 changed files with 1862 additions and 1 deletions
@@ -185,6 +185,6 @@ a { @@ -185,6 +185,6 @@ a {
185 @import "home/index"; 185 @import "home/index";
186 @import "category/index"; 186 @import "category/index";
187 @import "me/index"; 187 @import "me/index";
188 -/*  
189 @import "product/index"; 188 @import "product/index";
  189 +/*
190 @import "cart/index";*/ 190 @import "cart/index";*/
  1 +@define-mixin consult-item {
  2 + margin-top: 30px;
  3 + padding: 20px 28px;
  4 + background-color: #fff;
  5 + border-bottom: 1px solid $borderC;
  6 + border-top: 1px solid $borderC;
  7 + .question {
  8 + font-size: 24px;
  9 + color: $mainFontC;
  10 + span {
  11 + display: block;
  12 + float: left;
  13 + padding-right: 15px;
  14 + }
  15 + p {
  16 + overflow: hidden;
  17 + padding-bottom: 15px;
  18 + border-bottom: 1px solid $borderC;
  19 + }
  20 + }
  21 + .time {
  22 + font-size: 22px;
  23 + color: $subFontC;
  24 + }
  25 + .answer {
  26 + font-size: 24px;
  27 + line-height: 36px;
  28 + color: $subFontC;
  29 + margin-top: 14px;
  30 + span {
  31 + display: block;
  32 + float: left;
  33 + color: $mainFontC;
  34 + padding-right: 15px;
  35 + }
  36 + p {
  37 + overflow: hidden;
  38 + }
  39 + }
  40 + .operation {
  41 + width: 120%;
  42 + height: 60px;
  43 + line-height: 80px;
  44 + position: relative;
  45 + right: 12%;
  46 + border-top: 1px solid #e0e0e0;
  47 + margin-top: 20px;
  48 +
  49 + li{
  50 + &.highlight{
  51 + color: $basicBtnC;
  52 + }
  53 + font-size:28px;
  54 + float:left;
  55 + width: 50%;
  56 + text-align: center;
  57 + color:$subFontC;
  58 + .iconfont{
  59 + display: inline-block;
  60 + padding-right: 5px;
  61 + font-size: inherit;
  62 + }
  63 + position: relative;
  64 + .animate-count {
  65 + display: none;
  66 + position: absolute;
  67 + top: 0;
  68 + font-size: 20px;
  69 + z-index: 5;
  70 + }
  71 + i.count {
  72 + position: absolute;
  73 + }
  74 + }
  75 + li.fav {
  76 + .animate-count {
  77 + right: 100px;
  78 + }
  79 + }
  80 +
  81 + li.useful {
  82 + .animate-count {
  83 + right: 88px;
  84 + }
  85 + }
  86 + }
  87 +}
  88 +
  89 +.goods-comments-page {
  90 + .goods-comments {
  91 + .comment-item {
  92 + border-bottom: 1px solid $borderC;
  93 + padding: 0 28px;
  94 + .user-name {
  95 + display: inline-block;
  96 + float: left;
  97 + max-width: 9rem;
  98 + overflow: hidden;
  99 + text-overflow: ellipsis;
  100 + white-space: nowrap;
  101 + font-size: 24px;
  102 + line-height: 62px;
  103 + color: $mainFontC;
  104 + }
  105 + .goods-spec,
  106 + .comment-time {
  107 + font-size: 24px;
  108 + line-height: 62px;
  109 + }
  110 + .detail-content {
  111 + font-size: 24px;
  112 + line-height: 62px;
  113 + color: $mainFontC;
  114 + }
  115 + .goods-spec,
  116 + .comment-time {
  117 + font-size: 24px;
  118 + line-height: 62px;
  119 + }
  120 + .detail-content {
  121 + font-size: 28px;
  122 + line-height: 36px;
  123 + }
  124 + .goods-spec,
  125 + .detail-content {
  126 + color: $mainFontC;
  127 + }
  128 + .comment-time {
  129 + color: #c1c1c1;
  130 + }
  131 + }
  132 + }
  133 +}
  134 +
  135 +.goods-consults-page {
  136 + background-color: #f0f0f0;
  137 + .goto-consult {
  138 + position: fixed;
  139 + top: 2.25rem;
  140 + width: 100%;
  141 + box-sizing:border-box;
  142 + padding: 0 28px;
  143 + height: 120px;
  144 + background-color: #ffffff;
  145 + border-bottom: 1px solid $borderC;
  146 + z-index: 10;
  147 + i,
  148 + span,
  149 + a {
  150 + line-height: 120px;
  151 + font-size: 28px;
  152 + color: $mainFontC;
  153 + }
  154 + .consult-logo {
  155 + padding-right: 15px;
  156 + }
  157 + .enter-consult-page {
  158 + float: right;
  159 + color: $subFontC;
  160 + }
  161 + }
  162 + .goods-consults.customer-consults {
  163 + .consult-item:nth-child(1) {
  164 + display: block;
  165 + }
  166 + .consult-item:nth-child(2) {
  167 + display: block;
  168 + }
  169 + .consult-item {
  170 + display: none;
  171 + }
  172 + }
  173 + .goods-consults {
  174 + margin-top: 5.25rem;
  175 + overflow: hidden;
  176 + @mixin consult-item;
  177 + }
  178 + .readmore{
  179 + display: block;
  180 + height: 88px;
  181 + line-height: 88px;
  182 + background-color: #fff;
  183 + text-align: center;
  184 + color: $subFontC;
  185 + margin-top: 30px;
  186 + border-top: 1px solid $borderC;
  187 + border-bottom: 1px solid $borderC;
  188 + font-size: 28px;
  189 + i{
  190 + font-size: inherit;
  191 + }
  192 + }
  193 + .faq-title{
  194 + height: 88px;
  195 + line-height: 88px;
  196 + text-align: center;
  197 + font-size: 32px;
  198 + }
  199 + .goods-consults .faq-item{
  200 + @mixin consult-item;
  201 + margin-top: 0;
  202 + margin-bottom: 30px;
  203 + .answer{
  204 + border-bottom: none;
  205 + }
  206 + }
  207 +}
  208 +
  209 +.consult-form-page {
  210 + padding: 28px;
  211 + text-align: center;
  212 + textarea {
  213 + box-sizing: border-box;
  214 + width: 100%;
  215 + height: 400px;
  216 + font-size: 28px;
  217 + padding: 10px;
  218 + color: $mainFontC;
  219 + }
  220 + a {
  221 + display: inline-block;
  222 + height: 80px;
  223 + width: 360px;
  224 + color: #fff;
  225 + background-color: #444;
  226 + font-size: 40px;
  227 + line-height: 80px;
  228 + text-align: center;
  229 + margin-top: 20px;
  230 + }
  231 +}
  232 +
  233 +.good-detail-page {
  234 + .feedback-list {
  235 + padding-top: 30px;
  236 + margin-bottom: 30px;
  237 + background-color: #f0f0f0;
  238 + .nav-tab {
  239 + width: 100%;
  240 + height: 60px;
  241 + padding: 10px 0;
  242 + background-color: #fff;
  243 + border-top: 1px solid $borderC;
  244 + border-bottom: 1px solid $borderC;
  245 + }
  246 + .comment-nav,
  247 + .consult-nav {
  248 + box-sizing: border-box;
  249 + float: left;
  250 + width: 50%;
  251 + height: 60px;
  252 + line-height: 60px;
  253 + font-size: 28px;
  254 + text-align: center;
  255 + color: $subFontC;
  256 + &.focus {
  257 + color: #000;
  258 + }
  259 + }
  260 + .comment-nav {
  261 + border-right: 1px solid #ccc;
  262 + }
  263 + .content {
  264 + .content-main {
  265 + background-color: #fff;
  266 + border-bottom: 1px solid $borderC;
  267 + &.comment-content-main {
  268 + .user-name {
  269 + font-size: 24px;
  270 + line-height: 62px;
  271 + color: $mainFontC;
  272 + padding-left: 28px;
  273 + padding-right: 18px;
  274 + }
  275 + .goods-spec,
  276 + .comment-time {
  277 + font-size: 24px;
  278 + line-height: 62px;
  279 + }
  280 + .detail-content {
  281 + font-size: 24px;
  282 + line-height: 62px;
  283 + color: $mainFontC;
  284 + padding-left: 28px;
  285 + padding-right: 18px;
  286 + }
  287 + .goods-spec,
  288 + .comment-time {
  289 + font-size: 24px;
  290 + line-height: 62px;
  291 + }
  292 + .detail-content {
  293 + font-size: 28px;
  294 + line-height: 36px;
  295 + }
  296 + .goods-spec,
  297 + .detail-content {
  298 + color: $mainFontC;
  299 + }
  300 + .detail-content,
  301 + .comment-time {
  302 + padding-left: 28px;
  303 + }
  304 + .detail-content {
  305 + padding-right: 28px;
  306 + padding-left: 28px;
  307 + }
  308 + .detail-content {
  309 + padding-right: 28px;
  310 + }
  311 + .comment-time {
  312 + color: #c1c1c1;
  313 + }
  314 + }
  315 + &.consult-content-main {
  316 + padding-right: 28px;
  317 + padding-left: 28px;
  318 + padding-top: 20px;
  319 + padding-bottom: 20px;
  320 + .question {
  321 + font-size: 24px;
  322 + color: $mainFontC;
  323 + span {
  324 + display: block;
  325 + float: left;
  326 + font-size: inherit;
  327 + padding-right: 15px;
  328 + }
  329 + p {
  330 + overflow: hidden;
  331 + }
  332 + }
  333 + .time {
  334 + font-size: 22px;
  335 + color: $subFontC;
  336 + }
  337 + .answer {
  338 + font-size: 24px;
  339 + line-height: 36px;
  340 + color: $subFontC;
  341 + margin-top: 14px;
  342 + span {
  343 + display: block;
  344 + float: left;
  345 + font-size: inherit;
  346 + color: $mainFontC;
  347 + padding-right: 15px;
  348 + }
  349 + p {
  350 + overflow: hidden;
  351 + }
  352 + }
  353 + }
  354 +
  355 + &.no-item{
  356 + height: 200px;
  357 + line-height: 200px;
  358 + color: #e0e0e0;
  359 + font-size: 16px;
  360 + text-align: center;
  361 + span{
  362 + display: inline-block;
  363 + font-size: 16px;
  364 + padding-right: 5px;
  365 + }
  366 + }
  367 + }
  368 + }
  369 +
  370 + .comment-content-footer,
  371 + .consult-content-footer {
  372 + display: block;
  373 + min-height: 88px;
  374 + text-align: center;
  375 + background-color: #fff;
  376 + border-bottom: 1px solid $borderC;
  377 + line-height: 88px;
  378 + font-size: 28px;
  379 + color: #b0b0b0;
  380 + .iconfont {
  381 + font-size: inherit;
  382 + }
  383 + }
  384 +
  385 + .content.hide {
  386 + display: none;
  387 + }
  388 +
  389 + .nodata {
  390 + height: 88px;
  391 + font-size: 28px;
  392 + line-height: 88px;
  393 + background-color: #fff;
  394 + padding: 0 28px;
  395 + border-top: 1px solid $borderC;
  396 + border-bottom: 1px solid $borderC;
  397 + .go-consult {
  398 + float: right;
  399 + color: $subFontC;
  400 + span {
  401 + font-size: 28px;
  402 + }
  403 + }
  404 + }
  405 +
  406 +
  407 + }
  408 +}
  1 +$pageBgC:#f0f0f0;
  2 +$mainFontC:#444444;
  3 +$subFontC:#b0b0b0;
  4 +$borderC:#e0e0e0;
  5 +$tableCellC:#eee;
  6 +$basicBtnC:#eb0313;
  7 +
  8 +.good-detail-page {
  9 + overflow: hidden;
  10 + background-color: #f0f0f0;
  11 +
  12 + .yoho-tip {
  13 + z-index: 4;
  14 + }
  15 +
  16 + .page-block {
  17 + background-color: #fff;
  18 + box-sizing: border-box;
  19 + width: 100%;
  20 + border-bottom: 1px solid $borderC;
  21 + border-top: 1px solid $borderC;
  22 + padding: 0 28px;
  23 + margin-bottom: 30px;
  24 + >.title {
  25 + line-height: 88px;
  26 + color: $mainFontC;
  27 + font-size: 28px;
  28 + border-bottom: 1px solid $borderC;
  29 + span {
  30 + color: #a0a0a0;
  31 + font-size: 18px;
  32 + }
  33 + }
  34 +
  35 + .pro-detail {
  36 + margin-top: 20px;
  37 + margin-bottom: 20px;
  38 + }
  39 + .detail {
  40 + margin-top: 20px;
  41 + margin-bottom: 20px;
  42 + font-size: 24px;
  43 + line-height: 36px;
  44 +
  45 + b {
  46 + font-weight: bold;
  47 + }
  48 +
  49 + i {
  50 + font-style: italic;
  51 + }
  52 +
  53 + &.table {
  54 + .js-wraper {
  55 + @include flexbox((
  56 + display: box,
  57 + box-lines: multiple,
  58 + box-pack: start
  59 + ), $version: 1);
  60 + @include flexbox((
  61 + display: flex,
  62 + flex-wrap: wrap,
  63 + justify-content: flex-start
  64 + ));
  65 + }
  66 + width: 100%;
  67 + .column {
  68 + box-sizing: border-box;
  69 + /*padding: 20px 12px;*/
  70 + padding: 6px 3%;
  71 + width: 49.9%;
  72 + border: 1px solid #fff;
  73 + font-size: 24px;
  74 + background-color: $tableCellC;
  75 + word-wrap: break-word;
  76 + @include flexbox((
  77 + box-flex: 1.0,
  78 + display: box,
  79 + box-align: center
  80 + ), $version: 1);
  81 + @include flexbox((
  82 + display: flex,
  83 + align-items: center,
  84 + flex-basis: 49.9%
  85 + ))
  86 + }
  87 + .oldbox{
  88 + padding: 6px 3%;
  89 + width: 49.9%;
  90 + background-color: $tableCellC;
  91 + box-sizing: border-box;
  92 + border: 1px solid #fff;
  93 + width: 49.9%;
  94 + height: 100%;
  95 + float: left;
  96 + text-overflow:ellipsis;
  97 + white-space:nowrap;
  98 + overflow:hidden;
  99 + }
  100 +
  101 + }
  102 + }
  103 + }
  104 +
  105 + .my-swiper-button-prev,
  106 + .my-swiper-button-next {
  107 + position: absolute;
  108 + top: 50%;
  109 + width: 48px;
  110 + height: 48px;
  111 + margin-top: -44px;
  112 + cursor: pointer;
  113 + color: #666;
  114 + font-size: 48px;
  115 + &.swiper-button-disabled{
  116 + opacity: .3;
  117 + }
  118 + }
  119 +
  120 + .next-grey {
  121 + right: 30px;
  122 + left: auto;
  123 + }
  124 +
  125 + .prev-grey {
  126 + left: 30px;
  127 + right: auto;
  128 + }
  129 +
  130 +
  131 + .tag-container {
  132 + position: absolute;
  133 + left: 108px;
  134 + top: 40px;
  135 + height: 35px;
  136 + color: #fff;
  137 + font-size: 20px;
  138 + line-height: 35px;
  139 + z-index: 2;
  140 + .good-tag {
  141 + display: inline-block;
  142 + box-sizing: border-box;
  143 + margin-left: .5px;
  144 + font-size: 18px;
  145 + text-align: center;
  146 + padding:1px 5px;
  147 + }
  148 + .new-tag {
  149 + background-color: #78dc7e;
  150 + color: #fff;
  151 + }
  152 + .renew-tag {
  153 + background-color: #78dc7e;
  154 + color: #fff;
  155 + }
  156 + .sale-tag {
  157 + background-color: #ff575c;
  158 + color: #fff;
  159 + }
  160 + .new-festival-tag {
  161 + background-color: #000;
  162 + color: #fff;
  163 + }
  164 + .yohood-tag {
  165 + background-color: #000;
  166 + color: #fff;
  167 + }
  168 + .limit-tag {
  169 + border: 1px solid #000;
  170 + background-color: #fff;
  171 + color: #000;
  172 + }
  173 + .soonSoldOut-tag {
  174 + background-color: #ffac5b;
  175 + color: #fff;
  176 + }
  177 + }
  178 +
  179 + .banner-container {
  180 + position: relative;
  181 + background-color: #fff;
  182 + }
  183 + .banner-top-single{
  184 + margin:0 auto;
  185 + overflow: hidden;
  186 + img{
  187 + width: 448px;
  188 + margin-top:30px;
  189 + margin-bottom:30px;
  190 + }
  191 + }
  192 + .banner-top {
  193 + min-height: 660px;
  194 + overflow: hidden;
  195 + position: relative;
  196 + .swiper-pagination {
  197 + position: absolute;
  198 + z-index: 2;
  199 + bottom: 40px;
  200 + .pagination-inner {
  201 + span {
  202 + background-color: #b0b0b0;
  203 + }
  204 + .swiper-pagination-bullet {
  205 + margin-right: 2px;
  206 + }
  207 + .swiper-pagination-bullet-active {
  208 + background-color: #000;
  209 + }
  210 + }
  211 + }
  212 + }
  213 + .banner-swiper {
  214 + min-height: 600px;
  215 + min-width: 448px;
  216 + margin: 30px 96px;
  217 + overflow: hidden;
  218 + ul {
  219 + position: relative;
  220 + height: auto;
  221 + li {
  222 + float: left;
  223 + img {
  224 + height: auto;
  225 + }
  226 + }
  227 + }
  228 + }
  229 + .goodsName {
  230 + box-sizing: border-box;
  231 + width: 100%;
  232 + font-size: 28px;
  233 + color: #fff;
  234 + padding: 20px 28px;
  235 + line-height: 48px;
  236 + background-color: #515150;
  237 + }
  238 + .goodsSubtitle {
  239 + /*display: table;*/
  240 + height: 88px;
  241 + font-size: 24px;
  242 + color: $subFontC;
  243 + padding-left: 28px;
  244 + padding-right: 28px;
  245 + border-bottom: 1px solid $borderC;
  246 + background-color: $pageBgC;
  247 + @include flexbox((
  248 + box-flex: 1.0,
  249 + display: box,
  250 + box-align: center
  251 + ), $version: 1);
  252 + @include flexbox((
  253 + display: flex,
  254 + align-items: center
  255 + ));
  256 + span{
  257 + /*display: table-cell;*/
  258 + display: -webkit-box;
  259 + line-height: 36px;
  260 + margin: 0;
  261 + text-overflow: -o-ellipsis-lastline;
  262 + overflow: hidden;
  263 + text-overflow: ellipsis;
  264 + -webkit-line-clamp: 2;
  265 + -webkit-box-orient: vertical;
  266 + }
  267 + }
  268 + .price-date {
  269 + position: relative;
  270 + width: 100%;
  271 + color: $subFontC;
  272 + height: 88px;
  273 + padding-left: 28px;
  274 + padding-right: 28px;
  275 + background-color: #fff;
  276 + border-bottom: 1px solid $borderC;
  277 + }
  278 +
  279 + .limit-sale {
  280 + position: absolute;
  281 + right: 84px;
  282 + top: 24px;
  283 + color: #d0021b;
  284 + border: 2px solid #d0021b;
  285 + background-color: #fff;
  286 + border-radius: 40px;
  287 + padding: 4px 20px;
  288 + font-size: 24px;
  289 + font-weight: bold;
  290 + }
  291 +
  292 + .limit-sale:active {
  293 + background-color: #f0f0f0;
  294 + }
  295 +
  296 + .got-limit-sale {
  297 + position: absolute;
  298 + right: 84px;
  299 + top: 24px;
  300 + color: #d0021b;
  301 + border: 2px solid #d0021b;
  302 + background-color: #fff;
  303 + border-radius: 40px;
  304 + padding: 4px 20px;
  305 + font-size: 24px;
  306 + font-weight: bold;
  307 + color: #ccc;
  308 + border-color: #ccc;
  309 + }
  310 +
  311 + .goodsPrice {
  312 + float: left;
  313 + font-size: 34.59px;
  314 + h1 {
  315 + display: inline-block;
  316 + line-height: 88px;
  317 + }
  318 + .currentPrice {
  319 + color: #d0021b;
  320 + margin-right: 10px;
  321 + }
  322 + .previousPrice {
  323 + text-decoration: line-through;
  324 + }
  325 + }
  326 + .periodOfMarket {
  327 + font-size: 24px;
  328 + float: right;
  329 + color: #d0021b;
  330 + margin-right: 1.4rem;
  331 + h1 {
  332 + display: inline-block;
  333 + line-height: 88px;
  334 + }
  335 + }
  336 +
  337 + .vip-level {
  338 + box-sizing: box-border;
  339 + padding-left: 28px;
  340 + padding-right: 28px;
  341 + min-height: 88px;
  342 + background-color: #fff;
  343 + font-size: 22px;
  344 + color: #999999;
  345 + border-bottom: 1px solid $borderC;
  346 + .icons-item {
  347 + float: left;
  348 + width: 33.3%;
  349 + height: 88px;
  350 + margin: 0;
  351 + &.current-level{
  352 + .vip-price{
  353 + color:#d0021b;
  354 + }
  355 + }
  356 + span {
  357 + vertical-align: middle;
  358 + display: inline-block;
  359 + line-height: 88px;
  360 + padding-left: 8px;
  361 + }
  362 + .vip-img {
  363 + width: 53px;
  364 + height: 32px;
  365 + }
  366 + &:nth-child(1) {
  367 + text-align: left;
  368 + .vip-img {
  369 + background: resolve('product/silver.png') no-repeat;
  370 + }
  371 + }
  372 + &:nth-child(2) {
  373 + .vip-img {
  374 + background: resolve('product/golden.png') no-repeat;
  375 + }
  376 + }
  377 + &:nth-child(3) {
  378 + text-align: right;
  379 + .vip-img {
  380 + background: resolve('product/platinum.png') no-repeat;
  381 + }
  382 + }
  383 + }
  384 + }
  385 + .goodsDiscount {
  386 + display: block;
  387 + width: 100%;
  388 + height:auto;
  389 + font-size: 28px;
  390 + color: $mainFontC;
  391 + background-color: #fff;
  392 + border-bottom: 1px solid $borderC;
  393 + h1 {
  394 + position: relative;
  395 + padding: 30px 60px 30px 28px;
  396 + line-height: 36px;
  397 + }
  398 +
  399 + .short-text {
  400 + white-space: nowrap;
  401 + overflow: hidden;
  402 + text-overflow: ellipsis;
  403 + }
  404 +
  405 + .iconfont {
  406 + position: absolute;
  407 + top: 30px;
  408 + right: 36px;
  409 + width: 35px;
  410 + font-size: 45px;
  411 + float: right;
  412 + color: #e0e0e0;
  413 + /*padding-left:50px;*/
  414 + }
  415 + .discount-folder {
  416 + .folder-item {
  417 + border-top: 1px solid $borderC;
  418 + }
  419 + display: none;
  420 + }
  421 + }
  422 + .enter-store {
  423 + position: relative;
  424 + padding: 0 180px 0 114px;
  425 + line-height: 84px;
  426 + background-color: #fff;
  427 + white-space: nowrap;
  428 + overflow: hidden;
  429 + text-overflow: ellipsis;
  430 +
  431 + .store-logo {
  432 + position: absolute;
  433 + left: 0;
  434 + top: 1px;
  435 + width: 68px;
  436 + height: 84px;
  437 + margin-left: 30px;
  438 + font-size: 0;
  439 + text-align: center;
  440 + img {
  441 + display: inline-block;
  442 + width: auto;
  443 + height: 68px;
  444 + vertical-align: middle;
  445 + }
  446 + }
  447 + .store-name {
  448 + font-size: 34px;
  449 + color: $mainFontC;
  450 + }
  451 + .store-link {
  452 + position: absolute;
  453 + right: 0;
  454 + top: 1px;
  455 + padding-right: 30px;
  456 + font-size: 28px;
  457 + color: $subFontC;
  458 + text-align: right;
  459 + span {
  460 + font-size: inherit;
  461 + }
  462 + }
  463 + }
  464 + /*底部固定栏*/
  465 + .cart-bar {
  466 + position: relative;
  467 + box-sizing: border-box;
  468 + width: 100%;
  469 + height: 120px;
  470 + position: fixed;
  471 + bottom: 0;
  472 + background-color: #fff;
  473 + z-index: 2;
  474 + padding: 20px 28px;
  475 + text-align: center;
  476 + border-top: 1px solid $borderC;
  477 + a {
  478 + display: inline-block;
  479 + &.num-incart {
  480 + font-size: 47px;
  481 + color: #444;
  482 + }
  483 + &.favorite {
  484 + font-size: 34px;
  485 + color: #ccc
  486 + }
  487 + &.favorite.liked {
  488 + color: $basicBtnC;
  489 + ;
  490 + }
  491 + &.addto-cart,
  492 + &.sold-out {
  493 + height: 80px;
  494 + width: 260px;
  495 + margin: 0 100px 0 115px;
  496 + color: #fff;
  497 + background-color: $basicBtnC;
  498 + font-size: 32px;
  499 + line-height: 80px;
  500 + text-align: center;
  501 + }
  502 + &.sold-out {
  503 + background-color: #f58189;
  504 + }
  505 + }
  506 + .num-tag {
  507 + display: block;
  508 + position: absolute;
  509 + top: 0;
  510 + left: 48px;
  511 + width: 72px;
  512 + height: 72px;
  513 + font-size: 40px;
  514 + line-height: 72px;
  515 + color: #fff;
  516 + background: $basicBtnC;
  517 + text-align: center;
  518 + border-radius: 50%;
  519 + transform: scale(0.5);
  520 +
  521 + &.hide{
  522 + display: none;
  523 + }
  524 + }
  525 + }
  526 + .recommend-for-you{
  527 + border-bottom: none;
  528 + }
  529 + .yoho-tip{
  530 + top:40%;
  531 + }
  532 +}
  533 +
  534 +@import "comments-consults";
  535 +@import "product-description";
  1 +.discount-page {
  2 + background-color: #fff;
  3 +
  4 + .swiper-container {
  5 + width: 100%;
  6 + height: 310px;
  7 +
  8 + img {
  9 + height: 100%;
  10 + width: 100%;
  11 + }
  12 +
  13 + .swiper-pagination {
  14 + bottom: 0;
  15 + left: 0;
  16 + width: 100%;
  17 + }
  18 +
  19 + .swiper-pagination-bullet-active {
  20 + background: #fff;
  21 + }
  22 + }
  23 +
  24 + .banner-top-single{
  25 + width: 100%;
  26 + height: 200px;
  27 + img {
  28 + display: block;
  29 + height: 100%;
  30 + width: 100%;
  31 + }
  32 + }
  33 +
  34 + .list-nav {
  35 + border-top:2px solid #fff;
  36 + border-bottom:1px solid #e6e6e6;
  37 +
  38 + > li {
  39 + float: left;
  40 + width: 25%;
  41 + height: 33px;
  42 + line-height: 33px;
  43 + text-align: center;
  44 + font-size: 14px;
  45 + }
  46 + .bytouch{
  47 + background:#eee;
  48 + }
  49 + a {
  50 + display: block;
  51 + box-sizing: border-box;
  52 + width: 100%;
  53 + height: 100%;
  54 + color: #999;
  55 + }
  56 +
  57 + .active > a {
  58 + color: #000;
  59 + .spanTest{
  60 + width: auto;
  61 + height: 100%;
  62 + display: inline-block;
  63 + box-sizing:border-box;
  64 + }
  65 + .iconfont {
  66 + color: #999;
  67 +
  68 + &.cur {
  69 + color: #000;
  70 + }
  71 + }
  72 + }
  73 +
  74 + .new .iconfont {
  75 + transform: scale(0.8);
  76 + font-weight: bold;
  77 + }
  78 +
  79 + .filter .iconfont {
  80 + font-size: 12px;
  81 + transition: transform 0.1 ease-in;
  82 + }
  83 +
  84 + .filter.active .iconfont {
  85 + transform: rotate(-180deg);
  86 + }
  87 +
  88 + .icon {
  89 + position: relative;
  90 +
  91 + i {
  92 + position: absolute;
  93 + transform: scale(0.8);
  94 + font-weight: bold;
  95 + }
  96 +
  97 + .up {
  98 + top: -11px;
  99 + }
  100 +
  101 + .down {
  102 + top: -4px;
  103 + }
  104 + }
  105 + }
  106 +
  107 + .no-result {
  108 + text-align: center;
  109 + vertical-align: middle;
  110 + color: #ccc;
  111 + font-size: 1.2em;
  112 + margin-top: 160px;
  113 + }
  114 +
  115 + .goods-container {
  116 + position: relative;
  117 + min-height: 440px;
  118 + padding-left: 0.375rem;
  119 + padding-top: 0.2rem;
  120 + }
  121 +
  122 +}
  1 +.rank-main {
  2 + padding: 14px 0 0 30px;
  3 + background: #fff;
  4 +
  5 + li {
  6 + height: 230px;
  7 + overflow: hidden;
  8 +
  9 + .item-img {
  10 + float: left;
  11 + width: 150px;
  12 + height: 200px;
  13 + padding: 14px 0;
  14 + line-height: 200px;
  15 + text-align: center;
  16 +
  17 + img {
  18 + max-width: 100%;
  19 + max-height: 100%;
  20 + vertical-align: middle;
  21 + }
  22 + }
  23 +
  24 + .item-content {
  25 + float: left;
  26 + width: 407px;
  27 + height: 213px;
  28 + margin: 0 0 0 13px;
  29 + padding: 14px 0 0 30px;
  30 + border-top: 1px solid #e0e0e0;
  31 + overflow: hidden;
  32 +
  33 + .rank-icon {
  34 + display: block;
  35 + height: 45px;
  36 + width: 50px;
  37 + line-height: 50px;
  38 + text-align: center;
  39 + font-size: 22px;
  40 + color: #fff;
  41 + background: resolve("../img/me/employ/rank.png") no-repeat;
  42 + background-position: center top;
  43 + background-size: auto 100%;
  44 +
  45 + &.top {
  46 + background: resolve("../img/me/employ/rank-t.png") no-repeat;
  47 + background-position: center top;
  48 + background-size: 100%;
  49 + line-height: 54px;
  50 + }
  51 + }
  52 +
  53 + h2 {
  54 + margin: 15px 0 0 !important;
  55 + padding: 0 !important;
  56 + width: 9.5rem;
  57 + max-height: 72px;
  58 + overflow: hidden;
  59 + line-height: 36px;
  60 + color: #444;
  61 + font-size: 28px;
  62 +
  63 + &.hasActive {
  64 + margin: 5px 0 0 !important;
  65 + }
  66 + }
  67 +
  68 + p {
  69 + margin: 0 !important;
  70 + padding: 0 !important;
  71 + width: 9.5rem;
  72 + line-height: 36px;
  73 + font-size: 24px;
  74 + color: #d0021b;
  75 + text-overflow: ellipsis;
  76 + overflow: hidden;
  77 + white-space: nowrap;
  78 +
  79 + b {
  80 + text-decoration: line-through;
  81 + color: #b0b0b0;
  82 + margin-left: 10px;
  83 + }
  84 + }
  85 + }
  86 + }
  87 +
  88 + li:first-child {
  89 + .item-content {
  90 + border: none;
  91 + }
  92 + }
  93 +}
  94 +.goods-nav {
  95 + border-bottom: 2px solid #e6e6e6;
  96 + height: 67px;
  97 + overflow: hidden;
  98 +
  99 + li {
  100 + float: left;
  101 + width: auto;
  102 + height: 67px;
  103 + line-height: 67px;
  104 + width: 145px;
  105 + text-align: center;
  106 + font-size: 28px;
  107 +
  108 + a {
  109 + display: inline-block;
  110 + padding: 0 5px;
  111 + font-size: 28px;
  112 + color: #999;
  113 + height: 65px;
  114 + }
  115 + }
  116 +
  117 + li:first-child {
  118 + margin-left: 30px;
  119 + }
  120 +
  121 + li.focus {
  122 + a {
  123 + border-bottom: 4px solid #000;
  124 + color: #000;
  125 + }
  126 + }
  127 +}
  128 +
  129 +.s-goods-nav {
  130 + box-sizing:border-box;
  131 + overflow: hidden;
  132 +
  133 + li {
  134 + margin: 0 10px;
  135 + padding:0 15px;
  136 + width: auto;
  137 + height: 100%;
  138 + color: #999;
  139 + &.active{
  140 + color: #000;
  141 + }
  142 + &.bgActive{
  143 + color: #000;
  144 + background-color:#e0e0e0;
  145 + }
  146 + a {
  147 + padding: 0;
  148 + }
  149 + }
  150 +
  151 + li:first-child {
  152 + margin: 0 0 0 39px;
  153 + }
  154 +}
  1 +@import "new-arrival";
  2 +@import "discount";
  3 +@import "list";
  4 +@import "detail";
  5 +@import "suspend-cart";
  6 +@import "hot-rank";
  7 +@import "recommend-for-you";
  1 +.good-list-page {
  2 + .search-input {
  3 + position: relative;
  4 + padding: 14px 30px;
  5 + background: #f8f8f8;
  6 +
  7 + > form {
  8 + position: relative;
  9 + }
  10 +
  11 + .search-icon {
  12 + position: absolute;
  13 + font-size: 24px;
  14 + top: 18px;
  15 + left: 20px;
  16 + }
  17 +
  18 + input {
  19 + box-sizing: border-box;
  20 + padding-left: 52px;
  21 + padding-right: 68px;
  22 + height: 60px;
  23 + width: 85%;
  24 + border-radius: 30px;
  25 + background: #fff;
  26 + border: none;
  27 + }
  28 +
  29 + .clear-input {
  30 + position: absolute;
  31 + top: 10px;
  32 + right: 100px;
  33 + }
  34 +
  35 + .search {
  36 + position: absolute;
  37 + top: 4px;
  38 + right: -8px;
  39 + border: none;
  40 + background: transparent;
  41 + font-size: 32px;
  42 + height: 60px;
  43 + overflow: hidden;
  44 + line-height: 60px;
  45 + color: #666;
  46 + }
  47 + }
  48 +
  49 + .brand-way {
  50 + padding-bottom: 20px;
  51 + background: #f4f4f4;
  52 +
  53 + > a {
  54 + display: block;
  55 + height: 80px;
  56 + line-height: 80px;
  57 + padding: 0 20px;
  58 + border-bottom: 1px solid #e6e6e6;
  59 + border-top: 1px solid #e6e6e6;
  60 + font-size: 34px;
  61 + background: #fff;
  62 + color: #000;
  63 + }
  64 +
  65 + .brand-thumb {
  66 + display: block;
  67 + float: left;
  68 + width: 150px;
  69 + height: 80px;
  70 + margin: 0;
  71 + }
  72 +
  73 + .entry {
  74 + color: #999;
  75 + font-size: 28px;
  76 + float: right;
  77 + }
  78 + }
  79 +
  80 + .brand-header {
  81 + position: relative;
  82 + height: 150px;
  83 +
  84 + > img {
  85 + display: block;
  86 + height: 100%;
  87 + width: 100%;
  88 + }
  89 + }
  90 +
  91 + .btn-intro, .btn-col {
  92 + position: absolute;
  93 + display: block;
  94 + width: 124px;
  95 + height: 48px;
  96 + line-height: 48px;
  97 + text-align: center;
  98 + border: 1px solid #fff;
  99 + color: #fff;
  100 +
  101 + top: 50%;
  102 + margin-top: -24px;
  103 + }
  104 +
  105 + .btn-intro {
  106 + right: 180px;
  107 + }
  108 +
  109 + .btn-col {
  110 + right: 30px;
  111 +
  112 + .iconfont {
  113 + font-size: 24px;
  114 + }
  115 +
  116 + &.coled {
  117 + opacity: 0.5;
  118 + }
  119 +
  120 + .txt:after {
  121 + content: '收藏'
  122 + }
  123 +
  124 + &.coled .txt:after {
  125 + content: '已收藏'
  126 + }
  127 + }
  128 +
  129 + .brand-intro-box {
  130 + position: fixed;
  131 + top: 0;
  132 + left: 0;
  133 + right: 0;
  134 + bottom: 0;
  135 + background: rgba(0,0,0,.3);
  136 + padding: 88px 0;
  137 + z-index: 1;
  138 + overflow: auto;
  139 +
  140 + .brand-intro {
  141 + position: relative;
  142 + box-sizing: border-box;
  143 + width: 85%;
  144 + margin: 0 7.5%;
  145 + background: #fff;
  146 + padding: 20px 8%;
  147 + }
  148 +
  149 + h2 {
  150 + text-align: center;
  151 + font-size: 34px;
  152 + line-height: 80px;
  153 + }
  154 +
  155 + .con {
  156 + font-size: 24px;
  157 + line-height: 32px;
  158 + padding: 40px 0;
  159 + border-top: 1px solid #e6e6e6;
  160 + border-bottom: 1px solid #e6e6e6;
  161 + overflow-x: hidden;
  162 + }
  163 +
  164 + .fo {
  165 + font-size: 36px;
  166 + height: 80px;
  167 + line-height: 80px;
  168 + text-align: center;
  169 +
  170 + > span {
  171 + font-size: 44px;
  172 + }
  173 + }
  174 +
  175 + .close-intro {
  176 + position: absolute;
  177 + top: 12px;
  178 + right: 12px;
  179 + }
  180 + }
  181 +
  182 + .list-nav {
  183 + border-top: 2px solid #fff;
  184 + border-bottom: 1px solid #e6e6e6;
  185 +
  186 + > li {
  187 + float: left;
  188 + width: 25%;
  189 + height: 66px;
  190 + line-height: 66px;
  191 + text-align: center;
  192 + font-size: 28px;
  193 + }
  194 + .bytouch{
  195 + background:#eee;
  196 + }
  197 +
  198 + a {
  199 + display: block;
  200 + box-sizing: border-box;
  201 + width: 100%;
  202 + height: 100%;
  203 + color: #999;
  204 + }
  205 +
  206 + .nav-txt {
  207 + display: inline-block;
  208 + height: 100%;
  209 + box-sizing: border-box;
  210 + }
  211 +
  212 + .active > a {
  213 + color: #000;
  214 +
  215 + .iconfont {
  216 + color: #999;
  217 +
  218 + &.cur {
  219 + color: #000;
  220 + }
  221 + }
  222 + }
  223 +
  224 + .new .iconfont {
  225 + transform: scale(0.8);
  226 + font-weight: bold;
  227 + }
  228 +
  229 + .filter .iconfont {
  230 + font-size: 24px;
  231 + transition: transform 0.1 ease-in;
  232 + }
  233 +
  234 + .filter.active .iconfont {
  235 + transform: rotate(-180deg);
  236 + }
  237 +
  238 + .icon {
  239 + position: relative;
  240 +
  241 + i {
  242 + position: absolute;
  243 + transform: scale(0.8);
  244 + font-weight: bold;
  245 + }
  246 +
  247 + .up {
  248 + top: -22px;
  249 + }
  250 +
  251 + .down {
  252 + top: -8px;
  253 + }
  254 + }
  255 + }
  256 +
  257 + .no-result {
  258 + text-align: center;
  259 + vertical-align: middle;
  260 + color: #ccc;
  261 + font-size: 1.2em;
  262 + margin-top: 440px;
  263 + }
  264 +
  265 + .goods-container {
  266 + position: relative;
  267 + min-height: 880px;
  268 + padding-left: 0.375rem;
  269 + padding-top: 0.2rem;
  270 + }
  271 +}
  1 +.newarrival-page {
  2 + background-color: #fff;
  3 +
  4 + .swiper-container {
  5 + width: 100%;
  6 + height: 310px;
  7 +
  8 + img {
  9 + height: 100%;
  10 + width: 100%;
  11 + }
  12 +
  13 + .swiper-pagination {
  14 + bottom: 0;
  15 + left: 0;
  16 + width: 100%;
  17 + }
  18 +
  19 + .swiper-pagination-bullet-active {
  20 + background: #fff;
  21 + }
  22 + }
  23 +
  24 + .banner-top-single{
  25 + width: 100%;
  26 + height: 200px;
  27 + img {
  28 + display: block;
  29 + height: 100%;
  30 + width: 100%;
  31 + }
  32 + }
  33 +
  34 + .list-nav {
  35 + border-top:2px solid #fff;
  36 + border-bottom:1px solid #e6e6e6;
  37 +
  38 + > li {
  39 + float: left;
  40 + width: 25%;
  41 + height: 66px;
  42 + line-height: 66px;
  43 + text-align: center;
  44 + font-size: 28px;
  45 + color: #999;
  46 + }
  47 + .bytouch{
  48 + background:#eee;
  49 + }
  50 + a {
  51 + display: inline-block;
  52 + box-sizing: border-box;
  53 + width: auto;
  54 + height: 100%;
  55 + color: #999;
  56 + }
  57 +
  58 + .active > a {
  59 + color: #000;
  60 + box-sizing:border-box;
  61 + }
  62 + .active > .iconfont {
  63 + color: #000;
  64 + &.cur {
  65 + color: #000;
  66 + }
  67 + }
  68 +
  69 + .filter .iconfont {
  70 + font-size: 24px;
  71 + transition: transform 0.1 ease-in;
  72 + }
  73 +
  74 + .filter.active .iconfont {
  75 + transform: rotate(-180deg);
  76 + }
  77 + }
  78 +
  79 + .no-result {
  80 + text-align: center;
  81 + vertical-align: middle;
  82 + color: #ccc;
  83 + font-size: 1.2em;
  84 + margin-top: 320px;
  85 + }
  86 +
  87 + .goods-container {
  88 + position: relative;
  89 + min-height: 880px;
  90 + padding-left: 0.375rem;
  91 + padding-top: 0.2rem;
  92 + }
  93 +
  94 +}
  1 +.good-detail-page{
  2 + .goods-desc {
  3 + padding-bottom: 20px;
  4 + padding-top: 20px;
  5 +
  6 + .service {
  7 + width: 494px;
  8 + height: 28px;
  9 + margin-left: 50px;
  10 + background: resolve('product/service.png') no-repeat;
  11 + background-size: cover;
  12 + }
  13 + .detail{
  14 + margin-bottom: 1px;
  15 + }
  16 + .desc-text {
  17 + font-size: 24px;
  18 + padding: 16px 12px;
  19 + color: $mainFontC;
  20 + background-color: $tableCellC;
  21 + }
  22 + }
  23 + .tips {
  24 + color: $subFontC;
  25 + font-size: 18px;
  26 + margin-top: 20px;
  27 + }
  28 + .materials {
  29 + overflow: hidden;
  30 + &.page-block{
  31 + margin-bottom: 0;
  32 + border-bottom: none;
  33 + .detail{
  34 + margin-bottom: 0;
  35 + }
  36 + }
  37 + .detail {
  38 + .material-item{
  39 + margin: 10px 0;
  40 + width: 100%;
  41 + height: auto;
  42 + overflow: hidden;
  43 + display: block;
  44 + position: relative;
  45 +
  46 + img {
  47 + margin: 0;
  48 + }
  49 + .material-image {
  50 + width: 23%;
  51 + position: absolute;
  52 + left: 0;
  53 + top: 50%;
  54 + transform: translateY(-50%);
  55 + }
  56 + .material-desc {
  57 + font-size: 24px;
  58 + box-sizing: border-box;
  59 + text-align: left;
  60 + padding-left: 2%;
  61 + height: auto;
  62 + line-height: 38px;
  63 + color: #4b4b4b;
  64 + word-wrap: break-word;
  65 + width: 76.9%;
  66 + float: right;
  67 + }
  68 + &:last-child{
  69 + border-bottom: none;
  70 + }
  71 + }
  72 + }
  73 + }
  74 + .wash-tips{
  75 + padding-top:20px;
  76 + &.page-block{
  77 + padding-left: 15px;
  78 + padding-right: 15px;
  79 + }
  80 + .tip{
  81 + display: inline-block;
  82 + width: 16.6%;
  83 + float:left;
  84 + img{
  85 + width: 48px;
  86 + height: 48px;
  87 + margin-bottom: 10px;
  88 + }
  89 + .caption{
  90 + display: block;
  91 + padding: 0 13px;
  92 + font-size: 18px;
  93 + line-height: 22px;
  94 + min-height: 44px;
  95 + text-align:center;
  96 + }
  97 + }
  98 +
  99 + }
  100 + .product-detail {
  101 + .detail {
  102 + img {
  103 + margin-top: 20px;
  104 + width: 581px;
  105 + height:auto;
  106 + }
  107 +
  108 + a {
  109 + color: #2f91f6;
  110 + text-decoration: underline;
  111 +
  112 + }
  113 +
  114 + }
  115 + margin-top: 30px;
  116 + margin-bottom: 30px;
  117 + }
  118 + .detail-swiper {
  119 + .swiper-wrapper {
  120 + .swiper-slide {
  121 + width: auto;
  122 + div {
  123 + text-align: center;
  124 + &.cell {
  125 + line-height: 53px;
  126 + font-size: 24px;
  127 + background-color: $tableCellC;
  128 + padding: 0 40px;
  129 + border: 1px solid #fff;
  130 + }
  131 + }
  132 + }
  133 + }
  134 + }
  135 + /*模特*/
  136 + #reference-swiper-container {
  137 + .first-group {
  138 + width: 70px;
  139 + margin-top: 55px;
  140 + div{
  141 + height: 55px;
  142 + .avatar {
  143 + display: inline-block;
  144 + width: 40px;
  145 + border-radius: 50%;
  146 + margin-top:7px;
  147 + }
  148 + }
  149 + }
  150 + }
  151 +
  152 + /*测量方法*/
  153 + .measurement-method {
  154 + .detail {
  155 + width: 100%;
  156 + margin-top:0;
  157 + margin-bottom: 0;
  158 + img {
  159 + width: 100%;
  160 + height:auto;
  161 + }
  162 + }
  163 + }
  164 +}
  1 +.recommend-for-you {
  2 + padding: 30px 0 30px;
  3 + border-top: 1px solid #e0e0e0;
  4 + border-bottom: 1px solid #e0e0e0;
  5 + background: #fff;
  6 +
  7 + .title {
  8 + font-size: 32px;
  9 + line-height: 88px;
  10 + text-align: center;
  11 + color: #444;
  12 + }
  13 +
  14 + .swiper-container {
  15 + padding: 30px 0 20px;
  16 + width: 100%;
  17 +
  18 + .swiper-slide {
  19 + padding: 0 10px;
  20 + float: left;
  21 + width: 156px;
  22 +
  23 + &:first-child {
  24 + padding-left: 30px;
  25 + }
  26 +
  27 + &:last-child {
  28 + padding-right: 30px;
  29 + }
  30 +
  31 + img {
  32 + width: 100%;
  33 + height: 208px;
  34 + }
  35 + }
  36 + }
  37 + .sale-name {
  38 + overflow: hidden;
  39 + text-overflow: ellipsis;
  40 + width: 100%;
  41 + white-space: nowrap;
  42 + margin-top: 20px;
  43 + color: #444;
  44 + }
  45 +
  46 + .price {
  47 + position: relative;
  48 + margin-top: 8px;
  49 + font-size: 24px;
  50 + line-height: 1;
  51 +
  52 + .sale-price {
  53 + display: block;
  54 + color: #d9134f;
  55 + margin-right: 8px;
  56 + }
  57 +
  58 + .old-price {
  59 + display: block;
  60 + color: #b0b0b0;
  61 + text-decoration: line-through;
  62 + }
  63 +
  64 + .no-price {
  65 + color: #444;
  66 + }
  67 + }
  68 +}
  1 +.suspend-cart {
  2 + position: fixed;
  3 + width: 88px;
  4 + height: 88px;
  5 + line-height: 88px;
  6 + border-radius: 50%;
  7 + background: rgba(0,0,0,0.3);
  8 + text-align: center;
  9 + right: 30px;
  10 + bottom: 140px;
  11 + z-index: 10;
  12 +
  13 + a {
  14 + display: block;
  15 + width: 100%;
  16 + height: 100%;
  17 + }
  18 +
  19 + .iconfont {
  20 + color: #fff;
  21 + font-size: 36px;
  22 + }
  23 +
  24 + .cart-count {
  25 + position: absolute;
  26 + top: -24px;
  27 + right: -20px;
  28 + width: 72px;
  29 + height: 72px;
  30 + font-size: 40px;
  31 + line-height: 72px;
  32 + color: #fff;
  33 + background: #f03d35;
  34 + text-align: center;
  35 + border-radius: 50%;
  36 + transform: scale(0.5);
  37 + }
  38 +}