<!-- 举报中心 -->
<template>
	<view class="center">
		<image src="../../static/index/back_complete.png" style="position:absolute;top: -4rpx;left: 0;z-index: -999; width:100%;height: 360rpx;"></image>
		<view class="center-title">举报入口</view>
		<view class="content">
			<view v-for="(item,index) in tabList" :key="item.id" class="content-main"  @click="changePage(item.id, item.icon)">
				<image :src="item.icon" :style="item.style" mode=""></image>
				<view class="text-area">
					<text class="content-title">{{item.title}}</text>
					<!-- <text class="desc">{{item.dec}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'center',
		components: {
		},
		data() {
			return {
				tabList: [
					{
						id: 'web',
						title: '网站类型举报',
						dec: '网站地址',
						icon: '../../static/center/web.png',
						span: '6',
						style: 'width: 52px;height: 60px;'
					},
					{
						id: 'special',
						title: '专项举报',
						dec: '扫黑除恶专题举报',
						icon: '../../static/center/special.png',
						span: '6',
						style: 'width: 52px;height: 60px;'
					},
					{
						id: 'other',
						title: '其他类型举报',
						dec: '通讯工具/网盘/搜索引擎',
						icon: '../../static/center/other.png',
						span: '12',
						style: 'width: 53px;height: 60px;'
					},
				]
			}
		},
		methods: {
			changePage(val, icon) {
				console.log(icon)
				wx.navigateTo({
					url: `/packageB/report/report?reportType=${val}&icon=` + encodeURIComponent(icon)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 40rpx;
		padding-top: 380rpx;
		box-sizing: border-box;
		.center-title {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			color: #fff;
			font-size: 48rpx;
			font-weight: 600;
			letter-spacing: 4rpx;
		}
		.content {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.content-main {
				display: flex;
				align-items: center;
				background: linear-gradient(to bottom, #4f8dfa 0%, #45a6fe 100%);
				margin-top: 40rpx;
				padding: 20rpx;
				padding-left: 60rpx;
				border-radius: 20rpx;
				color: #fff;
				.text-area {
					flex: 1;
					margin-left: 40rpx;
					text-align: center;
					font-weight: 600;
					font-size: 38rpx;
					&:last-child {
						margin-left: 32rpx;
					}
					.content-title {
						margin-right: 20rpx;
					}
				}
				
			}
		}
	}
</style>
<style lang="scss">
	.center {
		.u-icon__icon {
			margin-right: -20rpx;
		}
	}
</style>