search

pages/search/index.vue

@@ -10,18 +10,54 @@
 		<view class="find">
 			<view class="findTitle">
 				搜索发现
-				<image src="/static/home/search.png" class="findIcon"></image>
+				<image src="/static/search/openEye.png" class="findIcon" v-if="showEye" @click="showEye=!showEye"></image>
+				<image src="/static/search/closeEye.png" class="findIcon" v-if="!showEye" @click="showEye=!showEye"></image>
 			</view>
 			<view class="others">
 				换一批
 			</view>
 		</view>
-		<view class="hotSearch">
+		<view class="hotSearch" v-if="showEye">
 			<view v-for="(item,index) in searchData" :key="index" class="hotItem">
 				<image src="/static/user/hot.png" mode="" class="hotImg" v-if="index==0"></image>
 				<text>{{item.name}}</text>
 			</view>
 		</view>
+		<view class="hotSuggest">
+			<scroll-view class="hotList" scroll-x="true" @scroll="scroll" >
+				<view class="hotItem" v-for="(item,index) in 2" :key="index">
+					<view class="itemHeade">
+						<view class="headeIcon">
+							<image src="/static/search/hotImg.png" mode=""></image>
+						</view>
+						<view class="headTitle">热门数码产品汇总</view>
+					</view>
+					<view class="itemMain" v-for="(s,k) in 4" :key="k">
+						<view class="num1 numCommon" v-if="k==0">
+							{{k+1}}
+						</view>
+						<view class="num2 numCommon" v-if="k==1">
+							{{k+1}}
+						</view>
+						<view class="num3 numCommon" v-if="k==2">
+							{{k+1}}
+						</view>
+						<view class="num4 numCommon" v-if="k==3">
+							{{k+1}}
+						</view>
+						<image src="/static/home/goodsDemo.png" mode="" class="goodsImg" v-if="k<3"></image>
+						<view class="goodsInfo">
+							<view class="goodName">
+								荣耀PlAY 7T
+							</view>
+							<view class="goodsSale"  v-if="k<3">
+								今日开售
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -29,20 +65,19 @@
 	export default {
 		data() {
 			return {
+				showEye:true,
 				searchValue: '',
-				searchData:[
+				searchData: [{
-					{
+					name: '小米手机'
-						name:'小米手机'
+				}, {
-					},{
+					name: '华为'
-						name:'华为'
+				}, {
-					},{
+					name: 'vivo'
-						name:'vivo'
+				}, {
-					},{
+					name: 'NOVA12'
-						name:'NOVA12'
+				}, {
-					},{
+					name: '空调'
-						name:'空调'
+				}]
-					}
-				]
 			}
 		},
 
@@ -101,12 +136,14 @@
 			color: #FFFFFF;
 		}
 	}
-	.find{
+
+	.find {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		margin-top: 44rpx;
-		.findTitle{
+
+		.findTitle {
 			width: 200rpx;
 			height: 44rpx;
 			font-size: 32rpx;
@@ -115,7 +152,8 @@
 			color: #000000;
 			line-height: 44rpx;
 			margin-left: 40rpx;
-			.findIcon{
+
+			.findIcon {
 				width: 36rpx;
 				height: 27rpx;
 				border-radius: 0rpx 0rpx 0rpx 0rpx;
@@ -123,7 +161,8 @@
 				margin-left: 22rpx;
 			}
 		}
-		.others{
+
+		.others {
 			width: 72rpx;
 			height: 34rpx;
 			font-size: 24rpx;
@@ -133,12 +172,14 @@
 			line-height: 34rpx;
 		}
 	}
-	.hotSearch{
+
+	.hotSearch {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
 		margin-top: 20rpx;
-		.hotItem{
+
+		.hotItem {
 			height: 64rpx;
 			background: #FFFFFF;
 			border-radius: 68rpx 68rpx 68rpx 68rpx;
@@ -152,11 +193,114 @@
 			margin-right: 12rpx;
 			margin-bottom: 24rpx;
 			padding-left: 30rpx;
-			.hotImg{
+
+			.hotImg {
 				width: 25rpx;
 				height: 29rpx;
 				opacity: 1;
 			}
 		}
 	}
+	.hotSuggest{
+		width: 100%;
+		margin-left: 32rpx;
+		.hotList{
+			width:100%;
+			white-space: nowrap;
+			.hotItem{
+				margin-right: 26rpx;
+				display: inline-block;
+				width: 484rpx;
+				height: 612rpx;
+				overflow-y: auto;
+				background-image: url('../../static/search/hotBack.png');
+				background-size: 100%  100%;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+				opacity: 1;
+				border: 2rpx solid #FFFFFF;
+				.itemHeade{
+					display: flex;
+					align-items: center;
+					.headeIcon{
+						margin: 18rpx 0 0 22rpx;
+						width: 48rpx;
+						height: 60rpx;
+						opacity: 1;
+						image{
+							width: 100%;
+							height: 100%;
+						}
+					}
+					.headTitle{
+						width: 224rpx;
+						height: 40rpx;
+						font-size: 28rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 600;
+						color: #F3202A;
+						line-height: 40rpx;
+						margin-left: 14rpx;
+					}
+				}
+				.itemMain{
+					display: flex;
+					align-items: center;
+					margin: 22rpx 0 0 26rpx;
+					.numCommon{
+						width: 34rpx;
+						height: 28rpx;
+						background-size: 100% 100%;
+						text-align: center;
+						font-size: 20rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: 600;
+						color: #FFFFFF;
+						line-height: 28rpx;
+					}
+					.num1{
+						background-image: url('/static/search/first.png');
+					}
+					.num2{
+						background-image: url('/static/search/second.png');
+					}
+					.num3{
+						background-image: url('/static/search/third.png');
+					}
+					.num4{
+						background-image: url('/static/search/common.png');
+					}
+					.goodsImg{
+						width: 100rpx;
+						height: 90rpx;
+						border-radius: 8rpx 8rpx 8rpx 8rpx;
+						opacity: 1;
+						margin-left: 10rpx;
+					}
+					.goodsInfo{
+						margin-left: 18rpx;
+						.goodName{
+							width: 138rpx;
+							height: 34rpx;
+							font-size: 24rpx;
+							font-family: PingFang SC, PingFang SC;
+							font-weight: 400;
+							color: #000000;
+							line-height: 34rpx;
+							text-align: center;
+						}
+						.goodsSale{
+							width: 96rpx;
+							height: 34rpx;
+							font-size: 24rpx;
+							font-family: PingFang SC, PingFang SC;
+							font-weight: 400;
+							color: #9B9B9B;
+							line-height: 34rpx;
+							margin-top: 6rpx;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>