yanzong_qianduan/pages/search/index.vue

<template>
	<view class="container">
		<view class="search">
			<image src="/static/home/search.png" mode="" class="searchIcon"></image>
			<input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" type="text" />
			<view class="searchBtn">
				搜索
			</view>
		</view>
		<view class="find">
			<view class="findTitle">
				搜索发现
				<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" 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>

<script>
	export default {
		data() {
			return {
				showEye:true,
				searchValue: '',
				searchData: [{
					name: '小米手机'
				}, {
					name: '华为'
				}, {
					name: 'vivo'
				}, {
					name: 'NOVA12'
				}, {
					name: '空调'
				}]
			}
		},

		onLoad(options) {

		},

		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.search {
		width: 680rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 68rpx 68rpx 68rpx 68rpx;
		opacity: 1;
		border: 2rpx solid #F3202A;
		margin: 10rpx 0 0 32rpx;
		display: flex;
		align-items: center;

		.searchIcon {
			width: 28rpx;
			height: 28rpx;
			opacity: 1;
			margin: 0rpx 0 0 26rpx;
		}

		.input {
			flex: 1;
			padding-left: 20rpx;
		}

		.searchBtn {
			width: 126rpx;
			height: 56rpx;
			background: #F3202A;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			line-height: 56rpx;
			text-align: center;
			margin-right: 4rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.find {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 44rpx;

		.findTitle {
			width: 200rpx;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 44rpx;
			margin-left: 40rpx;

			.findIcon {
				width: 36rpx;
				height: 27rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				margin-left: 22rpx;
			}
		}

		.others {
			width: 72rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #8D8D8D;
			line-height: 34rpx;
		}
	}

	.hotSearch {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.hotItem {
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 68rpx 68rpx 68rpx 68rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 64rpx;
			padding-right: 22rpx;
			margin-right: 12rpx;
			margin-bottom: 24rpx;
			padding-left: 30rpx;

			.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>