add detail page

sleep/pages.json

@@ -12,12 +12,12 @@
 		// 		"enablePullDownRefresh": true
 		// 	}
 		// },
-		// {
-		// 	"path": "pages/weekReport/weekReport",
-		// 	"style": {
-		// 		"enablePullDownRefresh": true
-		// 	}
-		// },
+		{
+			"path": "pages/weekReport/weekReport",
+			"style": {
+				"enablePullDownRefresh": true
+			}
+		},
 		{
 			"path": "pages/alertSetting/alertSetting",
 			"style": {
@@ -84,6 +84,14 @@
 				"enablePullDownRefresh": false
 			}
 		}
+        ,{
+            "path" : "pages/detail/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+        }
     ],
 	"globalStyle": {
 		"navigationStyle": "custom",

sleep/pages/detail/cell.vue

@@ -0,0 +1,29 @@
+<template>
+  <view @click="pressCell()" class="" style="display: flex;flex-direction: row;align-items: center;justify-content: center; background-color: #A0CFFF;width: 100%;height: 100%;">
+	{{itemData.title}}
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      itemData: {
+        type: Object,
+        default: function(e) {
+          return {}
+        }
+      }
+    },
+    methods: {
+      pressCell(){
+		  uni.showModal({
+		  	title:"点击",
+		  })
+	  }
+    }
+  }
+</script>
+
+<style scoped>
+  
+</style>

sleep/pages/detail/detail.vue

@@ -1,22 +1,783 @@
-<template>
-	<view>
+<template>
+	<view class="detail-page">
+		<cu-custom isBack="true" bgColor="#000000">
+		  <view slot="content" style="color: #FFFFFF">UU睡眠</view>
+		</cu-custom>
 		
-	</view>
-</template>
+		<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/reportIconMove.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/home/homeIconGift.png"
+								/>
+							<div class="content-post-tab">
+								提高睡眠效率的方法
+								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
+								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
+								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
+							</div>
+						</view>
+					</view>
+				</scroll-view>
 
-<script>
-	export default {
-		data() {
-			return {
+				<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="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/home/homeIconGift.png"
+								/>
+							<div class="content-post-tab">
+								提高睡眠效率的方法
+								1要有睡觉的积极意识，不要在睡觉的时候还想一些烦心事。要让心静下来。
+								2.睡觉前不能吃的太多，这样胃会感到不适，身体不舒服，自然睡不着。
+								了.每天多参加户外活动和体育锻炼。提高身体免疫力和抵抗力。拥有一个强健的体魄。
+							</div>
+						</view>
+					</view>
+				</scroll-view>
 				
-			}
-		},
-		methods: {
+				
+				<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/reportIconMove.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/reportIconMove.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/reportIconMove.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/home/homeIconGift.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="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/home/homeIconGift.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="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/home/homeIconGift.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="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/reportIconMove.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/home/homeIconGift.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:100,
+				}],
+				tabIndex: 0,
+				tabScrollInto: "",
+				tabListSize: {},
+				tabItemLineLeft: 0,
+				tabItemLineWidth: 0,
+				isPress: false,
+				swiperHeight: 0,
+				item1Data: [{
+					title: '1楼',
+				}, {
+					title: '2楼',
+				}, {
+					title: '3楼',
+				}, {
+					title: '4楼',
+				}, {
+					title: '5楼',
+				}, {
+					title: '6楼',
+				}, {
+					title: '7楼',
+				}, {
+					title: '8楼',
+				}, {
+					title: '9楼',
+				}],
+
+
+			}
+		},
+		onLoad(option) {
+			let system = uni.getSystemInfoSync();
+			this.swiperHeight = system.windowHeight - 44;
+			console.log(this.swiperHeight);
 			
+			// 跳转时传递index打开指定页面
+			// console.log(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: 18px;
+			}
+			.subtitle-sleep-condition {
+				font-size: 13px;
+			}
+		}
+		.image-sleep-condition {
+			height: 80px;
+			width: 80px;
 		}
 	}
