<template>
	<view style="padding-bottom: 50rpx;">
		<!-- classify -->
		<view class="classify">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(listItem,listIndex) in classifyList" :key="listIndex" @click="click(listIndex)">
					<!-- 懒加载 :lazy-load="true" -->
					<u--image :src="listItem.src" width="86rpx" height="86rpx" :lazy-load="true">
					</u--image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 行业新闻 -->
		<view>
			<view class="subtitle">
				<u--image src="/static/report/hy_icon_xwx.png" width="24rpx" height="24rpx" :lazy-load="true">
				</u--image>
				<text class="xw_text text">行业新闻</text>
			</view>
			<news></news>
		</view>

		<!-- 新品发布 -->
		<view>
			<view class="subtitle">
				<u--image src="/static/report/hy_icon_fux.png" width="24rpx" height="24rpx" :lazy-load="true">
				</u--image>
				<text class="xpfb_text text">新品发布</text>
			</view>
			<products></products>
		</view>

		<!-- 认证厂家 -->
		<view>
			<view class="subtitle">
				<u--image src="/static/report/hy_icon_cjx.png" width="24rpx" height="24rpx" :lazy-load="true">
				</u--image>
				<text class="rzcj_text text">认证厂家</text>
			</view>
			<certifiedCj></certifiedCj>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classifyList: [{
						src: '/static/report/hy_icon_xw.png',
						title: '行业新闻'
					},
					{
						src: '/static/report/hy_icon_fu.png',
						title: '新品发布'
					},
					{
						src: '/static/report/hy_icon_cj.png',
						title: '认证厂家'
					},
				],

			}
		},
		methods: {
			//点击一级分类
			click(listIndex) {
				//点击行内新闻时
				if (listIndex == 0) {
					uni.navigateTo({
						url: '../../packageReport/news/news'
					})
				} else if (listIndex == 2) {
					uni.navigateTo({
						url: '../../packageReport/certifiedCj/certifiedCj'
					})
				}
			},


		}
	}
</script>

<style lang="scss">
	//分类模块
	.classify {
		background: #FFFFFF;
		border-radius: 0 0 24rpx 24rpx;
		box-shadow: 0px 2px 4px 0px rgba(206, 206, 206, 0.5);
		padding-bottom: 30rpx;
		margin: 0 16rpx;

		.u-grid {
			padding-top: 22rpx;

			.grid-text {
				padding-top: 8rpx;
				font-size: 24rpx;
			}
		}
	}

	.subtitle {
		margin: 24rpx 0 16rpx 16rpx;
		display: flex;
		align-items: center;

		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			padding-left: 4rpx;
		}
	}

	.xw_text {
		color: #5ACCF0;
	}




	.xpfb_text {
		color: #FCAC18;
	}

	.rzcj_text {
		color: #78E13A;
	}
</style>
