siyu_app/pages/user/healthRecords/index.vue

<template>
	<view class="container">

		<view class="nav-bar">
				<view class="grace-page-header" :style="{ background:headerBG }">
					<!-- 沉浸式状态栏 -->
					<view class="grace-page-status-bar" :style="{background:statusBarBG}"></view>
					<view class="content-header"  id="gracePageHeader" :style="{minHeight:headerHeight+'px', height:headerHeight+'px', overflow:'hidden'}">
						<view class="content-header-l">
							<image class="address" src="@/static/image/back.png" mode="aspectFill" @click="$navBack()"></image>
						</view>
						<view class="content-header-title">健康档案</view>
						<image class="shareicon" src="@/static/images/white-share.png" mode="aspectFill" @click="doShare"></image>
					</view>
				</view>
				<view class="nav_box">
					<view class="status_bar"></view>
					<view class="nav_bar"></view>
				</view>
		</view>
		
		<image class="jkda_top_bg" src="@/static/image/healthRecords/jkda_top_bg.png" mode="widthFix"></image>
		
		<view class="container-body">
			<view class="userbox">
				<view class="userbox-left">
					<view class="userbox-headimg">
						<image :src="defaultHeadimg" mode="aspectFill" style="width: 100%;height: 100%"></image>
					</view>
					<view class="userbox-info">
						<view>{{recordInfo.name || ""}}</view>
						<view class="userbox-info-tag">
							<view>{{recordInfo.sex == 1 ? '男':recordInfo.sex == 2 ? '女':'未知' }}</view>
							<view>{{recordInfo.age || "--"}}岁</view>
						</view>
					</view>
				</view>
				<!-- <view class="userbox-right">
					<image src="@/static/image/healthRecords/right_arrow_right_icon.png" mode="aspectFill"></image>
				</view> -->
			</view>
			
			<view class="box-title">
				<text>健康数据</text>
				<!-- <view class="box-title-right">
					<image src="@/static/image/healthRecords/edit_add_orange_icon.png" mode="aspectFill"></image>
					<text>绑定智能设备</text>
				</view> -->
			</view>
			
			<view class="cardbox">
				<view class="cardbox-item bmibox" style="height:auto">
					<view class="cardbox-title">
						<view>
							<view class="cardbox-maintitle">BMI {{recordInfo.bmi || "--"}}</view>
							<view class="bmibox-tagbox"><view class="bmibox-tag" v-if="recordInfo.bmi">{{fat}}</view></view>
						</view>
						<image src="@/static/image/healthRecords/BMI_icon.png" mode="aspectFill"></image>
					</view>
					<!-- <view class="bmibox-info" style="margin-top: 46rpx;">
						<text class="bmibox-infolabel">身高</text>
						<view class="bmibox-infoval">{{recordInfo.height || "--"}}cm</view>
						<image class="bmibox-edit" src="@/static/image/healthRecords/services_edit_icon.png"
							@click="handleEdit('height')"></image>
					</view>
					<view class="bmibox-info" style="margin-top: 12rpx;">
						<text class="bmibox-infolabel">体重</text>
						<view class="bmibox-infoval">{{recordInfo.weight || "--"}}kg</view>
						<image class="bmibox-edit" src="@/static/image/healthRecords/services_edit_icon.png"
							@click="handleEdit('weight')"></image>
					</view> -->
				</view>
				<view class="cardbox-item bmibox" style="height:auto">
					<!-- <view class="cardbox-title">
						<view>
							<view class="cardbox-maintitle">BMI {{recordInfo.bmi || "--"}}</view>
							<view class="bmibox-tagbox"><view class="bmibox-tag" v-if="recordInfo.bmi">{{fat}}</view></view>
						</view>
						<image src="@/static/image/healthRecords/BMI_icon.png" mode="aspectFill"></image>
					</view> -->
					<view class="bmibox-info">
						<text class="bmibox-infolabel">身高</text>
						<view class="bmibox-infoval">{{recordInfo.height || "--"}}cm</view>
						<image class="bmibox-edit" src="@/static/image/healthRecords/services_edit_icon.png"
							@click="handleEdit('height')"></image>
					</view>
					<view class="bmibox-info" style="margin-top: 12rpx;">
						<text class="bmibox-infolabel">体重</text>
						<view class="bmibox-infoval">{{recordInfo.weight || "--"}}kg</view>
						<image class="bmibox-edit" src="@/static/image/healthRecords/services_edit_icon.png"
							@click="handleEdit('weight')"></image>
					</view>
				</view>
				<!-- <view class="cardbox-item" v-for="(item,index) in healthData" :key="index">
					<view class="cardbox-title">
						<view>
							<view class="cardbox-maintitle">{{item.title}}</view>
							<view>{{item.desc}}</view>
						</view>
						<image :src="item.icon" mode="aspectFill"></image>
					</view>
					<view class="cardbox-res resnum">{{item.data || '--'}}</view>
					<view class="cardbox-time">{{item.date && item.date.substring(5,16)}}</view>
				</view> -->
			</view>
			
			<!-- 健康史 -->
			<view class="box-title">
				<text>健康史</text>
			</view>
			<view class="cardbox">
				<view class="health-item" v-for="(item,index) in healthRecordsList" :key="index" @click="handleEditHealth(item,1)">
					<image class="health-bgicon" :src="item.bgicon"></image>
					<view class="health-item-info">
						<view class="cardbox-maintitle" style="margin-bottom: 0;">{{item.title}}</view>
						<view class="text-overflow" style="margin-top: 20rpx;">{{item.desc || "尚未记录"}}</view>
					</view>
				</view>
			</view>
			
			<!-- 生活习惯 -->
			<view class="box-title">
				<text>生活习惯</text>
			</view>
			<view class="cardbox">
				<view class="health-item" v-for="(item,index) in livingHabits" :key="index" @click="handleEditHealth(item,2)">
					<image class="health-bgicon" :src="item.bgicon"></image>
					<view class="health-item-info">
						<view class="cardbox-maintitle" style="margin-bottom: 0;">{{item.title}}</view>
						<view class="text-overflow" style="margin-top: 20rpx;">{{item.desc || "尚未记录"}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 修改身高体重弹窗 -->
		<uni-popup ref="popup" :mask-click="false">
			<view class="popbox">
				<view class="popbox-title">{{title}}</view>
				<view class="uni-input-wrapper">
					<input class="uni-input" type="number" focus :placeholder="placeholder" maxlength="5"
						:value="inputValue" @input="clearInput" />
					<image class="uni-icon" src="@/static/image/healthRecords/input_close_icon.png" v-if="showClearIcon"
						@click="clearIcon"></image>
					<text>{{title =="身高"?'cm':title =="体重"?'kg':''}}</text>
				</view>
				<view class="popbox-footer">
					<button class="popbox-footer-btn cancel" @click="close">取消</button>
					<button class="popbox-footer-btn confirm" :loading="btnLoading" :disabled="btnLoading"
						@click="handleSubmit">确认</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- footer -->
		<!-- 填写生活习惯的 -->
		<view class="footer" >
			<view class="footer-btn" @click="editHealthRecordLife">填写个人健康专属档案</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false" >
			<share-box :shareItem="shareItem" :showCopy="false" @closeShare='showShare = false' ></share-box>
		</u-popup>
	</view>
</template>

<script>
	import {
		myRecord,
		HealthDataList,
		HealthLife,
		editRecord 
	} from '@/api/healthRecords.js'
	export default {
		data() {
			return {
				opacity: 1,
				hasRecord: true, //是否填过档案
				user: {},
				fat: "",
				recordInfo: {},
				title: "身高",
				placeholder: "请输入身高",
				showClearIcon: false,
				inputValue: '',
				btnLoading: false,
				headerHeight:44,
				statusBarBG:"none",
				top:0,
				defaultHeadimg:"../../../static/image/healthRecords/my_heads_icon.png",
				healthData: [{
					title: '血糖',
					desc: '血糖健康监测',
					data: '',
					date: '',
					icon: "../../../static/image/healthRecords/blood_sugar_icon.png",
				}],
				healthRecordsList: [
					{
						title: '疾病史',
						type: "healthHistory",
						desc: '',
						bgicon: "../../../static/image/healthRecords/jbs_icon.png",
					}, {
						title: '症状史',
						type: "symptomHistory",
						desc: '',
						bgicon: "../../../static/image/healthRecords/zzs_icon.png",
					}, {
						title: '家族史',
						type: "familyHistory",
						desc: '',
						bgicon: "../../../static/image/healthRecords/jzs_icon.png",
					}, {
						title: '用药史',
						type: "drugHistory",
						desc: '',
						bgicon: "../../../static/image/healthRecords/yys_icon.png",
					}, {
						title: '过敏史',
						type: "allergyHistory",
						desc: '',
						bgicon: "../../../static/image/healthRecords/gms_icon.png",
					}
				],
				livingHabits: [
					{
						title: '饮食',
						desc: '',
						type: "dietList",
						bgicon: "../../../static/image/healthRecords/ys_icon.png",
					}, {
						title: '睡眠情况',
						desc: '',
						type: "sleepList",
						bgicon: "../../../static/image/healthRecords/smqk_icon.png",
					}, {
						title: '运动',
						desc: '',
						type: "sportList",
						bgicon: "../../../static/image/healthRecords/yd_icon.png",
					}
				],
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:"",isMini:true },
			}
		},
		onShow() {
			this.user = {}
			if (!this.$isLogin()) {
				this.$showLoginPage();
			} else {
				this.user = this.$getUserInfo();
				this.getMyRecord()
				// this.getHealthDataList()
				this.getHealthLife()
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG:function() {
				var top=this.top/88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		methods: {
			getImageUrl(url) {
				return new URL(url, import.meta.url).href;
			},
			getBmi() {
				let fat = ""
				if(this.recordInfo && JSON.stringify(this.recordInfo) != "{}") {
					if(!this.$isEmpty(this.recordInfo.weight) && !this.$isEmpty(this.recordInfo.weight)) {
						// 计算BMI值
						this.recordInfo.bmi = Math.round(this.recordInfo.weight / Math.pow(this.recordInfo.height / 100, 2));
						// 判断体重状态
						if (this.recordInfo.bmi < 18.5) {
						    fat = "偏瘦";
						} else if (this.recordInfo.bmi < 24) {
						    fat = "正常";
						} else if (this.recordInfo.bmi < 28) {
						    fat = "超重";
						} else {
						    fat = "肥胖";
						}
						
						// 添加推荐体重
						// let lowerBound = 18.5 * Math.pow(this.recordInfo.weight / 100, 2);
						// let upperBound = 24 * Math.pow(this.recordInfo.weight / 100, 2); 
					}
				} else {
					this.recordInfo.bmi = ""
				}
				this.fat = fat
			},
		    // 查询今日健康生活
		    getHealthLife() {
		    	const param = {
		    		userId: this.user.userId
		    	}
		    	HealthLife(param).then(res => {
		    			if (res.code == 200 && res.data) {
		    				this.livingHabits[0].desc = res.data && res.data.eat ? this.resetData(JSON.parse(res.data.eat)) : ''
		    				this.livingHabits[1].desc = res.data && res.data.sleep ? this.resetData(JSON.parse(res.data.sleep)) : ''
		    				this.livingHabits[2].desc = res.data && res.data.sport ? this.resetData(JSON.parse(res.data.sport)) : ''
		    			}
		    		},
		    		rej => {}
		    	)
		    },
			// 填写生活习惯(每次都是新增)
			editHealthRecordLife() {
				uni.navigateTo({
					url: "./add?formType=healthLife"
				})
			},
			// 健康档案
			getMyRecord() {
				myRecord().then(res => {
						if (res.code == 200) {
							if(res.data) {
								this.hasRecord = true
								this.recordInfo = res.data
								this.healthRecordsList[0].desc = res.data.healthHistory ? this.resetData(JSON.parse(res.data.healthHistory)) : ""
								this.healthRecordsList[1].desc = res.data.symptomHistory ? this.resetData(JSON.parse(res.data.symptomHistory)) : ""
								this.healthRecordsList[2].desc = res.data.familyHistory ? this.resetData(JSON.parse(res.data.familyHistory)) : ""
								this.healthRecordsList[3].desc = res.data.drugHistory ? this.resetData(JSON.parse(res.data.drugHistory)) : ""
								this.healthRecordsList[4].desc = res.data.allergyHistory ? this.resetData(JSON.parse(res.data.allergyHistory)) : ""
							} else {
								this.hasRecord = false
								this.handelHealthRecord(1)
							}
						} else {
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
						this.getBmi()
					},
					rej => {}
				)
			},
			resetData(data) {
				let set = new Set();
				data.forEach(item => {
				  item.question.forEach(it => {
				    if (item.value.includes(it.name)) {
				      if (it.isWrite == 1 && it.writeVal) {
				        const str = it.name + "(" + it.writeVal + ")";
				        set.add(str);
				      } else {
				        set.add(it.name);
				      }
				    } else if(item.name == '平时应酬' && it.name === '每周多少次'){
						if (it.writeVal) {
						  const str = "每周" + it.writeVal + "次";
						  set.add(str);
						}
					}
				  });
				});
				return Array.from(set).join(",");
			},
			// 健康数据列表
			getHealthDataList() {
				const param = {
					pageNum: 1,
					pageSize: 10,
					userId: this.user.userId
				}
				HealthDataList(param).then(res => {
						if (res.code == 200 && res.data && res.data.length > 0) {
							this.healthData[0].data = res.data[0].bloodSugar
							this.healthData[0].date = res.data[0].creatTime
						} else {
							this.healthData[0].data = ""
							this.healthData[0].date = ""
						}
					},
					rej => {}
				);
			},
			handelHealthRecord(type) {
				if (type == 1) {
					uni.redirectTo({
						url: "./add"
					})
				} else {
					uni.navigateTo({
						url: "./add"
					})
				}
			},
			handleEditHealth(item,type) {
				// type 1:修改健康史相关 2：修改生活习惯
				if(type == 2) {
					uni.navigateTo({
						url: "./add?formType="+item.type
					})
				} else {
					uni.navigateTo({
						url: "./edit?id="+this.recordInfo.id + "&formType="+item.type
					})
				}
			},
			handleEdit(type) {
				if (type == "height") {
					this.title = "身高"
					this.placeholder = "请输入身高"
					this.inputValue = this.recordInfo.height || undefined
				} else if (type == "weight") {
					this.title = "体重"
					this.placeholder = "请输入体重"
					this.inputValue = this.recordInfo.weight || undefined
				}
				this.$refs.popup.open("center")
			},
			close() {
				this.$refs.popup.close()
			},
			// 修改身高/体重
			handleSubmit() {
				if(this.title == "身高") {
					// 判断字符串为正整数
					const reg = /^[1-9]\d*$/
					if(!reg.test(this.inputValue)) {
						uni.showToast({
							title: "请输入正确的身高",
							icon: "none"
						})
						return
					}
				}
				if(this.title == "体重") {
					// 判断字符串为数字且保留一位小数
					const reg = /^\d+(\.\d{1})?$/
					if(!reg.test(this.inputValue) || this.inputValue == 0) {
						uni.showToast({
							title: "请输入正确的体重",
							icon: "none"
						})
						return
					}
				}
				const param = {
					id: Number(this.recordInfo.id || 0),
					weight: this.title == "体重" ? this.inputValue : undefined, 
					height: this.title == "身高" ? this.inputValue : undefined,
				};
				
				editRecord(param).then(res => {
					this.btnLoading = false
						if (res.code == 200) {
							this.recordInfo.weight = this.title == "体重" ? this.inputValue : this.recordInfo.weight
							this.recordInfo.height = this.title == "身高" ? this.inputValue : this.recordInfo.height
							this.getBmi()
							this.close()
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					},
					rej => {}
				)
			},
			clearInput(event) {
				this.inputValue = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearIcon() {
				this.inputValue = '';
				this.showClearIcon = false;
			},
			doShare() {
				this.shareItem.title= "健康档案";
				this.shareItem.imageUrl='https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png';
				this.shareItem.compressImage = 1
				this.shareItem.isMini=true;
				this.shareItem.path='/pages_user/healthRecords/index'
				let cdn=uni.getStorageSync('h5Path');
				this.shareItem.url=cdn+'/pages/user/healthRecords/index'
				this.showShare=true;
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.shareicon {
		height: 40rpx;
		width: 40rpx;
	}
	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		.uni-nav-bar_bg {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	
	.nav-bar{
		.grace-page-header {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 98;
			border-bottom: 0px solid #FFFFFF;
			.grace-page-status-bar {
				width: 100%;
				height: var(--status-bar-height);
			}
			.grace-page-header-nav {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
			}
		}
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			line-height: 44rpx;
		}
		.content-header {
			height: 80rpx;
			padding: 0 24rpx;
			@include u-flex(row, center, space-between);
			&-l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				@include u-flex(row, center, flex-start);
				.address {
					width: 20rpx;
					height: 30rpx;
					margin-right: 6rpx;
				}
			}
			&-title{
				display: flex;
				flex: 1;
			    justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-weight: 444;
				color: #fff;
			}
		}
	    
		.nav_box{
			width: 100%;
			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}
			.nav_bar {
				height: 44px;
				width: 100%;
			}
		}
	
	}
	
	
	.container {
		position: relative;
		.jkda_top_bg {
			position: absolute;
			top:0;
		    /* #ifdef H5 */
			top:-20px ;
			/* #endif */
			left: 0;
			
			width: 100%;
			height: auto;
		}

		&-body {
			position: relative;
			padding: 32rpx 24rpx;
			// #ifndef H5
			padding-top: calc(32rpx);
			// #endif
			// #ifdef H5
			padding-top: calc(var(--status-bar-height) + 60rpx);
			// #endif
			padding-bottom: calc(var(--window-bottom) + 170rpx);
		}
	}

	.popbox {
		background-color: #fff;
		width: 630rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;

		&-title {
			font-size: 34rpx;
			color: #333333;
			text-align: center;
		}

		.uni-input-wrapper {
			width: 100%;
			height: 78rpx;
			margin-top: 36rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #ECECEC;
			padding: 0 24rpx;
			@include u-flex(row, center, space-between);
			.uni-icon {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		&-footer {
			margin-top: 40rpx;
			@include u-flex(row, center, space-between);
			&-btn {
				width: 248rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
				font-size: 32rpx;
				vertical-align: middle;
				&::after {
					border: none;
				}
			}
			.cancel {
				background: #F4F4F4;
				color: #757575;
			}

			.confirm {
				background: #FF5C03;
				color: #FFFFFF;
			}
		}
	}

	.userbox {
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		@include u-flex(row, center, space-between);
		&-headimg {
			flex-shrink: 0;
			width: 140rpx;
			height: 140rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
		}

		&-left {
			flex-shrink: 0;
			flex: 1;
			@include u-flex(row, center, flex-start);
		}

		&-info {
			margin-left: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			&-tag {
				margin-top: 30rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF5C03;
				@include u-flex(row, center, flex-start);
				view {
					min-width: 62rpx;
					height: 42rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					background: #FCF0E7;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					text-align: center;
					line-height: 42rpx;
					margin-right: 14rpx;
				}
			}
		}

		&-right {
			margin-left: 24rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.box-title {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		margin: 20rpx 0;
		@include u-flex(row, center, space-between);
		&-right {
			flex-shrink: 0;
			min-width: 240rpx;
			height: 64rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-size: 24rpx;
			color: #FF5C03;
			@include u-flex(row, center, center);

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	.cardbox {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		gap: 16rpx 14rpx;

		&-item {
			width: 344rpx;
			height: 264rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 24rpx 24rpx 24rpx 24rpx;
			box-sizing: border-box;
			overflow: hidden;
		}
		.bmibox-tagbox {
			min-width: 72rpx;
			height: 40rpx;
		}
		.bmibox {
			&-tag {
				min-width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				padding: 0 12rpx;
				box-sizing: border-box;
				display: inline-block;
				background: #FCF0E7;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF5C03;
			}

			&-info {
				@include u-flex(row, center, flex-start);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			&-infolabel {
				min-width: 48rpx;
				flex-shrink: 0;
			}

			&-infoval {
				flex: 1;
				padding: 0 12rpx;
				text-align: center;
				font-weight: 500;
				color: #222222;
			}

			&-edit {
				width: 32rpx;
				height: 32rpx;
				flex-shrink: 0;
			}
		}

		&-maintitle {
			margin-bottom: 4rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		&-title {
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;

			image {
				width: 72rpx;
				height: 72rpx;
				flex-shrink: 0;
			}
		}

		.resnum {
			font-family: DIN, DIN;
			font-weight: 500;
			font-size: 64rpx;
		}

		&-res {
			height: 78rpx;
			margin: 20rpx 0 6rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 48rpx;
			color: #333333;
		}

		&-time {
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}
	}

	.health-item {
		width: 343rpx;
		height: 224rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
		position: relative;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.health-item-info {
		position: relative;
	}

	.health-bgicon {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 168rpx;
		height: 168rpx;
	}

	.text-overflow {
		word-break:break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.footer {
		width: 100%;
		height: 152rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(114, 114, 114, 0.1);
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;

		&-btn {
			height: 112rpx;
			background: #FF5C03;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 112rpx;
			text-align: center;
		}
	}
</style>