/* pages/course/searchCourses/searchCourses.wxss */ /* ===== 页面骨架:整页固定,列表单独滚动 ===== */ .page { height: 100vh; display: flex; flex-direction: column; background: #ffffff; overflow: hidden; /* 禁止整页滚动 */ box-sizing: border-box; font-family: SourceHanSansCN, PingFang SC, Microsoft YaHei, system-ui, -apple-system, sans-serif; } ::-webkit-scrollbar { width: 0; height: 0; background: transparent; } /* 轻触反馈 */ .hover { opacity: .86; transition: opacity .18s ease; } /* ===== 顶部搜索条(固定) ===== */ .search-bar { padding: 24rpx 28rpx; box-sizing: border-box; display: flex; align-items: center; gap: 16rpx; background: #fff; } .search-icon { width: 36rpx; height: 36rpx; opacity: .9; } /* 胶囊输入框 */ .search-input { flex: 1; height: 72rpx; padding: 0 26rpx; border-radius: 9999rpx; background: #f5f6f7; font-size: 26rpx; color: #111; line-height: 72rpx; box-shadow: inset 0 0 0 1rpx rgba(0,0,0,.04); } .search-ph { color: #a8a8a8; font-size: 26rpx; } /* ===== 列表:占满剩余高度,单独滚动,隐藏滚动条 ===== */ .list { flex: 1; padding: 0 24rpx 28rpx; box-sizing: border-box; -webkit-overflow-scrolling: touch; background: #fff; } .no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; } .no-scrollbar { scrollbar-width: none; } /* ===== 课程卡片(左图右文) ===== */ .course-card { display: flex; gap: 22rpx; padding: 20rpx; margin-top: 20rpx; background: #ffffff; border-radius: 20rpx; border: 1rpx solid #f1f1f1; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.05); } .cover { width: 280rpx; /* 3:2 比例更舒服 */ height: 186rpx; flex: 0 0 280rpx; border-radius: 14rpx; object-fit: cover; } .info { flex: 1; min-width: 0; /* 防文字溢出 */ display: flex; flex-direction: column; justify-content: space-between; } .title { font-size: 28rpx; line-height: 40rpx; color: #111; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; /* 两行省略 */ -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .meta { margin-top: 12rpx; display: flex; align-items: baseline; justify-content: space-between; } .price-pill { padding: 6rpx 14rpx; font-size: 24rpx; color: #fff; border-radius: 9999rpx; background: linear-gradient(90deg, #ff6a00, #ff8a2a); box-shadow: 0 6rpx 16rpx rgba(255,106,0,.22); white-space: nowrap; } .people { font-size: 22rpx; color: #9aa0a6; white-space: nowrap; } /* ===== 空状态 ===== */ .empty { padding: 120rpx 0 80rpx; display: flex; flex-direction: column; align-items: center; gap: 18rpx; color: #9aa0a6; } .empty-icon { width: 240rpx; height: 240rpx; opacity: .7; } .empty-text { font-size: 24rpx; line-height: 34rpx; } /* ===== 兼容你项目里可能已有的工具类(可留可删) ===== */ .ml-3 { margin-left: 6rpx; } .mt-17 { margin-top: 12rpx; }