talent_map/uniapp/pages/index/index.vue

<template>

	<view>
		<!-- 头部背景和搜索 -->
		<view>
			<image :src="appConfig.mobile_top_bg" class="top-image" id="top-image" mode="widthFix" @load="topImageLoad"></image>
		</view>
		<!-- 搜索 -->
		<router-link to="/pages/search/search" style="position: absolute; width: 100%; padding: 0 98rpx;height: 70rpx;" :style="{top: top + 'rpx'}">
			<u-search wrap-bg-color="transparent" bg-color="#ffffff" :disabled="false" :height="62" shape="square"
				:show-action="false"></u-search>
		</router-link>
		<!-- 分类树 -->
		<view class="content bg-body">
			<cate-two></cate-two>
		</view>

		<!-- 意见反馈按钮 -->
		<router-link :to="'/pages/feedback/feedback'"
			style="width: 200rpx; height: 200rpx; position: fixed; right: 0; bottom: 100rpx; display: none;">
			<image src="/static/images/icon_feedback.png" style="width: 100%; height: 100%;"></image>
		</router-link>
	</view>

</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		pxToRpx
	} from '@/utils/tools'
	const app = getApp()
	const homeItem = {
		name: '首页'
	}
	export default {
		data() {
			return {
				keyword: '',
				top: 172
			}
		},
		onShow() {
			// this.getHomeFun();
			this.getUser();
		},
		onHide() {},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			...mapActions(['getUser']),
			topImageLoad(e){
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select('#top-image').boundingClientRect(data => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						this.top = pxToRpx(data.height) - 100
					}).exec();
				},30)
			},
			searchTalents() {
				let {
					keyword
				} = this;
				if (!keyword) {
					this.$toast({
						title: '请输入关键字'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/talents/talents?keyword=' + this.keyword
				})
			}
		},
		computed: {

			...mapGetters(['appConfig']),
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0;
	}

	.top-image {
		width: 100%;
	}

	.index-header {
		background-color: #E8B175;
		color: #fff;

		.header-text {
			min-height: 100rpx;
			text-align: justify;
		}

		.header-border {
			border-top: 1px dashed #fff;

		}
	}

	.class-list {
		background-color: #fff;
		color: $-color-primary;

		.class-list-item {
			padding: 30rpx;

			.item-img {
				width: 50rpx;
				height: 50rpx;
				// padding: 9rpx;
				// background-color: #E8B175;
				border-radius: 8rpx;

				image {
					width: 100%;
				}
			}
		}
	}

	.count {
		border-bottom: $-solid-border;
	}
</style>