/**index.wxss**/ /* 暂时未用到 page { } */ .container { padding:0; align-items:center; flex-direction:column; justify-content:space-between; } .mulucontainer { width: 710rpx; height: 150rpx; white-space: nowrap; /*强制子元素为一行 */ margin-left: 25rpx; } .navpage001 { display: inline-block; width: 150rpx; height: 150rpx; margin-right: 25rpx; text-align: center; font-size: 10px; align-items: center; } .navpage001img { margin:0 auto; width: 60%; height: 60%; } .mulucontainer .navpage001:last-child{ margin-right: 0; } .banner{ width: 100%; height: 400rpx; } .shouyetupianlist { display: flex; flex-wrap: wrap;/* 允许内容换行 */ justify-content:space-between;/* 水平方向上两端对齐 */ /* 左右各留 20rpx,和卡片之间的 20rpx 间距相同,视觉上三边等宽 */ width: 750rpx; box-sizing: border-box; padding: 0 20rpx; } .shouyetupianlistcontent { /* display: inline; */ padding: 0; /* 水平间距交给容器 padding + space-between,这里只留出上下行距 */ margin: 0 0 40rpx 0; height: 204rpx; /* (750 - 左右各 20 - 中间 20) / 2 = 345 */ width: 345rpx; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .shouyetupianlistcontent01 { position: relative; padding: 0; margin: 0 0 40rpx 0; height: 260rpx; /* 容器内容区宽度,正好铺满 */ width: 710rpx; overflow: hidden; border-radius: 20rpx; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .indeximagelist { width: 100%; height: 204rpx; } .indeximagelist01 { width: 100%; height: 100%; } .tupianwenzi { display: block; } .biaoti01 { display: flex; width: 100%; height: 60rpx; align-items: center; /* 左侧对齐交给容器 padding,去掉后标题和小图/卡片左边缘对齐 */ padding-left: 0; } .biaoti01img { width: 40rpx; height: 40rpx; } .hengxianglist01 { display: flex; width: 300rpx; height: inherit; /* 推荐尺寸在300*250rpx 即150*125px */ margin: 0; overflow: hidden; border-radius: 20rpx; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .indeximage{ border-radius: 20rpx; height: 350rpx; width: 710rpx; transform: translate(20rpx, 30rpx); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .bannerswiper { height: 390rpx; } .indeximagelistmiaosu { font-size: 28rpx; display:flex; position: absolute; top: 10rpx; left: 300rpx; height: 70rpx; align-items: center; padding-left: 20rpx; } .indeximagelistmiaosu01 { display: inline; position: absolute; left: 300rpx; /* 原为 35px:再看它与标题的关系(下面那行 top:-15px),两者会重叠。 标题框实际占到 40px,这里退到 90rpx(45px)之后才真正错开。 */ top: 90rpx; align-items: center; padding-left: 20rpx; } .indeximagelistmiaosu0102 { font-size: 20rpx; position: relative; /* 原为 -15px:这一步把简介往上提了 15px,正好压到标题上。 容器已经让开了位置,这里不再需要负偏移。 */ top: 0; width: 370rpx; }