yichael_ningge/pages/home/home.vue

<template>
	<view class="container">
		<view class="navigation-bar">燃脂功能训练帮手</view>
		<view class="block">
			<view class="item" style="background-color: rgb(255,61,104);" @click="onClick(0, $event)">基础代谢率</view>
			<view class="item" style="background-color: rgb(250,157,153);" @click="onClick(1, $event)">每天消耗总热量</view>	
		</view>
		<view class="block">
			<view class="item" style="background-color: rgb(250,204,177);" @click="onClick(2, $event)">有氧运动心律</view>
			<view class="item" style="background-color: rgb(201,199,171);" @click="onClick(3, $event)">体脂率</view>	
		</view>
		<!-- <view class="block">
			<view class="item" style="background-color: rgb(132,175,155);" @click="onClick(4, $event)">E</view>
			<view class="item" style="background-color: rgb(46,32,52);" @click="onClick(5, $event)">F</view>	
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// block-color:
			}
		},
		onLoad() {
	
		},
		methods: {
			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;
		
		height: 100%; 
		width:100%;
		
		// 测试
		// 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: 15%;
		
		font-weight: 700;
		color: white;
		
		background-color: rgb(115,164,164);
	}
	
	.block{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
		width:100%;
		height: 100%;
		
		// 测试
		// margin: 10rpx;
		// border: 3px solid rgb(144,238,144);
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: center;
		
		height: 100%;
		width: 100%;

		color: white;
		// 测试
		// 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>