Skip to content

Y
ypl_share_web
Commit 199717af by 黄秀兰
Options

responsive icon

parent 19415895
Pipeline #570 skipped in 0 seconds
Showing with 1134 additions and 150 deletions
dist/css/photographer.css
...@@ -193,13 +193,33 @@ ...@@ -193,13 +193,33 @@
} }
.photographer .head .photographer-level { .photographer .head .photographer-level {
position: absolute; position: absolute;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
width: 26px;
height: 26px;
top: 2.77333333rem; top: 2.77333333rem;
left: 2.4rem; left: 2.4rem;
} }
@media (max-width: 767px) {
.photographer .head .photographer-level {
width: 26px;
height: 26px;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer .head .photographer-level {
width: 52px;
height: 52px;
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -200px 0px;
}
}
@media (min-width: 1200px) {
.photographer .head .photographer-level {
width: 78px;
height: 78px;
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -300px 0px;
}
}
.photographer .name { .photographer .name {
color: #353535; color: #353535;
font-size: 0.74666667rem; font-size: 0.74666667rem;
...@@ -216,27 +236,95 @@ ...@@ -216,27 +236,95 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.photographer .area .icon-woman, @media (max-width: 767px) {
.photographer .area .icon-man { .photographer .area .icon-woman,
background-image: url('../../dist/img/sprites-photographer.png'); .photographer .area .icon-man {
} background-image: url('../../dist/img/sprites-photographer.png');
.photographer .area .icon-woman { }
background-position: -100px -42px; .photographer .area .icon-woman {
} background-position: -100px -42px;
.photographer .area .icon-man { }
background-position: -100px -26px; .photographer .area .icon-man {
background-position: -100px -26px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer .area .icon-woman,
.photographer .area .icon-man {
width: 32px;
height: 32px;
}
.photographer .area .icon-woman,
.photographer .area .icon-man {
background-image: url('../../dist/img/sprites-photographer-2x.png');
}
.photographer .area .icon-woman {
background-position: -200px -84px;
}
.photographer .area .icon-man {
background-position: -200px -52px;
}
}
@media (min-width: 1200px) {
.photographer .area .icon-woman,
.photographer .area .icon-man {
width: 48px;
height: 48px;
}
.photographer .area .icon-woman,
.photographer .area .icon-man {
background-image: url('../../dist/img/sprites-photographer-3x.png');
}
.photographer .area .icon-woman {
background-position: -300px -126px;
}
.photographer .area .icon-man {
background-position: -300px -78px;
}
} }
.photographer .stars { .photographer .stars {
height: 0.66666667rem; height: 0.66666667rem;
margin-bottom: 1.6rem; margin-bottom: 1.6rem;
} }
.photographer .stars .stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .photographer .stars .stars-info {
background-position: 0px -66px; background-image: url('../../dist/img/sprites-photographer.png');
} background-position: 0px -66px;
.photographer .stars .stars-level { }
background-image: url('../../dist/img/sprites-photographer.png'); .photographer .stars .stars-level {
background-position: 0px -50px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer .stars .stars-info,
.photographer .stars .stars-level {
width: 200px;
height: 32px;
}
.photographer .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -132px;
}
.photographer .stars .stars-level {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -100px;
}
}
@media (min-width: 1200px) {
.photographer .stars .stars-info,
.photographer .stars .stars-level {
width: 300px;
height: 48px;
}
.photographer .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -198px;
}
.photographer .stars .stars-level {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -150px;
}
} }
.photographer .stars-info { .photographer .stars-info {
position: absolute; position: absolute;
...@@ -295,8 +383,6 @@ ...@@ -295,8 +383,6 @@
} }
.photographer-related .private-letter div:nth-child(1), .photographer-related .private-letter div:nth-child(1),
.photographer-related .attention div:nth-child(1) { .photographer-related .attention div:nth-child(1) {
width: 50px;
height: 50px;
margin: auto; margin: auto;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
...@@ -305,13 +391,45 @@ ...@@ -305,13 +391,45 @@
font-size: 0.74666667rem; font-size: 0.74666667rem;
color: #666; color: #666;
} }
.photographer-related .icon-private-letter { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .photographer-related .icon-private-letter {
background-position: -50px 0px; background-image: url('../../dist/img/sprites-photographer.png');
} background-position: -50px 0px;
.photographer-related .icon-attention { }
background-image: url('../../dist/img/sprites-photographer.png'); .photographer-related .icon-attention {
background-position: 0px 0px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px 0px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer-related .icon-private-letter,
.photographer-related .icon-attention {
width: 100px;
height: 100px;
}
.photographer-related .icon-private-letter {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -100px 0px;
}
.photographer-related .icon-attention {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px 0px;
}
}
@media (min-width: 1200px) {
.photographer-related .icon-private-letter,
.photographer-related .icon-attention {
width: 150px;
height: 150px;
}
.photographer-related .icon-private-letter {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -150px 0px;
}
.photographer-related .icon-attention {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px 0px;
}
} }
/* tab部分 */ /* tab部分 */
#tab { #tab {
...@@ -498,15 +616,57 @@ ...@@ -498,15 +616,57 @@
line-height: 1; line-height: 1;
margin-right: 0.26666667rem; margin-right: 0.26666667rem;
} }
.tab-work .photo-album-content .photo-container .review-icon { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .tab-work .photo-album-content .photo-container .review-icon {
background-position: -14px -82px; background-image: url('../../dist/img/sprites-photographer.png');
} background-position: -14px -82px;
.tab-work .photo-album-content .photo-container .like-icon { }
background-image: url('../../dist/img/sprites-photographer.png'); .tab-work .photo-album-content .photo-container .like-icon {
background-position: 0px -82px; background-image: url('../../dist/img/sprites-photographer.png');
} background-position: 0px -82px;
.tab-work .photo-album-content .photo-container .scan-icon { }
background-image: url('../../dist/img/sprites-photographer.png'); .tab-work .photo-album-content .photo-container .scan-icon {
background-position: -100px -58px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px -58px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.tab-work .photo-album-content .photo-container .review-icon,
.tab-work .photo-album-content .photo-container .like-icon,
.tab-work .photo-album-content .photo-container .scan-icon {
width: 28px;
height: 28px;
}
.tab-work .photo-album-content .photo-container .review-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -28px -164px;
}
.tab-work .photo-album-content .photo-container .like-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -164px;
}
.tab-work .photo-album-content .photo-container .scan-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -200px -116px;
}
}
@media (min-width: 1200px) {
.tab-work .photo-album-content .photo-container .review-icon,
.tab-work .photo-album-content .photo-container .like-icon,
.tab-work .photo-album-content .photo-container .scan-icon {
width: 42px;
height: 42px;
}
.tab-work .photo-album-content .photo-container .review-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -42px -246px;
}
.tab-work .photo-album-content .photo-container .like-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -246px;
}
.tab-work .photo-album-content .photo-container .scan-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -300px -174px;
}
} }
dist/css/sale.css
...@@ -228,6 +228,7 @@ ...@@ -228,6 +228,7 @@
.sale-promotion .status .real-price { .sale-promotion .status .real-price {
font-size: 0.58666667rem; font-size: 0.58666667rem;
color: #b71e1e; color: #b71e1e;
text-decoration: line-through;
} }
.sale-promotion .status .sale-amount { .sale-promotion .status .sale-amount {
font-size: 0.64rem; font-size: 0.64rem;
...@@ -287,37 +288,101 @@ ...@@ -287,37 +288,101 @@
width: 6.66666667rem; width: 6.66666667rem;
} }
.service-content li .service-icon { .service-content li .service-icon {
width: 23px;
height: 23px;
margin: auto; margin: auto;
margin-bottom: 0.88rem; margin-bottom: 0.88rem;
} }
.service-content li .service-txt { .service-content li .service-txt {
text-align: center; text-align: center;
} }
.service-content .icon-backsheet { @media (max-width: 767px) {
background-image: url(../../dist/img/sprites-sale.png); .service-content .service-icon {
background-position: 0px -32px; width: 23px;
} height: 23px;
.service-content .icon-cloth { }
background-image: url(../../dist/img/sprites-sale.png); .service-content .icon-backsheet {
background-position: -23px -32px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: 0px -32px;
.service-content .icon-former { }
background-image: url(../../dist/img/sprites-sale.png); .service-content .icon-cloth {
background-position: -46px -32px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: -23px -32px;
.service-content .icon-makeup { }
background-image: url(../../dist/img/sprites-sale.png); .service-content .icon-former {
background-position: -69px -32px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: -46px -32px;
.service-content .icon-pho { }
background-image: url(../../dist/img/sprites-sale.png); .service-content .icon-makeup {
background-position: 0px -55px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: -69px -32px;
.service-content .icon-time { }
background-image: url(../../dist/img/sprites-sale.png); .service-content .icon-pho {
background-position: -23px -55px; background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -55px;
}
.service-content .icon-time {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -55px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.service-content .service-icon {
width: 46px;
height: 46px;
}
.service-content .icon-backsheet {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: 0px -64px;
}
.service-content .icon-cloth {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -46px -64px;
}
.service-content .icon-former {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -92px -64px;
}
.service-content .icon-makeup {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -138px -64px;
}
.service-content .icon-pho {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: 0px -110px;
}
.service-content .icon-time {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -46px -110px;
}
}
@media (min-width: 1200px) {
.service-content .service-icon {
width: 69px;
height: 69px;
}
.service-content .icon-backsheet {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: 0px -96px;
}
.service-content .icon-cloth {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -69px -96px;
}
.service-content .icon-former {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -138px -96px;
}
.service-content .icon-makeup {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -207px -96px;
}
.service-content .icon-pho {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: 0px -165px;
}
.service-content .icon-time {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -69px -165px;
}
} }
/* 摄影师介绍部分 */ /* 摄影师介绍部分 */
.photographer { .photographer {
...@@ -361,13 +426,50 @@ ...@@ -361,13 +426,50 @@
margin-bottom: 0.69333333rem; margin-bottom: 0.69333333rem;
width: 7.25333333rem; width: 7.25333333rem;
} }
.photographer .photographer-info .stars .stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .photographer .photographer-info .stars .stars-info,
background-position: 0px -66px; .photographer .photographer-info .stars .satrs-level {
} width: 100px;
.photographer .photographer-info .stars .stars-level { height: 16px;
background-image: url('../../dist/img/sprites-photographer.png'); }
background-position: 0px -50px; .photographer .photographer-info .stars .stars-info {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px 0px;
}
.photographer .photographer-info .stars .stars-level {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px -16px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer .photographer-info .stars .stars-info,
.photographer .photographer-info .stars .satrs-level {
width: 200px;
height: 32px;
}
.photographer .photographer-info .stars .stars-info {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px 0px;
}
.photographer .photographer-info .stars .stars-level {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px -32px;
}
}
@media (min-width: 1200px) {
.photographer .photographer-info .stars .stars-info,
.photographer .photographer-info .stars .stars-level {
width: 300px;
height: 48px;
}
.photographer .photographer-info .stars .stars-info {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px 0px;
}
.photographer .photographer-info .stars .stars-level {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px -48px;
}
} }
.photographer .photographer-info .stars-info { .photographer .photographer-info .stars-info {
position: absolute; position: absolute;
...@@ -424,6 +526,9 @@ ...@@ -424,6 +526,9 @@
#tab .hd > li.active { #tab .hd > li.active {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
#tab .hd > li.active a {
color: #353535;
}
#tab .bd > div { #tab .bd > div {
display: none; display: none;
} }
...@@ -507,13 +612,50 @@ ...@@ -507,13 +612,50 @@
.tab-review .stars { .tab-review .stars {
float: left; float: left;
} }
.tab-review .stars .stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .tab-review .stars .stars-info,
background-position: 0px -66px; .tab-review .stars .stars-level {
} width: 100px;
.tab-review .stars .stars-level { height: 16px;
background-image: url('../../dist/img/sprites-photographer.png'); }
background-position: 0px -50px; .tab-review .stars .stars-info {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px 0px;
}
.tab-review .stars .stars-level {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px -16px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.tab-review .stars .stars-info,
.tab-review .stars .stars-level {
width: 200px;
height: 32px;
}
.tab-review .stars .stars-info {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px 0px;
}
.tab-review .stars .stars-level {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px -32px;
}
}
@media (min-width: 1200px) {
.tab-review .stars .stars-info,
.tab-review .stars .stars-level {
width: 300px;
height: 48px;
}
.tab-review .stars .stars-info {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px 0px;
}
.tab-review .stars .stars-level {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px -48px;
}
} }
.tab-review .stars-info, .tab-review .stars-info,
.tab-review .stars-level { .tab-review .stars-level {
......
dist/css/sprites-photographer-2x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-btn_attention@2x {
background-image: url(sprites-photographer-2x.png);
background-position: 0px 0px;
width: 100px;
height: 100px;
}
.icon-btn_letter@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -100px 0px;
width: 100px;
height: 100px;
}
.icon-icon_favourite_cheek@2x {
background-image: url(sprites-photographer-2x.png);
background-position: 0px -100px;
width: 200px;
height: 32px;
}
.icon-icon_favourite_normal@2x {
background-image: url(sprites-photographer-2x.png);
background-position: 0px -132px;
width: 200px;
height: 32px;
}
.icon-icon_man@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -200px -52px;
width: 32px;
height: 32px;
}
.icon-icon_woman@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -200px -84px;
width: 32px;
height: 32px;
}
.icon-like@2x {
background-image: url(sprites-photographer-2x.png);
background-position: 0px -164px;
width: 28px;
height: 28px;
}
.icon-message@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -28px -164px;
width: 28px;
height: 28px;
}
.icon-per_level@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -200px 0px;
width: 52px;
height: 52px;
}
.icon-raiders_view@2x {
background-image: url(sprites-photographer-2x.png);
background-position: -200px -116px;
width: 30px;
height: 30px;
}
dist/css/sprites-photographer-3x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-btn_attention@3x {
background-image: url(sprites-photographer-3x.png);
background-position: 0px 0px;
width: 150px;
height: 150px;
}
.icon-btn_letter@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -150px 0px;
width: 150px;
height: 150px;
}
.icon-icon_favourite_cheek@3x {
background-image: url(sprites-photographer-3x.png);
background-position: 0px -150px;
width: 300px;
height: 48px;
}
.icon-icon_favourite_normal@3x {
background-image: url(sprites-photographer-3x.png);
background-position: 0px -198px;
width: 300px;
height: 48px;
}
.icon-icon_man@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -300px -78px;
width: 48px;
height: 48px;
}
.icon-icon_woman@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -300px -126px;
width: 48px;
height: 48px;
}
.icon-like@3x {
background-image: url(sprites-photographer-3x.png);
background-position: 0px -246px;
width: 42px;
height: 42px;
}
.icon-message@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -42px -246px;
width: 42px;
height: 42px;
}
.icon-per_level@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -300px 0px;
width: 78px;
height: 78px;
}
.icon-raiders_view@3x {
background-image: url(sprites-photographer-3x.png);
background-position: -300px -174px;
width: 45px;
height: 45px;
}
dist/css/sprites-sale-2x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-icon_backsheet@2x {
background-image: url(sprites-sale-2x.png);
background-position: 0px -64px;
width: 46px;
height: 46px;
}
.icon-icon_cloth@2x {
background-image: url(sprites-sale-2x.png);
background-position: -46px -64px;
width: 46px;
height: 46px;
}
.icon-icon_favourite_cheek@2x {
background-image: url(sprites-sale-2x.png);
background-position: 0px 0px;
width: 200px;
height: 32px;
}
.icon-icon_favourite_normal@2x {
background-image: url(sprites-sale-2x.png);
background-position: 0px -32px;
width: 200px;
height: 32px;
}
.icon-icon_former@2x {
background-image: url(sprites-sale-2x.png);
background-position: -92px -64px;
width: 46px;
height: 46px;
}
.icon-icon_makeup@2x {
background-image: url(sprites-sale-2x.png);
background-position: -138px -64px;
width: 46px;
height: 46px;
}
.icon-icon_pho@2x {
background-image: url(sprites-sale-2x.png);
background-position: 0px -110px;
width: 46px;
height: 46px;
}
.icon-icon_time@2x {
background-image: url(sprites-sale-2x.png);
background-position: -46px -110px;
width: 46px;
height: 46px;
}
dist/css/sprites-sale-3x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-icon_backsheet@3x {
background-image: url(sprites-sale-3x.png);
background-position: 0px -96px;
width: 69px;
height: 69px;
}
.icon-icon_cloth@3x {
background-image: url(sprites-sale-3x.png);
background-position: -69px -96px;
width: 69px;
height: 69px;
}
.icon-icon_favourite_cheek@3x {
background-image: url(sprites-sale-3x.png);
background-position: 0px 0px;
width: 300px;
height: 48px;
}
.icon-icon_favourite_normal@3x {
background-image: url(sprites-sale-3x.png);
background-position: 0px -48px;
width: 300px;
height: 48px;
}
.icon-icon_former@3x {
background-image: url(sprites-sale-3x.png);
background-position: -138px -96px;
width: 69px;
height: 69px;
}
.icon-icon_makeup@3x {
background-image: url(sprites-sale-3x.png);
background-position: -207px -96px;
width: 69px;
height: 69px;
}
.icon-icon_pho@3x {
background-image: url(sprites-sale-3x.png);
background-position: 0px -165px;
width: 69px;
height: 69px;
}
.icon-icon_time@3x {
background-image: url(sprites-sale-3x.png);
background-position: -69px -165px;
width: 69px;
height: 69px;
}
dist/css/sprites-user-2x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-huan@2x {
background-image: url(sprites-user-2x.png);
background-position: -64px -15px;
width: 36px;
height: 26px;
}
.icon-icon_man@2x {
background-image: url(sprites-user-2x.png);
background-position: 0px -15px;
width: 32px;
height: 32px;
}
.icon-icon_woman@2x {
background-image: url(sprites-user-2x.png);
background-position: -32px -15px;
width: 32px;
height: 32px;
}
.icon-photo-gallery@2x {
background-image: url(sprites-user-2x.png);
background-position: 0px 0px;
width: 200px;
height: 15px;
}
dist/css/sprites-user-3x.css 0 → 100644
/*
Icon classes can be used entirely standalone. They are named after their original file names.
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
.icon-huan@3x {
background-image: url(sprites-user-3x.png);
background-position: -96px -23px;
width: 54px;
height: 39px;
}
.icon-icon_man@3x {
background-image: url(sprites-user-3x.png);
background-position: 0px -23px;
width: 48px;
height: 48px;
}
.icon-icon_woman@3x {
background-image: url(sprites-user-3x.png);
background-position: -48px -23px;
width: 48px;
height: 48px;
}
.icon-photo-gallery@3x {
background-image: url(sprites-user-3x.png);
background-position: 0px 0px;
width: 300px;
height: 23px;
}
gulpfile.js
...@@ -7,8 +7,14 @@ var config = { ...@@ -7,8 +7,14 @@ var config = {
less: './src/less/*.less', less: './src/less/*.less',
html: './src/pages/*.html', html: './src/pages/*.html',
sprites_sale: './src/img/sprites-sale/*.*', sprites_sale: './src/img/sprites-sale/*.*',
sprites_sale_2x: './src/img/sprites-sale@2x/*.*',
sprites_sale_3x: './src/img/sprites-sale@3x/*.*',
sprites_photographer: './src/img/sprites-photographer/*.*', sprites_photographer: './src/img/sprites-photographer/*.*',
sprites_photographer_2x: './src/img/sprites-photographer@2x/*.*',
sprites_photographer_3x: './src/img/sprites-photographer@3x/*.*',
sprites_user: './src/img/sprites-user/*.*', sprites_user: './src/img/sprites-user/*.*',
sprites_user_2x: './src/img/sprites-user@2x/*.*',
sprites_user_3x: './src/img/sprites-user@3x/*.*',
img: './src/img/*.*' img: './src/img/*.*'
}, },
dist: { dist: {
...@@ -67,8 +73,14 @@ gulp.task('sprites', function () { ...@@ -67,8 +73,14 @@ gulp.task('sprites', function () {
} }
spriteData.push(spriteImg(config.path.sprites_sale, 'sprites-sale')); spriteData.push(spriteImg(config.path.sprites_sale, 'sprites-sale'));
spriteData.push(spriteImg(config.path.sprites_sale_2x, 'sprites-sale-2x'));
spriteData.push(spriteImg(config.path.sprites_sale_3x, 'sprites-sale-3x'));
spriteData.push(spriteImg(config.path.sprites_photographer, 'sprites-photographer')); spriteData.push(spriteImg(config.path.sprites_photographer, 'sprites-photographer'));
spriteData.push(spriteImg(config.path.sprites_photographer_2x, 'sprites-photographer-2x'));
spriteData.push(spriteImg(config.path.sprites_photographer_3x, 'sprites-photographer-3x'));
spriteData.push(spriteImg(config.path.sprites_user, 'sprits-user')); spriteData.push(spriteImg(config.path.sprites_user, 'sprits-user'));
spriteData.push(spriteImg(config.path.sprites_user_2x, 'sprites-user-2x'));
spriteData.push(spriteImg(config.path.sprites_user_3x, 'sprites-user-3x'));
// 输出图片 // 输出图片
for(var i = 0,len=spriteData.length; i < len; i++) { for(var i = 0,len=spriteData.length; i < len; i++) {
......
src/js/countdown.js
...@@ -59,14 +59,28 @@ ...@@ -59,14 +59,28 @@
gap_second = (gap_minutes - gap_minutes_integer)*60; gap_second = (gap_minutes - gap_minutes_integer)*60;
gap_second_integer = Math.floor(gap_second);// 取得秒数 gap_second_integer = Math.floor(gap_second);// 取得秒数
gap_hour_integer = '' + gap_hour_integer;
gap_minutes_integer = '' + gap_minutes_integer;
gap_second_integer = '' + gap_second_integer;
function doubleInteger ( num ) {
if( num.length < 2 ) {
num = 0 + num;
}
return num;
}
gap_hour_integer = doubleInteger(gap_hour_integer);
gap_minutes_integer = doubleInteger(gap_minutes_integer);
gap_second_integer = doubleInteger(gap_second_integer);
count_down_time.find('.day').text(gap_date_integer); count_down_time.find('.day').text(gap_date_integer);
count_down_time.find('.hour').text(gap_hour_integer); count_down_time.find('.hour').text(gap_hour_integer);
count_down_time.find('.minutes').text(gap_minutes_integer); count_down_time.find('.minutes').text(gap_minutes_integer);
count_down_time.find('.seconds').text(gap_second_integer); count_down_time.find('.seconds').text(gap_second_integer);
} }
} }
global.countDown = countDown; global.countDown = countDown;
}(window, jQuery)); }(window, jQuery));
......
src/less/photographer.less
...@@ -37,13 +37,33 @@ ...@@ -37,13 +37,33 @@
} }
.photographer-level { .photographer-level {
position: absolute; position: absolute;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
width: 26px;
height: 26px;
.px1rem(top, 52); .px1rem(top, 52);
.px1rem(left, 45); .px1rem(left, 45);
} }
@media (max-width: 767px) {
.photographer-level {
width: 26px;
height: 26px;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
}
}
@media (min-width: 767px) and (max-width: 992px) {
.photographer-level {
width: 52px;
height: 52px;
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -200px 0px;
}
}
@media (min-width: 1200px) {
.photographer-level {
width: 78px;
height: 78px;
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -300px 0px;
}
}
} }
.name { .name {
color: #353535; color: #353535;
...@@ -59,26 +79,88 @@ ...@@ -59,26 +79,88 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.icon-woman, .icon-man { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .icon-woman, .icon-man {
background-image: url('../../dist/img/sprites-photographer.png');
}
.icon-woman {
background-position: -100px -42px;
}
.icon-man {
background-position: -100px -26px;
}
} }
.icon-woman { @media (min-width: 767px) and (max-width: 992px) {
background-position: -100px -42px; .icon-woman, .icon-man {
width: 32px;
height: 32px;
}
.icon-woman, .icon-man {
background-image: url('../../dist/img/sprites-photographer-2x.png');
}
.icon-woman {
background-position: -200px -84px;
}
.icon-man {
background-position: -200px -52px;
}
} }
.icon-man { @media (min-width: 1200px) {
background-position: -100px -26px; .icon-woman, .icon-man {
width: 48px;
height: 48px;
}
.icon-woman, .icon-man {
background-image: url('../../dist/img/sprites-photographer-3x.png');
}
.icon-woman {
background-position: -300px -126px;
}
.icon-man {
background-position: -300px -78px;
}
} }
} }
.stars { .stars {
.px1rem(height, 12.5); .px1rem(height, 12.5);
.px1rem(margin-bottom, 30); .px1rem(margin-bottom, 30);
.stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info {
background-position: 0px -66px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
}
.stars-level {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
}
} }
.stars-level { @media (min-width: 767px) and (max-width: 992px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info, .stars-level {
background-position: 0px -50px; width: 200px;
height: 32px;
}
.stars-info {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -132px;
}
.stars-level {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -100px;
}
}
@media (min-width: 1200px) {
.stars-info, .stars-level {
width: 300px;
height: 48px;
}
.stars-info {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -198px;
}
.stars-level {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -150px;
}
} }
} }
.stars-info { .stars-info {
...@@ -118,8 +200,6 @@ ...@@ -118,8 +200,6 @@
float: left; float: left;
.px1rem(width, 187.5); .px1rem(width, 187.5);
div:nth-child(1) { div:nth-child(1) {
width: 50px;
height: 50px;
margin: auto; margin: auto;
.px1rem(margin-bottom, 15); .px1rem(margin-bottom, 15);
} }
...@@ -128,13 +208,43 @@ ...@@ -128,13 +208,43 @@
color: #666; color: #666;
} }
} }
.icon-private-letter { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .icon-private-letter {
background-position: -50px 0px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: -50px 0px;
}
.icon-attention {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px 0px;
}
} }
.icon-attention { @media (min-width: 767px) and (max-width: 992px) {
background-image: url('../../dist/img/sprites-photographer.png'); .icon-private-letter, .icon-attention {
background-position: 0px 0px; width: 100px;
height: 100px;
}
.icon-private-letter {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -100px 0px;
}
.icon-attention {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px 0px;
}
}
@media (min-width: 1200px) {
.icon-private-letter, .icon-attention {
width: 150px;
height: 150px;
}
.icon-private-letter {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -150px 0px;
}
.icon-attention {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px 0px;
}
} }
} }
/* tab部分 */ /* tab部分 */
...@@ -293,19 +403,56 @@ ...@@ -293,19 +403,56 @@
line-height: 1; line-height: 1;
.px1rem(margin-right, 5); .px1rem(margin-right, 5);
} }
.review-icon { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .review-icon {
background-position: -14px -82px; background-image: url('../../dist/img/sprites-photographer.png');
background-position: -14px -82px;
}
.like-icon {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -82px;
}
.scan-icon {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px -58px;
}
} }
.like-icon { @media (min-width: 767px) and (max-width: 992px) {
background-image: url('../../dist/img/sprites-photographer.png'); .review-icon, .like-icon, .scan-icon {
background-position: 0px -82px; width: 28px;
height: 28px;
}
.review-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -28px -164px;
}
.like-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: 0px -164px;
}
.scan-icon {
background-image: url('../../dist/img/sprites-photographer-2x.png');
background-position: -200px -116px;
}
} }
.scan-icon { @media (min-width: 1200px) {
background-image: url('../../dist/img/sprites-photographer.png'); .review-icon, .like-icon, .scan-icon {
background-position: -100px -58px; width: 42px;
height: 42px;
}
.review-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -42px -246px;
}
.like-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: 0px -246px;
}
.scan-icon {
background-image: url('../../dist/img/sprites-photographer-3x.png');
background-position: -300px -174px;
}
} }
} }
} }
} }
src/less/sale.less
...@@ -72,6 +72,7 @@ ...@@ -72,6 +72,7 @@
.real-price { .real-price {
.px1rem(font-size, 11); .px1rem(font-size, 11);
color: #b71e1e; color: #b71e1e;
text-decoration: line-through;
} }
.sale-amount { .sale-amount {
.px1rem(font-size, 12); .px1rem(font-size, 12);
...@@ -126,8 +127,6 @@ ...@@ -126,8 +127,6 @@
float: left; float: left;
.px1rem(width, 125); .px1rem(width, 125);
.service-icon { .service-icon {
width: 23px;
height: 23px;
margin: auto; margin: auto;
.px1rem(margin-bottom, 16.5); .px1rem(margin-bottom, 16.5);
} }
...@@ -135,29 +134,96 @@ ...@@ -135,29 +134,96 @@
text-align: center; text-align: center;
} }
} }
.icon-backsheet { @media (max-width: 767px) {
background-image: url(../../dist/img/sprites-sale.png); .service-icon {
background-position: 0px -32px; width: 23px;
} height: 23px;
.icon-cloth { }
background-image: url(../../dist/img/sprites-sale.png); .icon-backsheet {
background-position: -23px -32px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: 0px -32px;
.icon-former { }
background-image: url(../../dist/img/sprites-sale.png); .icon-cloth {
background-position: -46px -32px; background-image: url(../../dist/img/sprites-sale.png);
} background-position: -23px -32px;
.icon-makeup { }
background-image: url(../../dist/img/sprites-sale.png); .icon-former {
background-position: -69px -32px; background-image: url(../../dist/img/sprites-sale.png);
background-position: -46px -32px;
}
.icon-makeup {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -69px -32px;
}
.icon-pho {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -55px;
}
.icon-time {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -55px;
}
} }
.icon-pho { @media (min-width: 767px) and (max-width: 992px) {
background-image: url(../../dist/img/sprites-sale.png); .service-icon {
background-position: 0px -55px; width: 46px;
height: 46px;
}
.icon-backsheet {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: 0px -64px;
}
.icon-cloth {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -46px -64px;
}
.icon-former {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -92px -64px;
}
.icon-makeup {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -138px -64px;
}
.icon-pho {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: 0px -110px;
}
.icon-time {
background-image: url(../../dist/img/sprites-sale-2x.png);
background-position: -46px -110px;
}
} }
.icon-time { @media (min-width: 1200px) {
background-image: url(../../dist/img/sprites-sale.png); .service-icon {
background-position: -23px -55px; width: 69px;
height: 69px;
}
.icon-backsheet {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: 0px -96px;
}
.icon-cloth {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -69px -96px;
}
.icon-former {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -138px -96px;
}
.icon-makeup {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -207px -96px;
}
.icon-pho {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: 0px -165px;
}
.icon-time {
background-image: url(../../dist/img/sprites-sale-3x.png);
background-position: -69px -165px;
}
} }
} }
...@@ -195,13 +261,47 @@ ...@@ -195,13 +261,47 @@
position: relative; position: relative;
.px1rem(margin-bottom, 13); .px1rem(margin-bottom, 13);
.px1rem(width, 136); .px1rem(width, 136);
.stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info, .satrs-level {
background-position: 0px -66px; width: 100px;
height: 16px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px 0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px -16px;
}
} }
.stars-level { @media (min-width: 767px) and (max-width: 992px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info, .satrs-level {
background-position: 0px -50px; width: 200px;
height: 32px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px 0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px -32px;
}
}
@media (min-width: 1200px) {
.stars-info, .stars-level {
width: 300px;
height: 48px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px -0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px -48px;
}
} }
} }
.stars-info { .stars-info {
...@@ -249,6 +349,9 @@ ...@@ -249,6 +349,9 @@
> li.active { > li.active {
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
> li.active a {
color: #353535;
}
} }
.bd { .bd {
> div { > div {
...@@ -315,13 +418,47 @@ ...@@ -315,13 +418,47 @@
} }
.stars { .stars {
float: left; float: left;
.stars-info { @media (max-width: 767px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info, .stars-level {
background-position: 0px -66px; width: 100px;
height: 16px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px 0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale.png');
background-position: 0px -16px;
}
} }
.stars-level { @media (min-width: 767px) and (max-width: 992px) {
background-image: url('../../dist/img/sprites-photographer.png'); .stars-info, .stars-level {
background-position: 0px -50px; width: 200px;
height: 32px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px 0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale-2x.png');
background-position: 0px -32px;
}
}
@media (min-width: 1200px) {
.stars-info, .stars-level {
width: 300px;
height: 48px;
}
.stars-info {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px 0px;
}
.stars-level {
background-image: url('../../dist/img/sprites-sale-3x.png');
background-position: 0px -48px;
}
} }
} }
.stars-info, .stars-level { .stars-info, .stars-level {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment