yichael_ninggeassistant/pages/home/home.vue

<template>
 
	<view class="container">
		<view class="navigation-bar">燃脂功能训练帮手</view>
		<view class="back" @click="onBack(0, $event)">
			<image src="/static/backArrow.png" mode="aspectFit" style="width:100%"></image>
		</view>
		<view class="content">
			<view class="row">
				<view class="block" style="background-color: #EBF3F2;">
					<view class="item-bg" style="background-color: #B6D4CF ;">
						<view class="item" style="background-color: #B6D4CF ;" @click="onClick(0, $event)">
							<image class="item-logo" src="/static/home/basalMetabolismLogo.png" mode="aspectFit"></image>
							<view class="item-title" style="color: #4D857C;">基础代谢率</view>
							<image class="item-unlock-logo" src="/static/home/basalMetabolismUnlock.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="label" style="background-color: #D8E8E5  ; color: #4D857C;">基础代谢: {{bmr}}</view>
				</view>
				<view class="block" style="background-color: #FEECEC;">
					<view class="item-bg" style="background-color: #FABAB9;">
						<view class="item" style="background-color: #FABAB9;" @click="onClick(1, $event)">
							<image class="item-logo" src="/static/home/dayCalorieLogo.png" mode="aspectFit"></image>
							<view class="item-title" style="color: #C65E5C;">每天消耗总热量</view>
							<image class="item-unlock-logo" src="/static/home/dayCalorieUnlock.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="label" style="background-color: #FCD9D9 ; color: #C65E5C;">每日消耗总热量: {{calorie}}</view>
				</view>
			</view>
			<view class="row">
				<view class="block" style="background-color: #FCF1EB;">
					<view class="item-bg" style="background-color: #F2CDB7;">
						<view class="item" style="background-color: #F2CDB7;" @click="onClick(2, $event)">
							<image class="item-logo" src="/static/home/heartRhythmsLogo.png" mode="aspectFit"></image>
							<view class="item-title" style="color: #BE7F59;">有氧运动心律</view>
							<image class="item-unlock-logo" src="/static/home/heartRhythmsUnlock.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="label" style="background-color: #F8E3D8; color: #BE7F59;">最低有氧心率:{{lowestHeartRate}}</view>
					<view class="label" style="background-color: #F8E3D8; color: #BE7F59;">最高有氧心率:{{highestHeartRate}}</view>
				</view>
				<view class="block" style="background-color: #F0F0E9;">
					<view class="item-bg" style="background-color: #C9C7AF;">
						<view class="item" style="background-color: #C9C7AF;" @click="onClick(3, $event)">
							<image class="item-logo" src="/static/home/bodyFatRatioLogo.png" mode="aspectFit"></image>
							<view class="item-title" style="color: #7B784E;">体脂率</view>
							<image class="item-unlock-logo" src="/static/home/bodyFatRatioUnlock.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="label" style="background-color: #E2E1D3; color: #7B784E;">脂肪总重量:{{fatWeight}}</view>
					<view class="label" style="background-color: #E2E1D3; color: #7B784E;">体脂率:{{fatRate}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gender:0,
				weight:0,
				high:0,
				age:0,
				waist:0,
				bmr:0,
				calorie:0,
				heartRate:0,
				lowestHeartRate:0,
				highestHeartRate:0,
				fatWeight:0,
				fatRate:0,
			}
		},
		onShow() {
			if(getApp().globalData.bmr != undefined)
			{
				this.bmr = Math.round(getApp().globalData.bmr);
			}
			
			if(getApp().globalData.calorie != undefined)
			{
				this.calorie = Math.round(getApp().globalData.calorie);
			}
			
			if(getApp().globalData.lowestHeartRate != undefined)
			{
				this.lowestHeartRate = Math.round(getApp().globalData.lowestHeartRate);
			}
			if(getApp().globalData.highestHeartRate != undefined)
			{
				this.highestHeartRate = Math.round(getApp().globalData.highestHeartRate);
			}
			
			if(getApp().globalData.fatWeight != undefined)
			{
				this.fatWeight = Math.round(getApp().globalData.fatWeight);
			}
			if(getApp().globalData.fatRate != undefined)
			{
				this.fatRate = Math.round(getApp().globalData.fatRate);
			}
		},
		methods: {
			onBack: function(id,e) {
				//uni.navigateBack()//默认delta:1
				uni.navigateBack({
					delta:1,//返回层数，2则上上页
				})
			},
			onClick: function(id,e) {
				// console.log(id); // 1
				// console.log(e); // 事件对象
		
				switch (id){
					case 0:
					{
						uni.navigateTo({
							url: "/pages/basalMetabolism/basalMetabolism",
						});
					}
						break;
					case 1:
					{
						uni.navigateTo({
							url: "/pages/dayCalorie/dayCalorie",
						});
					}
						break;
					case 2:
					{
						uni.navigateTo({
							url: "/pages/heartRhythms/heartRhythms",
						});
					}
						break;
					case 3:
					{
						uni.navigateTo({
							url: "/pages/bodyFatRatio/bodyFatRatio",
						});
					}
						break;
						
					default:
						break;
				}
			},
		}
	}
</script>

<style lang="scss">

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height: 100vh; 
		
		// 测试
		// border: 1px solid rgb(255,0,0);
		// box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 1);
		// border-bottom: 1px solid #DDDDDD;
	}
	
	.navigation-bar
	{
		display: flex;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height: 6%;
		
		font-weight: 700;
		color: black;
		font-size: 75rpx;
		
		 background-color: white;
		// testing
		// border: 1px solid rgb(255,0,0);
		// background-color: rgb(253,222,157);
	}
	
	.back{
		position: absolute;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		width: 2%;
		height: 2%;
		top: 2.5%;
		left: 3%;
		//testing
		// border: 1px solid rgb(255,0,0);
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height:100%;
		// border: 3px solid rgb(144,238,144);
	}
	
	.row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height: 50%;

		// 测试
		// margin: 10rpx;
		// border: 3px solid rgb(144,238,144);
	}
	
	.block{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height:100%;
	}
	
	.item-bg{
		display: flex;
		align-items: center;
		justify-content: center;
		
		width:90%;
		height:70%;
		margin: 5%;
	}	
	
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		height: 80%;
		width: 80%;
		
		border: 3px solid #FFFFFF;
		// 测试
		// margin: 10rpx;
		// border: 1px solid rgb(0,0,255);
	}
	
	.item-logo
	{
		z-index: 4;
		height: 30%;
		width: 30%;
		// margin: 1%;
	}
	
	.item-title
	{
		font-size: 100rpx;
		font-weight: 700;
		margin: 2%;
	}
	
	.item-unlock-logo
	{
		height: 40%;
		width: 40%;
	}
	
	.label
	{
		display: flex;
		align-items: center;
		justify-content: center;
		
		font-size: 80rpx;
		font-weight: 700;
		
		width:90%;
		height:10%;
		margin: 5%;
		
		// 测试
		// margin: 10rpx;
		// border: 1px solid rgb(0,0,255);
	}
	
	/* 解决⼩程序和app滚动条的问题 */
	/* #ifdef MP-WEIXIN || APP-PLUS */
	::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
	}
	/* #endif */
	/* 解决H5 的问题 */
	/* #ifdef H5 */
	uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
	}
	/* #endif */
</style>