-</script>
-
-<style>
-
+	
+	.data-sleep-item {
+		background: #0233C699;
+		backdrop-filter: blur(20px);
+		border-radius: 15px;
+		padding: 10px;
+		margin-top: 10px;
+		
+		.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: 5px;
+			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;
+				}
+			}
+			.footer-tab-detail {
+				padding-top: 10px;
+			}
+		}
+		.tip-tab-detail  {
+			margin-top: 30px;
+			
+			.image-tip-tab {
+				width: 110px;
+				height: 110px;
+				margin-right: 10px;
+			}
+			.text-tip-tab {
+				border: 1px solid #ffffff;
+				border-radius: 5px;
+				padding: 10px;
+				
+				.title-tip-tab {
+					font-size: 20px;
+					font-weight: 500;
+					display: block;
+					text-align: center;
+					margin-bottom: 3px;
+				}
+			}
+		}
+		.post-tab-detail {
+			margin-top: 30px;
+			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;
+			}
+		}
+	}
+	.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>

sleep/pages/report/report.vue

@@ -21,6 +21,11 @@
 
 					<img class="report-header-img" src="../../static/report/reportIconLight.png" />
 
+					<view class="btns-report">
+						<view @click="handleMonthClick" class="btn-month-report">月报</view>
+						<view @click="handleWeekClick" class="btn-week-report">周报</view>
+					</view>
+
 					<view class="flex-col report_score space-y-55">
 						<view class="flex-row space-x-10 report_period">
 							<view class="flex-row justify-between flex-auto section_3">
