<template>
	<view class="brand-container">
		<view class="content">
			<swiper class="swiper banner" :current="swiperIndex" @animationfinish="intervalChange" circular
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				:indicator-color="indicatorColor" :indicator-active-color="indicatoractiveColor">
				<swiper-item v-for="item in swiperList" :key="item.url">
					<view class="swiper-item banneritem">
						<image :data-link="item.link" @tap="jumpLink(item.link)" class="b-img" :src="item.url"></image>
					</view>
				</swiper-item>

			</swiper>
			<view class="swiperbox">
				<view class="iconbox">
					<image @tap="jumpSwiper(index)" class="icon"
						:src="swiperIndex === index?icon.activeUrl:icon.baseUrl" v-for="(icon,index) in swiperIconList"
						:key="index"></image>
				</view>
			</view>
			<view class="videoposterbox">
				<image class="videoposter" :src="baseImgUrl+'/static/brandpage/videoposter.png'"></image>
			</view>
			<view class="productcontai">
				<text class="maintitle">飞鹤产品家族</text>
				<view class="listbox">
					<view @tap="channelTabHandler(index)"
						:class="channelTabIndex===index?'tabitem tabActive':'tabitem' "
						v-for="(item,index) in productTabList" :key="index">
						{{item}}
					</view>
				</view>
				<view class="productbox">
					<view class="infobox" :key="index" v-for="(infoItem,index) in productInfoList[channelTabIndex]"
						@tap="jumpLink(infoItem.link)">
						<view class="flexbox">
							<view class="infotitle">
								{{infoItem.title}}
							</view>
							<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
						</view>

						<view class="infodesc">{{infoItem.desc}}</view>
					</view>
				</view>



			</view>
			<view class="ipbox">
				<image class="iphexiaofei" :src="baseImgUrl+'/static/brandpage/iphexiaofei.png'"></image>
				<view class="ipcard">
					<view class="title">
						飞鹤品牌IP<view class="t1">鹤小飞一家</view>
					</view>
					<view class="desc">
						{{ipDesc}}
					</view>
					<view class="ipflex">
						<view class="ipbg ip1">
							<image src="/static/brandpage/ip1.png"></image>
						</view>
						<view class="ipright">
							<view class="ipbg ip2">
								<image src="/static/brandpage/ip2.png"></image>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
								<view class="ipbg ip3">
									<image src="/static/brandpage/ip3.png"></image>
								</view>
								<view class="ipbg ip4">
									<image src="/static/brandpage/ip4.png"></image>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>
			<view class="esgbox">
				<text class="maintitle">飞鹤ESG</text>
				<text class="subtitle">关注祖国下一代的营养、教育和陪伴</text>
				<view class="channelscroll">
					<view class="box">
						<view class="infobox" :key="index" v-for="(infoItem,index) in esgInfoList"
							@tap="jumpLink(infoItem.link)">
							<image class="infoimg" :src="baseImgUrl+infoItem.bgUrl"></image>
							<view class="infotitle">{{infoItem.title}}</view>
							<view class="infodesc">{{infoItem.desc}}</view>
			
						</view>
					</view>
			
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const baseImgUrl = "";
	const swiperList = [{
			url: '/static/brandpage/Banner1.jpg',
			link: 'www.baidu.com'
		},
		{
			url: '/static/brandpage/Banner2.jpg',
			link: 'www.baidu.com'
		},
		{
			url: '/static/brandpage/Banner3.jpg',
			link: 'www.baidu.com'
		},
	];
	const swiperIconList = [{
			baseUrl: "/static/brandpage/corn1.png",
			activeUrl: "/static/brandpage/corn2.png"
		},
		{
			baseUrl: "/static/brandpage/cattle1.png",
			activeUrl: "/static/brandpage/cattle2.png"
		},
		{
			baseUrl: "/static/brandpage/factory1.png",
			activeUrl: "/static/brandpage/factory2.png"
		}
	];
	const productTabList = ["全部", "母婴全阶", "功能营养", "儿童产品", "北纬47°"];
	const productInfoList = [
		[{
				bgUrl: "/static/brandpage/pic_0_1.png",
				title: "超凡 吸收",
				desc: "星飞帆经典 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_0_2.png",
				title: "顶配 脑育",
				desc: "星飞帆卓睿 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_0_3.png",
				title: "亲和 自护",
				desc: "星飞帆卓耀 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_0_4.png",
				title: " 4维 效力",
				desc: "爱本跃动蛋白营养粉",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_0_5.png",
				title: "高钙 爆脆",
				desc: "高钙奶酪泡芙脆",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_0_6.png",
				title: "软糯  Q弹",
				desc: "北纬47度黄糯玉米",
				link: "www.baidu.com"
			},
		],
		[{
				bgUrl: "/static/brandpage/pic_1_1.png",
				title: "超凡 吸收",
				desc: "星飞帆经典 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_1_2.png",
				title: "顶配 脑育",
				desc: "星飞帆卓睿 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_1_3.png",
				title: "亲和 自护",
				desc: "星飞帆卓耀 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_1_4.png",
				title: "有机 A 2",
				desc: "臻稚卓蓓 A2 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_1_5.png",
				title: "高配 有机",
				desc: "臻稚卓蓓 3段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_1_6.png",
				title: "不止 有机",
				desc: "淳芮有机奶粉 3段",
				link: "www.baidu.com"
			},
		],
		[{
				bgUrl: "/static/brandpage/pic_2_1.png",
				title: " 4维 效力",
				desc: "爱本跃动蛋白营养粉",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_2_2.png",
				title: "初乳 精华",
				desc: "爱本牛初乳",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_2_3.png",
				title: "每日 蛋白",
				desc: "爱本每日蛋白营养糊",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_2_4.png",
				title: "腰腹 燃脂",
				desc: "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_2_5.png",
				title: "药食 同源",
				desc: "爱本参芝初乳肽",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_2_6.png",
				title: "一夜 天亮",
				desc: "爱本悦眠功能粉",
				link: "www.baidu.com"
			},
		],
		[{
				bgUrl: "/static/brandpage/pic_3_1.png",
				title: "高钙 高纤",
				desc: "爱上吃菜乳酪",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_3_2.png",
				title: "高钙 爆脆",
				desc: "高钙奶酪泡芙脆",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_3_3.png",
				title: "醇香 黑巧",
				desc: "高纤黑巧乳酪",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_3_4.png",
				title: "10倍  奶钙",
				desc: "超新星水果奶酪",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_3_5.png",
				title: "浓郁 爆浆",
				desc: "厚切流心芝士片",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_3_6.png",
				title: "洁净 配方",
				desc: "嚼奶粉乳酪",
				link: "www.baidu.com"
			},
		],
		[{
				bgUrl: "/static/brandpage/pic_4_1.png",
				title: "含有 叶酸",
				desc: "北纬47度白甜糯玉米",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_4_2.png",
				title: "含花 青素",
				desc: "北纬47度黑珍珠甜糯玉米",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_4_3.png",
				title: "软糯 香甜",
				desc: "北纬47度花甜糯玉米",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_4_4.png",
				title: "开袋 即食",
				desc: "北纬47度低GI水果玉米粒袋装",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_4_5.png",
				title: "秘制 工艺",
				desc: "北纬47度东北烧烤味玉米段",
				link: "www.baidu.com"
			},
			{
				bgUrl: "/static/brandpage/pic_4_6.png",
				title: "轻卡 低GI",
				desc: "N47°水果玉米汁",
				link: "www.baidu.com"
			},
		]

	]
	const ipDesc = "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
	const esgInfoList = [{
			bgUrl: "/static/brandpage/esg1.png",
			title: "中国飞鹤发布2024年ESG报告",
			desc: "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
			link: "www.baidu.com"
		},
		{
			bgUrl: "/static/brandpage/esg2.png",
			title: "12亿元生育补贴计划",
			desc: "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
			link: "www.baidu.com"
		},
		{
			bgUrl: "/static/brandpage/esg3.png",
			title: "教育公益",
			desc: "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
			link: "www.baidu.com"
		}
	]

	export default {
		data() {
			return {
				baseImgUrl: baseImgUrl,
				swiperList: swiperList,
				indicatorDots: false,
				autoplay: true,
				interval: 4000,
				duration: 500,
				indicatoractiveColor: "#a6a0a1",
				indicatorColor: "rgba(255, 255, 255, 1)",
				channelTabIndex: 0,
				productTabList: productTabList,
				productInfoList: productInfoList,
				swiperIconList: swiperIconList,
				swiperIndex: 0,
				ipDesc: ipDesc,
				esgInfoList: esgInfoList


			}
		},
		methods: {

			intervalChange(e) {
				this.swiperIndex = e.target.current;
			},
			jumpSwiper(_index) {
				this.swiperIndex = _index;
			},

			jumpLink(_link) {
				console.log(_link)
			},
			channelTabHandler(_index) {
				this.channelTabIndex = _index;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '@/common.less';

	.brand-container {
		.content {
			padding-bottom: 200rpx;

			.banner {
				height: 1250rpx;

				.banneritem {
					width: 750rpx;
					height: 1250rpx;

					.b-img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.swiperbox {
				position: absolute;
				top: 1002rpx;
				width: 650rpx;
				left: 50rpx;

				.iconbox {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.icon {
						width: 200rpx;
						height: 200rpx;
					}
				}


			}

			.videoposterbox {
				width: 686rpx;
				height: 384rpx;
				margin-left: 32rpx;
				margin-top: 32rpx;

				.videoposter {
					width: 686rpx;
					height: 384rpx;

				}

			}

			.productcontai {
				margin-top: 32rpx;
				margin-left: 32rpx;

				.maintitle {
					color: @color-black-deep;
					font-size: 38rpx;
					font-weight: bold;
					display: block;
					margin-left: 5rpx;
				}

				.subtitle {
					color: @color-black-deep;
					font-size: 24rpx;
					margin-top: 10rpx;
					margin-left: 5rpx;
				}

				.listbox {
					display: flex;
					margin-top: 10rpx;

					.tabitem {
						color: @color-black-deep;
						background-color: #e9edf1;
						padding: 15rpx;
						font-size: 22rpx;
						margin-right: 15rpx;
						border-radius: 30rpx;
					}

					.tabActive {
						color: white;
						background-color: @color-gold-main;
					}
				}

				.productbox {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					width: 686rpx;

					.infobox {
						width: 330rpx;
						height: 330rpx;
						background-color: white;
						border-radius: 24rpx;
						margin-top: 32rpx;

						.flexbox {
							display: flex;
							margin-top: 80rpx;
							align-items: center;
							justify-content: center;

							.infotitle {
								font-size: 36rpx;
								font-weight: 400;
								width: 75rpx;
								color: @color-black-deep;
								margin-left: 36rpx; //一点偏移量
								text-align: center;

							}

							.infoimg {
								width: 150rpx;
								height: 150rpx;
							}
						}

						.infodesc {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							color: @color-black-deep;
							width: 100%;
							text-align: center;
							height: 100rpx;
							white-space: pre-wrap;
						}
					}

				}




			}

			.ipbox {
				width: 702rpx;
				height: 734rpx;
				position: relative;
				left: 24rpx;
				border-radius: 24rpx;
				background-color: white;
				top: 200rpx;
				

				.iphexiaofei {
					width: 374rpx;
					height: 298rpx;
					position: absolute;
					top: -188rpx;
					left: 165rpx;
				}

				.ipcard {
					position: absolute;
					padding: 32rpx;
					top: 110rpx;

					.title {
						display: flex;
						font-size: 36rpx;
						color: @color-black-deep;
						font-weight: bold;

						.t1 {
							color: @color-gold-cover;
						}
					}

					.desc {
						margin-top: 20rpx;
						white-space: pre-wrap;
						font-size: 24rpx;
						color: @color-black-deep;
					}

					.ipflex {
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;

						.ipbg {
							border-radius: 24rpx;
							background-color: @color-gray-light;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.ip1 {
							width: 288rpx;
							height: 380rpx;

							image {
								width: 195rpx;
								height: 298rpx;
							}

						}

						.ip2 {
							width: 342rpx;
							height: 196rpx;

							image {
								width: 271rpx;
								height: 152rpx;
							}
						}

						.ip3 {
							width: 160rpx;
							height: 160rpx;

							image {
								width: 70rpx;
								height: 97rpx;
							}
						}

						.ip4 {
							width: 160rpx;
							height: 160rpx;

							image {
								width: 88rpx;
								height: 92rpx;
							}
						}
					}

				}




			}

			.esgbox {
				margin-top: 248rpx;
				margin-left: 32rpx;

				.maintitle {
					color: @color-black-deep;
					font-size: 38rpx;
					font-weight: bold;
					display: block;
					margin-left: 5rpx;
				}

				.subtitle {
					color: @color-black-deep;
					font-size: 24rpx;
					margin-top: 10rpx;
					margin-left: 5rpx;
				}

				.listbox {
					display: flex;
					margin-top: 10rpx;

					.tabitem {
						color: @color-black-deep;
						background-color: #e9edf1;
						padding: 15rpx;
						font-size: 22rpx;
						margin-right: 15rpx;
						border-radius: 30rpx;
					}

					.tabActive {
						color: white;
						background-color: @color-gold-main;
					}
				}

				.channelscroll {
					width: 718rpx;
					overflow-x: scroll;
					margin-top: 32rpx;

					// margin-left: -32rpx;
					.box {
						display: flex;
						.infobox {
							margin-left: 15rpx;
							.infoimg {
								width: 500rpx;
								height: 400rpx;
							}

							.infotitle {
								color: @color-gold-main;
								font-size: 32rpx;
								text-align: left;
								font-weight: bold;
								margin-top: 10rpx;
							}

							.infodesc {
								font-size: 24rpx;
								color: black;
								margin-top: 10rpx;
							}
						}
					}

				}

				
			}

		}
	}
</style>