|
|
|
@ -5,49 +5,52 @@ |
|
|
|
} |
|
|
|
|
|
|
|
/* 搜索框样式 */ |
|
|
|
.search-bar-container { |
|
|
|
.search-bar { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
padding: 20rpx; |
|
|
|
background-color: #ffffff; |
|
|
|
z-index: 1000; |
|
|
|
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08); |
|
|
|
background-color: transparent; |
|
|
|
z-index: 100; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box { |
|
|
|
width: 90%; |
|
|
|
.search-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #f7f8fa; |
|
|
|
border-radius: 50rpx; |
|
|
|
border: 1rpx solid rgba(0, 0, 0, 0.08); |
|
|
|
border-radius: 40rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 0 30rpx; |
|
|
|
margin: 0 auto; |
|
|
|
height: 88rpx; |
|
|
|
width: 90%; |
|
|
|
height: 80rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box:focus-within { |
|
|
|
background-color: #ffffff; |
|
|
|
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.12); |
|
|
|
transform: translateY(-2rpx); |
|
|
|
.search-container:focus-within { |
|
|
|
border-color: #07c160; |
|
|
|
background-color: white; |
|
|
|
box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); |
|
|
|
} |
|
|
|
|
|
|
|
.search-icon { |
|
|
|
width: 40rpx; |
|
|
|
height: 40rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #999; |
|
|
|
margin-right: 20rpx; |
|
|
|
opacity: 0.4; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
font-size: 32rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333; |
|
|
|
background-color: transparent; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
height: 60rpx; |
|
|
|
line-height: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input::placeholder { |
|
|
|
|