.container { margin-top: 81rpx; padding: 0 15rpx; background-color: whte; } /* 搜索栏样式 */ .search-bar { width: 520rpx; display: flex; align-items: center; padding: 16rpx 20rpx 16rpx 0; background-color: #fff; border-bottom: 1rpx solid #f5f5f5; } .search-input-container { flex: 1; display: flex; align-items: center; background-color: #f5f7fb; border-radius: 60rpx; padding: 14rpx 24rpx; margin-left: 20rpx; } .search-icon { width: 28rpx; height: 28rpx; margin-right: 16rpx; } .search-input { flex: 1; font-size: 26rpx; font-weight: 300; background: transparent; } .cancel-btn { font-size: 28rpx; color: #333; margin-left: 20rpx; } /* 加载状态样式 */ .loading-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 999; } .loading-spinner { width: 80rpx; height: 80rpx; border: 8rpx solid #949494; border-radius: 50%; border-top-color: #333; animation: spin 1s ease-in-out infinite; margin-bottom: 20rpx; } .loading-text { font-size: 32rpx; color: #949494; } @keyframes spin { to { transform: rotate(360deg); } } /* 搜索指定内容 */ .specifiedContent { min-height: 30rpx; margin: 20rpx 10rpx 40rpx 10rpx; } .specifiedContent-title { font-size: 26rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .specifiedContent-list { display: flex; gap: 20rpx; flex-wrap: wrap; } .specifiedContent-item { display: flex; align-items: center; font-size: 23rpx; font-weight: 500; background-color: #f5f7fb; padding: 10rpx 20rpx; border-radius: 8rpx; } .specifiedContent-img { width: 26rpx; height: 26rpx; margin-right: 10rpx; } .search-history { min-height: 30rpx; margin: 20rpx 10rpx; } .history-header { display: flex; justify-content: space-between; align-items: center; /* margin-bottom: 10rpx; */ } /* 搜索历史 */ .history-title { font-size: 26rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .history-list { display: flex; gap: 20rpx; flex-wrap: wrap; } .history-item { display: flex; align-items: center; font-size: 23rpx; font-weight: 500; background-color: #f5f7fb; padding: 10rpx 20rpx; border-radius: 8rpx; } /* 有数据 */ .hot-services { margin: 20rpx; border: 1rpx solid #e8e8e8; } .section-header { display: flex; justify-content: center; align-items: center; margin-bottom: 20rpx; } .section-title { font-size: 32rpx; font-weight: bold; color: #333; } .section-arrow { width: 32rpx; height: 32rpx; margin-right: 10rpx; } .service-list { display: flex; flex-direction: column; gap: 20rpx; } .service-card { background-color: #fff; border-radius: 16rpx; overflow: hidden; } .service-info { display: flex; align-items: flex-end; width: 100%; padding: 20rpx; } .service-info-left { width: 60%; } .service-info-left-top { display: flex; align-items: flex-end; } .service-info-right { width: 35%; display: flex; justify-content: flex-end; } .service-footer { align-items: center; gap: 15rpx; } .service-image { width: 100%; height: 240rpx; } .service-image2 { width: 35rpx; height: 35rpx; } .service-badge { position: absolute; top: 20rpx; left: 20rpx; background-color: #FF512A; color: #fff; font-size: 24rpx; padding: 4rpx 16rpx; border-radius: 20rpx; } .service-name { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 4rpx; margin-right: 15rpx; } .service-tag { display: inline-block; color: #e1ca9b; font-size: 22rpx; padding: 2rpx 0; border-radius: 20rpx; margin-bottom: 4rpx; } .service-desc { font-size: 24rpx; color: #666; margin-bottom: 20rpx; line-height: 1.5; } .service-count { font-size: 24rpx; color: #999; margin-left: 15rpx; } .service-button { background-color: #FF512A; color: #fff; font-size: 26rpx; padding: 12rpx 36rpx; border-radius: 60rpx; } /* 回到顶部 */ .toUp { width: 100rpx; height: 100rpx; position: fixed; right: 33rpx; bottom: 250rpx; z-index: 10; } .toUp image { width: 100%; height: 100%; }