orderSystemJp/raising-vue-uniapp/components/custom-top-header/index.vue

<!-- 自定义头部背景组件  -->
<template>
	<view class="custom-top-header">
		<view class="top-header-bg" :style="{backgroundImage: topHeaderBgImg}">
			<view class="head-section p-l-30 p-r-30" :style="{marginTop: (CustomBar + 23) + 'px'}">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item,index) in iconlist" :key="index">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></u-icon> -->
						<u--image :showLoading="true" :src="item.icon" :width="80 + 'rpx'" :height="80 + 'rpx'"></u--image>
						<text class="grid-text text-white m-t-20">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="top-header-gap">
			</view>
		</view>
		<view style="width: 100%;height: 230upx;"></view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import util from '@/utils/util'
	import __config from '@/config/env';

	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			subTitle: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				topHeaderBgImg: util.spliceBgImgUrl('/header-common-bg.png'),
				iconlist: [{
						icon: util.spliceAssetsUrl('/home-icons/icon-scan.png'),
						title: '扫一扫',
						url: ''
					},
					{
						icon: util.spliceAssetsUrl('/home-icons/icon-report.png'),
						title: '信息上报',
						url: ''
					},
					{
						icon: util.spliceAssetsUrl('/home-icons/icon-notice.png'),
						title: '消息通知',
						url: ''
					},
					{
						icon: util.spliceAssetsUrl('/home-icons/icon-help.png'),
						title: '使用帮助',
						url: ''
					},
				],
			}
		},
		methods: {

		}
	};
</script>
<style lang="scss" scoped>
	.custom-top-header {
		.top-header-bg {
			background-repeat: no-repeat;
			background-size: 100%;
			width: 100%;
			top: 0;
			min-height: 400upx;
			z-index: -2;
			position: fixed;
		}

		.top-header-gap {
			height: 20upx;
			background-color: #f1f1f1;
			width: 100%;
			border-top-left-radius: 30px;
			border-top-right-radius: 30px;

			position: absolute;
			bottom: 0;
		}
	}
</style>