搜索检索页面

pages/resource/search.vue

@@ -1,6 +1,6 @@
 <template>
 	<!--搜索页-->
-	<view>
+	<view style="background-color: #fff;height: 100vh;">
 		<u-toast ref="messager"></u-toast>
 		<view style="margin:30upx 30upx; display: flex;">
 			<u-icon @click="back()" name="arrow-left" color="#383838" size="22" style="margin-right: 10upx;"></u-icon>
@@ -19,7 +19,19 @@
 				search-icon="search"
 			>
 			</u-search> -->
-			<u-search bgColor="#ffffff" maxlength="20" placeholder="请输入关键字" v-model="keyword" :focus="true" shape="round" @clear="clearSearch" @search="searchList" :showAction="false" search-icon="search" ></u-search>
+			<u-search
+			 bgColor="#F2F5F7"
+			 maxlength="20"
+			 placeholder="请输入关键字" 
+			 v-model="keyword" 
+			 :focus="true" 
+			 shape="round" 
+			 @clear="clearSearch" 
+			 @search="searchList"  
+			 search-icon="search" 
+			 :showAction="true" 
+			 actionText="搜索" 
+			></u-search>
 		</view>
 		<view style="margin:30upx 30upx 10upx 30upx;position: relative;border-bottom:1px solid #f0f0f0; display: flex;justify-content: space-between;">
 			<view class="con-top">
@@ -40,7 +52,9 @@
 						<u-icon v-if="!isOpen" name="arrow-down" color="#b3b3b3" size="16"></u-icon>
 						<u-icon v-if="isOpen" name="arrow-up" color="#b3b3b3" size="16"></u-icon>
 					</view>
-					<view class="words-clear"><u-icon name="trash" @click="cleanHistory()" style="margin-right: 20px;"></u-icon></view>
+					<view class="words-clear" @click="cleanHistory()">
+						<image src="../../static/images/icon/del.png" mode="" style="margin-right: 15px;"></image>
+					</view>
 				</view>
 				<view class="words-items">
 					<view  v-for="(word,widx) in historyWords" :key="widx" v-if="widx<10" @tap="wordSearch(word)" class="words-item">{{word}}</view>
@@ -50,7 +64,11 @@
 			<view class="words">
 				<view class="words-top">
 					<view class="words-title">热门搜索</view>
+					<view class="words-clear" @click="cleanHistory()">
+						<image src="../../static/images/icon/eye.png" mode=""  style="margin-right: 15px;width: 32upx;height: 24upx;"></image>
 					</view>
+				</view>
+				
 				<view class="words-items">
 					 <view  v-for="(hw,hwidx) in hotWords" :key="hwidx" @tap="wordSearch(hw)" class="words-item">{{hw}}</view>
 				</view>
@@ -719,6 +737,20 @@
 				})
 			}
 		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-search .u-search__content{
+		height: 72upx !important;
+	}
+	.words-clear{
+		image{
+			width: 30upx;
+			height: 30upx;
+		}
+	}
+	::v-deep .u-search__action{
 		font-size: 32upx;
 		color: #387DF7;
 		font-weight: 500;
@@ -773,7 +805,10 @@
 		padding: 30upx;
 		line-height: 40upx;
 		.words-top{
-			display: flex;
+			display: flex;
+			justify-content: space-between;
+			.words-title{
+				display: flex;
 				color: #333333;
 				font-weight: 500;
 				font-size: 32upx !important;
@@ -783,8 +818,9 @@
 		.words-items{
 			margin-top: 20upx;
 			.words-item{
-				display: inline-block;
-				padding: 10upx 35upx;
+				display: inline-block;
+				padding: 10upx 35upx;
+				margin: 10upx;
 				background-color: #FFFFFF;
 				border: 1px solid rgba(153,153,153,0.2);
 				font-size: 28upx;