/* 搜索框 */ .box1{ width: 330px; height: 40px; top:5px; left: 35px; position: absolute; background-color: darkgray; border-radius: 20px; } /* 框内信息 */ .box2{ width: 328px; height: 37px; top:1px; left: 1px; position: absolute; background-color:#ffffff; border-radius: 20px; } .box2 image{ width: 25px; height: 25px; position: absolute; top:6px; left: 5px; } .z1{ top:8px; left: 30px; position: absolute; } /* 地区选择 */ .h1 image{ width: 15px; height: 20px; position: absolute; top:54px; left: 32px; } .z2{ top:55px; position: absolute; left: 48px; } .h2 image{ width: 10px; height: 10px; position: absolute; top:62px; left: 162px; } /* 店铺 */ /* a店铺 */ .adianpu{ width: 344px; height: 120px; position: relative; left: 8rpx; top: 80px; margin: auto; border: 3px #de868f solid; border-radius: 20px; margin-top: 15rpx; } /* a店铺名称 */ .aname{ font-size: 15px; font-weight: bold; left: 110px; top: 15px; position: absolute; color: black; } /* a店铺图片 */ .t1 image{ width: 100px; height: 100px; position: absolute; top:10px; left:5px; border-radius: 20px; } /* b店铺 */ .bdianpu{ width: 344px; height: 120px; position: absolute; left: 22px; top: 220px; margin: auto; border: 3px #de868f solid; border-radius: 20px; } /* b店铺名称 */ .bname{ font-size: 15px; font-weight: bold; left: 110px; top: 15px; position: absolute; color: black; } /* b店铺图片 */ .t2 image{ width: 100px; height: 100px; position: absolute; top:10px; left:5px; border-radius: 20px; } /* c店铺 */ .cdianpu{ width: 344px; height: 120px; position: absolute; left: 0px; top: 128px; margin: auto; border: 3px #de868f solid; border-radius: 20px; } /* c店铺名称 */ .cname{ font-size: 15px; font-weight: bold; left: 110px; top: 15px; position: absolute; color: black; } /* c店铺图片 */ .t3 image{ width: 100px; height: 100px; position: absolute; top:10px; left:5px; border-radius: 20px; } /* d店铺 */ .ddianpu{ width: 344px; height: 120px; position: absolute; left: 0px; top: 130px; margin: auto; border: 3px #de868f solid; border-radius: 20px; } /* d店铺名称 */ .dname{ font-size: 15px; font-weight: bold; left: 110px; top: 15px; position: absolute; color: black; } /* d店铺图片 */ .t4 image{ width: 100px; height: 100px; position: absolute; top:10px; left:5px; border-radius: 20px; } /* e店铺 */ .edianpu{ width: 344px; height: 120px; position: absolute; left: 0px; top: 130px; margin: auto; border: 3px #de868f solid; border-radius: 20px; } /* e店铺名称 */ .ename{ font-size: 15px; font-weight: bold; left: 110px; top: 15px; position: absolute; color: black; } /* e店铺图片 */ .t5 image{ width: 100px; height: 100px; position: absolute; top:10px; left:5px; border-radius: 20px; } /* 可预定小框 */ .ksm{ width: 70px; height: 26px; position: absolute; left: 255px; top: 40px; border: 1px #4095e5 solid; border-radius: 10px; } /* 可预定 休息中 小字 */ .wksm{ font-size: 12px; left: 18px; top: 6px; position: absolute; color: #4095e5; } /* 接受预约 */ .yy1{ width: 50px; height: 25px; position: absolute; left: 110px; top: 45px; background-color: #4095e5; } .yy2{ width: 60px; height: 25px; position: absolute; left: 165px; top: 45px; background-color: #ffffff; } .yy3{ width: 10px; height: 25px; position: absolute; left: 230px; top: 45px; background-color: #4095e5; } /* 《预约》 */ .wyy1{ font-size: 12px; color: #ffffff; } .wyy2{ font-size: 12px; color: #4095e5; } /* 店铺地点 */ .wdpdd{ font-size: 12px; left: 110px; top: 85px; position: absolute; color: #9b9b9b; } /* 搜索框 */ .search-outer { box-sizing: border-box; display:flex; height:40px; overflow:hidden; padding: 8px; border-bottom: 1px solid #ddd; position: relative; bottom: 6rpx; left: 40rpx; width: 560rpx; } /* 取消 */ .search-cancel { font-size: 16px; color: #4095e5; /* 确保颜色可见 */ display: inline-block; /* 确保元素不是隐藏的 */ text-align: center; /* 如果需要居中 */ line-height: 30px; /* 确保文字垂直居中 */ position: relative; bottom: 4rpx; } /* 输入 */ .search-input { flex:1; text-align: left; display: block; color: #000; height: 24px; font-size: 15px; background-color: #fff; border-color: transparent; } /* 弹性盒 */ .box3{ display: flex; flex-wrap: wrap; /* 允许换行 */ justify-content: space-between; /* 使子元素分布更均匀 */ }