Skip to content

Y
ypl_share_web
Commit 0a63a2e5 by murphywuwu
Options

up

parent d9c2abda
Showing with 160 additions and 90 deletions
dist/css/album.css
...@@ -53,7 +53,9 @@ ...@@ -53,7 +53,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} }
.album-des { .album-des {
font-size: 0.69333333rem; font-size: 0.69333333rem;
......
dist/css/apply.css
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
*, *,
*:after, *:after,
*:before { *:before {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
} }
html { html {
font-family: sans-serif; font-family: sans-serif;
......
dist/css/base.css
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
*, *,
*:after, *:after,
*:before { *:before {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
} }
html { html {
font-family: sans-serif; font-family: sans-serif;
...@@ -106,7 +107,8 @@ textarea { ...@@ -106,7 +107,8 @@ textarea {
} }
[type="checkbox"], [type="checkbox"],
[type="radio"] { [type="radio"] {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */ /* 1 */
padding: 0; padding: 0;
/* 2 */ /* 2 */
......
dist/css/check.css
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
*, *,
*:after, *:after,
*:before { *:before {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
} }
html { html {
font-family: sans-serif; font-family: sans-serif;
......
dist/css/dynamic.css
...@@ -87,7 +87,9 @@ ...@@ -87,7 +87,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} }
.album-des { .album-des {
font-size: 0.69333333rem; font-size: 0.69333333rem;
...@@ -230,7 +232,9 @@ ...@@ -230,7 +232,9 @@
.open-safari-txt span { .open-safari-txt span {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 10%; left: 10%;
} }
.open-safari-arrow { .open-safari-arrow {
......
dist/css/index.css
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
*, *,
*:after, *:after,
*:before { *:before {
box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box;
} }
html { html {
font-family: sans-serif; font-family: sans-serif;
...@@ -133,7 +134,9 @@ h2 { ...@@ -133,7 +134,9 @@ h2 {
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} }
.full-page .ad-txt h2 { .full-page .ad-txt h2 {
line-height: 2; line-height: 2;
...@@ -141,7 +144,9 @@ h2 { ...@@ -141,7 +144,9 @@ h2 {
.full-page .ad-pic { .full-page .ad-pic {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%; width: 100%;
} }
.full-page-1 > img { .full-page-1 > img {
......
dist/css/list&service.css
...@@ -13,10 +13,18 @@ body { ...@@ -13,10 +13,18 @@ body {
font-size: 0.74666667rem; font-size: 0.74666667rem;
} }
.row { .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
justify-content: space-between; -webkit-box-pack: justify;
align-items: flex-end; -webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 1.06666667rem; margin-bottom: 1.06666667rem;
} }
.row .label { .row .label {
......
dist/css/photographer.css
...@@ -295,7 +295,9 @@ ...@@ -295,7 +295,9 @@
.photographer .stars-info { .photographer .stars-info {
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
} }
.photographer .stars-info, .photographer .stars-info,
.photographer .stars-level { .photographer .stars-level {
......
dist/css/sale.css
...@@ -182,23 +182,11 @@ ...@@ -182,23 +182,11 @@
.recommend-package { .recommend-package {
position: relative; position: relative;
height: 13.86666667rem; height: 13.86666667rem;
background: #ccc; background-image: url('http://yuepai.b0.upaiyun.com/app/20009/sets/2016-07-15/bb5f3fedd0d62f46ad048676123a76dc41f331ff.jpg!w720.jpg');
overflow: hidden; background-repeat: no-repeat;
} background-position: center;
.recommend-package > a { -webkit-background-size: cover;
position: relative; background-size: cover;
display: block;
height: 100%;
overflow: hidden;
}
.recommend-package > a > img {
position: absolute;
left: -1000px;
right: -1000px;
bottom: -1000px;
top: -1000px;
margin: auto;
width: 100%;
} }
.label-list { .label-list {
position: absolute; position: absolute;
...@@ -225,7 +213,9 @@ ...@@ -225,7 +213,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 44%; left: 44%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} }
.sale-promotion { .sale-promotion {
position: relative; position: relative;
...@@ -515,10 +505,18 @@ ...@@ -515,10 +505,18 @@
} }
.tab-service .row, .tab-service .row,
.tab-list .row { .tab-list .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
justify-content: space-between; -webkit-box-pack: justify;
align-items: flex-end; -webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 1.06666667rem; margin-bottom: 1.06666667rem;
} }
.tab-service .row .label, .tab-service .row .label,
...@@ -560,7 +558,9 @@ ...@@ -560,7 +558,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 32px; width: 32px;
height: 32px; height: 32px;
background: url('../../dist/img/bg_count@2x.png'); background: url('../../dist/img/bg_count@2x.png');
...@@ -803,7 +803,9 @@ ...@@ -803,7 +803,9 @@
.open-safari-txt span { .open-safari-txt span {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 10%; left: 10%;
} }
.open-safari-arrow { .open-safari-arrow {
......
dist/css/user.css
...@@ -53,7 +53,9 @@ body { ...@@ -53,7 +53,9 @@ body {
position: relative; position: relative;
left: 10%; left: 10%;
top: 50%; top: 50%;
transform: translate(-2%, -58%); -webkit-transform: translate(-2%, -58%);
-ms-transform: translate(-2%, -58%);
transform: translate(-2%, -58%);
} }
/* 用户详细信息介绍 */ /* 用户详细信息介绍 */
.user { .user {
...@@ -147,7 +149,9 @@ body { ...@@ -147,7 +149,9 @@ body {
height: 8px; height: 8px;
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); -webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
} }
#tab .bd a { #tab .bd a {
position: relative; position: relative;
...@@ -178,13 +182,6 @@ body { ...@@ -178,13 +182,6 @@ body {
height: 0.21333333rem; height: 0.21333333rem;
margin-top: 0.42666667rem; margin-top: 0.42666667rem;
} }
#tab .bd a .photo-attachment > div > div {
background-image: url('../../dist/img/sprits-user.png');
background-position: -32px -8px;
width: 18px;
height: 13px;
transform: translateX(-50%);
}
#tab .bd .photo-info { #tab .bd .photo-info {
position: absolute; position: absolute;
bottom: 0.48rem; bottom: 0.48rem;
......
gulpfile.js
// 基础变量配置 // 基础变量配置
var gulp = require('gulp'); var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({ pattern: '*' }); var plugins = require('gulp-load-plugins')({
pattern: '*',
rename: {
'gulp-merge-link': 'merge'
}
});
var reload = plugins.browserSync.reload; var reload = plugins.browserSync.reload;
var config = { var config = {
...@@ -45,6 +50,7 @@ gulp.task('less',function () { ...@@ -45,6 +50,7 @@ gulp.task('less',function () {
} }
})) }))
.pipe(plugins.less()) .pipe(plugins.less())
.pipe(plugins.autoprefixer({ browsers: config.autoprefixerBrowsers }))
.pipe(gulp.dest(config.dist.css)) .pipe(gulp.dest(config.dist.css))
.pipe(reload({stream:true})); .pipe(reload({stream:true}));
}); });
...@@ -61,12 +67,6 @@ gulp.task('serve',['less'],function () { ...@@ -61,12 +67,6 @@ gulp.task('serve',['less'],function () {
gulp.watch(config.path.html).on('change', reload); gulp.watch(config.path.html).on('change', reload);
}); });
// 自动添加前缀
gulp.task('autoprefixer', function () {
gulp.src(config.dist.css)
.pipe(plugins.autoprefixer({ browsers: config.autoprefixerBrowsers }));
});
// 精灵图合并 // 精灵图合并
gulp.task('sprites', function () { gulp.task('sprites', function () {
var spriteData = []; var spriteData = [];
...@@ -75,7 +75,7 @@ gulp.task('sprites', function () { ...@@ -75,7 +75,7 @@ gulp.task('sprites', function () {
return gulp.src(path) return gulp.src(path)
.pipe(plugins.spritesmith({ .pipe(plugins.spritesmith({
imgName: name + '.png', imgName: name + '.png',
cssName: name + '.css' cssName: name + '.less'
})); }));
} }
...@@ -96,7 +96,7 @@ gulp.task('sprites', function () { ...@@ -96,7 +96,7 @@ gulp.task('sprites', function () {
.pipe(plugins.imagemin()) .pipe(plugins.imagemin())
.pipe(gulp.dest(config.dist.img)); .pipe(gulp.dest(config.dist.img));
spriteData[i].css spriteData[i].css
.pipe(gulp.dest(config.dist.css)); .pipe(gulp.dest(config.dist.less));
} }
}); });
......
package.json
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"gulp-imagemin": "^3.0.1", "gulp-imagemin": "^3.0.1",
"gulp-less": "^3.0.5", "gulp-less": "^3.0.5",
"gulp-load-plugins": "^1.2.2", "gulp-load-plugins": "^1.2.2",
"gulp-merge-link": "^0.1.3",
"gulp-plumber": "^1.1.0", "gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.3", "gulp-uglify": "^1.5.3",
"gulp.spritesmith": "^6.2.1" "gulp.spritesmith": "^6.2.1"
......
src/js/asyncLoadImg.js 0 → 100644
+(function () {
var img = document.querySelectorAll('.img-h-auto');
var rect;
var dataSrc;
// 判断图片是否在视口区内
function isOnVerticalViewPort () {
return rect.top > 0 && rect.top < document.documentElement.clientHeight;
}
function isOnHonrizontalViewPort () {
return rect.left > 0 && rect.left < document.documentElement.clientWidth;
}
function loadImg () {
for ( var i = 0, len = img.length; i < len; i++ ) {
rect = img[i].getBoundingClientRect();
var isInViewPort = isOnHonrizontalViewPort() && isOnVerticalViewPort();
if( isInViewPort && !img.isLoad ) {
dataSrc = img[i].getAttribute('data-src');
img[i].setAttribute('src', dataSrc);
img[i].isLoad = true;
}
}
}
// 懒加载图片
window.addEventListener('scroll', loadImg , false);
}());
src/less/list&service.less
...@@ -33,5 +33,3 @@ body { ...@@ -33,5 +33,3 @@ body {
} }
} }
} }
src/less/sale.less
...@@ -27,23 +27,24 @@ ...@@ -27,23 +27,24 @@
.recommend-package { .recommend-package {
position: relative; position: relative;
.px1rem(height, 260); .px1rem(height, 260);
background: #ccc; background-image: url('http://yuepai.b0.upaiyun.com/app/20009/sets/2016-07-15/bb5f3fedd0d62f46ad048676123a76dc41f331ff.jpg!w720.jpg');
overflow: hidden; background-repeat: no-repeat;
> a { background-position: center;
position: relative; background-size: cover;
display: block; // > a {
height: 100%; // height: 100%;
overflow: hidden; // display: block;
> img { // > img {
position: absolute; // position: absolute;
left: -1000px; // left: -1000px;
right: -1000px; // right: -1000px;
bottom: -1000px; // bottom: -1000px;
top: -1000px; // top: -1000px;
margin: auto; // margin: auto;
width: 100%; // width: 100%;
} // // min-height: 100%;
} // }
// }
} }
.label-list { .label-list {
position: absolute; position: absolute;
...@@ -612,4 +613,3 @@ ...@@ -612,4 +613,3 @@
.px1rem(width, 81); .px1rem(width, 81);
.px1rem(height, 100); .px1rem(height, 100);
} }
src/less/score.less
...@@ -354,4 +354,4 @@ ...@@ -354,4 +354,4 @@
width: 0; width: 0;
} }
} }
} }
\ No newline at end of file
src/less/user.less
...@@ -165,13 +165,13 @@ body { ...@@ -165,13 +165,13 @@ body {
.px1rem(height, 4); .px1rem(height, 4);
.px1rem(margin-top, 8); .px1rem(margin-top, 8);
} }
> div > div { // > div > div {
background-image: url('../../dist/img/sprits-user.png'); // background-image: url('../../dist/img/sprits-user.png');
background-position: -32px -8px; // background-position: -32px -8px;
width: 18px; // width: 18px;
height: 13px; // height: 13px;
transform: translateX(-50%); // transform: translateX(-50%);
} // }
} }
} }
.photo-info { .photo-info {
...@@ -203,5 +203,3 @@ body { ...@@ -203,5 +203,3 @@ body {
} }
} }
} }
src/pages/dynamic.html
...@@ -40,8 +40,10 @@ ...@@ -40,8 +40,10 @@
</ul> </ul>
<p class="album-des">美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很<span>(显示全部文字)</span><em>得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得</em></p> <p class="album-des">美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很<span>(显示全部文字)</span><em>得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得</em></p>
<div class="album"> <div class="album">
<a class="photo"><img src="../../src/img/tokyo.png" alt="" class="img-h-auto"></a> <a class="photo"><img src="../../dist/img/grey.png" data-src="../../src/img/tokyo.png" class="img-h-auto"></a>
<a class="photo"><img src="../../src/img/tokyo.png" alt="" class="img-h-auto"></a> <a class="photo"><img src="../../dist/img/grey.png" data-src="../../src/img/tokyo.png" class="img-h-auto"></a>
<a class="photo"><img src="../../dist/img/grey.png" data-src="../../src/img/tokyo.png" class="img-h-auto"></a>
<a class="photo"><img src="../../dist/img/grey.png" data-src="../../src/img/tokyo.png" class="img-h-auto"></a>
</div> </div>
</section> </section>
<section class="review-container"> <section class="review-container">
...@@ -68,6 +70,7 @@ ...@@ -68,6 +70,7 @@
</div> </div>
<script type="text/javascript" src="../../dist/libs/jquery/jquery.min.js"></script> <script type="text/javascript" src="../../dist/libs/jquery/jquery.min.js"></script>
<script src="../../src/js/flexible.js"></script> <script src="../../src/js/flexible.js"></script>
<script src="../../src/js/asyncLoadImg.js"></script>
<script type="text/javascript"> <script type="text/javascript">
!(function () { !(function () {
window.addEventListener('DOMContentLoaded', function () { window.addEventListener('DOMContentLoaded', function () {
......
src/pages/sale.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<!--</header>--> <!--</header>-->
<section class="recommend-package-container"> <section class="recommend-package-container">
<div class="recommend-package"> <div class="recommend-package">
<a href=""><img src="../../src/img/tokyo.png"></a> <!-- <a href=""><img src="http://yuepai.b0.upaiyun.com/app/20381/sets/2016-08-04/c0adfc2c1025c5eed28ac0e2dc880340cf78914e.jpg!w720.jpg"></a> -->
<ul class="label-list"> <ul class="label-list">
<li class="label"> <li class="label">
<div class="label-mask"></div> <div class="label-mask"></div>
...@@ -221,9 +221,9 @@ ...@@ -221,9 +221,9 @@
<div class="review-content"> <div class="review-content">
<div class="review-info"> <div class="review-info">
<div class="stars"> <div class="stars">
<span class="stars-info"> <span class="stars-info">
<span class="stars-level"></span> <span class="stars-level"></span>
</span> </span>
</div> </div>
<div class="review-date">2016-2-17&nbsp;21:20</div> <div class="review-date">2016-2-17&nbsp;21:20</div>
</div> </div>
......
src/pages/test.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 30px;
height: 30px;
border-radius: 50px;
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
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