@@ -584,6 +589,16 @@
       }
     },
     methods: {
+		handleMonthClick() {
+			uni.navigateTo({
+				url: '/pages/monthReport/monthReport'
+			})	
+		},
+		handleWeekClick() {
+			uni.navigateTo({
+				url: '/pages/weekReport/weekReport'
+			})
+		},
       // 获取睡眠报告
       getNewSleepReport() {
         const _this = this
@@ -947,6 +962,21 @@
 </script>
 
 <style lang="scss">
+	.btns-report {
+		color: #ffffff;
+		position: fixed;
+		top: 9rem;
+		font-size: 15px;
+		z-index: 10000;
+	}
+	.btn-week-report, .btn-month-report {
+		background-color: #7e5a9d4d;
+		-webkit-backdrop-filter: blur(0.31rem);
+		backdrop-filter: blur(0.31rem);
+		padding: 0.3rem 1rem;
+		border-radius: 0 1rem 1rem 0;
+		margin-bottom: 0.5rem;
+	}
 	.report_heart {
 	  .section_25 {
 	    opacity: 0.8;

sleep/pages/weekReport/weekReport.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="report-container">
-		<cu-custom bgColor="#000000"><view slot="content" style="color: #FFFFFF">周报告</view></cu-custom>
+		<cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">周报告</view></cu-custom>
 		
 		<view class="month-report-header self-center items-center">
 			<view class="flex-row header-date self-center">
@@ -156,6 +156,7 @@
 		width: fit-content;
 		margin: 0 auto;
 		text-align: center;
+		margin-top: 1rem;
 		
 		.header-date {
 			// display: inline-block;

sleep/uni_modules/cc-swiperTabs/changelog.md

@@ -0,0 +1,2 @@
+## 2.0.0（2023-06-21）
+组件优化

sleep/uni_modules/cc-swiperTabs/components/cc-swiperTabs/cc-swiperTabs.vue

@@ -0,0 +1,146 @@
+<template>
+	<!--组件-->
+	<scroll-view class="scroll" scroll-x='false' scroll-with-animation :scroll-into-view=" 'tab-' + scrollIntoView"
+		:style="{ height:curSwiperHeight + 'rpx' }">
+		<view class="swiperTab" v-for="(item,index) in swiperTabList" :key='index'
+			:style="{ width:curSwiperWidth,lineHeight:curSwiperHeight + 'rpx' }" :id=" 'tab-' + index "
+			@tap="CurrentTab(index,item)">
+
+			<!--导航标题-->
+			<text class="textTitle" :style="{ color:swiperTabIdx == index ? swiperCurrentColor:swiperColor }">
+				{{ item }}
+			</text>
+			<!--导航标题-->
+
+			<!--线条-->
+			<view class="swiperLine" v-show="curSwiperLineShow">
+				<view class="swiperLineActive"
+					:class="[ swiperTabIdx == index && curSwiperLineAnimatie ?'currentLine':'' ]" :style="{ 
+						width:curSwiperLineActiveWidth,
+						height:curSwiperLineActiveHeight,
+						background:curSwiperLineActiveBg
+					}" v-if=" swiperTabIdx == index ">
+				</view>
+			</view>
+			<!--线条-->
+
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				scrollIntoView: 0,
+			}
+		},
+		onLoad() {},
+		props: {
+
+			swiperTabList: {
+				type: Array
+			}, //导航列表
+			swiperTabIdx: {
+				type: Number
+			}, //导航对应列表下标
+			swiperColor: {
+				type: String
+			}, //导航栏字体未选中前颜色
+			swiperCurrentColor: {
+				type: String
+			}, //选中当前导航栏字体颜色
+			curSwiperWidth: {
+				type: String
+			}, //当前导航的宽度 % upx rpx px
+			curSwiperHeight: {
+				type: Number
+			}, //当前导航的高度度 rpx px
+			curSwiperLineShow: {
+				type: Boolean
+			}, //是否显示线条
+			curSwiperLineActiveWidth: {
+				type: String
+			}, //当前选中的导航栏线条的宽度
+			curSwiperLineActiveHeight: {
+				type: String
+			}, //当前选中的导航栏线条的高度度
+			curSwiperLineActiveBg: {
+				type: String
+			}, //当前选中的导航栏线条颜色
+			curSwiperLineAnimatie: {
+				type: Number,
+				default: 280
+			}, //当前选中的导航栏线条过渡效果
+		},
+		methods: {
+
+			CurrentTab: function(index, item) {
+
+				this.scrollIntoView = Math.max(0, index - 1);
+				this.$emit('change', index, item);
+			},
+
+		}
+	}
+</script>
+
+<style>
+	.scroll ::-webkit-scrollbar {
+
+		display: none;
+		background-color: transparent;
+
+	}
+
+	.scroll {
+
+		display: flex !important;
+		flex-direction: row !important;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+		background-color: white;
+	}
+
+	.swiperTab {
+		display: inline-flex;
+		flex-direction: column;
+		text-align: center;
+		position: relative;
+	}
+
+	.swiperLine {
+		position: absolute;
+		bottom: 6px;
+		left: 0;
+		width: 100%;
+		z-index: 10;
+	}
+
+	.swiperLineActive {
+		margin: 0 auto;
+		border-radius: 30upx;
+	}
+
+	@keyframes currentLine {
+		0% {
+			transform: scale(0.5);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	.currentLine {
+		animation: currentLine 300ms forwards;
+	}
+
+	.textTitle {
+
+		font-size: 32rpx;
+		font-weight: 500;
+
+
+	}
+</style>

sleep/uni_modules/cc-swiperTabs/package.json

@@ -0,0 +1,85 @@
+{
+  "id": "cc-swiperTabs",
+  "displayName": "可以左右滚动切换的tabs tabs选项卡 滑动动画效果 自动宽度",
+  "version": "2.0.0",
+  "description": "可以左右滚动切换的tabs tabs选项卡 滑动动画效果 自动宽度, 可用于预约取号日期滑动选择等场景",
+  "keywords": [
+    "tabs",
+    "选项卡",
+    "滑动",
+    "radio",
+    "swiper"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.8.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "y",
+          "快手": "y",
+          "飞书": "y",
+          "京东": "y"
+        },
+        "快应用": {
+          "华为": "y",
+          "联盟": "y"
+        }
+      }
+    }
+  }
+}

sleep/uni_modules/cc-swiperTabs/readme.md

