uni_mattress/sleep/pages/detail/detail.vue

<template>
	<view class="detail-page">
		<cu-custom isBack="true" bgColor="#000000">
		  <view slot="content" style="color: #FFFFFF">UU睡眠</view>
		</cu-custom>
		
		<scroll-view class="tab" id="tab" :show-scrollbar="false" :scroll-x="true" :scroll-into-view="tabScrollInto">
			<view class="tabContent" style="display: flex; flex-direction: column;">
				<view style="display: flex;flex-direction: row;">
					<view class="tabItem" v-for="(tab,tabItemIndex) in tabList" :key="tab.id" :id="tab.id" :data-id="tabItemIndex"
						:data-current="tabItemIndex" @click="pressScrollViewItem">
						<text class="tabItemTitle"
							:class="tabIndex==tabItemIndex ? 'tabItemTitleActive' : ''"
							:style="{width:tabList[tabItemIndex].width + 'px'}"
							>{{tab.title}}</text>
					</view>
				</view>
				<view class="tabLineView">
					<!-- <view class="tabLine" :class="isPress ? 'tabLineActive':'tabLineActive'" -->
						<!-- :style="{left: tabItemLineLeft + 'px', width: tabItemLineWidth + 'px'}"></view> -->

				</view>
			</view>
		</scroll-view>

		<swiper class="childPageView" :current="tabIndex" :duration="250" @change="swiperChange"
			@animationfinish="swiperChangeEnd" @onAnimationEnd="swiperChangeEnd" :style="{height: swiperHeight+'px'}">

			<swiper-item class="childPageViewItem" v-for="(page, childPageViewItemIndex) in tabList" :key="childPageViewItemIndex">

				<scroll-view v-if="childPageViewItemIndex == 0" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="title-tab-detail">睡眠效率</view>
						<view class="flex-col data-tab-detail">
							<view class="justify-between header-data-tab flex-row">
								<text class="self-start">睡眠效率0%</text>
								<text class="self-end">较差</text>
							</view>
							
							<view class="justify-between flex-row middle-tab-detail">
								<view class="self-start">
									<view class="text-middle-tab">昨天 暂无</view>
									<view class="text-middle-tab">前天 暂无</view>
								</view>
								<image 
									src="../../static/report/reportAlertBg.png"
									class="self-end image-middle-tab"
									/>
							</view>
							
							<text class="footer-tab-detail">注：睡眠效率=睡眠总时长/在床时间</text>
						</view>
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>

				<scroll-view v-if="childPageViewItemIndex == 1" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="justify-between flex-row">
							<view class="title-tab-detail">深浅睡眠</view>
							<view class="subtile-tab-detail self-end">平均心率61次/分</view>
						</view>
						
						<view class="charts-sleep-item"></view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
								<view>清醒:0H10M</view>
							</view>
						</view>
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>
				
				
				<scroll-view v-if="childPageViewItemIndex == 2" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="title-tab-detail">安稳度</view>
						<view class="flex-col data-tab-detail">
							<view class="justify-between header-data-tab flex-row">
								<text class="self-start">入睡时长</text>
							</view>
							
							<view class="justify-between flex-row middle-tab-detail">
								<view class="self-start">
									<view class="text-middle-tab">今日 10m</view>
									<view class="text-middle-tab">昨天 暂无</view>
									<view class="text-middle-tab">前天 暂无</view>
								</view>
								<image 
									src="../../static/report/reportAlertBg.png"
									class="self-end image-middle-tab"
									/>
							</view>							
						</view>
						
						<view class="flex-col data-tab-detail">  
							<view class="justify-between header-data-tab flex-row">
								<text class="self-start">离床次数</text>
							</view>
							
							<view class="flex-row justify-between data-sleep-condition">
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<image
									src="../../static/report/reportAlertBg.png"
									class="image-sleep-condition self-baseline"
									/>
							</view>
						</view>
						
						<view class="flex-col data-tab-detail">
							<view class="justify-between header-data-tab flex-row">
								<text class="self-start">体动次数</text>
							</view>
							
							<view class="flex-row justify-between data-sleep-condition">
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<view class="flex-col align-start item-sleep-condition">
									<text class="title-sleep-condition class="subtitle-sleep-condition>今天</text>
									<text class="subtitle-sleep-condition">入睡前：0次</text>
									<text class="subtitle-sleep-condition">入睡后：0次</text>
								</view>
								<image
									src="../../static/report/reportAlertBg.png"
									class="image-sleep-condition self-baseline"
									/>
							</view>
						</view>
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>
				
				<scroll-view v-if="childPageViewItemIndex == 3" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="justify-between flex-row">
							<view class="title-tab-detail">心率</view>
							<view class="subtile-tab-detail self-end">平均心率61次/分</view>
						</view>
						
						<view class="charts-sleep-item"></view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高心率：76</view>
								<view>最低心率：30</view>
								<view>平均心率：66</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高心率：76</view>
								<view>最低心率：30</view>
								<view>平均心率：66</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高心率：76</view>
								<view>最低心率：30</view>
								<view>平均心率： 66</view>
							</view>
						</view>
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>
				
				<scroll-view v-if="childPageViewItemIndex == 4" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="justify-between flex-row">
							<view class="title-tab-detail">呼吸率</view>
							<view class="subtile-tab-detail self-end">平均呼吸率12次/分</view>
						</view>
						
						<view class="charts-sleep-item">
							
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高呼吸率：19</view>
								<view>最低呼吸率：2</view>
								<view>平均呼吸率：10</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高呼吸率：19</view>
								<view>最低呼吸率：2</view>
								<view>平均呼吸率：10</view>
							</view>
						</view>
						
						<view class="data-sleep-item">
							<view class="date-sleep-item">2023.06.12</view>
							<view class="flex-row justify-between">
								<view>最高呼吸率：19</view>
								<view>最低呼吸率：2</view>
								<view>平均呼吸率：10</view>
							</view>
						</view>
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>
				
				<scroll-view v-if="childPageViewItemIndex == 5" scroll-y="true" :style="{height: swiperHeight+'px'}">
					
					<view class="tab-detail">
						<view class="title-tab-detail">异常状况</view>
						
						<view class="charts-sleep-item"></view>
						
						<view class="flex-col data-tab-detail">
							<view class="justify-between header-data-tab flex-row">
								<text class="self-start">疑似呼吸暂停</text>
							</view>
							
							<view class="justify-between flex-row middle-tab-detail">
								<view class="self-start">
									<view class="text-middle-tab">今日 10m</view>
									<view class="text-middle-tab">昨天 暂无</view>
									<view class="text-middle-tab">前天 暂无</view>
								</view>
								<image 
									src="../../static/report/reportAlertBg.png"
									class="self-end image-middle-tab"
									/>
							</view>							
						</view>		
						
						<view class="justify-between flex-row tip-tab-detail">
							<image 
								class="image-tip-tab self-end"
								src="../../static/mine/myAvatar.png" />
							<view class="text-tip-tab flex-auto">
								<text class="title-tip-tab">睡眠小贴士</text>
								<text class="content-tip-tab">如果当前睡眠效率偏低，建议通过以下方式进行改善。
									1.聆听平淡而有节律的睡眠音乐
									2. 睡前喝一杯加糖的热牛奶
									了. 合适的睡姿：左侧卧，仰卧，俯卧（即
									趴着睡）
									4.用热水泡脚，一般半个小左右，有高血糖的朋友十分钟效果最佳。
								</text>
							</view>
						</view>
						
						<view class="post-tab-detail">
							<div class="title-post-tab">健康小知识</div>
							<image 
								class="image-post-tab"
								src="../../static/report/reportAlertBg.png"
								/>
							<div class="content-post-tab">
								提高睡眠效率的方法
								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
							</div>
						</view>
					</view>
				</scroll-view>

			</swiper-item>
		</swiper>




	</view>
