<template>
	<view class="page">
		<view class="bg">
			<image src="/static/bg.jpg"></image>
		</view>
		<view class="back" @click="home"><image src="../../static/left.png"></image></view>
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
			<view class="content">

				<view class="banner">
					<swiper class="screen-swiper" indicator-dots="true" circular="true" autoplay="true" interval="5000"
						duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<image :src="item.url" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>

				<view class="menu-nav">
					<view class="nav">
						<view class="list" @click="funeralreport">
							<view>
								<image src="/static/nav/nav_ico5.png" mode=""></image>
							</view>
							<view class="text">线上报丧</view>
						</view>
		 			<view class="list" @click="funeralreservation">
							<view>
								<image src="/static/nav/nav_ico6.png" mode=""></image>
							</view>
							<view class="text">线上预约</view>
						</view>
					</view>
					<view class="nav">
						<view class="list" @click="funeralculture">
							<view>
								<image src="/static/nav/nav_ico7.png" mode=""></image>
							</view>
							<view class="text">殡葬文化</view>
						</view>
						<view class="list" @click="funerallaw">
							<view>
								<image src="/static/nav/nav_ico8.png" mode=""></image>
							</view>
							<view class="text">殡葬普法宣传</view>
						</view>
					</view>
					<view class="nav">
						<view class="list" @click="funeralguide">
							<view>
								<image src="/static/nav/nav_ico9.png" mode=""></image>
							</view>
							<view class="text">殡葬办事指南</view>
						</view>
						<view class="list" @click="funeralproblem">
							<view>
								<image src="/static/nav/nav_ico10.png" mode=""></image>
							</view>
							<view class="text">常见问题</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				nvConfig:{
					title:"殡葬公共服务",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
					transparent:{
						initColor:"#000",
					},
					back:{
						hide:true
					},
				},
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/1.jpg'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/1.jpg'
					},
				],
			}
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad() {
			uni.hideTabBar();
		},
		methods: {
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			minor() {
				uni.navigateTo({
					url: '/pages/minor/minor'
				})
			},
			funeralculture() {
				uni.navigateTo({
					url: '/pages/funeralculture/funeralculture'
				})
			},
			funerallaw() {
				uni.navigateTo({
					url: '/pages/funerallaw/funerallaw'
				})
			},
			funeralguide() {
				uni.navigateTo({
					url: '/pages/funeralguide/funeralguide'
				})
			},
			funeralproblem() {
				uni.navigateTo({
					url: '/pages/funeralproblem/funeralproblem'
				})
			},
			funeralreservation() {
				uni.navigateTo({
					url: '/pages/funeralreservation/funeralreservation'
				})
			},
			funeralreport() {
				uni.setStorageSync('dh',1)
				uni.navigateTo({
					url: '/pages/funeralreport/funeralreport'
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	@import 'funeral.scss';
</style>