@@ -0,0 +1,166 @@
+# cc-swiperTabs
+
+
+#### 使用方法 
+```使用方法
+swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表
+swiperTabIdx: 0,
+swiperColor: '#161616', //导航栏字体未选中前颜色
+swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色
+curSwiperWidth: '26%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
+curSwiperHeight: 96, //当前导航的高度度 rpx px
+curSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
+curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色
+curSwiperLineActiveWidth: '60%', //当前选中的导航栏线条的宽度 upx rpx px
+curSwiperLineActiveHeight: '2px', //当前选中的导航栏线条的高度度 upx rpx px
+
+<!--组件-->
+<cc-swiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx' :curSwiperWidth='curSwiperWidth'
+			:curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor' :swiperCurrentColor='swiperCurrentColor'
+			:curSwiperLineShow="curSwiperLineShow" :curSwiperLineActiveWidth="curSwiperLineActiveWidth"
+			:curSwiperLineActiveHeight="curSwiperLineActiveHeight" :curSwiperLineActiveBg="curSwiperLineActiveBg"
+			@change="CurrentTab">
+</cc-swiperTabs>					
+
+
+```
+
+#### HTML代码实现部分
+```html
+
+<template>
+	<view class="content">
+
+		<!--组件-->
+		<cc-swiperTabs :swiperTabList='swiperTabList' :swiperTabIdx='swiperTabIdx' :curSwiperWidth='curSwiperWidth'
+			:curSwiperHeight='curSwiperHeight' :swiperColor='swiperColor' :swiperCurrentColor='swiperCurrentColor'
+			:curSwiperLineShow="curSwiperLineShow" :curSwiperLineActiveWidth="curSwiperLineActiveWidth"
+			:curSwiperLineActiveHeight="curSwiperLineActiveHeight" :curSwiperLineActiveBg="curSwiperLineActiveBg"
+			@change="CurrentTab">
+		</cc-swiperTabs>
+
+		<!-- radioData:单选数据 curIndex：当前选择序列 @change：单选事件 -->
+		<ccRadioView :radioData="items" :curIndex="current" @change="radioChange"></ccRadioView>
+
+		<button class="submitBtn" type="primary" @click="submitAppointment">提交预约</button>
+
+
+	</view>
+</template>
+
+<script>
+	import ccRadioView from '../../components/ccRadioView.vue'
+
+	export default {
+		components: {
+
+			ccRadioView
+		},
+		data() {
+			return {
+
+				swiperTabList: ["2023-06-10", "2023-06-11", "2023-06-12", "2023-06-13", "2023-06-14", "2023-06-15"], //导航列表
+				swiperTabIdx: 0,
+
+				swiperColor: '#161616', //导航栏字体未选中前颜色
+				swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色
+				curSwiperWidth: '26%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
+				curSwiperHeight: 96, //当前导航的高度度 rpx px
+
+				curSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
+				curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色
+				curSwiperLineActiveWidth: '60%', //当前选中的导航栏线条的宽度 upx rpx px
+				curSwiperLineActiveHeight: '2px', //当前选中的导航栏线条的高度度 upx rpx px
+
+
+				items: [{
+						value: '1',
+						name: '上午9:00-10:00'
+					},
+					{
+						value: '2',
+						name: '上午10:00-11:00',
+						checked: ''
+					},
+					{
+						value: '3',
+						name: '上午11:00-12:00',
+					},
+					{
+						value: '4',
+						name: '下午13:00-14:00',
+					},
+					{
+						value: '5',
+						name: '下午14:00-15:00',
+					},
+					{
+						value: '6',
+						name: '下午15:00-16:00',
+					},
+					{
+						value: '7',
+						name: '下午16:00-17:00',
+					},
+					{
+						value: '8',
+						name: '下午17:00-18:00',
+					},
+
+				],
+				current: 0,
+
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+
+			submitAppointment() {
+
+				uni.showModal({
+					title: '预约数据',
+					content: "日期选择 = " + this.swiperTabList[this.swiperTabIdx] + "  时间段选择 = " + this.items[this
+						.current].name
+				})
+			},
+			//tab点击事件 自行完善需要的代码
+			CurrentTab: function(index, item) {
+				this.swiperTabIdx = index;
+
+
+				console.log('日期选择' + item + '\n序列' + index)
+			},
+			radioChange: function(evt) {
+				for (let i = 0; i < this.items.length; i++) {
+					if (this.items[i].value === evt.target.value) {
+						this.current = i;
+						break;
+					}
+				}
+
+			},
+
+		}
+	}
+</script>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+
+
+	}
+
+
+	.submitBtn {
+
+		width: 90%;
+		margin-top: 86rpx;
+	}
+</style>
+
+
+```