/* 店铺名框 */ .Box2 { width: 380px; height: 150px; background-color: white; position: relative; left:5px; top:50px; border-radius: 15px; } /* 店铺名 */ .z2{ font-size: 25px; font-weight: bolder; left: 50rpx; bottom: 130rpx; position: relative; } .image1{ width: 80px; height: 20px; position: relative; right: 230rpx; bottom: 50rpx; } .z3{ position: relative; color: rgb(194, 53, 53); bottom:95rpx; left: 230px; } .z4{ position: relative; left: 480rpx; bottom: 95rpx; } /* 相册框按钮 */ .box2{ width: 60px; height: 40px; position: relative; background-color: rgb(197, 190, 190); top:110px; left: 300px; border-radius: 10px; } .z5{ top:10px; left: 10px; position: absolute; } /* 营业时间 */ .z6{ color: #4095E5; font-weight: bolder; top:20px; left: 10px; position: relative; } .z7{ position: relative; top:38rpx; left: 30rpx; font-size: 13px; } .box3{ width: 390px; height: 1px; background-color: darkgrey; position: relative; top:50rpx; } /* 地址 */ .z8{ position: relative; font-size: 12px; top:60rpx; left: 35rpx; } .image3{ width: 10px; height: 12px; position: absolute; top:395rpx; left: 5px; } .box4{ width: 390px; height: 1px; background-color: darkgrey; position: relative; top:90rpx; } /* 推荐项目 */ .zt1{ font-size: 18px; top:130rpx; left: 10px; position: relative; } /* 第一个项目 */ .image2{ width: 185px; height: 140px; position: relative; border-radius: 10px; } .zt2{ font-size: 20px; position: relative; top:10rpx; left: 30rpx; } .zt3{ color: #E89709; font-size: 19px; font-weight: bolder; position: relative; top:10rpx; left: 100rpx; } .zt4{ position: absolute; top:5px; left: 8px; color: #ffffff; } .zt5{ font-size: 20px; position: absolute; top:425px; right: 30px; } .zt6{ color: #E89709; font-size: 19px; font-weight: bolder; position: absolute; top:445px; right: 60px; } .h4{ width: 80px; height: 30px; position: absolute; background-color: #58A55C; top:470px; left: 298px; border-radius: 10px; } .zt7{ position: absolute; top:5px; right: 8px; color: #ffffff; } /* 推荐美甲师 */ .wz1{ font-size: 18px; position: absolute; top:505px; left: 10px; } /* 第一个美甲师 */ /* 底部框 */ .Box6{ width: 390px; height: 80px; height: #ffffffe9; position: absolute; top:700px; } .image12{ width: 35px; height: 30px; position: absolute; top:15px; left: 20px; } .box5{ width: 390px; height: 1px; background-color: darkgray; } .t1{ position: absolute; top:20px; left: 60px; } .box6{ width: 130px; height: 40px; background-color: #eec2c7; position: absolute; top:11px; left: 240px; border-radius: 20px; } .t2{ font-size: 20px; top:8px; left: 48px; position: absolute; } .image{ width: 200rpx; height: 200rpx; position: relative; left: 20rpx; border-radius: 10%; } .h1{ margin-left: 10rpx; display: flex; position:relative; top: 160rpx; } .box7 { width: 100%; flex-direction: column; /* 垂直方向弹性布局 */ white-space: nowrap; /* 强制内容不换行,确保图片在一行显示 */ position:relative; top: 260rpx; } .image-container { display: inline-block; width: 180rpx; height: 240rpx; margin-right: 10rpx; /* 图片之间的间距 */ margin-left: 10rpx; } .image5 { width: 100%; height: 100%; } .text{ margin-left: 60rpx; margin-top: 50rpx; }