<template>
	<view class="con-library-container">
		<swiper
			class="banner-swiper" 
			:indicator-dots="true" 
			:autoplay="true" 
			:circular="true"
			indicator-color="#dfddd9"
			indicator-active-color="#b27c1e"
			:indicator-top="'650rpx'"
		>
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<image 
					class="banner-img"
					:src="`${item.img}`"
					mode="aspectFill"
					@click="handleBannerClick(item, index)"
				/>
			</swiper-item>
		</swiper>
		<image @tap="backHandler" class="btnback" :src="$baseUrl+'searchpage/btnback.png'"></image>

		<image 
			class="search-icon" 
			:src="$baseUrl + 'contentLibrary/1003/Seach.png'"
			@click="handleSearchClick"
		></image>

		<!-- 专家来了 -->
		<view class="list-area-container">
			<text class="list-title">{{ listTitles[0] }}</text>
			<!-- 引入Tab组件 -->
			<TabBarConLibrary 
				:defaultActive="activeTab"
				:tabsText="tabConfigs.expert"
				@tabChange="handleTabChange"
			/>
			
			<!-- 三个叠加容器 -->
			<view class="tab-content">
				<view 
					v-for="(itemData, index) in listData1"
					:key="index"
					class="list-container"
				>
					<view v-if="activeTab === index">
						<!-- {{ `${index} `}} -->
						<view class="list-wrapper">
							<view 
								class="dynamic-item"
								v-for="(item, subIndex) in itemData"
								:key="subIndex"
								:style="{
									width: item.width + 'rpx',
									height: item.height + 'rpx'
								}"
							>
								<image 
									class="item-img" 
									:src="$baseUrl + `${item?.img}`"
									:style="{
										height: item.imgHeight + 'rpx'
									}"
									mode="aspectFit"
									@click="zhuanjiaHandler(item.link, subIndex)"
								/>
								<text 
								class="item-text"
								:style="{
									width: item.textWidth + 'rpx',
									bottom: item.bottom + 'rpx'
								}"
								>{{ item.desc }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 营养辅食 -->
		<view class="list-area-container">
			<text class="list-title">{{ listTitles[1] }}</text>
			<!-- 引入Tab组件 -->
			<TabBarConLibrary 
				:defaultActive="activeTab2"
				:tabsText="tabConfigs.nutrition"
				@tabChange="handleTabChange2"
			/>
			
			<!-- 三个叠加容器 -->
			<view class="tab-content">
				<view 
					v-for="(itemData, index) in listData2"
					:key="index"
					class="list-container"
				>
					<view v-if="activeTab2 === index">
						<!-- {{ `${index} `}} -->
						<view class="list-wrapper">
							<view 
								class="dynamic-item"
								v-for="(item, subIndex) in itemData"
								:key="subIndex"
								:style="{
									width: item.width + 'rpx',
									height: item.height + 'rpx'
								}"
							>
								<image 
									class="item-img" 
									:src="$baseUrl + `${item?.img}`"
									:style="{
										height: item.imgHeight + 'rpx'
									}"
									@click="yingyangHandler(item?.link, subIndex)"
									mode="aspectFit"
								/>
								<text 
								class="item-text"
								:style="{
									width: item.textWidth + 'rpx',
									bottom: item.bottom + 'rpx'
								}"
								>{{ item.desc }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--星妈Talk -->
		<view class="list-area-container1">
			<text class="list-title1">{{ listTitles[2] }}</text>
			<TabBarConLibrary 
				:defaultActive="activeTab3"
				:tabsText="tabConfigs.momTalk"
				@tabChange="handleTabChange3"
			/>
			
			<view class="tab-content1">
				<view 
					v-for="(itemData, index) in listData3"
					:key="index"
					class="list-container1"
				>
					<view v-if="activeTab3 === index">
						<view class="list-wrapper1">
							<view 
								class="dynamic-item1"
								v-for="(item, subIndex) in itemData"
								:key="subIndex"
								:style="{
									width: item.width + 'rpx',
									height: item.height + 'rpx'
								}"
							>
								<image 
									class="item-img1" 
									:src="$baseUrl + `${item?.img}`"
									:style="{
										height: item.imgHeight + 'rpx',
										width: item.imgWidth + 'rpx'
									}"
									@click="xingmaHandler(item.link, subIndex)"
									mode="aspectFit"
								/>
								<text 
									class="item-text1"
									:style="{
										width: item.textWidth + 'rpx',
										bottom: item.bottom + 'rpx'
									}"
								>{{ item.desc }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--亲子生活 -->
		<view class="list-area-container1">
			<text class="list-title1">{{ listTitles[3] }}</text>
			<TabBarConLibrary 
				:defaultActive="activeTab4"
				:tabsText="tabConfigs.momTalk"
				@tabChange="handleTabChange4"
			/>
			
			<view class="tab-content1">
				<view 
					v-for="(itemData, index) in listData4"
					:key="index"
					class="list-container1"
				>
					<view v-if="activeTab4 === index">
						<view class="list-wrapper1">
							<view 
								class="dynamic-item1"
								v-for="(item, subIndex) in itemData"
								:key="subIndex"
								:style="{
									width: item.width + 'rpx',
									height: item.height + 'rpx'
								}"
							>
								<image 
									class="item-img1" 
									:src="$baseUrl + `${item?.img}`"
									:style="{
										height: item.imgHeight + 'rpx',
										width: item.imgWidth + 'rpx'
									}"
									mode="aspectFit"
									@click="qinziHandler(item, subIndex)"
								/>
								<text 
									class="item-text2"
									:style="{
										width: item.textWidth + 'rpx',
										bottom: item.bottom + 'rpx',
										...(index === 1 && {
											'text-align': 'center',
											'white-space': 'pre-line'
										})
									}"
								>{{ formatText(item.desc, index) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-space"></view>
		<view v-if="showVideo" class="video-popup">
			<video :src="currentVideoUrl" controls autoplay style="width: 100vw; height: 56vw;"></video>
			<view class="close-btn-bottom" @tap="closeVideo">×</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted, getCurrentInstance, onBeforeMount } from 'vue'
	import TabBarConLibrary from '@/components/TabBarConLibrary.vue';
	import { jump, JumpType } from '@/utils/index.js';
	import { fetchContentLibraryJSON } from '../../api/contentlibrary';
	import { onLoad, onShareAppMessage, onShareTimeline, onPageScroll } from "@dcloudio/uni-app";
import md from '../../md';

	const { proxy } = getCurrentInstance();
	const $baseUrl = proxy.$baseUrl;

	// const libraryData = ref({
	// 	bannerList: [
	// 		{
	// 			img: 'banner-cl0.png',
	// 			url: 'https://mp.weixin.qq.com/s/Xn5dh96OaQ9CcsVMZ5jnvg'
	// 		},

	// 		{
	// 			img: 'banner-cl1.png',
	// 			url: 'https://mp.weixin.qq.com/s/xzDYoPdMMIt5e3KYxHnwYg'
	// 		},

	// 		{
	// 			img: 'banner-cl2.png',
	// 			url: 'https://mp.weixin.qq.com/s/W75YKmpxJdDqZtAixkltyQ'
	// 		}
	// 	],
	// 	tabConfigs: {
	// 		expert: ['疾病护理', '脑育科普', '孕期护理'],
	// 		nutrition: ['辅食制作', '奶粉百科', '全家营养'],
	// 		momTalk: ['新鲜热议', '家庭生活', '心理成长'],
	// 		parentingLife: ['早教学习', '动画故事', '家庭关系']
	// 	},
	// 	contentList0: [
	// 		{
	// 			img: 'contentLibrary/1003/item0-list0-0.png',
	// 			text: '孩子出游腿疼≠在长...',
	// 			url: 'https://mp.weixin.qq.com/s/RGzeUaabqKm6xM6jjbZPIQ',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list0-0.png',
	// 			text: '打完疫苗就走？这30...',
	// 			url: 'https://mp.weixin.qq.com/s/HcQbburuQGgPyGahj1RA6Q',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/show-img0-list0.png',
	// 			text: '已有儿童中招，严重可瘫痪！夏季防蜱虫最全...',
	// 			url:'https://mp.weixin.qq.com/s/fL5UZjWUXmPrjJgSe2Hr5g',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		},
	// 	],
	// 	contentList1: [
	// 		{
	// 			img: 'contentLibrary/1003/item0-list0-1.png',
	// 			text: '怕娃不聪明？5招开...',
	// 			url: 'https://mp.weixin.qq.com/s/xzDYoPdMMIt5e3KYxHnwYg',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list0-1.png',
	// 			text: '情绪失控≠熊孩子！全...',
	// 			url: 'https://mp.weixin.qq.com/s/NSyo1U6A1Yrw1WymPwm48A',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 309,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/show-img0-list1.png',
	// 			text: '认清脑育认知的三大误区！让娃赢在起点',
	// 			url: 'https://mp.weixin.qq.com/s/f1Y59OJ9FBZ3tF47PJ9aBw',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		}
	// 	],
	// 	contentList2: [
	// 		{
	// 			img: 'contentLibrary/1003/item0-list0-2.png',
	// 			text: '孕期最重要的6次产...',
	// 			url: 'https://mp.weixin.qq.com/s/R1557EIof8dHnalMQNNXhg',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list0-2.png',
	// 			text: '孕期或哺乳期感染新...',
	// 			url: 'https://mp.weixin.qq.com/s/XSViARdv9AOidSz2DKahTQ',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/show-img0-list2.png',
	// 			text: '除了叶酸，孕期妈妈还应该补什么?',
	// 			url: 'https://mp.weixin.qq.com/s/qmUf3fW8bYi7C33hXQcnfQ',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		}
	// 	],
	// 	contentList01:[
	// 		{
	// 			img: 'contentLibrary/1003/show-img1-list0.png',
	// 			text: '宝宝大脑发育关键期，DHA这样补，轻松拿捏...',
	// 			url:'https://mp.weixin.qq.com/s/Gdv3fTIvuqa6hBs7dUCZkg',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item0-list1-0.png',
	// 			text: '不贫血≠不缺铁！宝...',
	// 			url:'https://mp.weixin.qq.com/s/pPFFgpcFYrtrMlOZeYYFoA',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list1-0.png',
	// 			text: '辅食界 “显眼包” 来...',
	// 			url:'https://mp.weixin.qq.com/s/EBXHkjowOJQ8qhu-GpoUcQ',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList11:[
	// 		{
	// 			img: 'contentLibrary/1003/show-img1-list1.png',
	// 			text: '奶粉罐上的OPO是智商税吗？一文说清它到底 值不值得买！',
	// 			url:'https://mp.weixin.qq.com/s/BOENbTE-5fNe0rwnlvzeng',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item0-list1-1.png',
	// 			text: '宝妈必看！养娃不可...',
	// 			url:'https://mp.weixin.qq.com/s/Evqc7KJMsNYS_MQox1oCfw',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list1-1.png',
	// 			text: '警惕！冬季奶粉喂养...',
	// 			url:'https://mp.weixin.qq.com/s/JjqPDlyGkodZPulv-2gQBA',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 309,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList21:[
	// 		{
	// 			img: 'contentLibrary/1003/show-img1-list2.png',
	// 			text: '一篇掌握全龄饮食黄金指南！',
	// 			url:'https://mp.weixin.qq.com/s/9CUJMqjNmUlUjnjUFb40eg',
	// 			width: 686,
	// 			height: 484,
	// 			imgHeight: 347,
	// 			textWidth: 625,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item0-list1-2.png',
	// 			text: '五一春游零食清单，全...',
	// 			url:'https://mp.weixin.qq.com/s/3WHTYk-nEyN9CtSn4ZCj0A',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 315,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list1-2.png',
	// 			text: '解锁适合全家的美味...',
	// 			url:'https://mp.weixin.qq.com/s/ksRxfSzFxLHahB48bnKMuQ',
	// 			width: 332,
	// 			height: 410,
	// 			imgHeight: 293,
	// 			textWidth: 300,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList02:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list2-0.png',
	// 			text: '《六姊妹》大结局引 热议！如何成为...',
	// 			url: 'https://mp.weixin.qq.com/s/1ge3dA0f3IbfgPghFJKqJg',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list2-0.png',
	// 			text: '家长必看！《哪吒2》 票房火爆背后，竟...',
	// 			url: 'https://mp.weixin.qq.com/s/kX37uMOZTAQyo4Ng7IbQdQ',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list2-0.png',
	// 			text: '哺乳期出门=荒野求生？ 哺乳妈妈的高阶出...',
	// 			url: 'https://mp.weixin.qq.com/s/ku3wiGGXvczq6BOpwmd8bg',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 310,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList12:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list2-1.png',
	// 			text: '砸2万上早教不如逛 100次菜市场？真相…',
	// 			url: 'https://mp.weixin.qq.com/s/BtuaNnl-thV5M30_tqKpvA',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list2-1.png',
	// 			text: '聪明家长必备！这两 种平衡拿捏好，解...',
	// 			url: 'https://mp.weixin.qq.com/s/HS4UPDRtAtqlf-urGALD5w',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list2-1.png',
	// 			text: '多孩家庭：80%父母 可能正陷入“偏爱盲...',
	// 			url: 'https://mp.weixin.qq.com/s/6sKO12QCs5jvmENoGczqmw',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList22:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list2-2.png',
	// 			text: '女性结婚有娃后，友 谊就注定变淡吗?',
	// 			url: 'https://mp.weixin.qq.com/s/89dJzmlmrhM0fqSUufaSnA',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list2-2.png',
	// 			text: '一套过节“高情商回话 公式”，专治嘴笨...',
	// 			url: 'https://mp.weixin.qq.com/s/UohhkMxB6rXH4yQeC3EF6A',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list2-2.png',
	// 			text: '真正压垮女性的，从 来不只是“家务劳...',
	// 			url: 'https://mp.weixin.qq.com/s/nUWBqqaykIdWXcTX6G0OJw',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList03:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list3-0.png',
	// 			text: '超实用！0-3岁宝宝居 家早教攻略，轻松...',
	// 			url:'https://mp.weixin.qq.com/s/CVtfzrmY8ER64rO8CBdFIg',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list3-0.png',
	// 			text: '0-3岁不花钱早教，也 能让宝宝的智商赢...',
	// 			url:'https://mp.weixin.qq.com/s/4NpvNlpa1MF-pYpMJ7Zi0w',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list3-0.png',
	// 			text: '0~3岁保姆级教程，不 用花钱早教，就能...',
	// 			url:'https://mp.weixin.qq.com/s/y0kPoMPQI_skcEbh6gVKRA',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 310,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList13:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list3-1.png',
	// 			text: '毛毛镇\n《集落叶大行动》',
	// 			url:'contentLibrary/1003/libraryVideo0.mp4',
	// 			videoUrl:'contentLibrary/1003/libraryVideo0.mp4',
	// 			isvideo:true,
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list3-1.png',
	// 			text: '毛毛镇\n《弹力条条》',
	// 			url:'contentLibrary/1003/libraryVideo1.mp4',
	// 			videoUrl:'contentLibrary/1003/libraryVideo1.mp4',
	// 			isvideo:true,
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list3-1.png',
	// 			text: '毛毛镇\n《你好春天》',
	// 			url:'contentLibrary/1003/libraryVideo2.mp4',
	// 			videoUrl:'contentLibrary/1003/libraryVideo2.mp4',
	// 			isvideo:true,
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		}
	// 	],
	// 	contentList23:[
	// 		{
	// 			img: 'contentLibrary/1003/item0-list3-2.png',
	// 			text: '读了50位妈妈的育儿 经验发现：亲子...',
	// 			url:'https://mp.weixin.qq.com/s/ubpkqXVXjQj74fH0SPztwA',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 53
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item1-list3-2.png',
	// 			text: '家庭教育很重要！做 好这6点，养出优...',
	// 			url:'https://mp.weixin.qq.com/s/xwRZUyeWR6nD5Z0NtpXojQ',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		},
	// 		{
	// 			img: 'contentLibrary/1003/item2-list3-2.png',
	// 			text: '宝宝一犯错就上头？ 掌握这7个办法解...',
	// 			url:'https://mp.weixin.qq.com/s/DzCEhMCvj4A5tSvdvxZBtA',
	// 			width: 687,
	// 			height: 192,
	// 			imgHeight: 192,
	// 			imgWidth: 357,
	// 			textWidth: 290,
	// 			bottom: 43
	// 		}
	// 	]
		
		
	// });

	const libraryData = ref({
		"tupianBanben":"1003",
		"shareInfo":{
			"shareTitle":"7000万中国家庭都在看!科学育儿，全程陪伴，源于母爱。",
			"shareImg":"contentLibrary/1003/shareicon.png"
		},
		"bannerList": [
			{
				"img": "banner-cl0.png",
				"url": "https://mp.weixin.qq.com/s/Xn5dh96OaQ9CcsVMZ5jnvg"
			},
			{
				"img": "banner-cl1.png",
				"url": "https://mp.weixin.qq.com/s/xzDYoPdMMIt5e3KYxHnwYg"
			},
			{
				"img": "banner-cl2.png",
				"url": "https://mp.weixin.qq.com/s/W75YKmpxJdDqZtAixkltyQ"
			}
		],
		"tabConfigs": {
			"expert": ["疾病护理", "脑育科普", "孕期护理"],
			"nutrition": ["辅食制作", "奶粉百科", "全家营养"],
			"momTalk": ["新鲜热议", "家庭生活", "心理成长"],
			"parentingLife": ["早教学习", "动画故事", "家庭关系"]
		},
		"product": [
			[
				{
					"img": "contentLibrary/1003/item0-list0-0.png",
					"bgUrl": "contentLibrary/1003/item0-list0-0.png",
					"desc": "孩子出游腿疼≠在长...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/RGzeUaabqKm6xM6jjbZPIQ",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list0-0.png",
					"bgUrl": "contentLibrary/1003/item1-list0-0.png",
					"desc": "打完疫苗就走？这30...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/HcQbburuQGgPyGahj1RA6Q",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/show-img0-list0.png",
					"bgUrl": "contentLibrary/1003/show-img0-list0.png",
					"desc": "已有儿童中招，严重可瘫痪！夏季防蜱虫最全...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/fL5UZjWUXmPrjJgSe2Hr5g",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list0-1.png",
					"bgUrl": "contentLibrary/1003/item0-list0-1.png",
					"desc": "怕娃不聪明？5招开...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/xzDYoPdMMIt5e3KYxHnwYg",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list0-1.png",
					"bgUrl": "contentLibrary/1003/item1-list0-1.png",
					"desc": "情绪失控≠熊孩子！全...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/NSyo1U6A1Yrw1WymPwm48A",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 309,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/show-img0-list1.png",
					"bgUrl": "contentLibrary/1003/show-img0-list1.png",
					"desc": "认清脑育认知的三大误区！让娃赢在起点",
					"link": {
						"url": "https://mp.weixin.qq.com/s/f1Y59OJ9FBZ3tF47PJ9aBw",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list0-2.png",
					"bgUrl": "contentLibrary/1003/item0-list0-2.png",
					"desc": "孕期最重要的6次产...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/R1557EIof8dHnalMQNNXhg",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list0-2.png",
					"bgUrl": "contentLibrary/1003/item1-list0-2.png",
					"desc": "孕期或哺乳期感染新...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/XSViARdv9AOidSz2DKahTQ",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/show-img0-list2.png",
					"bgUrl": "contentLibrary/1003/show-img0-list2.png",
					"desc": "除了叶酸，孕期妈妈还应该补什么?",
					"link": {
						"url": "https://mp.weixin.qq.com/s/qmUf3fW8bYi7C33hXQcnfQ",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				}
			],
			[
				{
					"img": "contentLibrary/1003/show-img1-list0.png",
					"bgUrl": "contentLibrary/1003/show-img1-list0.png",
					"desc": "宝宝大脑发育关键期，DHA这样补，轻松拿捏...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/Gdv3fTIvuqa6hBs7dUCZkg",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item0-list1-0.png",
					"bgUrl": "contentLibrary/1003/item0-list1-0.png",
					"desc": "不贫血≠不缺铁！宝...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/pPFFgpcFYrtrMlOZeYYFoA",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list1-0.png",
					"bgUrl": "contentLibrary/1003/item1-list1-0.png",
					"desc": "辅食界 \"显眼包\" 来...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/EBXHkjowOJQ8qhu-GpoUcQ",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/show-img1-list1.png",
					"bgUrl": "contentLibrary/1003/show-img1-list1.png",
					"desc": "奶粉罐上的OPO是智商税吗？一文说清它到底 值不值得买！",
					"link": {
						"url": "https://mp.weixin.qq.com/s/BOENbTE-5fNe0rwnlvzeng",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item0-list1-1.png",
					"bgUrl": "contentLibrary/1003/item0-list1-1.png",
					"desc": "宝妈必看！养娃不可...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/Evqc7KJMsNYS_MQox1oCfw",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list1-1.png",
					"bgUrl": "contentLibrary/1003/item1-list1-1.png",
					"desc": "警惕！冬季奶粉喂养...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/JjqPDlyGkodZPulv-2gQBA",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 309,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/show-img1-list2.png",
					"bgUrl": "contentLibrary/1003/show-img1-list2.png",
					"desc": "一篇掌握全龄饮食黄金指南！",
					"link": {
						"url": "https://mp.weixin.qq.com/s/9CUJMqjNmUlUjnjUFb40eg",
						"type": 3
					},
					"width": 686,
					"height": 484,
					"imgHeight": 347,
					"textWidth": 625,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item0-list1-2.png",
					"bgUrl": "contentLibrary/1003/item0-list1-2.png",
					"desc": "五一春游零食清单，全...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/3WHTYk-nEyN9CtSn4ZCj0A",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 315,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item1-list1-2.png",
					"bgUrl": "contentLibrary/1003/item1-list1-2.png",
					"desc": "解锁适合全家的美味...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/ksRxfSzFxLHahB48bnKMuQ",
						"type": 3
					},
					"width": 332,
					"height": 410,
					"imgHeight": 293,
					"textWidth": 300,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list2-0.png",
					"bgUrl": "contentLibrary/1003/item0-list2-0.png",
					"desc": "《六姊妹》大结局引 热议！如何成为...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/1ge3dA0f3IbfgPghFJKqJg",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list2-0.png",
					"bgUrl": "contentLibrary/1003/item1-list2-0.png",
					"desc": "家长必看！《哪吒2》 票房火爆背后，竟...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/kX37uMOZTAQyo4Ng7IbQdQ",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list2-0.png",
					"bgUrl": "contentLibrary/1003/item2-list2-0.png",
					"desc": "哺乳期出门=荒野求生？ 哺乳妈妈的高阶出...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/ku3wiGGXvczq6BOpwmd8bg",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 310,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list2-1.png",
					"bgUrl": "contentLibrary/1003/item0-list2-1.png",
					"desc": "砸2万上早教不如逛 100次菜市场？真相…",
					"link": {
						"url": "https://mp.weixin.qq.com/s/BtuaNnl-thV5M30_tqKpvA",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list2-1.png",
					"bgUrl": "contentLibrary/1003/item1-list2-1.png",
					"desc": "聪明家长必备！这两 种平衡拿捏好，解...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/HS4UPDRtAtqlf-urGALD5w",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list2-1.png",
					"bgUrl": "contentLibrary/1003/item2-list2-1.png",
					"desc": "多孩家庭：80%父母 可能正陷入\"偏爱盲...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/6sKO12QCs5jvmENoGczqmw",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list2-2.png",
					"bgUrl": "contentLibrary/1003/item0-list2-2.png",
					"desc": "女性结婚有娃后，友 谊就注定变淡吗?",
					"link": {
						"url": "https://mp.weixin.qq.com/s/89dJzmlmrhM0fqSUufaSnA",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list2-2.png",
					"bgUrl": "contentLibrary/1003/item1-list2-2.png",
					"desc": "一套过节\"高情商回话 公式\"，专治嘴笨...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/UohhkMxB6rXH4yQeC3EF6A",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list2-2.png",
					"bgUrl": "contentLibrary/1003/item2-list2-2.png",
					"desc": "真正压垮女性的，从 来不只是\"家务劳...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/nUWBqqaykIdWXcTX6G0OJw",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list3-0.png",
					"bgUrl": "contentLibrary/1003/item0-list3-0.png",
					"desc": "超实用！0-3岁宝宝居 家早教攻略，轻松...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/CVtfzrmY8ER64rO8CBdFIg",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list3-0.png",
					"bgUrl": "contentLibrary/1003/item1-list3-0.png",
					"desc": "0-3岁不花钱早教，也 能让宝宝的智商赢...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/4NpvNlpa1MF-pYpMJ7Zi0w",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list3-0.png",
					"bgUrl": "contentLibrary/1003/item2-list3-0.png",
					"desc": "0~3岁保姆级教程，不 用花钱早教，就能...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/y0kPoMPQI_skcEbh6gVKRA",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 310,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list3-1.png",
					"bgUrl": "contentLibrary/1003/item0-list3-1.png",
					"desc": "毛毛镇\\n《集落叶大行动》",
					"link": {
						"url": "contentLibrary/1003/libraryVideo0.mp4",
						"type": 3
					},
					"videoUrl": "contentLibrary/1003/libraryVideo0.mp4",
					"isvideo": true,
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list3-1.png",
					"bgUrl": "contentLibrary/1003/item1-list3-1.png",
					"desc": "毛毛镇\\n《弹力条条》",
					"link": {
						"url": "contentLibrary/1003/libraryVideo1.mp4",
						"type": 3
					},
					"videoUrl": "contentLibrary/1003/libraryVideo1.mp4",
					"isvideo": true,
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list3-1.png",
					"bgUrl": "contentLibrary/1003/item2-list3-1.png",
					"desc": "毛毛镇\\n《你好春天》",
					"link": {
						"url": "contentLibrary/1003/libraryVideo2.mp4",
						"type": 3
					},
					"videoUrl": "contentLibrary/1003/libraryVideo2.mp4",
					"isvideo": true,
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				}
			],
			[
				{
					"img": "contentLibrary/1003/item0-list3-2.png",
					"bgUrl": "contentLibrary/1003/item0-list3-2.png",
					"desc": "读了50位妈妈的育儿 经验发现：亲子...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/ubpkqXVXjQj74fH0SPztwA",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 53
				},
				{
					"img": "contentLibrary/1003/item1-list3-2.png",
					"bgUrl": "contentLibrary/1003/item1-list3-2.png",
					"desc": "家庭教育很重要！做 好这6点，养出优...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/xwRZUyeWR6nD5Z0NtpXojQ",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				},
				{
					"img": "contentLibrary/1003/item2-list3-2.png",
					"bgUrl": "contentLibrary/1003/item2-list3-2.png",
					"desc": "宝宝一犯错就上头？ 掌握这7个办法解...",
					"link": {
						"url": "https://mp.weixin.qq.com/s/DzCEhMCvj4A5tSvdvxZBtA",
						"type": 3
					},
					"width": 687,
					"height": 192,
					"imgHeight": 192,
					"imgWidth": 357,
					"textWidth": 290,
					"bottom": 43
				}
			]
		]
	});

	


	const shareTitle = ref('7000万中国家庭都在看!科学育儿，全程陪伴，源于母爱。');
	const shareImg = ref('contentLibrary/1003/shareicon.png');
	const isFromShare = ref(false); 

	onShareAppMessage(() => {
		console.log('shareTitle=',shareTitle.value);
		console.log('shareImg=',shareImg.value);
		return {
			title: shareTitle.value,
			path: '/pages/library/ContentLibrary?pageType=share',
			imageUrl: $baseUrl + shareImg.value
		}
	});


	const bannerList = ref([
		{
			img: $baseUrl + `contentLibrary/1003/${libraryData?.value?.bannerList[0]?.img}`, 
			url: `${libraryData?.value?.bannerList[0]?.url}`
		},

		{
			img: $baseUrl + `contentLibrary/1003/${libraryData?.value?.bannerList[1]?.img}`,
			url: `${libraryData?.value?.bannerList[1]?.url}`
		},

		{
			img: $baseUrl + `contentLibrary/1003/${libraryData?.value?.bannerList[2]?.img}`,
			url: `${libraryData?.value?.bannerList[2]?.url}`
		}
	]);
	const showVideo = ref(false);
	const currentVideoUrl = ref('');
	const closeVideo = () => {
		showVideo.value = false;
	}

	const openVideo = (url) => {
		showVideo.value = true;
		currentVideoUrl.value = url;
	}

	const listTitles = ref([
		'专家来了',
		'营养辅食',
		'星妈Talk',
		'亲子生活'
	]);

	const tabConfigs = ref(libraryData?.value?.tabConfigs
		// expert: libraryData?.value?.tabConfigs?.expert,
		// nutrition: libraryData?.value?.tabConfigs?.nutrition,
		// momTalk: libraryData?.value?.tabConfigs?.momTalk,
		// parentingLife: libraryData?.value?.tabConfigs?.parentingLife
	);

	const contentList0 = ref(libraryData?.value?.product[0]);
	const contentList1 = ref(libraryData?.value?.product[1]);
	const contentList2 = ref(libraryData?.value?.product[2]);

	// const contentList0 = ref(libraryData?.value?.contentList0);
	// const contentList1 = ref(libraryData?.value?.contentList1);
	// const contentList2 = ref(libraryData?.value?.contentList2);


	//专家来了
	const listData1 = ref([]); 
	// Tab状态管理
	const activeTab = ref(0)
	const handleTabChange = (e) => {
		activeTab.value = e.index;

		let buttonName = '';
		switch(e.index){
			case 0:
				buttonName = '主内容版块分类1';
				break;
			case 1:
				buttonName = '主内容版块分类2';
				break;
			case 2:
				buttonName = '主内容版块分类3';
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-二屏页面点击",
			pageName: "内容集合页-二屏",
			buttonName: buttonName,
		});
	}

	//营养辅食
	const contentList01 = ref(libraryData?.value?.product[3])
	const contentList11 = ref(libraryData?.value?.product[4])
	const contentList21 = ref(libraryData?.value?.product[5])


	// const contentList01 = ref(libraryData?.value?.contentList01)
	// const contentList11 = ref(libraryData?.value?.contentList11)
	// const contentList21 = ref(libraryData?.value?.contentList21)

	const listData2 = ref([]); 

	// Tab状态管理
	const activeTab2 = ref(0)
	const handleTabChange2 = (e) => {
		activeTab2.value = e.index;

		let buttonName = '';
		switch(e.index){
			case 0:
				buttonName = '次内容版块分类1';
				break;
			case 1:
				buttonName = '次内容版块分类2';
				break;
			case 2:
				buttonName = '次内容版块分类3';
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-三屏页面点击",
			pageName: "内容集合页-三屏",
			buttonName: buttonName,
		});
	}

	//星妈Talk
	const contentList02 = ref(libraryData?.value?.product[6])
	const contentList12 = ref(libraryData?.value?.product[7])
	const contentList22 = ref(libraryData?.value?.product[8])

	// const contentList02 = ref(libraryData?.value?.contentList02)
	// const contentList12 = ref(libraryData?.value?.contentList12)
	// const contentList22 = ref(libraryData?.value?.contentList22)

	const listData3 = ref([]); 

	// Tab状态管理
	const activeTab3 = ref(0)
	const handleTabChange3 = (e) => {
		activeTab3.value = e.index

		let buttonName = '';
		switch(e.index){
			case 0:
				buttonName = '第三内容版块分类1';
				break;
			case 1:
				buttonName = '第三内容版块分类2';
				break;
			case 2:
				buttonName = '第三内容版块分类3';
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-四屏页面点击",
			pageName: "内容集合页-四屏",
			buttonName: buttonName,
		});
	}

	//亲子生活
	const contentList03 = ref(libraryData?.value?.product[9])
	const contentList13 = ref(libraryData?.value?.product[10])
	const contentList23 = ref(libraryData?.value?.product[11])

	// const contentList03 = ref(libraryData?.value?.contentList03)
	// const contentList13 = ref(libraryData?.value?.contentList13)
	// const contentList23 = ref(libraryData?.value?.contentList23)

	const listData4 = ref([]); 

	const tupianBanben = ref(libraryData?.value?.tupianBanben);

	const mdMap = ref([]);

	onPageScroll((e) => {
		// console.log('e.scrollTop=',e.scrollTop);
		const newVal = e.scrollTop;

		if(newVal > 404){
			if(mdMap.value.indexOf('内容集合页-二屏') == -1){

				md.sensorLogTake({
					xcxPage: "内容集合页-二屏页面浏览",
					pageName: "内容集合页-二屏",
				});

				mdMap.value.push('内容集合页-二屏');
			}
		}

		if(newVal > 989){
			if(mdMap.value.indexOf('内容集合页-三屏') == -1){

				md.sensorLogTake({
					xcxPage: "内容集合页-三屏页面浏览",
					pageName: "内容集合页-三屏",
				});

				mdMap.value.push('内容集合页-三屏');
			}
		}

		if(newVal > 1575){
			if(mdMap.value.indexOf('内容集合页-四屏') == -1){

				md.sensorLogTake({
					xcxPage: "内容集合页-四屏页面浏览",
					pageName: "内容集合页-四屏",
				});

				mdMap.value.push('内容集合页-四屏');
			}
		}
	});

	// Tab状态管理
	const activeTab4 = ref(0)
	const handleTabChange4 = (e) => {
		activeTab4.value = e.index

		let buttonName = '';
		switch(e.index){
			case 0:
				buttonName = '第四内容版块分类1';
				break;
			case 1:
				buttonName = '第四内容版块分类2';
				break;
			case 2:
				buttonName = '第四内容版块分类3';
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-四屏页面点击",
			pageName: "内容集合页-四屏",
			buttonName: buttonName,
		});
	}

	onBeforeMount(async() => {
		// console.log('integralData.value',libraryData.value);

		// console.log('libraryData.value===',libraryData.value.bannerList,bannerList.value);
	})

	onLoad((options) => {

		console.log('options.pageType=',options.pageType);
		if(options.pageType == 'share'){
			isFromShare.value = true;
		}else{
			isFromShare.value = false;
		}
	})

	// 页面加载
	onMounted(async() => {
		if(mdMap.value.indexOf('内容集合页-首屏') == -1){

			md.sensorLogTake({
				xcxPage: "内容集合页-首屏页面浏览",
				pageName: "内容集合页-首屏",
			});

			mdMap.value.push('内容集合页-首屏');
		}
		
		const {data} = await fetchContentLibraryJSON();
		libraryData.value = {...data};
		tupianBanben.value = libraryData.value.tupianBanben;

		contentList0.value = libraryData?.value?.product[0];
	    contentList1.value = libraryData?.value?.product[1];
	    contentList2.value = libraryData?.value?.product[2];

		contentList01.value = libraryData?.value?.product[3];
		contentList11.value = libraryData?.value?.product[4];
		contentList21.value = libraryData?.value?.product[5];

		contentList02.value = libraryData?.value?.product[6];
		contentList12.value = libraryData?.value?.product[7];
		contentList22.value = libraryData?.value?.product[8];

		contentList03.value = libraryData?.value?.product[9];
		contentList13.value = libraryData?.value?.product[10];
		contentList23.value = libraryData?.value?.product[11];

		listData1.value = [contentList0.value, contentList1.value, contentList2.value];
		listData2.value = [contentList01.value, contentList11.value, contentList21.value];
		listData3.value = [contentList02.value, contentList12.value, contentList22.value];
		listData4.value = [contentList03.value, contentList13.value, contentList23.value];

		bannerList.value = [
			{
				img: $baseUrl + `contentLibrary/${tupianBanben.value}/${libraryData?.value?.bannerList[0]?.img}`,
				url: `${libraryData?.value?.bannerList[0]?.url}`
			},

			{
				img: $baseUrl + `contentLibrary/${tupianBanben.value}/${libraryData?.value?.bannerList[1]?.img}`,
				url: `${libraryData?.value?.bannerList[1]?.url}`
			},

			{
				img: $baseUrl + `contentLibrary/${tupianBanben.value}/${libraryData?.value?.bannerList[2]?.img}`,
				url: `${libraryData?.value?.bannerList[2]?.url}`
			}
		];

		console.log('tupianBanben.value=',libraryData.value);
		tabConfigs.value = libraryData?.value?.tabConfigs;



		
	});

	const formatText = (text, index) => {
		if (index === 1) {
			// 将 \n 替换为真实换行
			return text.replace(/\\n/g, '\n')
		}
		return text
	}
	// 首页组件逻辑
	const backHandler = () => {
		if(isFromShare.value){
			jump({
				type: JumpType.INNER,
				url: "/pages/index/index"
			})
		}else{
			uni.navigateBack();
		}
	}

	//搜索
	const handleSearchClick = () => {
		uni.navigateTo({
				url: "/pages/search/search"
			})

		md.sensorLogTake({
			xcxClick: "内容集合页-首屏页面点击",
			pageName: "内容集合页-首屏",
			buttonName: "搜索框",
		});

	}

	const handleBannerClick = (item, index) => {
		let buttonName = '';
		switch(index){
			case 0:
				buttonName = '第一张焦点图';
				break;
			case 1:
				buttonName = '第二张焦点图';
				break;
			case 2:
				buttonName = '第三张焦点图';
				break;
		}

		jump({
			type: JumpType.H5,
			url: item.url
		})


		md.sensorLogTake({
			xcxClick: "内容集合页-首屏页面点击",
			pageName: "内容集合页-首屏",
			buttonName: buttonName,
		});
	}

	const zhuanjiaHandler = (link, subIndex) => {
		jump({
			type: link.type,//JumpType.H5,
			url: link.url
		})

		let buttonName = '';
		switch(subIndex){
			case 0:
				buttonName = `主内容版块分类${activeTab.value+1}-内容1`;
				break;
			case 1:
				buttonName = `主内容版块分类${activeTab.value+1}-内容2`;
				break;
			case 2:
				buttonName = `主内容版块分类${activeTab.value+1}-内容3`;
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-二屏页面点击",
			pageName: "内容集合页-二屏",
			buttonName: buttonName,
		});
	}

	//第二个三切页列表，营养辅食
	const yingyangHandler = (link, subIndex) => {
		jump({
			type: link.type,//JumpType.H5,
			url: link.url
		})

		let buttonName = '';
		switch(subIndex){
			case 0:
				buttonName = `次内容版块分类${activeTab2.value+1}-内容1`;
				break;
			case 1:
				buttonName = `次内容版块分类${activeTab2.value+1}-内容2`;
				break;
			case 2:
				buttonName = `次内容版块分类${activeTab2.value+1}-内容3`;
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-三屏页面点击",
			pageName: "内容集合页-三屏",
			buttonName: buttonName,
		});
	}

	//第三个三切页列表，星妈Talk
	const xingmaHandler = (link, subIndex) => {
		jump({
			type: link.type,//JumpType.H5,
			url: link.url
		})

		let buttonName = '';
		switch(subIndex){
			case 0:
				buttonName = `第三内容版块分类${activeTab3.value+1}-内容1`;
				break;
			case 1:
				buttonName = `第三内容版块分类${activeTab3.value+1}-内容2`;
				break;
			case 2:
				buttonName = `第三内容版块分类${activeTab3.value+1}-内容3`;
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-四屏页面点击",
			pageName: "内容集合页-四屏",
			buttonName: buttonName,
		});
	}

	//第四个三切页列表，亲子生活
	const qinziHandler = (item, subIndex) => {
		if(item.isvideo){
			openVideo($baseUrl + item.videoUrl);
		}else{
			jump({
				type: item?.link?.type,//JumpType.H5,
				url: item?.link?.url
			})
		}

		let buttonName = '';
		switch(subIndex){
			case 0:
				buttonName = `第四内容版块分类${activeTab4.value+1}-内容1`;
				break;
			case 1:
				buttonName = `第四内容版块分类${activeTab4.value+1}-内容2`;
				break;
			case 2:
				buttonName = `第四内容版块分类${activeTab4.value+1}-内容3`;
				break;
		}

		md.sensorLogTake({
			xcxClick: "内容集合页-四屏页面点击",
			pageName: "内容集合页-四屏",
			buttonName: buttonName,
		});
	}


