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 @@
}
.photographer .head .photographer-level {
position: absolute;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
width: 26px;
height: 26px;
top: 2.77333333rem;
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 {
color: #353535;
font-size: 0.74666667rem;
......@@ -216,27 +236,95 @@
width: 16px;
height: 16px;
}
.photographer .area .icon-woman,
.photographer .area .icon-man {
background-image: url('../../dist/img/sprites-photographer.png');
}
.photographer .area .icon-woman {
background-position: -100px -42px;
}
.photographer .area .icon-man {
background-position: -100px -26px;
@media (max-width: 767px) {
.photographer .area .icon-woman,
.photographer .area .icon-man {
background-image: url('../../dist/img/sprites-photographer.png');
}
.photographer .area .icon-woman {
background-position: -100px -42px;
}
.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 {
height: 0.66666667rem;
margin-bottom: 1.6rem;
}
.photographer .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
}
.photographer .stars .stars-level {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (max-width: 767px) {
.photographer .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
}
.photographer .stars .stars-level {
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 {
position: absolute;
......@@ -295,8 +383,6 @@
}
.photographer-related .private-letter div:nth-child(1),
.photographer-related .attention div:nth-child(1) {
width: 50px;
height: 50px;
margin: auto;
margin-bottom: 0.8rem;
}
......@@ -305,13 +391,45 @@
font-size: 0.74666667rem;
color: #666;
}
.photographer-related .icon-private-letter {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -50px 0px;
}
.photographer-related .icon-attention {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px 0px;
@media (max-width: 767px) {
.photographer-related .icon-private-letter {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -50px 0px;
}
.photographer-related .icon-attention {
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 {
......@@ -498,15 +616,57 @@
line-height: 1;
margin-right: 0.26666667rem;
}
.tab-work .photo-album-content .photo-container .review-icon {
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');
background-position: 0px -82px;
}
.tab-work .photo-album-content .photo-container .scan-icon {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px -58px;
@media (max-width: 767px) {
.tab-work .photo-album-content .photo-container .review-icon {
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');
background-position: 0px -82px;
}
.tab-work .photo-album-content .photo-container .scan-icon {
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 @@
.sale-promotion .status .real-price {
font-size: 0.58666667rem;
color: #b71e1e;
text-decoration: line-through;
}
.sale-promotion .status .sale-amount {
font-size: 0.64rem;
......@@ -287,37 +288,101 @@
width: 6.66666667rem;
}
.service-content li .service-icon {
width: 23px;
height: 23px;
margin: auto;
margin-bottom: 0.88rem;
}
.service-content li .service-txt {
text-align: center;
}
.service-content .icon-backsheet {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -32px;
}
.service-content .icon-cloth {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -32px;
}
.service-content .icon-former {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -46px -32px;
}
.service-content .icon-makeup {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -69px -32px;
}
.service-content .icon-pho {
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 (max-width: 767px) {
.service-content .service-icon {
width: 23px;
height: 23px;
}
.service-content .icon-backsheet {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -32px;
}
.service-content .icon-cloth {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -32px;
}
.service-content .icon-former {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -46px -32px;
}
.service-content .icon-makeup {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -69px -32px;
}
.service-content .icon-pho {
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 {
......@@ -361,13 +426,50 @@
margin-bottom: 0.69333333rem;
width: 7.25333333rem;
}
.photographer .photographer-info .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
}
.photographer .photographer-info .stars .stars-level {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (max-width: 767px) {
.photographer .photographer-info .stars .stars-info,
.photographer .photographer-info .stars .satrs-level {
width: 100px;
height: 16px;
}
.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 {
position: absolute;
......@@ -424,6 +526,9 @@
#tab .hd > li.active {
border-bottom: 1px solid #000;
}
#tab .hd > li.active a {
color: #353535;
}
#tab .bd > div {
display: none;
}
......@@ -507,13 +612,50 @@
.tab-review .stars {
float: left;
}
.tab-review .stars .stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
}
.tab-review .stars .stars-level {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (max-width: 767px) {
.tab-review .stars .stars-info,
.tab-review .stars .stars-level {
width: 100px;
height: 16px;
}
.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-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 = {
less: './src/less/*.less',
html: './src/pages/*.html',
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_2x: './src/img/sprites-photographer@2x/*.*',
sprites_photographer_3x: './src/img/sprites-photographer@3x/*.*',
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/*.*'
},
dist: {
......@@ -67,8 +73,14 @@ gulp.task('sprites', function () {
}
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_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_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++) {
......
src/js/countdown.js
......@@ -59,14 +59,28 @@
gap_second = (gap_minutes - gap_minutes_integer)*60;
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('.hour').text(gap_hour_integer);
count_down_time.find('.minutes').text(gap_minutes_integer);
count_down_time.find('.seconds').text(gap_second_integer);
}
}
global.countDown = countDown;
}(window, jQuery));
......
src/less/photographer.less
......@@ -37,13 +37,33 @@
}
.photographer-level {
position: absolute;
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px 0px;
width: 26px;
height: 26px;
.px1rem(top, 52);
.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 {
color: #353535;
......@@ -59,26 +79,88 @@
width: 16px;
height: 16px;
}
.icon-woman, .icon-man {
background-image: url('../../dist/img/sprites-photographer.png');
@media (max-width: 767px) {
.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 {
background-position: -100px -42px;
@media (min-width: 767px) and (max-width: 992px) {
.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 {
background-position: -100px -26px;
@media (min-width: 1200px) {
.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 {
.px1rem(height, 12.5);
.px1rem(margin-bottom, 30);
.stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
@media (max-width: 767px) {
.stars-info {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (min-width: 767px) and (max-width: 992px) {
.stars-info, .stars-level {
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 {
......@@ -118,8 +200,6 @@
float: left;
.px1rem(width, 187.5);
div:nth-child(1) {
width: 50px;
height: 50px;
margin: auto;
.px1rem(margin-bottom, 15);
}
......@@ -128,13 +208,43 @@
color: #666;
}
}
.icon-private-letter {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -50px 0px;
@media (max-width: 767px) {
.icon-private-letter {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px 0px;
@media (min-width: 767px) and (max-width: 992px) {
.icon-private-letter, .icon-attention {
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部分 */
......@@ -293,19 +403,56 @@
line-height: 1;
.px1rem(margin-right, 5);
}
.review-icon {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -14px -82px;
@media (max-width: 767px) {
.review-icon {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -82px;
@media (min-width: 767px) and (max-width: 992px) {
.review-icon, .like-icon, .scan-icon {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: -100px -58px;
@media (min-width: 1200px) {
.review-icon, .like-icon, .scan-icon {
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 @@
.real-price {
.px1rem(font-size, 11);
color: #b71e1e;
text-decoration: line-through;
}
.sale-amount {
.px1rem(font-size, 12);
......@@ -126,8 +127,6 @@
float: left;
.px1rem(width, 125);
.service-icon {
width: 23px;
height: 23px;
margin: auto;
.px1rem(margin-bottom, 16.5);
}
......@@ -135,29 +134,96 @@
text-align: center;
}
}
.icon-backsheet {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -32px;
}
.icon-cloth {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -32px;
}
.icon-former {
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;
@media (max-width: 767px) {
.service-icon {
width: 23px;
height: 23px;
}
.icon-backsheet {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -32px;
}
.icon-cloth {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -32px;
}
.icon-former {
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 {
background-image: url(../../dist/img/sprites-sale.png);
background-position: 0px -55px;
@media (min-width: 767px) and (max-width: 992px) {
.service-icon {
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 {
background-image: url(../../dist/img/sprites-sale.png);
background-position: -23px -55px;
@media (min-width: 1200px) {
.service-icon {
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 @@
position: relative;
.px1rem(margin-bottom, 13);
.px1rem(width, 136);
.stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
@media (max-width: 767px) {
.stars-info, .satrs-level {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (min-width: 767px) and (max-width: 992px) {
.stars-info, .satrs-level {
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 {
......@@ -249,6 +349,9 @@
> li.active {
border-bottom: 1px solid #000;
}
> li.active a {
color: #353535;
}
}
.bd {
> div {
......@@ -315,13 +418,47 @@
}
.stars {
float: left;
.stars-info {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -66px;
@media (max-width: 767px) {
.stars-info, .stars-level {
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 {
background-image: url('../../dist/img/sprites-photographer.png');
background-position: 0px -50px;
@media (min-width: 767px) and (max-width: 992px) {
.stars-info, .stars-level {
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 {
......
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