Showing
17 changed files
with
695 additions
and
179 deletions
| 1 | /** | 1 | /** |
| 2 | * kids,lifestyle商品模块JS | 2 | * kids,lifestyle商品模块JS |
| 3 | - * @author: liuyue(yue.liu@yoho.cn) | ||
| 4 | - * @date: 2015/9/23 | ||
| 5 | - */ | ||
| 6 | -/* | ||
| 7 | -var $ = require('yoho.zepto'), | ||
| 8 | - Mustache = require('yoho.mustache'), | ||
| 9 | - lazyLoad = require('yoho.lazyload'); | ||
| 10 | - | ||
| 11 | - | ||
| 12 | -var tpl, | ||
| 13 | - res, | ||
| 14 | - $firstColumnNav = $('.column-nav').find('li').eq(0), | ||
| 15 | - $goodList = $('.two-column-goods').find('.goods-list'); | ||
| 16 | - | ||
| 17 | -if ($('.two-column-goods').size() <= 0) { | ||
| 18 | - return; | ||
| 19 | -} | ||
| 20 | - | ||
| 21 | -//read good-info template | ||
| 22 | -$.get('/common/goodinfo', function (data) { | ||
| 23 | - tpl = '{{# goods}}' + data + '{{/ goods}}'; | ||
| 24 | - Mustache.parse(tpl); | ||
| 25 | -}); | ||
| 26 | - | ||
| 27 | - | ||
| 28 | -function goodsAjax(url) { | ||
| 29 | - $.ajax({ | ||
| 30 | - type: 'GET', | ||
| 31 | - url: url | ||
| 32 | - }).then(function (data) { | ||
| 33 | - if (data.code === 200) { | ||
| 34 | - res = data.data; | ||
| 35 | - | ||
| 36 | - $goodList.html(Mustache.render(tpl, { | ||
| 37 | - goods: res.goods | ||
| 38 | - })); | ||
| 39 | - | ||
| 40 | - //lazyLoad | ||
| 41 | - lazyLoad($goodList.children('.good-info').find('img.lazy')); | ||
| 42 | - } | ||
| 43 | - }); | ||
| 44 | -} | ||
| 45 | - | ||
| 46 | -$firstColumnNav.addClass('current'); | ||
| 47 | -goodsAjax($('.column-nav').find('.current').data('url')); | ||
| 48 | - | ||
| 49 | -$('.column-nav').on('click', 'li', function () { | ||
| 50 | - $(this).addClass('current').siblings().removeClass('current'); | ||
| 51 | - goodsAjax($(this).data('url')); | ||
| 52 | -});*/ | ||
| 3 | + * @author: liangzhifeng<zhifeng.liang@yoho.cn> | ||
| 4 | + * @date: 2015/10/12 | ||
| 5 | + */ |
| @@ -4,10 +4,9 @@ | @@ -4,10 +4,9 @@ | ||
| 4 | * @date: 2015/10/12 | 4 | * @date: 2015/10/12 |
| 5 | */ | 5 | */ |
| 6 | var $ = require('yoho.zepto'), | 6 | var $ = require('yoho.zepto'), |
| 7 | - // Swiper = require('yoho.iswiper'), | 7 | + Swiper = require('yoho.iswiper'), |
| 8 | lazyLoad = require('yoho.lazyload'), | 8 | lazyLoad = require('yoho.lazyload'), |
| 9 | bannerSwiper, | 9 | bannerSwiper, |
| 10 | - hotBrandsSwiper, | ||
| 11 | recommendSwiper, | 10 | recommendSwiper, |
| 12 | trendTopicSwiper, | 11 | trendTopicSwiper, |
| 13 | goodsSwiper; | 12 | goodsSwiper; |
| @@ -22,10 +21,10 @@ var requestFrame, | @@ -22,10 +21,10 @@ var requestFrame, | ||
| 22 | supportCss3, | 21 | supportCss3, |
| 23 | $logotrans = $('.home-header .logo'), | 22 | $logotrans = $('.home-header .logo'), |
| 24 | isen = true; | 23 | isen = true; |
| 25 | - | ||
| 26 | -//lazyload | 24 | + |
| 27 | lazyLoad($('img.lazy')); | 25 | lazyLoad($('img.lazy')); |
| 28 | -/*$('img:in-viewport').trigger('appear'); | 26 | + |
| 27 | +//$('img:in-viewport').trigger('appear'); | ||
| 29 | 28 | ||
| 30 | 29 | ||
| 31 | //点击首页汉堡menu图标，滑出侧栏导航 | 30 | //点击首页汉堡menu图标，滑出侧栏导航 |
| @@ -154,15 +153,19 @@ $('.header-download').on('click', '.close-btn', function () { | @@ -154,15 +153,19 @@ $('.header-download').on('click', '.close-btn', function () { | ||
| 154 | //logo动画 | 153 | //logo动画 |
| 155 | requestFrame = (function () { | 154 | requestFrame = (function () { |
| 156 | prefixList = ['webkit', 'moz', 'ms']; | 155 | prefixList = ['webkit', 'moz', 'ms']; |
| 156 | + | ||
| 157 | for (i = 0; i < prefixList.length; i++) { | 157 | for (i = 0; i < prefixList.length; i++) { |
| 158 | thisFunc = prefixList[i] + 'RequestAnimationFrame'; | 158 | thisFunc = prefixList[i] + 'RequestAnimationFrame'; |
| 159 | if (window[thisFunc]) { | 159 | if (window[thisFunc]) { |
| 160 | supportCss3 = true; | 160 | supportCss3 = true; |
| 161 | - return function (callback) { | ||
| 162 | - window[thisFunc](callback); | ||
| 163 | - }; | ||
| 164 | } | 161 | } |
| 165 | } | 162 | } |
| 163 | + | ||
| 164 | + if (supportCss3) { | ||
| 165 | + return function (callback) { | ||
| 166 | + window[thisFunc](callback); | ||
| 167 | + }; | ||
| 168 | + } | ||
| 166 | return function (callback) { | 169 | return function (callback) { |
| 167 | window.setTimeout(callback, 67); | 170 | window.setTimeout(callback, 67); |
| 168 | }; | 171 | }; |
| @@ -171,7 +174,7 @@ requestFrame = (function () { | @@ -171,7 +174,7 @@ requestFrame = (function () { | ||
| 171 | function tsAnimate() { | 174 | function tsAnimate() { |
| 172 | start = start + 10; | 175 | start = start + 10; |
| 173 | $logotrans.css({ | 176 | $logotrans.css({ |
| 174 | - 'transform': 'rotateX(' + start + 'deg)', | 177 | + transform: 'rotateX(' + start + 'deg)', |
| 175 | '-webkit-transform': 'rotateX(' + start + 'deg)', | 178 | '-webkit-transform': 'rotateX(' + start + 'deg)', |
| 176 | '-moz-transform': 'rotateX(' + start + 'deg)' | 179 | '-moz-transform': 'rotateX(' + start + 'deg)' |
| 177 | }); | 180 | }); |
| @@ -199,4 +202,3 @@ function tsAnimate() { | @@ -199,4 +202,3 @@ function tsAnimate() { | ||
| 199 | 202 | ||
| 200 | tsAnimate(); | 203 | tsAnimate(); |
| 201 | 204 | ||
| 202 | -*/ |
| 1 | /** | 1 | /** |
| 2 | * “你可能喜欢”模块JS | 2 | * “你可能喜欢”模块JS |
| 3 | - * @author: xuqi(qi.xu@yoho.cn) | ||
| 4 | - * @date: 2015/7/15 | ||
| 5 | - */ | ||
| 6 | - | ||
| 7 | -/*var $ = require('yoho.jquery'), | ||
| 8 | - Mustache = require('yoho.mustache'), | ||
| 9 | - lazyLoad = require('yoho.lazyload'); | ||
| 10 | - | ||
| 11 | -var $maybeLike = $('.maybe-like:last'); | ||
| 12 | - | ||
| 13 | -var winH = $(window).height(), | ||
| 14 | - loading = false, | ||
| 15 | - end = false, | ||
| 16 | - page = 1, | ||
| 17 | - tpl, | ||
| 18 | - num, | ||
| 19 | - res, | ||
| 20 | - type = ''; | ||
| 21 | - | ||
| 22 | -var $goodList = $maybeLike.children('.goods-list'), | ||
| 23 | - mblTop; //页面内容固定，可以预先求出高度 | ||
| 24 | - | ||
| 25 | -var isLogin = 'Y'; //是否登录，后台提供，区分走Ajax还是页面跳转 | ||
| 26 | - | ||
| 27 | -if ($('.maybe-like').size() <= 0) { | ||
| 28 | - return; | ||
| 29 | -} | ||
| 30 | - | ||
| 31 | -mblTop = $maybeLike.offset().top; | ||
| 32 | - | ||
| 33 | -// 无可能喜欢模块时直接返回 | ||
| 34 | -if ($maybeLike.length === 0) { | ||
| 35 | - return; | ||
| 36 | -} | ||
| 37 | - | ||
| 38 | -//read good-info template | ||
| 39 | -$.get('/common/goodinfo', function (data) { | ||
| 40 | - tpl = '{{# goods}}' + data + '{{/ goods}}'; | ||
| 41 | - Mustache.parse(tpl); | ||
| 42 | -}); | ||
| 43 | - | ||
| 44 | - | ||
| 45 | -type = $('.mobile-wrap').hasClass('boys-wrap') ? 'index' : 'girl'; | ||
| 46 | - | ||
| 47 | -//商品收藏 | ||
| 48 | -$('.goods-list').delegate('.good-islike', 'touchstart', function (e) { | ||
| 49 | - var $cur, $good, id, url; | ||
| 50 | - | ||
| 51 | - if (isLogin === 'Y') { | ||
| 52 | - e.preventDefault(); // 阻止链接跳转改AJAX | ||
| 53 | - | ||
| 54 | - $cur = $(e.currentTarget); | ||
| 55 | - $good = $cur.closest('.good-info'); | ||
| 56 | - id = $good.data('id'); | ||
| 57 | - | ||
| 58 | - if ($cur.hasClass('good-like')) { | ||
| 59 | - url = '/' + type + '/cancelprise'; | ||
| 60 | - } else { | ||
| 61 | - url = '/' + type + '/prise'; | ||
| 62 | - } | ||
| 63 | - | ||
| 64 | - | ||
| 65 | - $.ajax({ | ||
| 66 | - type: 'GET', | ||
| 67 | - url: url, | ||
| 68 | - data: { | ||
| 69 | - id: id | ||
| 70 | - } | ||
| 71 | - }).then(function (data) { | ||
| 72 | - if (data.code === 200) { | ||
| 73 | - $cur.toggleClass('good-like'); | ||
| 74 | - } | ||
| 75 | - }); | ||
| 76 | - } | ||
| 77 | -}); | ||
| 78 | - | ||
| 79 | - | ||
| 80 | - | ||
| 81 | -//srcoll to load more | ||
| 82 | -$(window).scroll(function () { | ||
| 83 | - if (end || loading) { | ||
| 84 | - return; | ||
| 85 | - } | ||
| 86 | - | ||
| 87 | - if ($(window).scrollTop() + winH < mblTop + $maybeLike.height()) { | ||
| 88 | - return; | ||
| 89 | - } | ||
| 90 | - | ||
| 91 | - loading = true; | ||
| 92 | - num = $goodList.children('.good-info').length; | ||
| 93 | - $.ajax({ | ||
| 94 | - type: 'GET', | ||
| 95 | - url: '/' + type + '/getmore', | ||
| 96 | - data: { | ||
| 97 | - page: page + 1 | ||
| 98 | - } | ||
| 99 | - }).then(function (data) { | ||
| 100 | - if (data.code === 200) { | ||
| 101 | - res = data.data; | ||
| 102 | - | ||
| 103 | - if (res.end) { | ||
| 104 | - end = res.end; | ||
| 105 | - } | ||
| 106 | - | ||
| 107 | - $goodList.append(Mustache.render(tpl, { | ||
| 108 | - goods: res.goods | ||
| 109 | - })); | ||
| 110 | - | ||
| 111 | - //lazyLoad | ||
| 112 | - lazyLoad($goodList.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy')); | ||
| 113 | - | ||
| 114 | - loading = false; | ||
| 115 | - page++; | ||
| 116 | - } | ||
| 117 | - }); | ||
| 118 | -});*/ | ||
| 3 | + * @author: liangzhifeng<zhifeng.liang@yoho.cn> | ||
| 4 | + * @date: 2015/10/12 | ||
| 5 | + */ |
static/sass/newsale/_discount.scss
0 → 100644
| 1 | +.discount-section { | ||
| 2 | + li { | ||
| 3 | + margin-bottom: 30rem / $pxConvertRem; | ||
| 4 | + font-size: 24rem / $pxConvertRem; | ||
| 5 | + line-height: 76rem / $pxConvertRem; | ||
| 6 | + background: #fff; | ||
| 7 | + | ||
| 8 | + a { | ||
| 9 | + color: #000; | ||
| 10 | + } | ||
| 11 | + | ||
| 12 | + img { | ||
| 13 | + text-align: center; | ||
| 14 | + width: 640rem / $pxConvertRem; | ||
| 15 | + height: 250rem / $pxConvertRem; | ||
| 16 | + vertical-align: middle; | ||
| 17 | + } | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + .title { | ||
| 21 | + float: left; | ||
| 22 | + padding-left: 20rem / $pxConvertRem; | ||
| 23 | + } | ||
| 24 | + | ||
| 25 | + .time { | ||
| 26 | + float: right; | ||
| 27 | + padding-right: 20rem / $pxConvertRem; | ||
| 28 | + | ||
| 29 | + &.rush { | ||
| 30 | + color: #d0021b; | ||
| 31 | + } | ||
| 32 | + } | ||
| 33 | +} |
static/sass/newsale/_floor-header.scss
0 → 100644
| 1 | +.floor-header{ | ||
| 2 | + margin: 29rem / $pxConvertRem 30rem / $pxConvertRem 0; | ||
| 3 | + background: #fff; | ||
| 4 | + border: 1px solid #e0e0e0; | ||
| 5 | + border-bottom: none; | ||
| 6 | + height: 70rem / $pxConvertRem; | ||
| 7 | + line-height: 70rem / $pxConvertRem; | ||
| 8 | + text-align: center; | ||
| 9 | + font-size: 30rem / $pxConvertRem; | ||
| 10 | + color: #b1b1b1; | ||
| 11 | +} |
static/sass/newsale/_good-info.scss
0 → 100644
| 1 | +.good-info { | ||
| 2 | + float: left; | ||
| 3 | + width: 276rem / $pxConvertRem; | ||
| 4 | + height: 486rem / $pxConvertRem; | ||
| 5 | + margin: 0 (15rem / $pxConvertRem); | ||
| 6 | + | ||
| 7 | + .tag-container { | ||
| 8 | + height: 28rem / $pxConvertRem; | ||
| 9 | + width: 100%; | ||
| 10 | + overflow: hidden; | ||
| 11 | + | ||
| 12 | + .good-tag { | ||
| 13 | + display: block; | ||
| 14 | + float: left; | ||
| 15 | + height: 28rem / $pxConvertRem; | ||
| 16 | + font-size: 18rem / $pxConvertRem; | ||
| 17 | + text-align: center; | ||
| 18 | + line-height: 28rem / $pxConvertRem; | ||
| 19 | + box-sizing: border-box; | ||
| 20 | + margin-right: 4rem / $pxConvertRem; | ||
| 21 | + | ||
| 22 | + &:last-child { | ||
| 23 | + margin-right: 0; | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + .new-tag { | ||
| 28 | + width: 60rem / $pxConvertRem; | ||
| 29 | + background-color: #78dc7e; | ||
| 30 | + color: #fff; | ||
| 31 | + } | ||
| 32 | + | ||
| 33 | + .renew-tag { | ||
| 34 | + width: 90rem / $pxConvertRem; | ||
| 35 | + background-color: #78dc7e; | ||
| 36 | + color: #fff; | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + .sale-tag { | ||
| 40 | + width: 60rem / $pxConvertRem; | ||
| 41 | + background-color: #ff575c; | ||
| 42 | + color: #fff; | ||
| 43 | + } | ||
| 44 | + | ||
| 45 | + .yohood-tag { | ||
| 46 | + width: 90rem / $pxConvertRem; | ||
| 47 | + background: image-url("yohood.png") no-repeat; | ||
| 48 | + background-size: 100% 100%; | ||
| 49 | + } | ||
| 50 | + | ||
| 51 | + .limit-tag { | ||
| 52 | + width: 90rem / $pxConvertRem; | ||
| 53 | + border: 1px solid #000; | ||
| 54 | + color: #000; | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | +} | ||
| 58 | + | ||
| 59 | +.good-detail-img { | ||
| 60 | + position: relative; | ||
| 61 | + | ||
| 62 | + .good-islike { | ||
| 63 | + position: absolute; | ||
| 64 | + width: 60rem / $pxConvertRem; | ||
| 65 | + height: 60rem / $pxConvertRem; | ||
| 66 | + top: 0rem / $pxConvertRem; | ||
| 67 | + right: 0rem / $pxConvertRem; | ||
| 68 | + line-height: 60rem / $pxConvertRem; | ||
| 69 | + font-size: 30rem / $pxConvertRem; | ||
| 70 | + text-align: center; | ||
| 71 | + color: #b0b0b0; | ||
| 72 | + text-decoration: none; | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + .good-like { | ||
| 76 | + color: #d72928; | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + img { | ||
| 80 | + display: block; | ||
| 81 | + width: 100%; | ||
| 82 | + height: 366rem / $pxConvertRem; | ||
| 83 | + } | ||
| 84 | + | ||
| 85 | + .few-tag { | ||
| 86 | + position: absolute; | ||
| 87 | + bottom: 0; | ||
| 88 | + width: 100%; | ||
| 89 | + height: 28rem / $pxConvertRem; | ||
| 90 | + background: #ffac5b; | ||
| 91 | + font-size: 18rem / $pxConvertRem; | ||
| 92 | + color: #fff; | ||
| 93 | + line-height: 28rem / $pxConvertRem; | ||
| 94 | + text-align: center; | ||
| 95 | + } | ||
| 96 | +} | ||
| 97 | + | ||
| 98 | +.good-detail-text { | ||
| 99 | + .name a { | ||
| 100 | + display: block; | ||
| 101 | + line-height: 56rem / $pxConvertRem; | ||
| 102 | + overflow: hidden; | ||
| 103 | + white-space: nowrap; | ||
| 104 | + text-overflow: ellipsis; | ||
| 105 | + text-decoration: none; | ||
| 106 | + font-size: 22rem / $pxConvertRem; | ||
| 107 | + color: #444; | ||
| 108 | + } | ||
| 109 | + | ||
| 110 | + .price { | ||
| 111 | + line-height: 22rem / $pxConvertRem; | ||
| 112 | + font-size: 22rem / $pxConvertRem; | ||
| 113 | + | ||
| 114 | + .sale-price { | ||
| 115 | + color: #d62927; | ||
| 116 | + } | ||
| 117 | + | ||
| 118 | + .sale-price.no-price { | ||
| 119 | + color: #000; | ||
| 120 | + } | ||
| 121 | + | ||
| 122 | + .market-price { | ||
| 123 | + margin: 0 0 0 (5rem / $pxConvertRem); | ||
| 124 | + color: #b0b0b0; | ||
| 125 | + text-decoration: line-through; | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + | ||
| 129 | + .vip-tag { | ||
| 130 | + display: none; | ||
| 131 | + margin: (5rem / $pxConvertRem) 0 0; | ||
| 132 | + padding: 0 0 0 (96rem / $pxConvertRem); | ||
| 133 | + height: 32rem / $pxConvertRem; | ||
| 134 | + line-height: 32rem / $pxConvertRem; | ||
| 135 | + background: image-url("sale-icon/vip.png") no-repeat left center; | ||
| 136 | + background-size: auto 100%; | ||
| 137 | + font-size: 18rem / $pxConvertRem; | ||
| 138 | + } | ||
| 139 | +} |
static/sass/newsale/_goods-container.scss
0 → 100644
| 1 | +@import "./goods-nav","./good-info"; | ||
| 2 | +.goods-content{ | ||
| 3 | + position: relative; | ||
| 4 | + background: #fff; | ||
| 5 | + padding: 0 0 0 15rem / $pxConvertRem; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.screen-mask, .screen-content { | ||
| 9 | + position: absolute; | ||
| 10 | + left: 0; | ||
| 11 | + right: 0; | ||
| 12 | + top: 0; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +.screen-mark { | ||
| 16 | + height: 100%; | ||
| 17 | + background-color: #000; | ||
| 18 | + opacity: 0.1; | ||
| 19 | + filter: Alpha(opacity=10); | ||
| 20 | +} | ||
| 21 | + | ||
| 22 | +.screen-content{ | ||
| 23 | + .classify{ | ||
| 24 | + float: left; | ||
| 25 | + width: 320rem / $pxConvertRem; | ||
| 26 | + background: #f8f8f8; | ||
| 27 | + li{ | ||
| 28 | + padding-left: 28rem / $pxConvertRem; | ||
| 29 | + height: 80rem / $pxConvertRem; | ||
| 30 | + line-height: 80rem / $pxConvertRem; | ||
| 31 | + font-size: 28rem / $pxConvertRem; | ||
| 32 | + h1{ | ||
| 33 | + display: inline-block; | ||
| 34 | + color: #a0a0a0; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + li.active{ | ||
| 38 | + background: #fff; | ||
| 39 | + h1{ | ||
| 40 | + color: #000; | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + .sub-classify-container{ | ||
| 45 | + float: left; | ||
| 46 | + width: 320rem / $pxConvertRem; | ||
| 47 | + background: #fff; | ||
| 48 | + height: 100%; | ||
| 49 | + overflow-y:auto; | ||
| 50 | + li{ | ||
| 51 | + position: relative; | ||
| 52 | + margin: 0 0 0 20rem / $pxConvertRem; | ||
| 53 | + padding: 0 0 0 14rem / $pxConvertRem; | ||
| 54 | + height: 78rem / $pxConvertRem; | ||
| 55 | + line-height: 78rem / $pxConvertRem; | ||
| 56 | + border-bottom: 2rem / $pxConvertRem solid #e0e0e0; | ||
| 57 | + font-size: 28rem / $pxConvertRem; | ||
| 58 | + color: #000; | ||
| 59 | + .chosed-icon{ | ||
| 60 | + display: none; | ||
| 61 | + position: absolute; | ||
| 62 | + top: 0; | ||
| 63 | + right: 28rem / $pxConvertRem; | ||
| 64 | + font-size: 32rem / $pxConvertRem; | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + li.chosed{ | ||
| 68 | + .chosed-icon{ | ||
| 69 | + display: block; | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + } | ||
| 73 | +} | ||
| 74 | + |
static/sass/newsale/_goods-group.scss
0 → 100644
static/sass/newsale/_goods-item.scss
0 → 100644
| 1 | +.goods-item { | ||
| 2 | + float: left; | ||
| 3 | + margin: 15rem/$pxConvertRem; | ||
| 4 | + background: #fff; | ||
| 5 | + color: #444; | ||
| 6 | + a { | ||
| 7 | + font-size: 22rem/$pxConvertRem; | ||
| 8 | + line-height: 36rem/$pxConvertRem; | ||
| 9 | + color: #222; | ||
| 10 | + } | ||
| 11 | + img { | ||
| 12 | + width: 276rem/$pxConvertRem; | ||
| 13 | + height: 368rem/$pxConvertRem; | ||
| 14 | + } | ||
| 15 | + .goods-title { | ||
| 16 | + max-width: 276rem/$pxConvertRem; | ||
| 17 | + overflow: hidden; | ||
| 18 | + white-space: nowrap; | ||
| 19 | + text-overflow: ellipsis; | ||
| 20 | + } | ||
| 21 | + .price { | ||
| 22 | + font-size: 22rem/$pxConvertRem; | ||
| 23 | + line-height: 32rem/$pxConvertRem; | ||
| 24 | + } | ||
| 25 | + .sale-price { | ||
| 26 | + color: #d0021b; | ||
| 27 | + } | ||
| 28 | + .sale-price.no-price { | ||
| 29 | + color: #000; | ||
| 30 | + } | ||
| 31 | + .market-price { | ||
| 32 | + margin: 0 0 0 (5rem / $pxConvertRem); | ||
| 33 | + color: #b6b6b6; | ||
| 34 | + text-decoration: line-through; | ||
| 35 | + } | ||
| 36 | + .vip-cheap { | ||
| 37 | + font-size: 18rem/$pxConvertRem; | ||
| 38 | + line-height: 32rem/$pxConvertRem; | ||
| 39 | + } | ||
| 40 | + %vip-icon { | ||
| 41 | + float: left; | ||
| 42 | + margin-right: 12rem/$pxConvertRem; | ||
| 43 | + background-size: 100%; | ||
| 44 | + background-repeat: no-repeat; | ||
| 45 | + } | ||
| 46 | + .vip-icon { | ||
| 47 | + @extend %vip-icon; | ||
| 48 | + width: 88rem/$pxConvertRem; | ||
| 49 | + height: 32rem/$pxConvertRem; | ||
| 50 | + background-image: url(../img/sale-icon/vip.png); | ||
| 51 | + } | ||
| 52 | + .vip-card-gold { | ||
| 53 | + @extend %vip-icon; | ||
| 54 | + width: 52rem/$pxConvertRem; | ||
| 55 | + height: 32rem/$pxConvertRem; | ||
| 56 | + background-image: url(../img/sale-icon/vip-card-gold.png); | ||
| 57 | + } | ||
| 58 | +} | ||
| 59 | + |
static/sass/newsale/_goods-nav.scss
0 → 100644
| 1 | +.goods-nav { | ||
| 2 | + position: relative; | ||
| 3 | + width: 100%; | ||
| 4 | + height: 67rem / $pxConvertRem; | ||
| 5 | + background: #fff; | ||
| 6 | + text-align: center; | ||
| 7 | + overflow: hidden; | ||
| 8 | + | ||
| 9 | + &:after { | ||
| 10 | + content: ''; | ||
| 11 | + position: absolute; | ||
| 12 | + left: 0; | ||
| 13 | + bottom: 0; | ||
| 14 | + width: 100%; | ||
| 15 | + border-top: 1px solid #e6e6e6; | ||
| 16 | + } | ||
| 17 | + | ||
| 18 | + .swiper-wrapper { | ||
| 19 | + white-space: nowrap; | ||
| 20 | + } | ||
| 21 | + | ||
| 22 | + li { | ||
| 23 | + display: inline-block; | ||
| 24 | + width: auto; | ||
| 25 | + margin: 0 0 0 (34.4rem / $pxConvertRem); | ||
| 26 | + font-size: 28rem / $pxConvertRem; | ||
| 27 | + padding: 0 (6rem / $pxConvertRem); | ||
| 28 | + height: 67rem / $pxConvertRem; | ||
| 29 | + line-height: 67rem / $pxConvertRem; | ||
| 30 | + color: #999; | ||
| 31 | + | ||
| 32 | + // border-bottom: (4rem / $pxConvertRem) solid transparent; | ||
| 33 | + span { | ||
| 34 | + display: inline-block; | ||
| 35 | + } | ||
| 36 | + | ||
| 37 | + .sort { | ||
| 38 | + width: 24rem / $pxConvertRem; | ||
| 39 | + vertical-align: middle; | ||
| 40 | + } | ||
| 41 | + | ||
| 42 | + .iconfont { | ||
| 43 | + display: block; | ||
| 44 | + font-size: 26rem / $pxConvertRem; | ||
| 45 | + height: 30rem / $pxConvertRem; | ||
| 46 | + line-height: 40rem / $pxConvertRem; | ||
| 47 | + | ||
| 48 | + &.down { | ||
| 49 | + line-height: 30rem / $pxConvertRem; | ||
| 50 | + } | ||
| 51 | + | ||
| 52 | + &.up + .down { | ||
| 53 | + line-height: 20rem / $pxConvertRem; | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + | ||
| 58 | + li.focus { | ||
| 59 | + color: #000; | ||
| 60 | + | ||
| 61 | + &:after { | ||
| 62 | + content: ''; | ||
| 63 | + position: absolute; | ||
| 64 | + left: 0; | ||
| 65 | + bottom: 0; | ||
| 66 | + width: 100%; | ||
| 67 | + border-top: (4rem / $pxConvertRem) solid #000; | ||
| 68 | + z-index: 1; | ||
| 69 | + } | ||
| 70 | + | ||
| 71 | + .sort { | ||
| 72 | + .iconfont { | ||
| 73 | + color: #c0c0c0; | ||
| 74 | + | ||
| 75 | + &.cur { | ||
| 76 | + color: #000; | ||
| 77 | + } | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + .screen-nav { | ||
| 83 | + .iconfont { | ||
| 84 | + line-height: 30rem / $pxConvertRem; | ||
| 85 | + transition: transform .1s ease-in; | ||
| 86 | + transform: scale(0.83); | ||
| 87 | + } | ||
| 88 | + | ||
| 89 | + &.focus { | ||
| 90 | + .iconfont { | ||
| 91 | + transform: scale(0.83) rotate(-180deg); | ||
| 92 | + -webkit-transform: scale(0.83) rotate(-180deg); | ||
| 93 | + color: #000 !important; | ||
| 94 | + } | ||
| 95 | + } | ||
| 96 | + } | ||
| 97 | +} | ||
| 98 | + | ||
| 99 | +.s-goods-nav { | ||
| 100 | + li { | ||
| 101 | + float: left; | ||
| 102 | + display: inline; | ||
| 103 | + } | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +.size-nav { | ||
| 107 | + height: 49rem / $pxConvertRem; | ||
| 108 | + line-height: 49rem / $pxConvertRem; | ||
| 109 | + background: #f0f0f0; | ||
| 110 | + border-bottom: (2rem / $pxConvertRem) solid #e6e6e6; | ||
| 111 | + overflow: hidden; | ||
| 112 | + | ||
| 113 | + li { | ||
| 114 | + float: left; | ||
| 115 | + width: auto; | ||
| 116 | + padding: 0 (25rem / $pxConvertRem); | ||
| 117 | + font-size: 28rem / $pxConvertRem; | ||
| 118 | + color: #999; | ||
| 119 | + } | ||
| 120 | + | ||
| 121 | + li.focus { | ||
| 122 | + color: #000; | ||
| 123 | + } | ||
| 124 | +} |
static/sass/newsale/_header-banner.scss
0 → 100644
| 1 | +.header-banner { | ||
| 2 | + position: relative; | ||
| 3 | + width: 100%; | ||
| 4 | + height: 200rem / $pxConvertRem; | ||
| 5 | + overflow: hidden; | ||
| 6 | + .swiper-wrapper{ | ||
| 7 | + position: relative; | ||
| 8 | + width: 100%; | ||
| 9 | + height: 100%; | ||
| 10 | + } | ||
| 11 | + .swiper-slide{ | ||
| 12 | + float: left; | ||
| 13 | + width: 100%; | ||
| 14 | + height: 100%; | ||
| 15 | + } | ||
| 16 | + img { | ||
| 17 | + display: block; | ||
| 18 | + width: 100%; | ||
| 19 | + height: 100%; | ||
| 20 | + } | ||
| 21 | + .desc { | ||
| 22 | + box-sizing: border-box; | ||
| 23 | + position:absolute; | ||
| 24 | + left: 0; | ||
| 25 | + bottom: 0; | ||
| 26 | + padding-right: 30rem/$pxConvertRem; | ||
| 27 | + width: 100%; | ||
| 28 | + font-size: 22rem/$pxConvertRem; | ||
| 29 | + line-height: 50rem/$pxConvertRem; | ||
| 30 | + color: #fff; | ||
| 31 | + background: rgba(120,120,120,.5); | ||
| 32 | + text-align: right; | ||
| 33 | + } | ||
| 34 | +} |
static/sass/newsale/_header.scss
0 → 100644
| 1 | +.header{ | ||
| 2 | + height: 88rem / $pxConvertRem; | ||
| 3 | + line-height: 88rem / $pxConvertRem; | ||
| 4 | + text-align: center; | ||
| 5 | + background: #222; | ||
| 6 | + color: #fff; | ||
| 7 | + font-size: 34rem / $pxConvertRem; | ||
| 8 | + .icon-back{ | ||
| 9 | + float: left; | ||
| 10 | + margin-left: 33rem / $pxConvertRem; | ||
| 11 | + font-size: 32rem / $pxConvertRem; | ||
| 12 | + color: #fff; | ||
| 13 | + } | ||
| 14 | + .icon-home{ | ||
| 15 | + float: right; | ||
| 16 | + margin-right: 26px; | ||
| 17 | + font-size: 32rem / $pxConvertRem; | ||
| 18 | + color: #fff; | ||
| 19 | + } | ||
| 20 | +} |
static/sass/newsale/_hot-rank.scss
0 → 100644
| 1 | +.rank-main { | ||
| 2 | + padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem); | ||
| 3 | + background: #fff; | ||
| 4 | + | ||
| 5 | + li { | ||
| 6 | + .item-img { | ||
| 7 | + float: left; | ||
| 8 | + width: 150rem / $pxConvertRem; | ||
| 9 | + height: 200rem / $pxConvertRem; | ||
| 10 | + padding: (12rem / $pxConvertRem) 0; | ||
| 11 | + line-height: 200rem / $pxConvertRem; | ||
| 12 | + text-align: center; | ||
| 13 | + | ||
| 14 | + img { | ||
| 15 | + max-width: 100%; | ||
| 16 | + max-height: 100%; | ||
| 17 | + vertical-align: middle; | ||
| 18 | + } | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + .item-content { | ||
| 22 | + float: left; | ||
| 23 | + width: 407rem / $pxConvertRem; | ||
| 24 | + height: 213rem / $pxConvertRem; | ||
| 25 | + margin: 0 0 0 (13rem / $pxConvertRem); | ||
| 26 | + padding: (12rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem); | ||
| 27 | + border-top: 1px solid #e0e0e0; | ||
| 28 | + | ||
| 29 | + .rank-icon { | ||
| 30 | + display: block; | ||
| 31 | + height: 50rem / $pxConvertRem; | ||
| 32 | + width: 50rem / $pxConvertRem; | ||
| 33 | + line-height: 58rem / $pxConvertRem; | ||
| 34 | + text-align: center; | ||
| 35 | + font-size: 22rem / $pxConvertRem; | ||
| 36 | + color: #fff; | ||
| 37 | + background: image-url("sale-icon/rank.png") no-repeat; | ||
| 38 | + background-size: 100%; | ||
| 39 | + | ||
| 40 | + &.top { | ||
| 41 | + background: image-url("sale-icon/rank-t.png") no-repeat; | ||
| 42 | + background-size: 100%; | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + h2 { | ||
| 47 | + width: 9.5rem; | ||
| 48 | + line-height: 1.285; | ||
| 49 | + color: #444; | ||
| 50 | + font-size: 28rem / $pxConvertRem; | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + p { | ||
| 54 | + width: 9.5rem; | ||
| 55 | + line-height: 1.5; | ||
| 56 | + font-size: 24rem / $pxConvertRem; | ||
| 57 | + color: #d0021b; | ||
| 58 | + text-overflow: ellipsis; | ||
| 59 | + overflow: hidden; | ||
| 60 | + white-space: nowrap; | ||
| 61 | + | ||
| 62 | + span { | ||
| 63 | + text-decoration: line-through; | ||
| 64 | + color: #b0b0b0; | ||
| 65 | + margin-left: 10rem / $pxConvertRem; | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + | ||
| 71 | + li:first-child { | ||
| 72 | + .item-content { | ||
| 73 | + border: none; | ||
| 74 | + } | ||
| 75 | + } | ||
| 76 | +} |
static/sass/newsale/_list-nav.scss
0 → 100644
| 1 | +.goods-nav { | ||
| 2 | + border-bottom: (2rem / $pxConvertRem) solid #e6e6e6; | ||
| 3 | + height: 67rem / $pxConvertRem; | ||
| 4 | + overflow: hidden; | ||
| 5 | + | ||
| 6 | + li { | ||
| 7 | + float: left; | ||
| 8 | + width: auto; | ||
| 9 | + height: 67rem / $pxConvertRem; | ||
| 10 | + line-height: 67rem / $pxConvertRem; | ||
| 11 | + width: 145rem / $pxConvertRem; | ||
| 12 | + text-align: center; | ||
| 13 | + font-size: 28rem / $pxConvertRem; | ||
| 14 | + | ||
| 15 | + a { | ||
| 16 | + display: inline-block; | ||
| 17 | + padding: 0 (5rem / $pxConvertRem); | ||
| 18 | + font-size: 28rem / $pxConvertRem; | ||
| 19 | + color: #999; | ||
| 20 | + height: 65rem / $pxConvertRem; | ||
| 21 | + } | ||
| 22 | + } | ||
| 23 | + | ||
| 24 | + li:first-child { | ||
| 25 | + margin-left: 30rem / $pxConvertRem; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + li.focus { | ||
| 29 | + a { | ||
| 30 | + border-bottom: (4rem / $pxConvertRem) solid #000; | ||
| 31 | + color: #000; | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +.s-goods-nav { | ||
| 37 | + overflow: hidden; | ||
| 38 | + | ||
| 39 | + li { | ||
| 40 | + margin: 0 0 0 (50rem / $pxConvertRem); | ||
| 41 | + width: auto; | ||
| 42 | + | ||
| 43 | + a { | ||
| 44 | + padding: 0; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + li:first-child { | ||
| 49 | + margin: 0 0 0 (39rem / $pxConvertRem); | ||
| 50 | + } | ||
| 51 | +} |
static/sass/newsale/_only-for-member.scss
0 → 100644
| 1 | +.vip-no-login .good-info { | ||
| 2 | + height: 523rem / $pxConvertRem; | ||
| 3 | +} | ||
| 4 | + | ||
| 5 | +.vip-no-login .vip-tag { | ||
| 6 | + display: block; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.vip-card .good-detail-text .price { | ||
| 10 | + padding-left: 66rem / $pxConvertRem; | ||
| 11 | + height: 32rem / $pxConvertRem; | ||
| 12 | + line-height: 32rem / $pxConvertRem; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +.vip-gold .good-detail-text .price { | ||
| 16 | + background: url(../img/sale-icon/vip-card-gold.png) no-repeat; | ||
| 17 | + background-size: auto 100%; | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +.vip-platinum .good-detail-text .price { | ||
| 21 | + background: url(../img/sale-icon/vip-card-platinum.png) no-repeat; | ||
| 22 | + background-size: auto 100%; | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +.vip-silver .good-detail-text .price { | ||
| 26 | + background: url(../img/sale-icon/vip-card-silver.png) no-repeat; | ||
| 27 | + background-size: auto 100%; | ||
| 28 | +} |
static/sass/newsale/_sale.scss
0 → 100644
| 1 | +.sale-section { | ||
| 2 | + background: #fff; | ||
| 3 | + | ||
| 4 | + ul { | ||
| 5 | + text-align: center; | ||
| 6 | + padding: (15rem / $pxConvertRem) 0 (15rem / $pxConvertRem) (15rem / $pxConvertRem); | ||
| 7 | + } | ||
| 8 | + | ||
| 9 | + li { | ||
| 10 | + float: left; | ||
| 11 | + margin: (15rem / $pxConvertRem) (15rem / $pxConvertRem); | ||
| 12 | + width: 275rem / $pxConvertRem; | ||
| 13 | + height: 130rem / $pxConvertRem; | ||
| 14 | + | ||
| 15 | + img { | ||
| 16 | + width: 100%; | ||
| 17 | + height: 100%; | ||
| 18 | + } | ||
| 19 | + } | ||
| 20 | +} |
-
Please register or login to post a comment