</script>

<style lang="less" scoped>
	.con-library-container {	
		background-color: #f6f8fa;
		
		.banner-swiper {
			width: 100%;
			height: 840rpx;
			// flex-shrink: 0;
			// margin-bottom: 30rpx;
			
			.banner-img {
				width: 100%;
				height: 100%;
				// border-radius: 16rpx;
			}
		}

		.btnback {
			position: absolute;
			top: 97rpx;
			left: 30rpx;
			width: 60rpx;
			height: 60rpx;
		}
		.search-icon {
			position: relative;
			display: block;
			margin: 43rpx auto;
			width: 680rpx;
			height: 54rpx;
		}

		.list-area-container {
			padding: 0 32rpx;
			margin-bottom: 48rpx;

			.list-title {
				font-size: 32rpx;
				color: #1d1e25;
				margin-left: 32rpx;
				font-weight: bold;
			}

			.tab-content {
				position: relative;
				// margin-top: 40rpx;

				.list-container {
					// position: absolute;
					width: 100%;
					.list-wrapper {
						display: flex;
						flex-wrap: wrap;
						width: 686rpx;
						gap: 20rpx;
						margin-left: auto;
						margin-right: auto;

						.dynamic-item {
							background-color: #fff;
							border-radius: 16rpx;
							width: 332;
							height: 410rpx;
							position: relative;
							.item-img {
								top: 0;
								width: 100%;
								height: 100%;
								position: absolute;
							}
							
							.item-text {
								position: absolute;
								font-size: 30rpx;
								color: #1d1e25;
								line-height: auto;
								overflow: hidden;
								font-weight: bold;
								text-overflow: ellipsis;
								left: 15rpx;
										
							}
						}
					}
				}
			}



		}


		.list-area-container1 {
			padding: 0 32rpx;
			margin-bottom: 48rpx;

			.list-title1 {
				font-size: 32rpx;
				color: #1d1e25;
				margin-left: 32rpx;
				font-weight: bold;
			}

			.tab-content1 {
				position: relative;
				.list-container1 {
					width: 100%;
					.list-wrapper1 {
						display: flex;
						flex-wrap: wrap;
						width: 686rpx;
						gap: 20rpx;
						margin-left: auto;
						margin-right: auto;

						.dynamic-item1 {
							position: relative;
							background-color: #fff;
							border-radius: 16rpx;
							.item-img1 {
								width: 100%;
								height: 100%;
								position: absolute;
							}
							.item-text1 {
								position: absolute;
								font-size: 30rpx;
								color: #1d1e25;
								line-height: auto;
								overflow: hidden;
								font-weight: bold;
								// text-overflow: ellipsis;
								left: 378rpx;
							}

							.item-text2 {
								position: absolute;
								font-size: 30rpx;
								color: #1d1e25;
								line-height: auto;
								overflow: hidden;
								font-weight: bold;
								left: 378rpx;
							}
						}
					}
				}
			}
		}

		.bottom-space{
			height: 76rpx;
			width: 100%;
		}
		

		.video-popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.close-btn-bottom {
		margin: 32rpx auto 0 auto;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 44rpx;
		line-height: 64rpx;
		text-align: center;
		z-index: 10001;
		display: flex;
		align-items: center;
		justify-content: center;
	}




	}
</style>


<!-- contentList0: ,
	contentList1: ,
	contentList2: ,
	contentList01:,
	contentList11:,
	contentList21:,
	contentList02:,
	contentList12:,
	contentList22:,
	contentList03:,
	contentList13:,
	contentList23: -->