<template>
	<view class="home">
		<image class="home-banner" src="https://xqg.zjhmit.com/xqg/handbook/index_top_banner.jpg"></image>
			<view class="brief-box" v-for="item in placeList" @click="toMap(item)">
				<text>{{item.name}}县域风貌区</text>
			</view>
<!-- 		<view class="brief-box" @click="toBrief">
			<image class="brief-icon" src="../static/img/index_tb_icon.png"></image>
			<text>象山县风貌区简介</text>
		</view>
		<view class="map-list">
			<view class="map-item" v-for="item in placeList" @click="toMap(item)">
				<view class="_name">{{item.name}}</view>
				<view class="_type">{{item.type}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeList: [
					{
						name: '象山潮隐海山蟹钳港',
						type: '县域风貌区',
						url: 'map'
					},
					{
						name: '象山墙头-黄避岙“斑斓海岸”',
						type: '县域风貌区',
						url: 'advertise-book/list?place=hba'
					},
					// {
					// 	name: '爵溪-石浦“东海扬帆”',
					// 	type: '县域风貌区'
					// },
					// {
					// 	name: '石浦渔港古城',
					// 	type: '传统风貌区'
					// },
				]
			}
		},
		methods: {
			toBrief() {
				uni.navigateTo({
					url: 'brief'
				})
			},
			toMap(item) {
				if (item.url) {	
					uni.navigateTo({
						url:item.url
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '建设中'
					})
				}
			}
		},
		onLoad() {
		},
		onShow() {
		}
	}
</script>

<style lang="scss" scoped>
.home{
	.home-banner{
		width: 100%;
		height: 774rpx;
	}
	.brief-box{
		width: 694rpx;
		height: 146rpx;
		background-color: #F1F7EF ;
		color: #76B062;
		font-size: 33rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 39rpx auto 38rpx;
		border-radius: 21rpx;
		.brief-icon{
			height: 47rpx;
			width: 43rpx;
			margin-right: 18rpx;
			
		}
	}
	.map-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 28rpx;
		.map-item{
			height: 146rpx;
			width: 333rpx;
			background-color: #F1F7EF ;
			color: #76B062;
			font-size: 29rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 21rpx;
			margin-bottom: 38rpx;
			._name{
				white-space: nowrap;
			}
			._type{
				
			}
		}
	}
}
</style>
