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 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.album-des {
font-size: 0.69333333rem;
......
dist/css/apply.css
......@@ -2,7 +2,8 @@
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
......
dist/css/base.css
......@@ -2,7 +2,8 @@
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
......@@ -106,7 +107,8 @@ textarea {
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
......
dist/css/check.css
......@@ -2,7 +2,8 @@
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
......
dist/css/dynamic.css
......@@ -87,7 +87,9 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.album-des {
font-size: 0.69333333rem;
......@@ -230,7 +232,9 @@
.open-safari-txt span {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 10%;
}
.open-safari-arrow {
......
dist/css/index.css
......@@ -6,7 +6,8 @@
*,
*:after,
*:before {
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: sans-serif;
......@@ -133,7 +134,9 @@ h2 {
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.full-page .ad-txt h2 {
line-height: 2;
......@@ -141,7 +144,9 @@ h2 {
.full-page .ad-pic {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
.full-page-1 > img {
......
dist/css/list&service.css
......@@ -13,10 +13,18 @@ body {
font-size: 0.74666667rem;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: flex-end;
-webkit-box-pack: justify;
-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;
}
.row .label {
......
dist/css/photographer.css
......@@ -295,7 +295,9 @@
.photographer .stars-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.photographer .stars-info,
.photographer .stars-level {
......
dist/css/sale.css
......@@ -182,23 +182,11 @@
.recommend-package {
position: relative;
height: 13.86666667rem;
background: #ccc;
overflow: hidden;
}
.recommend-package > a {
position: relative;
display: block;
height: 100%;
overflow: hidden;
}
.recommend-package > a > img {
position: absolute;
left: -1000px;
right: -1000px;
bottom: -1000px;
top: -1000px;
margin: auto;
width: 100%;
background-image: url('http://yuepai.b0.upaiyun.com/app/20009/sets/2016-07-15/bb5f3fedd0d62f46ad048676123a76dc41f331ff.jpg!w720.jpg');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
.label-list {
position: absolute;
......@@ -225,7 +213,9 @@
position: absolute;
top: 50%;
left: 44%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.sale-promotion {
position: relative;
......@@ -515,10 +505,18 @@
}
.tab-service .row,
.tab-list .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
justify-content: space-between;
align-items: flex-end;
-webkit-box-pack: justify;
-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;
}
.tab-service .row .label,
......@@ -560,7 +558,9 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: url('../../dist/img/bg_count@2x.png');
......@@ -803,7 +803,9 @@
.open-safari-txt span {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 10%;
}
.open-safari-arrow {
......
dist/css/user.css
......@@ -53,7 +53,9 @@ body {
position: relative;
left: 10%;
top: 50%;
transform: translate(-2%, -58%);
-webkit-transform: translate(-2%, -58%);
-ms-transform: translate(-2%, -58%);
transform: translate(-2%, -58%);
}
/* 用户详细信息介绍 */
.user {
......@@ -147,7 +149,9 @@ body {
height: 8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#tab .bd a {
position: relative;
......@@ -178,13 +182,6 @@ body {
height: 0.21333333rem;
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 {
position: absolute;
bottom: 0.48rem;
......
gulpfile.js
// 基础变量配置
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 config = {
......@@ -45,6 +50,7 @@ gulp.task('less',function () {
}
}))
.pipe(plugins.less())
.pipe(plugins.autoprefixer({ browsers: config.autoprefixerBrowsers }))
.pipe(gulp.dest(config.dist.css))
.pipe(reload({stream:true}));
});
......@@ -61,12 +67,6 @@ gulp.task('serve',['less'],function () {
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 () {
var spriteData = [];
......@@ -75,7 +75,7 @@ gulp.task('sprites', function () {
return gulp.src(path)
.pipe(plugins.spritesmith({
imgName: name + '.png',
cssName: name + '.css'
cssName: name + '.less'
}));
}
......@@ -96,7 +96,7 @@ gulp.task('sprites', function () {
.pipe(plugins.imagemin())
.pipe(gulp.dest(config.dist.img));
spriteData[i].css
.pipe(gulp.dest(config.dist.css));
.pipe(gulp.dest(config.dist.less));
}
});
......
package.json
......@@ -12,6 +12,7 @@
"gulp-imagemin": "^3.0.1",
"gulp-less": "^3.0.5",
"gulp-load-plugins": "^1.2.2",
"gulp-merge-link": "^0.1.3",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^1.5.3",
"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 {
}
}
}
src/less/sale.less
......@@ -27,23 +27,24 @@
.recommend-package {
position: relative;
.px1rem(height, 260);
background: #ccc;
overflow: hidden;
> a {
position: relative;
display: block;
height: 100%;
overflow: hidden;
> img {
position: absolute;
left: -1000px;
right: -1000px;
bottom: -1000px;
top: -1000px;
margin: auto;
width: 100%;
}
}
background-image: url('http://yuepai.b0.upaiyun.com/app/20009/sets/2016-07-15/bb5f3fedd0d62f46ad048676123a76dc41f331ff.jpg!w720.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
// > a {
// height: 100%;
// display: block;
// > img {
// position: absolute;
// left: -1000px;
// right: -1000px;
// bottom: -1000px;
// top: -1000px;
// margin: auto;
// width: 100%;
// // min-height: 100%;
// }
// }
}
.label-list {
position: absolute;
......@@ -612,4 +613,3 @@
.px1rem(width, 81);
.px1rem(height, 100);
}
src/less/score.less
......@@ -354,4 +354,4 @@
width: 0;
}
}
}
\ No newline at end of file
}
src/less/user.less
......@@ -165,13 +165,13 @@ body {
.px1rem(height, 4);
.px1rem(margin-top, 8);
}
> div > div {
background-image: url('../../dist/img/sprits-user.png');
background-position: -32px -8px;
width: 18px;
height: 13px;
transform: translateX(-50%);
}
// > div > div {
// background-image: url('../../dist/img/sprits-user.png');
// background-position: -32px -8px;
// width: 18px;
// height: 13px;
// transform: translateX(-50%);
// }
}
}
.photo-info {
......@@ -203,5 +203,3 @@ body {
}
}
}
src/pages/dynamic.html
......@@ -40,8 +40,10 @@
</ul>
<p class="album-des">美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很<span>(显示全部文字)</span><em>得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得很美得</em></p>
<div class="album">
<a class="photo"><img src="../../src/img/tokyo.png" alt="" 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>
<a class="photo"><img src="../../dist/img/grey.png" data-src="../../src/img/tokyo.png" class="img-h-auto"></a>
</div>
</section>
<section class="review-container">
......@@ -68,6 +70,7 @@
</div>
<script type="text/javascript" src="../../dist/libs/jquery/jquery.min.js"></script>
<script src="../../src/js/flexible.js"></script>
<script src="../../src/js/asyncLoadImg.js"></script>
<script type="text/javascript">
!(function () {
window.addEventListener('DOMContentLoaded', function () {
......
src/pages/sale.html
......@@ -16,7 +16,7 @@
<!--</header>-->
<section class="recommend-package-container">
<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">
<li class="label">
<div class="label-mask"></div>
......@@ -221,9 +221,9 @@
<div class="review-content">
<div class="review-info">
<div class="stars">
<span class="stars-info">
<span class="stars-level"></span>
</span>
<span class="stars-info">
<span class="stars-level"></span>
</span>
</div>
<div class="review-date">2016-2-17&nbsp;21:20</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