Skip to content

Y
ypl_mobile_web
Commit 9e8be5d0 by jane0302
Options

nn

parent b54dbd73
Showing with 587 additions and 29 deletions
dist/css/appointment.css
......@@ -145,7 +145,7 @@ body {
clear: both;
}
.setsIntro > div:last-child > h2 {
font-size: 0.8rem;
font-size: 0.74666667rem;
margin-bottom: 0.26666667rem;
}
.setsIntro > div:last-child > p {
......@@ -168,7 +168,7 @@ body {
color: #ff7272;
}
.setsIntro .message {
font-size: 0.69333333rem;
font-size: 0.64rem;
position: absolute;
bottom: 0.4rem;
height: 0.8rem;
......@@ -196,6 +196,7 @@ body {
.photographerStar > h2 {
height: 2.4rem;
line-height: 2.4rem;
font-size: 0.74666667rem;
border-bottom: 1px solid #cccccc;
}
.photographerStar > h2 > span {
......@@ -292,7 +293,7 @@ body {
margin: 0.4rem 0rem;
height: 1.6rem;
line-height: 1.6rem;
font-size: 0.74666667rem;
font-size: 0.69333333rem;
text-align: center;
display: inline-block;
width: 49%;
......@@ -301,7 +302,7 @@ body {
}
.photographerStar > span > i {
display: inline-block;
margin-right: 0.10666667rem;
margin-right: 0.26666667rem;
vertical-align: middle;
}
.photographerStar > span:last-child {
......@@ -603,7 +604,6 @@ body {
color: #999999;
display: inline-block;
margin: 0rem 0rem 0rem 0.10666667rem;
font-size: 0.74666667rem;
}
.appoinmentDetails > div.details ul li > p > input {
outline: none;
......@@ -662,14 +662,14 @@ body {
}
.orderStatus > h2 {
color: #ffffff;
height: 1.2rem;
line-height: 1.2rem;
font-size: 0.8rem;
height: 1.06666667rem;
line-height: 1.06666667rem;
font-size: 0.74666667rem;
}
.orderStatus > small {
display: block;
line-height: 0.72rem;
font-size: 0.64rem;
line-height: 0.66666667rem;
font-size: 0.58666667rem;
margin: 0.4rem 0rem 0rem 0rem;
}
.orderStatus > i {
......@@ -764,12 +764,13 @@ body {
margin: 0.29333333rem 0.26666667rem 0.29333333rem 0.53333333rem;
border: 1px solid #ff7272;
float: right;
font-size: 0.74666667rem;
}
.photos div.confirmPhotos > .checkbox {
display: inline-block;
width: 0.66666667rem;
height: 0.66666667rem;
border: 1px solid #cccccc;
border: 1px solid #666666;
position: absolute;
top: 1.04rem;
left: 0.4rem;
......
dist/css/bind2.css 0 → 100644
@charset "UTF-8";
/*左浮动*/
.left {
float: left;
}
/*右浮动*/
.right {
float: right;
}
/* 清浮动 */
.clear {
clear: both;
}
/* 块级元素居中,不在文档流中 */
/* 文字居中 */
/*按钮*/
/*标签*/
.label {
display: inline-block;
border: 1px solid #666666;
border-radius: 0.16rem;
padding: 0.13333333rem 0.66666667rem;
margin: 0.08rem 0.26666667rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
width: 100%;
height: 0.32rem;
background-color: #f9f9f9;
}
.gap {
display: block;
width: 100%;
height: 0.32rem;
background-color: #e7e7e7;
}
/*栅栏布局 .generate-columns(n);*/
/*输入框*/
/*图片居中*/
/*表单验证提示文字*/
/*文本溢出*/
/*圆形头像*/
/*小图标定位*/
/*蓝色字体效果*/
/*大按钮效果*/
/*五星好评*/
/*空星差评*/
/*头部*/
body {
background: #ffffff;
}
.header {
background: #ffffff;
position: relative;
}
.header > .icon-btn_back_r {
display: inline-block;
position: absolute;
left: 0.8rem;
top: 0.8rem;
}
@media (max-width: 650px) {
.header > .icon-btn_back_r {
display: inline-block;
position: absolute;
left: 0.93333333rem;
top: 1.06666667rem;
}
}
.header h2 {
text-align: center;
color: #353535;
height: 2.66666667rem;
line-height: 2.66666667rem;
font-size: 0.96rem;
border-bottom: 1px solid #cccccc;
position: relative;
}
.header h2 > b {
font-size: 0.74666667rem;
font-weight: 400;
}
.header h2 > i {
display: inline-block;
vertical-align: middle;
margin: 0rem 0.13333333rem;
}
.header h2 > i.back {
float: left;
margin: 0.8rem 0rem 0rem 0.53333333rem;
}
@media (max-width: 650px) {
.header h2 > i.back {
float: left;
margin: 1.06666667rem 0rem 0rem 0.53333333rem;
}
}
.header h2 > input[type='button'],
.header h2 > input[type='submit'] {
position: absolute;
top: 0.8rem;
right: 0.53333333rem;
font-size: 0.74666667rem;
font-weight: 500;
color: #353535;
border: none;
background: #ffffff;
}
.header h2.red {
color: #ea1d1d;
}
/*模态div*/
#bg {
display: none;
width: 100%;
position: fixed;
top: 0rem;
left: 0rem;
z-index: 10;
background: #000000;
opacity: 0.5;
}
/* 头部 */
body {
background: #f9f9f9;
}
.header {
background: #ffffff;
}
.header h2 {
text-align: center;
height: 0.96rem;
line-height: 0.96rem;
color: #262626;
height: 2.66666667rem;
line-height: 2.66666667rem;
border-bottom: 1px solid #cccccc;
}
/*登录注册*/
.login {
padding-top: 1.6rem;
padding-left: 2.66666667rem;
}
.login div.formGroup {
border: 1px solid #858585;
height: 2.13333333rem;
line-height: 2.13333333rem;
width: 14.733333rem;
padding-left: 0.46666667rem;
margin-top: 1rem;
border-radius: 0.21333333rem;
background: #ffffff;
}
.login div.formGroup > label {
display: inline-block;
width: 1.6rem;
text-align: center;
}
.login div.formGroup > label > i {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.login div.formGroup > input {
outline: none;
border: none;
font-size: 0.74666667rem;
width: 10.733333rem;
padding-left: 0.5333rem;
margin: 0.02rem 0 0 0.3rem;
vertical-align: top;
height: 2rem;
line-height: 2rem;
border-left: 1px solid #ccc;
}
.login div.formGroup > .moreFlag {
width: 13.33333333rem;
padding: 0.53333333rem 1.33333333rem;
position: absolute;
top: 8rem;
left: 3.2rem;
border-radius: 0.21333333rem;
background: #ffffff;
z-index: 14;
}
.login div.formGroup > .moreFlag > h4,
.login div.formGroup > .moreFlag > p {
font-size: 0.64rem;
line-height: 1.06666667rem;
color: #858585;
}
.login div.formGroup > .moreFlag > h4 {
text-align: center;
position: relative;
margin: 0.13333333rem 0rem 0.4rem 0rem;
}
.login div.formGroup > .moreFlag > h4 > em {
position: absolute;
top: 0.21333333rem;
left: 2.8rem;
}
.login div.formGroup > .moreFlag > h4 > i {
display: block;
width: 1.06666667rem;
height: 1.06666667rem;
line-height: 1.06666667rem;
border-radius: 50%;
color: #ff0000;
background: #ffffff;
position: absolute;
top: -1.2rem;
right: -1.86666667rem;
}
.login input.login_padding {
padding-left: 0.53333333rem;
}
.login input[type='button'] {
text-align: center;
}
.login #valid {
border: 1px solid #858585;
height: 2.13333333rem;
line-height: 2.13333333rem;
margin-top: 1rem;
border-radius: 0.21333333rem;
background: #ffffff;
width: 7.25333333rem;
padding-left: 0.64rem;
margin-right: 2.05333333rem;
font-size: 0.64rem;
color: #999999;
}
.login #sendCode {
width: 5.06666667rem;
height: 2.13333333rem;
line-height: 2.13333333rem;
padding: 0 0.32rem;
color: #ffffff;
background-color: #ff7272;
text-align: center;
border: 1px solid #ff7272;
border-radius: 0.10666667rem;
font-size: 0.69333333rem;
}
.login #sendCode:hover {
color: #ffffff;
background-color: #ff3f3f;
}
.login #bind {
display: block;
margin-top: 2.88rem;
width: 14.4rem;
height: 2.13333333rem;
line-height: 2.13333333rem;
padding: 0 0.32rem;
color: #ffffff;
background-color: #ff7272;
text-align: center;
border: 1px solid #ff7272;
border-radius: 0.10666667rem;
font-size: 0.69333333rem;
}
.login #bind:hover {
color: #ffffff;
background-color: #ff3f3f;
}
.login .item {
margin-top: 0.96rem;
font-size: 0.64rem;
color: #d1d1d1;
text-align: center;
width: 14.4rem;
position: relative;
}
.login .item > input {
display: inline-block;
width: 0.66666667rem;
height: 0.66666667rem;
position: absolute;
top: -0.74666667rem;
left: 0.4rem;
margin-left: 0.13333333rem;
}
.login .item > .agreement {
color: #a3cbfc;
}
.login .item > .left,
.login .item > .right {
font-size: 0.74666667rem;
margin-top: 1.70666667rem;
color: #999999;
}
.login ._regular {
font-size: 0.64rem;
display: block;
}
gulpfile.js
......@@ -2,11 +2,9 @@
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')({ pattern: '*' });
var reload = plugins.browserSync.reload;
/*var browserSync = require('browser-sync');*/
/*var realFs = require('fs');*/
/*var less = require('gulp-less');
var plumber = require('gulp-plumber');
var spritesmith = require('gulp.spritesmith');*/
var config = {
path: {
less: './src/less/*.less',
......@@ -51,9 +49,10 @@ gulp.task('less',function () {
gulp.task('serve',['less'],function () {
plugins.browserSync({
server: {
// baseDir:'./dist/css/*.css'
baseDir:'./'
},
startPath:'src/pages/master.html'
startPath:'src/pages/bind.html'
});
gulp.watch(config.path.less,['less']);
gulp.watch(config.path.html).on('change',reload);
......@@ -97,3 +96,4 @@ gulp.task('imagemin', function () {
.pipe(plugins.imagemin())
.pipe(gulp.dest(config.dist.img));
});
src/js/public.js
......@@ -150,9 +150,9 @@ Stars.click(function(){
$("#switch").click(function(){
n++;
if(n%2==1||n==1){
$(this).removeClass().addClass("icon-btn_eye_normal").next("input").attr("type","text");
$(this).removeClass().addClass("icon-btn_eye_normal").parent("label").next("input").attr("type","text");
}else{
$(this).removeClass().addClass("icon-btn_eye_check").next("input").attr("type","password");
$(this).removeClass().addClass("icon-btn_eye_check").parent("label").next("input").attr("type","password");
}
})
......
src/less/appointment.less
......@@ -24,7 +24,7 @@ body{
float:left;
.clearfix();
>h2{
.px1rem(font-size,30);
.px1rem(font-size,28);
.px1rem(margin-bottom,10);
}
>p{
......@@ -48,7 +48,7 @@ body{
}
}
.message{
.px1rem(font-size,26);
.px1rem(font-size,24);
position: absolute;
.px1rem(bottom,15);
.px1rem(height,30);
......@@ -76,6 +76,7 @@ body{
>h2{
.px1rem(height,90);
.px1rem(line-height,90);
.px1rem(font-size,28);
border-bottom:1px solid #cccccc;
>span{
display: inline-block;
......@@ -109,7 +110,7 @@ body{
.px2rem(margin,15,0);
.px1rem(height,60);
.px1rem(line-height,60);
.px1rem(font-size,28);
.px1rem(font-size,26);
text-align: center;
display: inline-block;
width: 49%;
......@@ -117,7 +118,7 @@ body{
position: relative;
>i{
display: inline-block;
.px1rem(margin-right,4);
.px1rem(margin-right,10);
vertical-align: middle;
}
}
......@@ -333,7 +334,6 @@ body{
color: #999999;
display: inline-block;
.px4rem(margin,0,0,0,4);
.px1rem(font-size,28);
}
}
>input{
......@@ -385,14 +385,14 @@ body{
color: #ffffff;
>h2{
color: #ffffff;
.px1rem(height,45);
.px1rem(line-height,45);
.px1rem(font-size,30);
.px1rem(height,40);
.px1rem(line-height,40);
.px1rem(font-size,28);
}
>small{
display:block;
.px1rem(line-height,27);
.px1rem(font-size,24);
.px1rem(line-height,25);
.px1rem(font-size,22);
.px4rem(margin,15,0,0,0);
}
>i{
......@@ -475,12 +475,13 @@ body{
.px4rem(margin,11,10,11,20);
border:1px solid #ff7272;
float:right;
.px1rem(font-size,28);
}
>.checkbox{
display: inline-block;
.px1rem(width,25);
.px1rem(height,25);
border: 1px solid #cccccc;
border: 1px solid #666666;
position: absolute;
.px1rem(top,39);
.px1rem(left,15);
......
src/less/bind2.less 0 → 100644
@charset "UTF-8";
@import "mixins.less";
/*模态div*/
#bg{
display: none;
width:100%;
position: fixed;
.px1rem(top,0);
.px1rem(left,0);
z-index: 10;
background: #000000;
opacity: 0.5;
}
/* 头部 */
body{
background: #f9f9f9;
}
.header {
background:#ffffff;
h2 {
.text-center(36);
color:#262626;
.px1rem(height, 100);
.px1rem(line-height, 100);
border-bottom:1px solid #cccccc;
}
}
/*登录注册*/
.login{
.px1rem(padding-top, 60);
.px1rem(padding-left,100);
div.formGroup{
border: 1px solid #858585;
height: 2.13333333rem;
line-height: 2.13333333rem;
width: 14.733333rem;
padding-left: 0.46666667rem;
margin-top: 1rem;
border-radius: 0.21333333rem;
background: #ffffff;
>label{
display: inline-block;
width: 1.6rem;
text-align: center;
>i{
display: inline-block;
vertical-align: middle;
text-align: center;
}
}
>input{
outline: none;
border:none;
.px1rem(font-size,28);
width: 10.733333rem;
padding-left: 0.5333rem;
margin: 0.02rem 0 0 0.3rem;
vertical-align: top;
height: 2rem;
line-height: 2rem;
border-left:1px solid #ccc;
}
>.moreFlag{
.px1rem(width,500);
.px2rem(padding,20,50);
position: absolute;
.px1rem(top,300);
.px1rem(left,120);
.px1rem(border-radius,8);
background: #ffffff;
z-index: 14;
>h4,
>p{
.px1rem(font-size,24);
.px1rem(line-height,40);
color: #858585;
}
>h4{
text-align: center;
position: relative;
.px4rem(margin,5,0,15,0);
>em{
position: absolute;
.px1rem(top,8);
.px1rem(left,105);
}
>i{
display: block;
.px1rem(width,40);
.px1rem(height,40);
.px1rem(line-height,40);
border-radius:50%;
color:#ff0000;
background: #ffffff;
position: absolute;
.px1rem(top,-45);
.px1rem(right,-70);
}
}
}
}
input.login_padding{
.px1rem(padding-left,20);
}
input[type='button']{
text-align: center;
}
#valid{
border: 1px solid #858585;
height: 2.13333333rem;
line-height: 2.13333333rem;
margin-top: 1rem;
border-radius: 0.21333333rem;
background: #ffffff;
.px1rem(width,272);
.px1rem(padding-left,24);
.px1rem( margin-right,77);
.px1rem( font-size,24rem);
color: #999999;
}
#sendCode{
.button(190,80,80,12,#ff7272);
.px1rem(font-size,26);
}
#bind{
display: block;
.px1rem(margin-top,108);
.button(540,80,80,12,#ff7272);
.px1rem(font-size,26);
}
.item{
.px1rem(margin-top,36);
.px1rem(font-size,24);
color: #d1d1d1;
text-align: center;
.px1rem(width,540);
position: relative;
}
.item>input{
display:inline-block;
.px1rem(width,25);
.px1rem(height,25);
position: absolute;
.px1rem(top,-28);
.px1rem(left,15);
.px1rem(margin-left,5);
}
.item>.agreement{
color:#a3cbfc;
}
.item>.left,
.item>.right {
.px1rem(font-size,28);
.px1rem(margin-top,64);
color:#999999;
//text-decoration:underline;
}
._regular{
.px1rem(font-size,24);
display: block;
}
}
src/pages/bind2.html 0 → 100644
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="keywords" content="米拍,摄影,摄影师,写真,婚纱,私拍,约拍,旅拍,促销套系">
<meta name="description" content="米拍摄影服务平台">
<title>米拍：绑定页面</title>
<link rel="stylesheet" href="../../dist/css/base.css">
<link rel="stylesheet" href="../../dist/css/bind2.css">
<link rel="stylesheet" href="../../dist/css/icon.css" id="my_link">
</head>
<body>
<div id="bg"></div>
<header class="header">
<h2 class="">绑定手机</h2>
</header>
<section class="login">
<form action="" id="form">
<div class="formGroup">
<label ><i class="icon-reg_flag_04" id="selectFlag"></i></label>
<div class="moreFlag" id="moreFlag" style="display:none">
<h4><em class="icon-icon_search"></em> 国家和地区 <i id="close">X</i></h4>
<p>中国香港+00852</p>
<p>中国台湾+00886</p>
<p>中国澳门+00853</p>
<p>中国+0086</p>
<p>英国+0044</p>
<p>印度+0091</p>
<p>新加坡+0064</p>
<p>泰国+0066</p>
<p>日本+0081</p>
<p>美国+001</p>
<p>马来西亚+60</p>
<p>加拿大+001</p>
<p>韩国+0082</p>
<p>法国+0033</p>
<p>俄罗斯+007</p>
<p>德国+0049</p>
<p>澳洲+0061</p>
</div>
<input class="phone" type="text" placeholder="手机号" name="phone" onblur="regValidation(this,0,phones)"/>
</div>
<p class="_regular"></p>
<div class="formGroup">
<label ><i class="icon-btn_eye_check" id="switch"></i></label>
<input class="password" type="password" name="password" placeholder="密码（请输入6-20位密码）" onblur="regValidation(this,1,passwords)"/>
</div>
<p class="_regular"></p>
<input id="valid" type="text" placeholder="请输入验证码" name="validcode" onblur="regValidation(this,2,fiveNum)"/>
<input id="sendCode" type="button" value="获取验证码" onclick="settime(this)" />
<p class="_regular"></p>
<input id="bind" type="button" value="绑 定" />
</form>
<p class="item">为保障交易安全，请绑定手机号</p>
<p class="_regular"></p>
<!-- <div class="">
<label class="icon-btn_eye_check" id="switch"></label>
<input class="password" type="password" name="password" placeholder="密码（请输入6-20位密码）" onblur="regValidation(this,1,passwords)"/>
</div>-->
</section>
<script src="../js/jquery.min.js"></script>
<script src="../js/flexible.js"></script>
<script src="../js/validate.js"></script>
<script src="../js/public.js"></script>
<script>
//提交表单
var bind=document.getElementById("bind");
var Form=document.getElementById("form");
bind.addEventListener("click",function(){
if(regValidation($("input[name='phone']")[0],0,phones)&&regValidation($("input[name='password']")[0],1,passwords)
&&regValidation($("input[name='validcode']")[0],2,fiveNum)){
/* this.style.backgroundColor="#ff7272";
this.style.border="#ff7272";*/
Form.submit();
return true;
}
},false)
</script>
</body>
</html>
\ No newline at end of file
src/pages/orderDetails_viewPhoto.html
......@@ -36,7 +36,7 @@
<div class="confirmPhotos">
<span class="checkbox">
<i class="icon-icon_select"></i>
<input type="checkbox" value="分享到个人中心"/>
<input type="checkbox" value="分享到个人中心" checked/>
</span>
分享到个人中心
<input type="submit" value="收片并确认服务结束"/>
......
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