.search { display: flex; justify-content: space-between; align-items: center; height: 80rpx; padding-left: 20rpx; padding-right: 20rpx; left: 0rpx; right: 0rpx; } .search-inside { border-radius: 20rpx; } .search-input { font-size: 30rpx; } .cancel-button { height: 80rpx; width: 100rpx; line-height: 80rpx; font-size: 30rpx; text-align: center; opacity: 0; } .hot-tag-block { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; margin-top: 10rpx; } .hot-tag-title { font-size: 30rpx; margin-top: 20rpx; margin-left: 50rpx; } .hot-tags { margin: 0rpx 40rpx; } .hot-tag { font-size: 24rpx; display: inline-block; margin-bottom: 10rpx; margin: 10rpx 10rpx; } .hot-bar-block { background-color: #ffffff; border-radius: 24rpx; margin: 60rpx 40rpx 0rpx 40rpx; box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16); padding-bottom: 10rpx; } .hot-bar-title { font-size: 30rpx; border-radius: 24rpx; position: relative; top: -25rpx; margin: 20rpx 20rpx 0rpx 20rpx; padding: 8rpx 30rpx 8rpx 30rpx; box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0, 0, 0, 0.16); } .hot-bar { height: 50rpx; margin: 10rpx 40rpx; font-size: 24rpx; display: flex; justify-content: space-between; } .hot-block { position: absolute; top: 80rpx; bottom: 0rpx; width: 100%; } .search-block { position: absolute; top: 80rpx; bottom: 0rpx; width: 100%; opacity: 0; } .result-bar { padding: 0rpx 20rpx; } .search-history { display: flex; justify-content: space-between; font-size: 35rpx; padding: 25rpx 40rpx; } .more { width: 30rpx; height: 30rpx; }