</template>


<script>
	import cell from './cell.vue';

	export default {
		components: {
			cell
		},
		data() {
			return {
				tabList: [{
					id: "tabItem0",
					title: '睡眠效率',
					width:70,
				}, {
					id: "tabItem1",	
					title: '深浅睡眠',
					width:70,
				}, {
					id: "tabItem2",
					title: '安稳度',
					width:70,
				}, {
					id: "tabItem3",
					title: '心率',
					width:70,
				}, {
					id: "tabItem4",
					title: '呼吸率',
					width:70,
				}, {
					id: "tabItem5",
					title: '异常状况',
					width:70,
				}],
				tabIndex: 0,
				tabScrollInto: "",
				tabListSize: {},
				tabItemLineLeft: 0,
				tabItemLineWidth: 0,
				isPress: false,
				swiperHeight: 0
			}
		},
		onLoad(option) {
			let system = uni.getSystemInfoSync();
			this.swiperHeight = system.windowHeight - 44;
			console.log(this.swiperHeight);
			
			// 跳转时传递index打开指定页面
			console.log(option.index)
			this.setTabSelect(option.index)
		},
		onReady() {

			this.setTabItemDistance();
			this.setTabSelect(this.tabIndex);
		},
		methods: {
			pressScrollViewItem(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.isPress = true;
				this.setTabSelect(index);
			},
			swiperChange(e) {
				let index = e.target.current || e.detail.current;

				this.tabIndex = index;
				this.setTabSelect(this.tabIndex);
			},
			setTabItemDistance() {

				var queryTabSize = uni.createSelectorQuery().in(this);
				for (var i = 0; i < this.tabList.length; i++) {
					queryTabSize.select('#' + this.tabList[i].id).boundingClientRect();
				}
				queryTabSize.exec(rects => {
					rects.forEach((rect) => {
						this.tabListSize[rect.dataset.id] = rect;
					})
					console.log(this.tabListSize);
					this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);
				});

			},
			setTabItemLinePosition(left, width) {
				this.tabItemLineLeft = left;
				this.tabItemLineWidth = width;
			},
			swiperChangeEnd(e) {

				this.setTabItemLinePosition(this.tabListSize[this.tabIndex].left, this.tabListSize[this.tabIndex].width);

			},
			setTabSelect(index) {

				this.tabIndex = index;
				this.tabScrollInto = this.tabList[index].id;
				console.log(this.tabScrollInto);

			},

		}
	}
