yijianbao_user_uniapp/pages_user/healthRecords/index.vue

<template>
	<view class="container">
	<!-- 	<view class="uni-nav-bar">
			<uni-nav-bar fixed :statusBar="true" :border="false" title="健康档案" color="#fff" backgroundColor="transparent" left-icon="left" @click="$navBack()"></uni-nav-bar>
			<image class="uni-nav-bar_bg" src="@https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/healthRecords/jkda_top_bg.png" mode="widthFix"></image>
		</view> -->
		
		<image class="jkda_top_bg" :src="baseUrl+'/images/healthRecords/jkda_top_bg.png'"  ></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="@https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/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="baseUrl+'/images/healthRecords/edit_add_orange_icon.png'" mode="aspectFill"></image>
					<text>绑定智能设备</text>
				</view> -->
			</view>
			<view class="cardbox">
				<view class="cardbox-item bmibox" style="height:auto;min-height: auto;">
					<view class="cardbox-title x-f">
						<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="baseUrl+'/images/healthRecords//BMI_icon.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="cardbox-item bmibox" style="height:auto;min-height: auto;">
					<view class="bmibox-info">
						<text class="bmibox-infolabel">身高</text>
						<view class="bmibox-infoval">{{recordInfo.height || "--"}}cm</view>
						<image class="bmibox-edit" :src="baseUrl+'/images/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="baseUrl+'/images/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>
		
		<!-- 修改身高体重弹窗 -->
		<u-popup :show="show" @close="close"  >
			<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="baseUrl+'/images/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>
		</u-popup>
		<!-- footer -->
		<view class="footer" >
			<view class="footer-btn" @click="editHealthRecordLife">填写个人健康专属档案</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user';
	import {
		myRecord,
		HealthDataList,
		HealthLife,
		editRecord 
	} from '@/api/healthRecords.js'
	export default {
		data() {
			return {
				show:false,
				baseUrl:uni.getStorageSync('requestPath'),
				opacity: 1,
				hasRecord: true, //是否填过档案
				user: {},
				fat: "",
				recordInfo: {},
				title: "身高",
				placeholder: "请输入身高",
				showClearIcon: false,
				inputValue: '',
				btnLoading: false,
				top:0,
				defaultHeadimg:uni.getStorageSync('requestPath')+"/images/healthRecords/my_heads_icon.png",
				healthData: [{
					title: '血糖',
					desc: '血糖健康监测',
					data: '',
					date: '',
					icon: uni.getStorageSync('requestPath')+"/images/healthRecords/blood_sugar_icon.png",
				}],
				healthRecordsList: [{
					title: '疾病史',
					type: "healthHistory",
					desc: '',
					bgicon: uni.getStorageSync('requestPath')+"/images/healthRecords/jbs_icon.png",
				}, {
					title: '症状史',
					type: "symptomHistory",
					desc: '',
					bgicon: uni.getStorageSync('requestPath')+"/images/healthRecords/zzs_icon.png",
				}, {
					title: '家族史',
					type: "familyHistory",
					desc: '',
					bgicon:uni.getStorageSync('requestPath')+"/images/healthRecords/jzs_icon.png",
				}, {
					title: '用药史',
					type: "drugHistory",
					desc: '',
					bgicon: uni.getStorageSync('requestPath')+"/images/healthRecords/yys_icon.png",
				}, {
					title: '过敏史',
					type: "allergyHistory",
					desc: '',
					bgicon: uni.getStorageSync('requestPath')+"/images/healthRecords/gms_icon.png",
				}],
				livingHabits: [{
					title: '饮食',
					desc: '',
					type: "dietList",
					bgicon:uni.getStorageSync('requestPath')+"/images/healthRecords/ys_icon.png",
				}, {
					title: '睡眠情况',
					desc: '',
					type: "sleepList",
					bgicon:uni.getStorageSync('requestPath')+"/images/healthRecords/smqk_icon.png",
				}, {
					title: '运动',
					desc: '',
					type: "sportList",
					bgicon: uni.getStorageSync('requestPath')+"/images/healthRecords/yd_icon.png",
				}],
			}
		},
		onLoad(option) {
			if(option.isShare!=null){
				this.companyId=option.companyId;
				this.companyUserId=option.companyUserId;
			}
			else{
				this.companyId=uni.getStorageSync('companyId');
				this.companyUserId=uni.getStorageSync('companyUserId');	
			}
			this.baseUrl=uni.getStorageSync('requestPath')
		},
		onShow() {
			this.user = {}
			this.$isLogin().then(
				res => {
					if(res){
						this.getUserInfo();
						
					}
				},
				rej => {}
			);
			 
		},
		onShareAppMessage(res) {
			//禁止二次转发--
			uni.showShareMenu({
				withShareTicket: true
			});
			wx.updateShareMenu({
				isPrivateMessage: true,
				withShareTicket: true,
				success(res) {
					console.log('updateShareMenu: ', res);
				},
				fail() {}
			}); 
			//禁止二次转发--end
			return {
				title: "健康档案",
				imageUrl: 'https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/sharelogo.png',
				path: "/pages_user/healthRecords/index?isShare=1&companyId="+this.companyId+"&companyUserId="+this.companyUserId,
			}
		},
		methods: {
			editHealthRecordLife() {
				uni.navigateTo({
					url: "/pages_user/healthRecords/add?formType=healthLife"
				})
			},
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.user=res.user;
								this.defaultHeadimg=this.user.avatar;
								this.getMyRecord()
								// this.getHealthDataList()
								this.getHealthLife()
								 
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			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 => {}
				)
			},
			// 健康档案
			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.show=true;
			},
			close() {
				console.log(1)
				this.show=false;
				
			},
			// 修改身高/体重
			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;
			},
		}
	}
</script>

<style scoped lang="scss">
	 
	.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: 0;
			}
			.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;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			&-l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: 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;
			}
		}
	}
	
	
	.container {
		position: relative;
		.jkda_top_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
		}

		&-body {
			position: relative;
			padding: 32rpx 24rpx;
			// #ifndef H5
			padding-top: calc(32rpx);
			// #endif
			// #ifdef H5
			padding-top: calc(var(--status-bar-height) + 100rpx);
			// #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;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.uni-icon {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		&-footer {
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			&-btn {
				width: 248rpx;
				height: 84rpx;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-size: 32rpx;
				vertical-align: middle;
				line-height: auto;
				align-items: center;
				text-align: center;
				&::after {
					border: none;
				}
			}
			.cancel {
				background: #F4F4F4;
				color: #757575;
			}

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

	.userbox {
		margin-top: 80rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		&-headimg {
			flex-shrink: 0;
			width: 140rpx;
			height: 140rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
		}

		&-left {
			flex-shrink: 0;
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: 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;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: 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;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: 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;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

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

	.cardbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 16rpx 14rpx;

		&-item {
			width: 344rpx;
			min-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 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: 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 {
			flex-direction: row;
			align-items: center;
			justify-content: 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>