/* 大盒子 */ .box{ width: 100%; height: 100%; } /* 上门预约订单盒子 */ .smyydd{ width: 390px; height: 50px; position: absolute; background-color: #eec2c7; } .smyydd image{ width: 30px; height: 30px; position: absolute; left: 10px; top: 10px; } /* 《上门预约订单》 */ .wsmyydd{ font-size: 25px; font-weight: bold; left: 120px; top: 10px; position: absolute; color: black; } /* 三个预约盒子 */ .box1{ width: 100%; height: 210px; top: 50px; position: relative; border: 1px #d9d9d9 solid; } /* 从上到下三个盒子 */ .box2{ width: 100%; height: 70px; } .box2 image{ width: 65px; height: 65px; position: absolute; top: 10px; left: 20px; border-radius: 50px; } .box3{ width: 100%; height: 70px; position: absolute; top: 70px; } .box3 image{ width: 20px; height: 20px; position: absolute; top: 18px; left: 320px; } .box4{ width: 100%; height: 70px; position: absolute; top: 140px; } .box4 image{ width: 40px; height: 40px; position: absolute; top: 10px; left: 20px; border-radius: 50px; } /* 款式 */ .p1{ font-size: 15px; position: absolute; left: 100px; top: 30px; } /* 款式价格 */ .p11{ font-size: 20px; position: absolute; right: 20px; top: 30px; font-weight: bold; color: #f5b037; } /* 预约内容 下单日期和情况 */ .p3{ font-size: 15px; font-weight: bold; position: absolute; left: 20px; top: 10px; } .p4{ font-size: 15px; font-weight: bold; position: absolute; left: 20px; top: 30px; } .p5{ font-size: 15px; font-weight: bold; position: absolute; left: 20px; top: 50px; } /* 《已接单》 */ .p6{ font-size: 15px; font-weight: bold; position: absolute; left: 20px; top: 10px; color: #5ba75f; } /* 《未接单》 */ .p61{ font-size: 15px; font-weight: bold; position: absolute; left: 20px; top: 10px; color: #f5b037; } .box7{ width: 85px; height: 35px; position: absolute; left: 120px; top: 10px; border-radius: 10px; border: 2px #a0cba2 solid; } /* 《未接单》 */ .box71{ width: 85px; height: 35px; position: absolute; left: 120px; top: 10px; border-radius: 10px; border: 2px #f5b037 solid; } /* 订单进行中情况框 */ .box5{ width: 90px; height: 30px; position: absolute; right: 30px; top: 10px; background-color: #ff3348; border-radius: 10px; } /* 订单 已完成 框 */ .box6{ width: 90px; height: 40px; position: absolute; right: 20px; top: 10px; background-color: #58a55c; border-radius: 10px; } /* 订单 已取消 框 */ .box8{ width: 60px; height: 40px; position: absolute; right: 20px; top: 10px; background-color: #ff3348; border-radius: 10px; } /* 确认 取消 框 */ .box9{ width: 50px; height: 40px; position: absolute; right: 90px; top: 10px; background-color: #ff3348; border-radius: 10px; } .box10{ width: 50px; height: 40px; position: absolute; right: 20px; top: 10px; background-color: #58a55c; border-radius: 10px; } /* 已确认抢单 已取消 */ .p7{ font-size: 15px; font-weight: bold; position: absolute; right: 8px; top: 10px; color: #ffffff; } .p8{ font-size: 14px; font-weight: bold; position: absolute; left: 250px; top: 50px; } .p9{ font-size: 12px; font-weight: bold; position: absolute; left: 30px; bottom: 5px; }