college/pages/mobile/search.vue

<template>
	<view class="content">

		<!-- 导航 -->
		<view class="nav">
			<view class="leftView" @click="back">
				<image src="../../static/mobile/backBtn.png" mode=""
					style="width: 22rpx; height: 40rpx; padding-left: 24rpx;"></image>
			</view>
			<view class="navTitle">搜索</view>
			<view class="rightView">
				
			</view>
		</view>

		<!-- content -->
		<view class="commend">
			<!-- 搜索 -->
			<view class="searchBoxBg">
				<searchBox placeholder="请输入搜索内容" @search='search($event)'></searchBox>
			</view>
			<view class="top">为你找到“这是输入的搜索内容”相关结果共0条</view>

		</view>

		<!-- item -->

		<view class="itemBg">
			<view v-for="(item,index) in bannerArr" :key="index" class="twoItem">
				<image src="../../static/logo.png" mode="" class="img2"></image>
				<view class="rightItem">
					<view class="title">文字标题</view>
					<view class="title2">摘要</view>
				</view>
			</view>
		</view>










	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		},
	
		data() {
			return {
				searchValue: '',
				
				bannerArr: [1, 2, 3, 4, 5, 6],
				
			}
		},
		onLoad() {

		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			search(val) {
				// console.log(val);
				this.searchValue = val
				// this.page = 1
				// this.getData()
			},
			
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background-color: #f4f5f7;
		padding-top: 88rpx;
		padding-bottom: 20rpx;

	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		border-bottom: #eeeeee 2rpx solid;
	}

	.navTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #3c3c3c;

	}

	.leftView {
		width: 30%;
	}

	.rightView {
		width: 30%;
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
	}

	.rightImg {
		width: 40rpx;
		height: 40rpx;

	}

	.commend {
		position: fixed;
		left: 0;
		top: 90rpx;
		width: calc(100vw - 50rpx);

		background-color: #FFFFFF;

		padding: 0 25rpx 30rpx;
		z-index: 999;
		height: 180rpx;
	}
	

	.top {
		padding: 20rpx 0;
		text-align: left;
		font-size: 24rpx;
		color: #999999;
	}



	
	.itemBg{
		
		background-color: #FFFFFF;
		padding: 180rpx 25rpx 30rpx;
		
	}
	
	.twoItem {
		display: flex;
		background-color: #FFFFFF;
		padding: 30rpx 0;
		border-top: #eeeeee 2rpx solid;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #3c3c3c;

	}

	.title2 {

		font-size: 24rpx;
		font-weight: bold;
		color: #999999;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 14rpx 0;
	}


	.img2 {
		width: 240rpx;
		height: 160rpx;
	}

	.rightItem {
		margin-left: 30rpx;
	}
</style>