siyu_app/pages/index/search.vue

<template>
	<view>
		<es-nav-bg ref="esNavBg">
			<view class="" :style="'width:'+topNav.width">
				<view class="es-view-w-x es es-ac" :style="'height:'+topNav.height">
					<view class="es-icon-ret-white" @tap="close()"></view>
					<view class="es-f1 es-bc-white es-ml-23 es-h-70 es-br es es-ac">
						<view class="es-icon-26 es-ml-27 es-icon-search-search"></view>
						<view class="es-f1 es-ipt es-bc-white">
							<input placeholder="请输入关键字搜索" class="es-fs-24" placeholder-class="es-c-b4" />
						</view>
						<view class="es-w-108 es-h-58 es-br es-bc es-mr-7  es es-ac es-pc es-fw-500 es-fs-26 es-on-act">
							搜索</view>
					</view>
				</view>
			</view>
		</es-nav-bg>
		<es-top></es-top>
		<view class="" :style="'height:'+topNav.height"></view>


		<view class="es-view-w-x">
			<view class="es es-ac es-pt-15 es-pb-15">
				<view class="es-fs-36 es-fw-500 es-c-white es-f1">搜索发现</view>
				<view class="es-icon-31 es-icon-search-change"></view>
			</view>
			<view class="es-oa es-fs-24 es-fw-500 search-find">
				<block v-for="v,i in 8">
					<view class="es-br es-h-42 search-find-item es-omit es es-ac es-pc">内容</view>
				</block>
			</view>
			<view class="es-mt-20 es-br-20 es-bc-white">
				<view class="es-icon-auto es-icon-search-rank-bg">
					<view class="es-view-w-x es-h-122 es es-ac es-fs-46 es-fw es-c"
						style="font-family: Alimama ShuHeiTi;">
						热门榜单
					</view>
				</view>
				<view class="es-view-w-x">
					<view class="es-h-159 es es-ac" v-for="v,i in 10" :class="i?'es-b-t':''">
						<view class="es-icon-auto es-w-70 es-h-66" :class="'es-icon-search-'+(i+1)" v-if="i<3"></view>
						<view class="es-w-70 es es-ac es-pc es-fw es-fs-30" v-else>{{i+1}}</view>

						<view class="es-icon-91 es-ml-24 es es-ac es-pc es-mr-24 es-p-r"
							:class="'es-icon-search-y'+(i+1)" style="overflow: inherit;">
							<view class="es-icon-80 es-br">
								<image src="/static/logo.png"></image>
							</view>
							<view class="es-icon es-w-80 es-h-30" :class="'es-icon-search-top'+(i+1)"
								style="position: absolute;top:-15rpx;" v-if="i<3"></view>
						</view>

						<view class="es-f1">
							<view class="es-omit es-fs-30 es-fw-500">郝万山-精讲-伤寒论</view>
							<view class="es es-ac">
								<view class="es-icon es-w-18 es-h-21 es-icon-search-fire"></view>
								<view class="es-c-6c es-ml-11 es-fs-26">1234</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topNav: {
					width: '100%',
					'height':'88rpx',
				}


			}
		},
		onLoad(options) {

			//#ifdef MP-WEIXIN
			let data = wx.getMenuButtonBoundingClientRect();
			console.log('abcd', data);
			this.topNav.width = data.left + 'px';
			
			uni.getSystemInfo({
				success: (res) => {
					let span = data.top - res.safeArea.top;
					this.topNav.height = (span*1+data.height)+'px';
					console.log('style',this.topNav);
				}
			});
			//#endif


		},
		onPageScroll: function(e) {
			this.$refs.esNavBg.scrollBody(e);
		},
		methods: {
			close: function() {
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 200
				});
			}


		}
	}
</script>

<style>
	/* #ifdef MP-WEIXIN */
	.es-h-70{
		height: 60rpx;
	}
	.es-h-70 .es-h-58{
		height: 50rpx;
	}
	/* #endif */
	
	
	.search-find {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.search-find-item {
		width: calc(25% - 26rpx);
		border: 1px white solid;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		color: white;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.es-icon-search-item-bg {
		background-image: url(/static/images/other/search/item-bg.png);
	}

	.es-icon-search-1 {
		background-image: url(/static/images/other/search/1.png);
	}

	.es-icon-search-2 {
		background-image: url(/static/images/other/search/2.png);
	}

	.es-icon-search-3 {
		background-image: url(/static/images/other/search/3.png);
	}

	.es-icon-search-rank-bg {
		background-image: url(/static/images/other/search/rank-bg.png);
	}

	.es-icon-search-change {
		background-image: url(/static/images/other/search/change.png);
	}

	.es-icon-search-search {
		background-image: url(/static/images/other/search/search.png);
	}

	.es-icon-search-fire {
		background-image: url(/static/images/other/search/fire.png);
	}

	.es-icon-search-top1 {
		background-image: url(/static/images/other/search/TOP1.png);
	}

	.es-icon-search-top2 {
		background-image: url(/static/images/other/search/TOP2.png);
	}

	.es-icon-search-top3 {
		background-image: url(/static/images/other/search/TOP3.png);
	}

	.es-icon-search-y1 {
		background-image: url(/static/images/other/search/y1.png);
	}

	.es-icon-search-y2 {
		background-image: url(/static/images/other/search/y2.png);
	}

	.es-icon-search-y3 {
		background-image: url(/static/images/other/search/y3.png);
	}
</style>