/* pages/search/search.wxss */ .container { min-height: 100vh; background: #fff; display: flex; flex-direction: column; box-sizing: border-box; padding-top: 80rpx; } /* 顶部标题栏 */ .header { padding: 30rpx; display: flex; align-items: center; z-index: 100; border-bottom: 1rpx solid #eee; width: 700rpx; } .back-btn { width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; margin-right: 30rpx; } /* 返回箭头图标 */ .icon-back { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .icon-back-arrow { width: 24rpx; height: 24rpx; border-top: 4rpx solid #333; border-left: 4rpx solid #333; transform: rotate(-45deg); margin-left: 8rpx; } .title { font-size: 36rpx; font-weight: bold; color: #333; flex: 1; text-align: center; margin-right: 80rpx; /* 为了保持标题居中,右侧留出与返回按钮相同的空间 */ } .search-box { width: 640rpx; height: 80rpx; background: #f0f0f0; border-radius: 40rpx; display: flex; align-items: center; padding: 0 30rpx; position: relative; margin-top: 30rpx; } .search-box icon { margin-right: 15rpx; } .search-box input { flex: 1; height: 80rpx; font-size: 30rpx; color: #333; } .placeholder { color: #999; font-size: 30rpx; } .search-btn { font-size: 32rpx; color: #333; padding: 0 10rpx; border-left: 1px solid #ccc; padding-left: 20rpx; } .search-result { flex: 1; height: calc(100vh - 180rpx); width: 700rpx; box-sizing: border-box; margin-top: 30rpx; } .book-list { margin-bottom: 20rpx; } .book-item { display: flex; padding: 20rpx; background: #fff; border-radius: 8rpx; margin-bottom: 20rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); } .book-cover { width: 180rpx; height: 240rpx; border-radius: 8rpx; margin-right: 20rpx; } .book-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .book-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 10rpx; line-height: 1.4; } .book-title .highlight { color: #0675FF; font-weight: bold; } .book-desc { font-size: 26rpx; color: #666; margin-bottom: 10rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .book-author { font-size: 24rpx; color: #999; } .loading, .no-more, .empty { text-align: center; padding: 30rpx 0; color: #999; font-size: 24rpx; } .empty { padding: 100rpx 0; }