Skip to content

Y
ypl_mobile_web
Commit 35d47ae4 by jane0302
Options

'addicon'

parent dfad5ca3
Pipeline #1061 skipped in 0 seconds
Showing with 198 additions and 101 deletions
dist/css/appointment.css
......@@ -274,11 +274,11 @@ body {
}
.appoinmentDetails > div.details ul li > .cancelBlock {
width: 100%;
margin-top: 2.88rem;
margin-top: 3.62666667rem;
}
.appoinmentDetails > div.details ul li > .cancelBtn {
width: 85%;
margin: 2.88rem 0rem 0rem 0rem;
margin: 3.2rem 0rem 0rem 0rem;
float: right;
position: relative;
}
......@@ -288,15 +288,16 @@ body {
left: -2.66666667rem;
top: 0.4rem;
font-size: 0.58666667rem;
height: 0.66666667rem;
}
.appoinmentDetails > div.details ul li > .cancelBtn > span > i {
display: block;
position: absolute;
top: 0.26666667rem;
left: 1.06666667rem;
left: 1.01333333rem;
}
.appoinmentDetails > div.details ul li > .praise {
margin-top: 6.24rem;
margin-top: 7.57333333rem;
}
.appoinmentDetails > div.details ul li > .pay {
width: 100%;
......@@ -520,18 +521,20 @@ body {
}
.photos > ul li div {
display: block;
width: 100%;
margin-bottom: 0.53333333rem;
height: 13.86666667rem;
max-height: 13.86666667rem;
overflow: hidden;
}
.photos > ul li div > img {
width: 100%;
overflow: hidden;
}
.photos > div.confirmPhotos {
.photos div.confirmPhotos {
height: 2.66666667rem;
line-height: 2.66666667rem;
width: 20rem;
padding-left: 0.8rem;
width: 100%;
padding-left: 1.33333333rem;
font-size: 0.74666667rem;
background: #ffffff;
color: #999999;
......@@ -539,7 +542,7 @@ body {
top: 26.66666667rem;
z-index: 10;
}
.photos > div.confirmPhotos > a.confirmBtn {
.photos div.confirmPhotos > input[type='submit'] {
width: 100%;
display: block;
height: 2.13333333rem;
......@@ -549,10 +552,29 @@ body {
text-align: center;
font-size: 0.85333333rem;
width: 12.26666667rem;
border-radius: 0.16rem;
margin: 0.26666667rem 0.53333333rem;
border-radius: 0.21333333rem;
margin: 0.29333333rem 0.26666667rem 0.29333333rem 0.53333333rem;
border: 1px solid #ff7272;
float: right;
}
.photos div.confirmPhotos > .checkbox {
display: inline-block;
width: 0.66666667rem;
height: 0.66666667rem;
border: 1px solid #cccccc;
position: absolute;
top: 1.04rem;
left: 0.4rem;
}
.photos div.confirmPhotos > .checkbox > i.icon-icon_select {
display: inline-block;
position: absolute ;
top: 0.08rem;
left: 0.05333333rem;
}
.photos div.confirmPhotos > .checkbox > input[type='checkbox'] {
display: none;
}
/*模态效果样式*/
#lean_overlay {
position: fixed;
......
dist/css/personalPage.css
......@@ -111,6 +111,9 @@ body {
z-index: 5;
}
.photographer-video > P {
position: absolute;
bottom: 0rem;
left: 0.53333333rem;
line-hegiht: 1.33333333rem;
font-size: 0.74666667rem;
margin-left: 4.8rem;
......@@ -120,6 +123,9 @@ body {
.photographer-video > P > i {
display: inline-block;
}
.personPage {
height: 8rem;
}
/*个人主页和个人中心页面*/
.personPro {
color: #575757;
......@@ -170,14 +176,10 @@ body {
.personPro > span.num {
width: 49%;
}
.personalList {
margin-bottom: 4.8rem;
}
.personalList ul li {
text-align: left;
padding: 0rem 0.53333333rem 0rem 1.86666667rem;
border-bottom: 1px solid #cccccc;
font-size: 0.85333333rem;
font-size: 0.8rem;
height: 2.4rem;
line-height: 2.4rem;
position: relative;
......@@ -185,31 +187,35 @@ body {
}
.personalList ul li > i {
display: inline-block;
/* .px1rem(line-height,90);*/
margin: 0rem 0.69333333rem 0rem 0rem;
position: absolute;
top: 0.96rem;
top: 0.85333333rem;
left: 0.66666667rem;
}
.personalList ul li > em {
.personalList ul li > a {
display: inline-block;
float: right;
margin-top: 1.06666667rem;
margin-top: 0.8rem;
}
/*底部*/
.footer {
height: 2.82666667rem;
font-size: 0.74666667rem;
height: 2.13333333rem;
font-size: 0.69333333rem;
margin-top: 5.86666667rem;
border-top: 1px solid #cccccc;
}
.footer > span {
color: #acacac;
margin-top: 1.6rem;
margin-top: 0.53333333rem;
display: inline-block;
width: 49%;
width: 49.5%;
text-align: center;
position: relative;
color: #747474;
}
.footer > span > i {
display: block;
margin: 0rem 4.77333333rem 0.13333333rem 4.61333333rem;
}
.footer > .red {
color: #ea1d1d;
}
dist/css/photographyPage.css
......@@ -111,6 +111,9 @@ body {
z-index: 5;
}
.photographer-video > P {
position: absolute;
bottom: 0rem;
left: 0.53333333rem;
line-hegiht: 1.33333333rem;
font-size: 0.74666667rem;
margin-left: 4.8rem;
......@@ -120,6 +123,9 @@ body {
.photographer-video > P > i {
display: inline-block;
}
.personPage {
height: 8rem;
}
/*个人主页和个人中心页面*/
.personPro {
color: #575757;
......@@ -170,14 +176,10 @@ body {
.personPro > span.num {
width: 49%;
}
.personalList {
margin-bottom: 4.8rem;
}
.personalList ul li {
text-align: left;
padding: 0rem 0.53333333rem 0rem 1.86666667rem;
border-bottom: 1px solid #cccccc;
font-size: 0.85333333rem;
font-size: 0.8rem;
height: 2.4rem;
line-height: 2.4rem;
position: relative;
......@@ -185,33 +187,37 @@ body {
}
.personalList ul li > i {
display: inline-block;
/* .px1rem(line-height,90);*/
margin: 0rem 0.69333333rem 0rem 0rem;
position: absolute;
top: 0.96rem;
top: 0.85333333rem;
left: 0.66666667rem;
}
.personalList ul li > em {
.personalList ul li > a {
display: inline-block;
float: right;
margin-top: 1.06666667rem;
margin-top: 0.8rem;
}
/*底部*/
.footer {
height: 2.82666667rem;
font-size: 0.74666667rem;
height: 2.13333333rem;
font-size: 0.69333333rem;
margin-top: 5.86666667rem;
border-top: 1px solid #cccccc;
}
.footer > span {
color: #acacac;
margin-top: 1.6rem;
margin-top: 0.53333333rem;
display: inline-block;
width: 49%;
width: 49.5%;
text-align: center;
position: relative;
color: #747474;
}
.footer > span > i {
display: block;
margin: 0rem 4.77333333rem 0.13333333rem 4.61333333rem;
}
.footer > .red {
color: #ea1d1d;
}
/* 用户详细信息介绍 */
body {
......
dist/img/icon.png
dist/img/icon.png

154 KB | W: | H:

dist/img/icon.png

155 KB | W: | H:

dist/img/icon.png
dist/img/icon.png
dist/img/icon.png
dist/img/icon.png
  • 2-up
  • Swipe
  • Onion skin
src/less/appointment.less
......@@ -154,11 +154,11 @@ body{
}
>.cancelBlock{
width: 100%;
.px1rem(margin-top,108);
.px1rem(margin-top,136);
}
>.cancelBtn{
width: 85%;
.px4rem(margin,108,0,0,0);
.px4rem(margin,120,0,0,0);
float:right;
position: relative;
>span{
......@@ -167,16 +167,17 @@ body{
.px1rem(left,-100);
.px1rem(top,15);
.px1rem(font-size,22);
.px1rem(height,25);
>i{
display: block;
position: absolute;
.px1rem(top,10);
.px1rem(left,40);
.px1rem(left,38);
}
}
}
>.praise{
.px1rem(margin-top,234);
.px1rem(margin-top,284);
}
>.pay{
.largeBtn(90,#ff7272,28);
......@@ -369,31 +370,52 @@ body{
position: relative;
>ul li div{
display: block;
width:100%;
.px1rem(margin-bottom,20);
.px1rem(height,520);
.px1rem(max-height,520);
overflow: hidden;
>img{
width:100%;
overflow: hidden;
}
}
>div.confirmPhotos{
div.confirmPhotos{
.px1rem(height,100);
.px1rem(line-height,100);
.px1rem(width,750);
.px1rem(padding-left,30);
width:100%;
.px1rem(padding-left,50);
.px1rem(font-size,28);
background: #ffffff;
color:#999999;
position:fixed;
.px1rem(top,1000);
z-index: 10;
>a.confirmBtn{
>input[type='submit']{
.largeBtn(80,#ff7272,32);
.px1rem(width,460);
.px1rem(border-radius,6);
.px2rem(margin,10,20);
.px1rem(border-radius,8);
.px4rem(margin,11,10,11,20);
border:1px solid #ff7272;
float:right;
}
>.checkbox{
display: inline-block;
.px1rem(width,25);
.px1rem(height,25);
border: 1px solid #cccccc;
position: absolute;
.px1rem(top,39);
.px1rem(left,15);
>i.icon-icon_select{
display: inline-block;
position:absolute ;
.px1rem(top,3);
.px1rem(left,2);
}
>input[type='checkbox']{
display: none;
}
}
}
}
......
src/less/personalPage.less
......@@ -30,6 +30,9 @@
z-index: 5;
}
>P{
position: absolute;
.px1rem(bottom,0);
.px1rem(left,20);
>i{
display:inline-block;
}
......@@ -40,6 +43,9 @@
font-weight:400;
}
}
.personPage{
.px1rem(height,300);
}
/*个人主页和个人中心页面*/
.personPro{
color:#575757;
......@@ -85,45 +91,47 @@
}
}
.personalList{
.px1rem(margin-bottom,180);
ul li{
text-align: left;
.px4rem(padding,0,20,0,70);
border-bottom: 1px solid #cccccc;
.px1rem(font-size,32);
.px1rem(font-size,30);
.px1rem(height,90);
.px1rem(line-height,90);
position: relative;
display: block;
>i{
display: inline-block;
/* .px1rem(line-height,90);*/
.px4rem(margin,0,26,0,0);
position: absolute;
.px1rem(top,36);
.px1rem(top,32);
.px1rem(left,25);
}
>em{
>a{
display:inline-block;
float:right;
.px1rem(margin-top,40);
.px1rem(margin-top,30);
}
}
}
/*底部*/
.footer{
.px1rem(height,106);
.px1rem(font-size,28);
.px1rem(height,80);
.px1rem(font-size,26);
.px1rem(margin-top,220);
border-top: 1px solid #cccccc;
>span{
color:#acacac;
.px1rem(margin-top,60);
.px1rem(margin-top,20);
display: inline-block;
width:49%;
width:49.5%;
text-align: center;
position: relative;
color:#747474;
>i{
display: block;
.px4rem(margin,0,179,5,173);
}
}
>.red{
color: #ea1d1d;
}
}
\ No newline at end of file
src/pages/orderDetails_orders.html
......@@ -28,15 +28,15 @@
<p>订单总价：<em>6758 <del>7000</del></em></p>
<p>优惠折扣： <em>-758</em></p>
<p>支付宝支付： <em class="red">￥6000</em></p>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i>太阳卷卷毛</span>
<span><i class="icon-call"></i> 15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......
src/pages/orderDetails_over.html
......@@ -28,15 +28,15 @@
<p>订单总价：<em>6758 <del>7000</del></em></p>
<p>优惠折扣： <em>-758</em></p>
<p>支付宝支付： <em class="red">￥6000</em></p>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i>太阳卷卷毛</span>
<span><i class="icon-call"></i> 15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......@@ -71,7 +71,7 @@
<p>客户收片：2016-07-19 13:24</p>
</li>
<li>
<a href="" class="cancel cancelBtn" style="background: #ff7272"> <span><i></i>联系客服 </span>确认服务结束</a>
<a href="" class="cancel cancelBtn" style="background: #ff7272"> <span><i class="icon-icon_service"></i>联系客服 </span>确认服务结束</a>
</li>
</ul>
</div>
......
src/pages/orderDetails_pay.html
......@@ -25,15 +25,15 @@
</div>
<div>
<h2>套系名字...(微信购买)</h2>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i> 太阳卷卷毛</span>
<span><i class="icon-call"></i>15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......
src/pages/orderDetails_photo.html
......@@ -28,15 +28,15 @@
<p>订单总价：<em>6758 <del>7000</del></em></p>
<p>优惠折扣： <em>-758</em></p>
<p>支付宝支付： <em class="red">￥6000</em></p>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i>太阳卷卷毛</span>
<span><i class="icon-call"></i> 15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......
src/pages/orderDetails_receive.html
......@@ -28,15 +28,15 @@
<p>订单总价：<em>6758 <del>7000</del></em></p>
<p>优惠折扣： <em>-758</em></p>
<p>支付宝支付： <em class="red">￥6000</em></p>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i> 太阳卷卷毛</span>
<span><i class="icon-call"></i> 15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......@@ -70,7 +70,7 @@
<p>成片发送时间：2016-07-16 13:24</p>
</li>
<li>
<a href="" class="cancel cancelBtn" style="background: #ff7272"> <span><i></i>联系客服 </span>查看成片</a>
<a href="" class="cancel cancelBtn" style="background: #ff7272"> <span><i class="icon-icon_service"></i>联系客服 </span>查看成片</a>
</li>
</ul>
</div>
......
src/pages/orderDetails_revision.html
......@@ -32,7 +32,7 @@
<li>
<div class="judgments">
<small>（需高于原评价且在3星以上，只可修改一次）</small>
<h2>请对服务进行评星：<i></i> </h2>
<h2>请对服务进行评星：<i class="stars"></i> </h2>
<textarea name="" id="" cols="50" rows="10" placeholder="小主，你还有什么话想说的么~"></textarea>
</div>
<span class="bg"></span>
......
src/pages/orderDetails_shot.html
......@@ -28,15 +28,15 @@
<p>订单总价：<em>6758 <del>7000</del></em></p>
<p>优惠折扣： <em>-758</em></p>
<p>支付宝支付： <em class="red">￥6000</em></p>
<a class="message"><i></i> 查看留言</a>
<a class="message"><i class="icon-leave_message"></i> 查看留言</a>
</div>
</section>
<section class="photographerStar">
<h2>
摄影师星级：<i></i>
</h2>
<span><i></i> 太阳卷卷毛</span>
<span><i></i> 15203666845</span>
<span><i class="icon-private-letter"></i> 太阳卷卷毛</span>
<span><i class="icon-call"></i> 15203666845</span>
</section>
<form action="">
<section class="appoinmentDetails">
......@@ -68,7 +68,7 @@
<p>拍摄档期修改：2016-06-29 17:24</p>
</li>
<li>
<a href="" class="cancel cancelBtn"> <span><i></i>联系客服 </span>取消订单</a>
<a href="" class="cancel cancelBtn"> <span><i class="icon-icon_service"></i>联系客服 </span>取消订单</a>
</li>
</ul>
</div>
......
src/pages/orderDetails_viewPhoto.html
......@@ -23,23 +23,42 @@
</li>
<li>
<div>
<img src="../img/tokyo.png" alt=""/>
<img src="../img/example.png" alt=""/>
</div>
</li>
<li>
<div>
<img src="../img/tokyo.png" alt=""/>
<img src="../img/test.png" alt=""/>
</div>
</li>
</ul>
<form action="">
<div class="confirmPhotos">
<input type="checkbox" value="分享到个人中心"/>分享到个人中心
<a href="" class="confirmBtn ">收片并确认服务结束</a>
<span class="checkbox">
<i class="icon-icon_select"></i>
<input type="checkbox" value="分享到个人中心"/>
</span>
分享到个人中心
<input type="submit" value="收片并确认服务结束"/>
</div>
</form>
</section>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script src="../../src/js/flexible.js"></script>
<script src="../js/public.js"></script>
<script>
var select = $(".checkbox");
var hook=select.find("i");
select.click(function(){
hook.toggleClass("icon-icon_select");
if(hook.hasClass("icon-icon_select")){
select.find("input[type='checkbox']").attr("checked",true);
}else{
select.find("input[type='checkbox']").attr("checked",false);
}
})
</script>
</body>
</html>
\ No newline at end of file
src/pages/personalCenter .html
......@@ -8,11 +8,11 @@
<title>米拍：个人中心</title>
<link rel="stylesheet" href="../../dist/css/base.css">
<link rel="stylesheet" href="../../dist/css/personalPage.css">
<link rel="stylesheet" href="../../dist/css/icon2x.css">
<link rel="stylesheet" href="../../dist/css/icon.css" id="my_link">
</head>
<body>
<section class="photographer-video">
<p><i></i> <em>太阳卷卷毛</em> 四川 成都</p>
<section class="photographer-video personPage">
<p><i class="icon-icon_man"></i> <em>太阳卷卷毛</em> 四川 成都</p>
</section>
<section class="personPro">
<div>
......@@ -24,27 +24,39 @@
</section>
<section class="personalList">
<ul>
<li><i class="icon-icon_order2"></i> 我的订单 <em class="right icon-btn_next2"> </em></li>
<li><i class="icon-icon_discuss2"></i> 订单评价 <em class="right icon-btn_next2"> </em></li>
<li><i class="icon-icon_sale2"></i> 我的优惠劵 <em class="right icon-btn_next2"> </em></li>
<li><i class="icon-icon_order"></i> 我的订单 <a href="" class="right icon-order_next"> </a></li>
<li><i class="icon-icon_discuss"></i> 订单评价 <a href="" class="right icon-order_next"> </a></li>
<li><i class="icon-icon_sale"></i> 我的优惠劵 <a href="" class="right icon-order_next"> </a></li>
<span class="gap"></span>
<li><i class="icon-icon_suit2 "></i> 相册 <em class="right icon-btn_next2"> </em></li>
<li><i></i> 下载约拍APP <em class="right icon-btn_next2"> </em></li>
<li><i class="icon-icon_suit "></i> 相册 <a href="" class="right icon-order_next"> </a></li>
<li><i></i> 下载约拍APP <a href="" class="right icon-order_next"> </a></li>
</ul>
</section>
<footer class="footer">
<footer class="footer" id="footer">
<span>
<i></i><a>主页</a>
<i class="icon-icon_home_normal"></i>主页
</span>
<span>
<i></i><a>我的</a>
<span class="red">
<i class="icon-icon_me_check"></i>我的
</span>
</footer>
<script src="../../src/js/jquery.min.js"></script>
<script src="../../src/js/flexible.js"></script>
<script src="../js/public.js"></script>
<script>
var icon=$("#footer").find("span");
icon.click(function(){
var ico1=icon.eq(0).find("i");
var ico2=icon.eq(1).find("i");
$(this).addClass("red").siblings().removeClass("red");
if($(this).index()==0){
ico1.removeClass("icon-icon_home_normal").addClass("icon-icon_home_check");
ico2.removeClass("icon-icon_me_check").addClass("icon-icon_me_normal");
}else{
ico1.removeClass("icon-icon_home_check").addClass("icon-icon_home_normal");
ico2.removeClass("icon-icon_me_normal").addClass("icon-icon_me_check");
}
});
</script>
</body>
......
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