|
|
|
@ -1,7 +1,5 @@ |
|
|
|
<template> |
|
|
|
<view class="search-container"> |
|
|
|
<!-- 状态栏安全区域 --> |
|
|
|
<uv-status-bar></uv-status-bar> |
|
|
|
|
|
|
|
<!-- 顶部搜索栏 --> |
|
|
|
<view class="search-header"> |
|
|
|
@ -12,7 +10,7 @@ |
|
|
|
action-text="搜索" |
|
|
|
:action-style="{ |
|
|
|
color: '#fff', |
|
|
|
backgroundColor: '#FFA500', |
|
|
|
backgroundColor: '#06DADC', |
|
|
|
borderRadius: '198rpx', |
|
|
|
width: '100rpx', |
|
|
|
height: '64rpx', |
|
|
|
@ -20,32 +18,29 @@ |
|
|
|
fontSize: '26rpx', |
|
|
|
lineHeight: '64rpx', |
|
|
|
}" |
|
|
|
:customStyle="{ |
|
|
|
width: '500rpx', |
|
|
|
}" |
|
|
|
@search="handleSearch" |
|
|
|
@custom="handleSearch" |
|
|
|
@clear="handleSearch" |
|
|
|
></uv-search> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 分类标签栏 --> |
|
|
|
<view class="category-tabs"> |
|
|
|
<scroll-view scroll-x class="tab-scroll"> |
|
|
|
<view class="tab-list"> |
|
|
|
<view |
|
|
|
v-for="(tab, index) in categoryTabs" |
|
|
|
:key="index" |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: currentTab === index }" |
|
|
|
@click="switchTab(index)" |
|
|
|
> |
|
|
|
{{ tab.title }} |
|
|
|
<!-- 分类标签栏 --> |
|
|
|
<view class="category-tabs"> |
|
|
|
<scroll-view scroll-x class="tab-scroll"> |
|
|
|
<view class="tab-list"> |
|
|
|
<view |
|
|
|
v-for="(tab, index) in categoryTabs" |
|
|
|
:key="index" |
|
|
|
class="tab-item" |
|
|
|
:class="{ active: currentTab === index }" |
|
|
|
@click="switchTab(index)" |
|
|
|
> |
|
|
|
{{ tab.title }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 搜索结果列表 --> |
|
|
|
<view class="search-results"> |
|
|
|
<view |
|
|
|
@ -168,10 +163,14 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.search-header { |
|
|
|
padding: 10rpx 32rpx 20rpx; |
|
|
|
padding: 10rpx 32rpx 6rpx; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
position: sticky; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
|
|
|
|
} |
|
|
|
.category-tabs { |
|
|
|
background: #fff; |
|
|
|
// border-bottom: 1rpx solid #f0f0f0; |
|
|
|
@ -211,6 +210,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.search-results { |
|
|
|
padding: 32rpx; |
|
|
|
display: flex; |
|
|
|
|