siyu_app/pages_watch/health/healthWeekReport.vue

<template>
	<view class="container">
		<uni-nav-bar fixed :border="false" :backgroundColor="`rgba(255, 235, 220,${opacity})`" title="健康周报"
			:statusBar="true" left-icon="left" @clickLeft="$navBack()"></uni-nav-bar>
		<image class="page-bg" src="@/static/images/pages_watch/images/zb_home_top_bg.png" mode="widthFix"></image>
		<view class="container-body">
			<view class="user">
				<view class="echartbox">
					<view class="userinfo x-bc">
						<image class="userinfo-avatar"
							:src="$isEmpty(reportUser.avatar) ? avatar : reportUser.avatar"
							mode="aspectFill"></image>
						<view class="userinfo-score">{{healthReport.title || '--'}}</view>
						<view class="userinfo-time" @click="chooseDate">{{$timeFormat(dayList[0], 'mm.dd')}} - {{$timeFormat(dayList[6], 'mm.dd')}}</view>
					</view>
					<view class="userinfo-footer x-c">
						<view>0</view>
						<view class="userinfo-footer-cen">健康指数</view>
						<view>100</view>
					</view>
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<view class="userinfo-list x-bc">
				<view class="userinfo-item x-bc">
					<view>
						<view>身高</view>
						<view style="margin-top: 8rpx;"><text class="num">{{reportUser.height || '--'}}</text>cm</view>
					</view>
					<image src="@/static/images/pages_watch/icons/height_icon.png" mode="aspectFill"></image>
				</view>
				<view class="userinfo-item x-bc">
					<view>
						<view>体重</view>
						<view style="margin-top: 8rpx;"><text class="num">{{reportUser.weight || '--'}}</text>kg</view>
					</view>
					<image src="@/static/images/pages_watch/icons/weight_icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="userinfo-list x-bc">
				<view class="userinfo-item x-bc">
					<view>
						<view>BMI</view>
						<view style="margin-top: 8rpx;"><text class="num">{{_BMI}}</text></view>
					</view>
					<image src="@/static/images/pages_watch/icons/bmi_icon.png" mode="aspectFill"></image>
				</view>
				<view class="userinfo-item x-bc">
					<view>
						<view>卡路里</view>
						<view style="margin-top: 8rpx;"><text class="num">{{healthInfo.calorie || 0}}</text>kcal</view>
					</view>
					<image src="@/static/images/pages_watch/icons/calorie_icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="userinfo-list x-bc">
				<view class="userinfo-item x-bc">
					<view>
						<view>步数</view>
						<view style="margin-top: 8rpx;"><text class="num">{{healthInfo.step || 0}}</text>步</view>
					</view>
					<image src="@/static/images/pages_watch/icons/height_icon.png" mode="aspectFill"></image>
				</view>
				<view class="userinfo-item x-bc">
					<view>
						<view>睡眠</view>
						<view style="margin-top: 8rpx;"><text class="txt">{{healthInfo.sleepStatus || '--'}}</text>
						</view>
					</view>
					<image src="@/static/images/pages_watch/icons/sleep_icon28.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="userinfo-tips" v-show="healthReport.desc">{{healthReport.desc}}</view>
			<view class="box-title">健康数据</view>
			<view class="reportbox">
				<bpChart ref="bpChart" :loading="bpLoading"
					:boxstyle="{padding: 0,marginTop: '32rpx',marginBottom: '32rpx'}" />
				<!-- <view class="tipsbox">
					该月血压整体偏高，应多注意休息，合理安排作息，吃降压药等其它降压手段保持血压正常。
				</view> -->
				<bsChart ref="bsChart" :loading="bsLoading"
					:boxstyle="{padding: 0,marginTop: '32rpx',marginBottom: '32rpx'}" />
				<!-- <view class="tipsbox">
					该月血糖整体偏高，应多注意休息，合理安排作息，吃降糖药等其它手段保持血糖正常。
				</view> -->
				<heartChart ref="heartChart" :loading="heartLoading"
					:boxstyle="{padding: 0,marginTop: '32rpx',marginBottom: '32rpx'}" />
				<!-- <view class="tipsbox">
					该月心率多次出现异常，应多注意休息，合理安排作息，吃养心药等其它手段保持心率正常。
				</view> -->
				<boChart ref="boChart" :loading="boLoading"
					:boxstyle="{padding: 0,marginTop: '32rpx',marginBottom: '32rpx'}" />
				<!-- <view class="tipsbox">
					血氧各项指标正常，请多保持!!!
				</view> -->
				<sleep ref="sleep" :loading="sleepLoading"
					:boxstyle="{padding: 0,marginTop: '32rpx',marginBottom: '32rpx'}" />
				<!-- <view class="tipsbox">
					您的睡眠质量较好，打败了80%的人，请继续保持，好的睡眠才是养好身体的关键。
				</view> -->
			</view>
			<view class="box-title">健康档案</view>
			<view class="healthinfo">
				<view class="healthinfo-title x-f" style="color: #FF5558;">
					<image src="@/static/images/pages_watch/icons/prediction_icon.png" mode="aspectFill"></image>
					<text>健康预测</text>
				</view>
				<view class="tipsbox healthinfo-tip1" v-for="(it,i) in predictionsList" :key="i">{{it}}</view>
				<view class="healthinfo-title x-f" style="color: #52D087;">
					<image src="@/static/images/pages_watch/icons/analysis_icon.png" mode="aspectFill"></image>
					<text>解析</text>
				</view>
				<view class="tipsbox healthinfo-tip2" v-for="(it,i) in analysisList" :key="i">{{it}}</view>
				<view class="healthinfo-title x-f" style="color: #55AEFE;">
					<image src="@/static/images/pages_watch/icons/treatment_icon.png" mode="aspectFill"></image>
					<text>养生建议</text>
				</view>
				<view class="tipsbox healthinfo-tip3" v-for="(it,i) in suggestionsList" :key="i">{{it}}</view>
				<view class="healthinfo-title x-f" style="color: #FD9961;">
					<image src="@/static/images/pages_watch/icons/precautions_icon.png" mode="aspectFill"></image>
					<text>注意事项</text>
				</view>
				<view class="tipsbox healthinfo-tip4" v-for="(it,i) in precautionsList" :key="i">{{it}}</view>
			</view>
			<!-- <view class="box-title">家医团队建议</view>
			<view class="healthinfo">
			
			</view> -->
			<template v-if="tongueDateList&&tongueDateList.length>0">
				<view class="box-title">AI舌诊</view>
				<scroll-view scroll-x="true" class="dayitem-scroll" :scroll-into-view="scrollIntoView"
					:scroll-with-animation="true">
					<view :class="current == index ? 'dayitem x-ac active' :'dayitem x-ac'" :id="'dayitem'+ index"
						v-for="(item,index) in tongueDateList" @click="handleDay(index)">
						{{item.substring(5,10)}}
					</view>
				</scroll-view>
				<view>
					<view class="report-info" v-if="dataList&&dataList.length>0">
						<view class="report-time">检测时间 {{dataList[0].createTime}}</view>
						<view class="report-info-restit">您属于</view>
						<view class="report-info-res">{{dataList[0].typeName}}</view>
						<!-- 舌苔特征 -->
						<view class="report-title">舌苔特征</view>
						<view class="report-box">
							<view class="report-info-item">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{dataList[0].taiseName}}</text>
									<view>{{dataList[0].taiseDesc}}</view>
								</view>
							</view>
							<view class="report-info-item">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{dataList[0].shemianName}}：</text>
									<text>{{dataList[0].shemianDesc}}</text>
								</view>
							</view>
							<view class="report-info-item">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{dataList[0].botai==1?"有剥苔":"未见剥苔"}}：</text>
									<text>{{dataList[0].botaiDesc}}</text>
								</view>
							</view>
							<view class="report-info-item">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{dataList[0].liewen==1?"有裂纹":"未见裂纹"}}：</text>
									<text>{{dataList[0].liewenDesc}}</text>
								</view>
							</view>
							<view class="report-info-item">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{dataList[0].chihen==1?"有齿痕":"未见齿痕"}}：</text>
									<text>{{dataList[0].chihenDesc}}</text>
								</view>
							</view>
						</view>
						<!-- 体质解析 -->
						<view class="report-title">体质解析</view>
						<view class="report-box">
							<view class="report-info-item" v-for="(item) in typeList">
								<view class="item-round"></view>
								<view>
									<text class="item-title">{{item.name}}：</text>
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="no-data-box" v-if="dataList&&dataList.length==0 && !tongueLoading">
						<image src="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png">
						</image>
						<view class="empty-title">暂无数据</view>
					</view>
					<u-loading-icon style="margin-top: 50rpx;margin-bottom: 100rpx;" v-if="tongueLoading" text="加载中"
						textSize="15"></u-loading-icon>
				</view>
			</template>
		</view>
		<!-- #ifdef APP-PLUS --><!-- #endif  -->
		<view class="footerbox x-ac">
			<view class="footerbox-btn x-ac" @click="goShare">分享健康周报</view>
		</view>
	
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false">
			<share-box :shareItem="shareItem" @closeShare='showShare = false'></share-box>
		</u-popup>
		<h5-down-app-tip :pageUrl="pageUrl" />
		<uni-popup type="bottom"ref="calendar">
			<view class="pop-calendar">
				<uni-calendar :clear-date="true" :date="date" :insert="true" :lunar="false"
					:startDate="$u.timeFormat(new Date().getTime() - (3600 * 24 * 365 * 1000), 'yyyy-mm-dd')" :range='false'
					@change="change" :endDate="$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		bpInfo,
		bgInfo,
		heartRateInfo,
		spInfo,
		sleepInfo
	} from "@/api/pages_watch/healthMonitoring.js";
	import {
		getUserByDeviceId,
		getUserHealthInfoByDeviceId,
		queryHealthReport
	} from "@/api/pages_watch/health.js";
	import bpChart from "@/pages_watch/components/echart/bpChart.vue"; // 血压
	import bsChart from "@/pages_watch/components/echart/bsChart.vue"; // 血糖
	import heartChart from "@/pages_watch/components/echart/heartChart.vue"; // 心率
	import boChart from "@/pages_watch/components/echart/boChart.vue"; // 血氧
	import sleep from "@/pages_watch/components/echart/sleep.vue"; // 睡眠
	import {
		getHealthTongueList
	} from '@/api/healthTongue.js'
	const avatar = "/static/images/pages_watch/images/my_heads_icon.png";
	export default {
		components: {
			bpChart,
			bsChart,
			heartChart,
			boChart,
			sleep,
		},
		data() {
			return {
				opacity: 1,
				showShare: false,
				shareItem: {
					imageUrl: "",
					title: "",
					path: "",
					isMini: true,
					selectUser: 0
				},
				pageUrl: '',
				avatar,
				deviceId: uni.getStorageSync("deviceId") || '',
				reportUser: {},
				bpLoading: false,
				bsLoading: false,
				heartLoading: false,
				boLoading: false,
				sleepLoading: false,
				isFamily: false,
				item: {},
				typeList: [],
				scrollIntoView: 'dayitem0',
				dayList: [],
				current: 0,
				chartData: {
					series: [{
						name: "",
						color: "#FFA750",
						data: 0.3
					}]
				},
				opts: {
					padding: undefined,
					title: {
						name: ""
					},
					subtitle: {
						name: "",
					},
					extra: {
						arcbar: {
							type: "default",
							width: 12,
							backgroundColor: "#FFE4C7",
							startAngle: 0.75,
							endAngle: 0.25,
							gap: 2,
							linearType: "custom",
							customColor: ["#FFA750", "#FFA651"]
						}
					}
				},
				healthInfo: {},
				healthReport: {},
				analysisList: [],
				precautionsList: [],
				predictionsList: [],
				suggestionsList: [],
				dataList: [],
				tongueLoading: true,
				userId: '',
				isShare: 0,
				tongueDateList: [],
				date: '',
			}
		},
		computed: {
			_BMI() {
				if (this.reportUser.height && this.reportUser.weight) {
					const height = this.reportUser.height / 100;
					const weight = this.reportUser.weight;
					const bmi = weight / (height * height);
					const roundedBMI = bmi.toFixed(2);

					let category = '';
					if (bmi < 18.5) {
						category = "过轻";
					} else if (bmi >= 18.5 && bmi < 24.9) { // 注意：当 bmi = 24.9 时会进入下一级判断
						category = "正常";
					} else if (bmi >= 24.9 && bmi < 29.9) {
						category = "过重";
					} else {
						category = "肥胖";
					}
					return category;
				} else {
					return '--'
				}
			}
		},
		onLoad(option) {
			this.shareItem.selectUser = option.selectUser
			this.isFamily = option.selectUser != '0'
			this.isShare = option.isShare || 0
			this.getPageUrl(option)
			if (this.isShare == 1) {
				this.userId = option.userId || ''
				this.deviceId = option.deviceId || ''
			} else {
				const user = this.$getUserInfo()
				console.log("user==",user)
				this.userId = user.userId || ''
			}
			if (!this.deviceId) {
				uni.showToast({
					title: '请先绑定设备'
				})
				return
			}
			if(!this.$isLogin()) {
				this.$showLoginPage()
			}
			this.getReportUser()
			this.initData()
		},
		onPageScroll(e) {
			if (e.scrollTop <= 44) {
				this.opacity = e.scrollTop / 44 * 1
			} else if (e.scrollTop > 44) {
				this.opacity = 1
			}
		},
		methods: {
			getPageUrl(options) {
				if (options && JSON.stringify(options) != '{}') {
					this.pageUrl = '/pages_watch/health/healthWeekReport' + uni.$u.queryParams(options)
				} else {
					this.pageUrl = '/pages_watch/health/healthWeekReport'
				}
			},
			handleDay(index) {
				this.scrollIntoView = 'dayitem' + index
				this.current = index
				this.getHealthTongueList()
			},
			goShare() {
				//#ifdef APP-PLUS
				this.shareItem.title = '健康周报';
				this.shareItem.imageUrl = "/static/logo.png";
				this.shareItem.isMini = false;
				this.shareItem.path = '/pages_watch/health/healthWeekReport?isShare=1&userId=' + this.userId +
					'&deviceId=' + this.deviceId + '&selectUser=' + this.shareItem.selectUser;
				let cdn = uni.getStorageSync('h5Path');
				this.shareItem.url = cdn + this.shareItem.path;
				this.showShare = true;
				//#endif 
			},
			handleList() {
				uni.navigateTo({
					url: "/pages_watch/health/healthReportHistory"
				})
			},
			initData(day) {
				const val = this.getLastWeekRange(1, day)
				this.dayList = this.getLastWeekRange(0, day)
				const param = {
					startTime: val[0],
					endTime: val[1].split(' ')[0] + ' 23:59:59',
					deviceId: this.deviceId,
					userId: this.userId,
					isFamily: this.isFamily,
				}
				this.$nextTick(() => {
					this.getUserHealthInfo(param)
					this.getHealthReport(param)
					this.getBpByDate(param)
					this.getBgByDate(param)
					this.getHrByDate(param)
					this.getSpByDate(param)
					this.getSleepByDate(param)
				})
			},
			getUserHealthInfo(param) {
				uni.showLoading({
					title: '加载中'
				})
				getUserHealthInfoByDeviceId(param).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.healthInfo = res.data || {}
						this.tongueDateList = this.healthInfo.tongueDateList || []
						if (this.tongueDateList && this.tongueDateList.length > 0) {
							this.handleDay(0)
						} else {
							this.dataList = []
						}
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			getHealthReport(param) {
				uni.showLoading({
					title: '加载中'
				})
				queryHealthReport(param).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.healthReport = res.data || {};
						this.chartData.series[0].data = res.data && res.data.score ? res.data.score / 100 : 0;
						if (res.data && res.data.list && res.data.list.length > 0) {
							let groupedData = this.groupHealthData(res.data.list);
							this.analysisList = groupedData.analyses
							this.precautionsList = groupedData.precautions
							this.predictionsList = groupedData.predictions
							this.suggestionsList = groupedData.suggestions
						} else {
							this.analysisList = []
							this.precautionsList = []
							this.predictionsList = []
							this.suggestionsList = []
						}
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			groupHealthData(list) {
				return list.reduce((groups, item) => {
					groups.predictions.push(item.prediction);
					groups.analyses.push(item.analysis);
					groups.suggestions.push(item.suggestion);
					groups.precautions.push(item.precautions);
					return groups;
				}, {
					predictions: [],
					analyses: [],
					suggestions: [],
					precautions: []
				});
			},
			getReportUser() {
				const param = {
					deviceId: this.deviceId,
					isFamily: this.isFamily,
					userId: this.userId,
				}
				getUserByDeviceId(param).then((res) => {
					this.reportUser = this.$isEmpty(res.data) ? {} : res.data
				})
			},
			//  获取本周到当天的数据
			getLastWeekRange(type, day) {
				const today = day ? new Date(day) : new Date();
				today.setHours(0, 0, 0, 0); // 清除时间

				// 计算当前周的周一
				const currentMonday = new Date(today);
				currentMonday.setDate(today.getDate() - (today.getDay() === 0 ? 6 : today.getDay() - 1));

				// 如果没有传入day参数，则计算前一周的周一和周日
				const lastWeekMonday = day ? currentMonday : new Date(currentMonday);
				lastWeekMonday.setDate(currentMonday.getDate() - (day ? 0 : 7));

				// 计算前一周的周日
				const lastWeekSunday = new Date(lastWeekMonday);
				lastWeekSunday.setDate(lastWeekMonday.getDate() + 6);

				// 生成日期范围
				const dates = [];
				let currentDate = new Date(lastWeekMonday);

				while (currentDate <= lastWeekSunday) {
					const y = currentDate.getFullYear();
					const m = String(currentDate.getMonth() + 1).padStart(2, '0');
					const d = String(currentDate.getDate()).padStart(2, '0');
					dates.push(`${y}/${m}/${d} 00:00:00`);
					currentDate.setDate(currentDate.getDate() + 1);
				}

				if (type == 1) {
					const startTime = dates[0];
					const endTime = dates[dates.length - 1];
					return [startTime, endTime];
				} else {
					return dates;
				}
			},
			// 血压
			getBpByDate(param) {
				this.bpLoading = true
				bpInfo(param).then((res) => {
					this.bpLoading = false
					this.$refs.bpChart.setChartData(res.data)
				}).catch((err) => {
					this.bpLoading = false
				});
			},
			// 血糖
			getBgByDate(param) {
				this.bsLoading = true
				bgInfo(param).then((res) => {
					this.bsLoading = false
					this.$refs.bsChart.setChartData(res.data)
				}).catch((err) => {
					this.bsLoading = false
				});
			},
			// 心率
			getHrByDate(param) {
				this.heartLoading = true
				heartRateInfo(param).then((res) => {
					this.heartLoading = false
					this.$refs.heartChart.setChartData(res.data)
				}).catch((err) => {
					this.heartLoading = false
				});
			},
			// 血氧
			getSpByDate(param) {
				this.boLoading = true
				spInfo(param).then((res) => {
					this.boLoading = false
					this.$refs.boChart.setChartData(res.data)
				}).catch((err) => {
					this.boLoading = false
				});
			},
			// 睡眠
			getSleepByDate(param) {
				this.sleepLoading = true
				sleepInfo(param).then((res) => {
					this.sleepLoading = false
					this.$refs.sleep.setChartData(res.data)
				}).catch((err) => {
					this.sleepLoading = false
				});
			},
			// 舌诊
			getHealthTongueList() {
				let that = this;
				let data = {
					pageNum: 1,
					pageSize: 1,
					createDay: this.tongueDateList[this.current],
					deviceId: this.deviceId,
					userId: this.userId,
					isFamily: this.isFamily,
				};
				this.tongueLoading = true
				getHealthTongueList(data).then(res => {
					that.tongueLoading = false
					if (res.code == 200) {
						//设置列表数据
						that.dataList = res.data.list || [];
						if (that.dataList.length > 0) {
							const jsoninfo = JSON.parse(that.dataList[0].typeJson)
							let index = jsoninfo.findIndex(item => item.name === '用药调治');
							// #ifdef H5
							if (index > -1) {
								that.typeList = jsoninfo.splice(0, index)
							} else {
								that.typeList = jsoninfo
							}
							// #endif 
							// #ifndef H5
							that.typeList = jsoninfo
							// #endif 
						} else {
							that.typeList = []
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败",
						});
						that.dataList = []
						that.typeList = []
					}
				}).catch(() => {
					that.tongueLoading = false
				});
			},
			chooseDate() {
				this.$refs.calendar.open()
			},
			change(e) {
				this.date = e.fulldate
				this.initData(e.fulldate)
				this.$refs.calendar.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.container {
		padding: 0 24rpx;
		position: relative;
	}

	.page-bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
	}

	.container-body {
		position: relative;
		z-index: 1;
		padding-bottom: calc(var(--window-bottom) + 154rpx);
	}

	.user {
		padding: 32rpx 0 60rpx 0;
		@include u-flex(row, center, center);

		.echartbox {
			width: 400rpx;
			height: 400rpx;
			position: relative;
		}

		.userinfo {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 99;
			width: 290rpx;
			height: 290rpx;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 50%;
			flex-direction: column !important;
			padding: 30rpx 0 40rpx 0;
			box-sizing: border-box;
			box-shadow: 0 -8rpx 12rpx 0 rgba(255, 228, 199, 0.8);
		}

		.userinfo-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}

		.userinfo-score {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 64rpx;
			color: #FF5C03;
		}

		.userinfo-time {
			font-family: Helvetica, Helvetica;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.userinfo-footer {
			font-family: Helvetica, Helvetica;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFA750;
			width: 100%;
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 99;
			transform: translateX(-50%);

			&-cen {
				margin: 0 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF5C03;
			}
		}
	}

	.userinfo-list {
		margin: 0 -16rpx 0 0;

		.userinfo-item {
			flex: 1;
			min-height: 136rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin: 0 16rpx 16rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;

			image {
				width: 56rpx;
				height: 56rpx;
			}

			.num {
				font-family: DIN, DIN;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
				margin-right: 10rpx;
			}

			.txt {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}

	.userinfo-tips {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #FF5C03;
		padding: 28rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.box-title {
		padding: 35rpx 0;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
	}

	.reportbox {
		background-color: #fff;
		padding: 1rpx 24rpx;
		border-radius: 16rpx;

		::v-deep .pickebox-picker {
			margin: 0 !important;
		}
	}

	.tipsbox {
		margin: 10rpx 0;
		padding: 24rpx;
		background: #F5F7FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F5F7FA;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		word-break: break-all;
	}

	.healthinfo {
		padding: 0 24rpx 24rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;

		&-title {
			padding: 24rpx 0 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}

		&-tip1 {
			background: #FFFCFC !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FCF4F4;
		}

		&-tip2 {
			background: #FAFFFC !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #EBFFF3;
		}

		&-tip3 {
			background: #FAFCFF !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F6FAFF;
		}

		&-tip4 {
			background: #FEFAF8 !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #FDF7F3;
		}
	}

	.report {
		&-box {
			padding: 24rpx;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		&-info {
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;


			&-restit {
				margin: 24rpx 0 20rpx 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #757575;
				text-align: center;
			}

			&-res {
				padding-bottom: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 48rpx;
				color: #FF5C03;
				text-align: center;
			}

			&-item {
				margin-bottom: 30rpx;
				display: flex;
				align-items: baseline;
				font-family: SourceHanSansCN-Regular;
				font-size: 27rpx;
				color: #414141;
				line-height: 36rpx;
				word-break: break-all;

				.item-title {
					font-family: SourceHanSansCN-Bold;
					font-weight: bold;
					font-size: 27rpx;
					color: #414141;
				}
			}
		}

		&-time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
		}

		&-title {
			margin: 24rpx 0;
			padding-left: 14rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FF5C03;
			position: relative;
			line-height: 32rpx;

			&::after {
				content: "";
				width: 6rpx;
				height: 100%;
				background: #FF5C03;
				border-radius: 3rpx 3rpx 3rpx 3rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}

	.item-title {
		display: block;
		padding-bottom: 10rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #222222;
	}

	.item-round {
		flex-shrink: 0;
		width: 16rpx;
		height: 16rpx;
		background: #FF5C03;
		margin-right: 12rpx;
		border-radius: 50%;
	}

	.dayitem-scroll {
		white-space: nowrap;
		margin-bottom: 24rpx;
	}

	.dayitem {
		width: 98rpx;
		min-height: 88rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
		display: inline-flex;
		margin-right: 12rpx;
	}

	.active {
		background: #FF5C03;
		color: #fff;
	}

	.footerbox {
		width: 100%;
		padding: 20rpx 24rpx;
		padding-bottom: calc(var(--window-bottom) + 20rpx);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		&-btn {
			width: 702rpx;
			height: 96rpx;
			background: #FF5C03;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}
	.pop-calendar {
		width: 100%;
	}
</style>