Skip to content

Y
ypl_mobile_web
Commit c356ed4a by jane0302
Options

'fix'

parent ad48cf05
Pipeline #936 skipped in 0 seconds
Showing with 394 additions and 0 deletions
dist/css/appointment.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.10666667rem;
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
width: 100%;
height: 0.21333333rem;
background-color: #e5e5e5;
}
.gap {
display: block;
width: 100%;
height: 0.16rem;
background-color: #e7e7e7;
}
/*栅栏布局 .generate-columns(n);*/
/*输入框*/
/*图片居中*/
/*表单验证提示文字*/
/*文本溢出*/
/*圆形头像*/
/*小图标定位*/
/*头部*/
body {
background: #ffffff;
}
.header {
background: #ffffff;
}
.header h2 {
text-align: center;
color: #262626;
height: 2.66666667rem;
line-height: 2.66666667rem;
border-bottom: 1px solid #858585;
}
.header h2 > b {
font-size: 0.74666667rem;
font-weight: 500;
}
body {
background: #ffffff;
}
.setsIntro {
height: 6.66666667rem;
padding: 0.93333333rem 0.53333333rem;
border-bottom: 1px solid #858585;
background: #f9f9f9;
}
.setsIntro > div:first-child {
float: left;
width: 5.86666667rem;
height: 4.8rem;
margin-right: 0.53333333rem;
background: #b2b2b2;
border-radius: 0.16rem;
}
.setsIntro > div:last-child {
float: left;
}
.setsIntro > div:last-child:before,
.setsIntro > div:last-child:after {
content: ' ';
display: table;
}
.setsIntro > div:last-child:after {
clear: both;
}
.appoinmentContent {
padding: 0.69333333rem 0.53333333rem;
height: 5.33333333rem;
}
.appoinmentContent > div:first-child {
float: left;
height: 3.73333333rem;
width: 3.73333333rem;
border-radius: 50%;
background-color: #dadada;
margin-right: 0.8rem;
background: #525252;
}
.appoinmentContent > div:nth-child(2) {
float: left;
}
.appoinmentContent > div:nth-child(2):before,
.appoinmentContent > div:nth-child(2):after {
content: ' ';
display: table;
}
.appoinmentContent > div:nth-child(2):after {
clear: both;
}
.appoinmentContent > div:nth-child(2) > i {
display: block;
height: 1.06666667rem;
}
.appoinmentContent > div:nth-child(2) > span {
display: block;
}
.appoinmentContent > div:nth-child(2) > span > a {
display: inline-block;
font-size: 0.69333333rem;
margin-right: 0.8rem;
padding: 0.13333333rem 1.81333333rem;
background: #f7f8fa;
border: 1px solid #e3e3e3;
border-radius: 0.16rem;
color: #8c8c8c;
}
.appoinmentDetails > div.details h2 {
height: 1.33333333rem;
line-height: 1.33333333rem;
background: #e5e5e5;
font-size: 0.74666667rem;
padding: 0rem 0.53333333rem;
}
.appoinmentDetails > div.details ul li:first-child,
.appoinmentDetails > div.details ul li.line {
border-bottom: 1px solid #858585;
}
.appoinmentDetails > div.details ul li > p {
padding: 0rem 0.53333333rem;
height: 2.4rem;
line-height: 2.4rem;
font-size: 0.85333333rem;
}
.appoinmentDetails > div.details ul li > p > small {
color: #c2c2c2;
font-weight: 400;
}
.appoinmentDetails > div.details ul li > p em {
display: inline-block;
float: right;
margin-left: 0.8rem;
}
.appoinmentDetails > div.details ul li > p > input {
outline: none;
border: none;
width: 77%;
font-size: 0.8rem;
height: 2.13333333rem;
line-height: 2.13333333rem;
}
.appoinmentDetails > div.details > a.refund {
display: block;
text-align: center;
color: #6eb3ff;
font-size: 0.74666667rem;
margin: 2.4rem 0rem;
}
.appoinmentDetails > span {
display: block;
height: 2.13333333rem;
line-height: 2.13333333rem;
color: #ffffff;
background: #ff7272;
text-align: center;
}
dist/css/base.css
......@@ -40,6 +40,7 @@ a {
a:active,
a:hover {
outline-width: 0;
cursor: pointer;
}
/* Font adjust
========================================================================== */
......
dist/css/bind.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/common.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/coupon.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/fillInformation.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/master.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/mixins.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/myOrder.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/personalPage.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/photographyPage.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/sale.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/search.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/style.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
dist/css/workDetail.css
......@@ -22,6 +22,8 @@
padding: 0.08rem 0.53333333rem;
margin: 0.08rem 0.26666667rem 0.08rem 0rem;
}
/*小标签*/
/*透明标签*/
/*版块间隙*/
.bg {
display: block;
......
src/less/appointment.less 0 → 100644
@charset "UTF-8";
@import "mixins.less";
body{
background: #ffffff;
}
.setsIntro{
.px1rem(height,250);
.px2rem(padding,35,20);
border-bottom: 1px solid #858585;
background: #f9f9f9;
>div:first-child{
float:left;
.px1rem(width,220);
.px1rem(height,180);
.px1rem(margin-right,20);
background: #b2b2b2;
.px1rem(border-radius,6);
}
>div:last-child{
float:left;
.clearfix();
}
}
.appoinmentContent{
.px2rem(padding,26,20);
.px1rem(height,200);
>div:first-child{
float: left;
.circlePortrait(140);
.px1rem(margin-right,30);
background: #525252;
}
>div:nth-child(2){
float:left;
.clearfix();
>i{
display: block;
.px1rem(height,40);
}
>span{
display: block;
>a{
display: inline-block;
.px1rem(font-size,26);
.px1rem(margin-right,30);
.px2rem(padding,5,68);
background: #f7f8fa;
border: 1px solid #e3e3e3;
.px1rem(border-radius,6);
color: #8c8c8c;
}
}
}
}
.appoinmentDetails{
>div.details{
h2{
.px1rem(height,50);
.px1rem(line-height,50);
background: #e5e5e5;
.px1rem(font-size,28);
.px2rem(padding,0,20);
}
ul li:first-child,
ul li.line{
border-bottom: 1px solid #858585;
}
ul li>p{
.px2rem(padding,0,20);
.px1rem(height,90);
.px1rem(line-height,90);
.px1rem(font-size,32);
>small{
color: #c2c2c2;
font-weight:400;
}
em{
display: inline-block;
float: right;
.px1rem(margin-left,30);
}
>input{
outline: none;
border: none;
width:77%;
.px1rem(font-size,30);
.px1rem(height,80);
.px1rem(line-height,80);
}
}
>a.refund{
display: block;
text-align: center;
color: #6eb3ff;
.px1rem(font-size,28);
.px2rem(margin,90,0);
}
}
>span{
display: block;
.px1rem(height,80);
.px1rem(line-height,80);
color:#ffffff;
background: #ff7272;
text-align: center;
}
}
\ No newline at end of file
src/less/base.less
......@@ -37,6 +37,7 @@ a {
a:active,
a:hover {
outline-width: 0;
cursor: pointer;
}
/* Font adjust
========================================================================== */
......
src/less/mixins.less
......@@ -75,6 +75,7 @@
padding:3/37.5rem 20/37.5rem;
margin:3/37.5rem 10/37.5rem 3/37.5rem 0rem;
}
/*小标签*/
.small_label(){
font-weight:400;
.px1rem(font-size,12);
......@@ -84,6 +85,7 @@
background-color: #969696;
color:#ffffff;
}
/*透明标签*/
.transparent_label(){
background: #000000;
opacity: 0.3;
......
src/pages/appointment.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/appointment.css">
</head>
<body>
<header class="header">
<h2 class="">预约</h2>
</header>
<section class="setsIntro">
<div>
<img src="" alt=""/>
</div>
<div>
<h2>套系名字</h2>
</div>
</section>
<section class="appoinmentContent">
<div class="headPortrait">
<img src="" alt=""/>
</div>
<div>
<h2>太阳卷卷毛</h2>
<i></i>
<span>
<a href="">联系TA</a> <a href="">查看档期</a>
</span>
</div>
</section>
<section class="appoinmentDetails">
<div class="details">
<h2>客户信息</h2>
<ul>
<li>
<p>客户姓名：女富豪</p>
</li>
<li>
<p>联系方式：15269436745</p>
</li>
</ul>
</div>
<div class="details">
<h2>价格详情</h2>
<ul>
<li>
<p><i></i>使用优惠劵 <small class="right">最美的你活动优惠劵 656元 <em> > </em></small> </p>
</li>
<li class="line">
<p>订单总价：<em>6758</em></p>
<p>优惠折扣： <em>-758</em></p>
<p>实际支付： <em>6000</em></p>
</li>
<li class="line">
<p>买家留言：<input type="text"/></p>
</li>
</ul>
<a class="refund" href="">《退款须知》</a>
</div>
<span>预约</span>
</section>
<script src="../../src/js/jquery.min.js"></script>
<script src="../../src/js/flexible.js"></script>
<script src="../js/public.js"></script>
</body>
</html>
\ No newline at end of file
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