half pages

.gitignore

@@ -0,0 +1 @@
+.vite

App.vue

@@ -14,4 +14,7 @@
 
 <style>
 	/*每个页面公共css */
+	uni-page-body,html,body{  
+	    height: 100%;  
+	} 
 </style>

pages.json

@@ -21,18 +21,45 @@
 		{
 			"path": "pages/home/home",
 			"style": {
-			
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/basalMetabolism/basalMetabolism",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/dayCalorie/dayCalorie",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/heartRhythms/heartRhythms",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/bodyFatRatio/bodyFatRatio",
+			"style": {
+				"navigationStyle": "custom"
 			}
 		}
 	],
 	"globalStyle": {
-		// "navigationBarTextStyle": "black",
-		// "navigationBarTitleText": "uni-app",
-		// "navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8",
-		"app-plus":{
-			"titleNView":false
-		}
+		"navigationStyle": "custom"
+		// "navigationBarTextStyle": "white",
+		// "navigationBarTitleText": "燃脂功能训练",
+		// "navigationBarBackgroundColor": "rgb(115,164,164)",
+		// "backgroundColor": "#F8F8F8",
+		// "scrollIndicator": "none",
+		// "app-plus":{
+		// 	// "titleNView":false
+		// 	"scrollIndicator":"none" //全局 在APP页面都不显示滚动条
+		// }
 	}
 	
 }

pages/basalMetabolism/basalMetabolism.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="container">
+		<view class="navigation-bar">基础代谢率</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+
+<style lang="scss">
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		height: 100%; 
+		width:100%;
+	}
+	
+	.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);
+	}
+
+</style>

pages/bodyFatRatio/bodyFatRatio.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="container">
+		<view class="navigation-bar">体脂率</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+	
+			}
+		},
+		onLoad() {
+	
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		height: 100%; 
+		width:100%;
+	}
+	
+	.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);
+	}
+</style>

pages/dayCalorie/dayCalorie.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="container">
+		<view class="navigation-bar">每天消耗总热量</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+	
+			}
+		},
+		onLoad() {
+	
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		height: 100%; 
+		width:100%;
+	}
+	
+	.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);
+	}
+</style>

pages/heartRhythms/heartRhythms.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="container">
+		<view class="navigation-bar">有氧运动心律</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+	
+			}
+		},
+		onLoad() {
+	
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		height: 100%; 
+		width:100%;
+	}
+	
+	.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);
+	}
+</style>

pages/home/home.vue

@@ -1,6 +1,18 @@
 <template>
-	<view class="content">
-		 111
+	<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>
 
@@ -8,23 +20,135 @@
 	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>
-	.content {
+<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>

pages/logIn/login.vue

@@ -1,6 +1,14 @@
 <template>
-	<view class="content">
-	
+	<view class="container">
+		<view class="navigation-bar">燃脂功能训练帮手</view>
+		<view class="gender">
+			<view class="boy" @click="onClick(0, $event)">
+				<image class="logo" src="/static/logIn/Beard.png" mode="widthFix"></image>
+			</view>
+			<view class="girl" @click="onClick(1, $event)">
+				<image class="logo" src="/static/logIn/Lips.png" mode="widthFix"></image>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -12,21 +20,107 @@
 			}
 		},
 		onLoad() {
-			uni.redirectTo({
-				url: "/pages/home/home",
-			});
+			// uni.redirectTo({
+			// 	url: "/pages/home/home",
+			// });
 		},
 		methods: {
-	
+			onClick: function(id,e) {
+				
+				// uni.setStorageSync('gender', id);
+				
+				uni.navigateTo({
+					url: '/pages/home/home',
+					animationType: 'slide-in-left',
+					/*
+					
+					slide-in-right 右侧
+					slide-in-left 左侧
+					slide-in-top 顶部
+					slide-in-bottom 底部
+					pop-in 新窗体从左侧进入，且老窗体被挤压而出
+					fade-in 新窗体从透明到不透明逐渐显示
+					zoom-out 新窗体从小到大缩放显示
+					zoom-fade-out 新窗体从小到大逐渐放大并且从透明到不透明逐渐显示
+					none 无动画
+					*/
+					animationDuration: 2000,
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+			}
 		}
 	}
 </script>
 
-<style>
-	.content {
+<style lang="scss">
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		height: 100%; 
+		width:100%;
+		
+		// testing
+		// border: 1px solid rgb(0,0,0);
+	}
+	
+	.navigation-bar
+	{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		width:100%;
+		height: 5%;
+		
+		font-weight: 700;
+		color: white;
+		
+		 background-color: black;
+		// testing
+		// border: 1px solid rgb(255,0,0);
+	}
+	.gender{
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		
+		width:100%;
+		height:100%;
+		
+		font-weight: 700;
+		color: black;
+		
+		// border-radius: 25px;
+		// background-color: rgb(253,222,157);
+	}
+	.boy{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		
+		width:50%;
+		height:100%;
+		background-color: rgb(40,90,144);
+		
+		// 测试
+		// margin: 10rpx;
+		// border: 3px solid rgb(144,238,144);
+	}
+	.girl{
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		
+		width:50%;
+		height:100%;
+		background-color: rgb(207,65,70);
 	}
 </style>

pages/register/register.vue

@@ -4,5 +4,5 @@
 <script>
 </script>
 
-<style>
+<style lang="scss">
 </style>