</script>

<style lang="scss" scoped>
	.data-sleep-condition {
		margin-top: 10px;
		
		.item-sleep-condition {
			.title-sleep-condition {
				font-size: 16px;
				line-height: 20px;
			}
			.subtitle-sleep-condition {
				font-size: 11px;
				line-height: 20px;
			}
		}
		.image-sleep-condition {
			height: 60px;
			width: 60px;
		}
	}
	.charts-sleep-item {
		background: #0233C699;
		backdrop-filter: blur(20px);
		border-radius: 15px;
		padding: 10px;
		margin-top: 10px;
		height: 100px;
	}
	
	.data-sleep-item {
		background: #0233C699;
		backdrop-filter: blur(20px);
		border-radius: 15px;
		padding: 10px;
		margin-top: 10px;
		font-size: 13px;
		
		.date-sleep-item {
			margin-bottom: 7px;
		}
	}
	.detail-page {
		display: flex;
		flex-direction: column;
		overflow: hidden;		
		background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/3C62AD507C8345D49AEB2AAD8F7584BB.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 100%;
		
		.childPageView {
			padding-bottom: 1.25rem;
			background-image: linear-gradient(180deg, #1e1ef7f2 0%, #1dbff79c 100%);
			backdrop-filter: blur(0.19rem);
			height: 100%;
		}
	}
	.tab-detail {
		color: #ffffff;
		font-size: 15px;
		padding: 15px;
		
		.title-tab-detail {
			font-size: 18px;
		}
		.subtile-tab-detail  {
			font-size: 14px;
		}
		.data-tab-detail  {
			background: #0233C699;
			backdrop-filter: blur(20px);
			border-radius: 15px;
			margin-top: 10px;
			padding: 15px 10px;
			
			.header-data-tab {
				border-bottom: 1px solid #FFFFFF99;
				padding-bottom: 10px;
			}
			.middle-tab-detail {
				padding: 10px 0;
				border-bottom: 1px solid #FFFFFF99;
				
				.image-middle-tab {
					width: 100px;
					height: 30px;
				}
				.text-middle-tab {
					line-height: 25px;
				}
			}
			.footer-tab-detail {
				padding-top: 10px;
				font-size: 13px;
			}
		}
		.tip-tab-detail  {
			margin-top: 30px;
			
			.image-tip-tab {
				width: 100px;
				height: 100px;
				margin-right: 10px;
			}
			.text-tip-tab {
				border: 1px solid #ffffff7d;
				border-radius: 5px;
				padding: 10px;
				
				.title-tip-tab {
					font-size: 17px;
					font-weight: 500;
					display: block;
					text-align: center;
					margin-bottom: 3px;
				}
				.content-tip-tab {
					font-size: 13px;
				}
			}
		}
		.post-tab-detail {
			margin-top: 40px;
			padding-bottom: 100px;
			
			.title-post-tab {
				font-size: 20px;
				font-weight: 500;
			}
			.image-post-tab {
				width: 100%;
				display: block;
				margin-top: 10px;
			}
			.content-post-tab {
				margin-top: 10px;
				line-height: 28px;
				font-size: 15px;
			}
		}
	}
	.tab {
		width: 100vw;
		height: 44px;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		background: #1e1ef7f2;
		-webkit-backdrop-filter: blur(0.19rem);
		backdrop-filter: blur(0.19rem);
		color: #ffffff;
	}

	.tab ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.tabLineView {
		position: relative;
		height: 2px;
		background-color: transparent;
		
	}

	.tabLine {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 0;
		background-color: #ffffff;
	}

	.tabLineActive {
		transition-duration: 0.3s;
		transition-property: left;
	}

	.childPageView {
		display: flex;
		flex-direction: column;
	}

	.tabItem {
		display: flex;	
	}

	.tabItemTitle {
		color: #FFFFFF99;
		font-size: 15px;
		height: 42px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.tabItemTitleActive {
		color: #FFFFFF;
	}

	.childPageViewItem {
		flex: 1;
		flex-direction: column;
	}
</style>