/**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; } /* ── 信息广播(首页最上方,文案为空则整条不渲染)───────────────── 文案放得下就静态居中;放不下加 .broadcast-scroll 横向滚动, 并把同一段文字渲染两遍首尾相接,滚动到 -50% 时正好接上,看不出循环接缝。 */ .broadcast { display: flex; align-items: center; width: 710rpx; margin: 12rpx auto 0; padding: 14rpx 20rpx; box-sizing: border-box; background: #fff7e6; border: 1rpx solid #ffe3a3; border-radius: 12rpx; } .broadcast-icon { flex: none; margin-right: 12rpx; font-size: 28rpx; line-height: 1; } .broadcast-body { flex: 1; min-width: 0; overflow: hidden; } /* 静态:居中显示,实在超了也留个省略号兜底 */ .broadcast-track { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-size: 26rpx; color: #e60012; /* 兜底色:真实颜色由 home.broadcast_color 以内联样式覆盖 */ } /* 滚动:两段文字并排,整体左移 50% 后无缝重来 */ .broadcast-scroll { display: inline-flex; overflow: visible; text-overflow: clip; animation: broadcast-marquee 18s linear infinite; } /* 两段文字各带一个等宽右边距,整条宽度 = 2 ×(文字+间距), 所以左移 50% 正好是一段,循环无缝 */ .broadcast-text { margin-right: 80rpx; } @keyframes broadcast-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }