|
|
|
@ -23,6 +23,67 @@ button { |
|
|
|
background-color: #fafafa; |
|
|
|
} |
|
|
|
|
|
|
|
/* 搜索框样式 */ |
|
|
|
.search-container { |
|
|
|
position: relative; |
|
|
|
padding: 20rpx 0; |
|
|
|
z-index: 10; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box { |
|
|
|
width: 90%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #f8f9fa; |
|
|
|
border: 2rpx solid #e9ecef; |
|
|
|
border-radius: 50rpx; |
|
|
|
padding: 0 20rpx; |
|
|
|
margin: 0 auto; |
|
|
|
transition: all 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.search-box:focus-within { |
|
|
|
border-color: #07c160; |
|
|
|
box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1); |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.search-icon { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #999; |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input { |
|
|
|
flex: 1; |
|
|
|
padding: 24rpx 0; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
background-color: transparent; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.search-input::placeholder { |
|
|
|
color: #ccc; |
|
|
|
} |
|
|
|
|
|
|
|
.clear-icon { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
padding: 8rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #e9ecef; |
|
|
|
cursor: pointer; |
|
|
|
transition: all 0.2s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.clear-icon:hover { |
|
|
|
background-color: #dee2e6; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面标题栏 */ |
|
|
|
.title-bar { |
|
|
|
display: flex; |
|
|
|
|