695 lines
5.3 KiB
Plaintext
695 lines
5.3 KiB
Plaintext
/* 大盒子 */
|
|
|
|
.box{
|
|
|
|
width: 100%;
|
|
|
|
height: 850px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 底部盒子底 */
|
|
|
|
.d{
|
|
|
|
width: 100%;
|
|
|
|
height: 70px;
|
|
|
|
border: 1px ;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0px;
|
|
|
|
background-color: #ffffff;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 底部盒子 */
|
|
|
|
.box1{
|
|
|
|
width: 100%;
|
|
|
|
height: 50px;
|
|
|
|
border: 1px ;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 20px;
|
|
|
|
border: 1px #bababa solid;
|
|
|
|
background-color: #ffffff;
|
|
|
|
box-shadow: 0px 2px 2px 2px #c3c3c3;
|
|
|
|
}
|
|
|
|
.box1 image{
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
position: absolute;
|
|
|
|
left: 22px;
|
|
|
|
top: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 图片盒子 */
|
|
|
|
.box3{
|
|
|
|
width: 100%;
|
|
|
|
height: 220px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.box3 image{
|
|
|
|
width: 100%;
|
|
|
|
height: 220px;
|
|
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 粉色盒子 */
|
|
|
|
.box4{
|
|
|
|
width: 100%;
|
|
|
|
height: 150px;
|
|
|
|
position: absolute;
|
|
|
|
background-color: #de868f;
|
|
|
|
top: 200px;
|
|
|
|
border-radius: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 粉色框小字 */
|
|
|
|
.p4{
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #7c272a;
|
|
|
|
position: absolute;
|
|
|
|
left: 30px;
|
|
|
|
top: 10px;
|
|
|
|
}
|
|
|
|
.p5{
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #7c272a;
|
|
|
|
position: absolute;
|
|
|
|
left: 30px;
|
|
|
|
top: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 白色盒子底 */
|
|
|
|
.box5{
|
|
|
|
width: 100%;
|
|
|
|
height: 500px;
|
|
|
|
position: relative;
|
|
|
|
background-color: #ffffff;
|
|
|
|
top: 275px;
|
|
|
|
border-radius: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 白色盒子 */
|
|
|
|
.box51{
|
|
|
|
width: 100%;
|
|
|
|
height: 425px;
|
|
|
|
position: relative;
|
|
|
|
background-color: #ffffff;
|
|
|
|
top: 75px;
|
|
|
|
border-radius: 30px;
|
|
|
|
border: 2px #e3e3e3 solid;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 白色框底 字 */
|
|
|
|
.p6{
|
|
|
|
font-size: 20px;
|
|
|
|
position: absolute;
|
|
|
|
left: 20px;
|
|
|
|
top: 15px;
|
|
|
|
}
|
|
|
|
.p7{
|
|
|
|
font-size: 12px;
|
|
|
|
position: absolute;
|
|
|
|
left: 35px;
|
|
|
|
top: 50px;
|
|
|
|
color: #909090;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 《预约时间段》 */
|
|
|
|
.p8{
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
position: absolute;
|
|
|
|
left: 20px;
|
|
|
|
top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 时间框 */
|
|
|
|
.box6{
|
|
|
|
width: 100%;
|
|
|
|
height: 200px;
|
|
|
|
position: absolute;
|
|
|
|
top: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 时间选择框 */
|
|
|
|
.box71{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.box72{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 140px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.box73{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
right: 15px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.box74{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
top: 70px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.box75{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 140px;
|
|
|
|
top: 70px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.box76{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
right: 15px;
|
|
|
|
top: 70px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.box77{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 15px;
|
|
|
|
top: 140px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
background-color: #cfcfcf;
|
|
|
|
}
|
|
|
|
.box78{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
left: 140px;
|
|
|
|
top: 140px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
.box79{
|
|
|
|
width: 110px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
right: 15px;
|
|
|
|
top: 140px;
|
|
|
|
border: 1px #cfcfcf solid;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 时间段 字 */
|
|
|
|
.p10{
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 美甲师选择框 */
|
|
|
|
.box8{
|
|
|
|
width: 100%;
|
|
|
|
height: 150px;
|
|
|
|
position: absolute;
|
|
|
|
top: 300px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 《指定美甲师》 */
|
|
|
|
.p9{
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
position: absolute;
|
|
|
|
left: 20px;
|
|
|
|
top: 270px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 美甲师 */
|
|
|
|
.box91{
|
|
|
|
width: 80px;
|
|
|
|
height: 100px;
|
|
|
|
position: absolute;
|
|
|
|
left: 30px;
|
|
|
|
}
|
|
|
|
.box91 image{
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
border-radius:50px;
|
|
|
|
}
|
|
|
|
.box92{
|
|
|
|
width: 80px;
|
|
|
|
height: 100px;
|
|
|
|
position: absolute;
|
|
|
|
left: 120px;
|
|
|
|
}
|
|
|
|
.box92 image{
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
border-radius:50px;
|
|
|
|
}
|
|
|
|
.box93{
|
|
|
|
width: 80px;
|
|
|
|
height: 100px;
|
|
|
|
position: absolute;
|
|
|
|
left: 210px;
|
|
|
|
}
|
|
|
|
.box93 image{
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
border-radius:50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 美甲师名字 */
|
|
|
|
.p11{
|
|
|
|
font-size: 15px;
|
|
|
|
position: absolute;
|
|
|
|
top: 60px;
|
|
|
|
left: 25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 预约情况 */
|
|
|
|
.p12{
|
|
|
|
font-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
top: 80px;
|
|
|
|
left: 16px;
|
|
|
|
color: #81bb84;
|
|
|
|
}
|
|
|
|
.p13{
|
|
|
|
font-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
top: 80px;
|
|
|
|
left: 10px;
|
|
|
|
color: #ff2b41;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 《门店》 */
|
|
|
|
.p1{
|
|
|
|
font-size: 15px;
|
|
|
|
position: relative;
|
|
|
|
left: 50px;
|
|
|
|
top: 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 小黄框 2个 */
|
|
|
|
.box2{
|
|
|
|
width: 100px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
right: 110px;
|
|
|
|
bottom: 5px;
|
|
|
|
background-color: #fefba0;
|
|
|
|
border: 1px #9f2e21 solid;
|
|
|
|
border-radius: 20px;
|
|
|
|
}
|
|
|
|
.box21{
|
|
|
|
width: 100px;
|
|
|
|
height: 40px;
|
|
|
|
position: absolute;
|
|
|
|
right: 5px;
|
|
|
|
bottom: 5px;
|
|
|
|
background-color: #fefba0;
|
|
|
|
border: 1px #9f2e21 solid;
|
|
|
|
border-radius: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 小黄框 字 */
|
|
|
|
.p2{
|
|
|
|
font-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
color: #9f2e21;
|
|
|
|
}
|
|
|
|
.p3{
|
|
|
|
font-size: 16px;
|
|
|
|
position: absolute;
|
|
|
|
left: 18px;
|
|
|
|
top: 10px;
|
|
|
|
color: #9f2e21;
|
|
|
|
} |