完成女生体重页面和身高页面

pages/information/girl_height/girl_height.vue

@@ -1,17 +1,178 @@
 <template>
-  <view>
+<view class="main">
+	<view class="header">
+		<image class="imgage" src="../../../static/pros.png"></image>
+	</view>
+	<view class="img">
+		<image class="imgs" src="../../../static/Group1.png"></image>
+	</view>
+	<view class="bottom">
+		你当前的身高是？
+	</view>
+	<view class="kg">
+			{{modelChange}}cm
+	</view>
+	
+</view>
+<view class="buttons">
+		<button @click="show">下一步</button>
+	</view>
+	<view class="mask" v-if="isShow">
+		<view class="tz">
+			你当前的身高是{{modelChange}}cm
+		</view>
+		<view class="picker" >
+		<picker-view  @change="getChange" class="picker-view" 
+		:mask-bottom-style="bottomStyle"
+		:mask-top-style="topStyle"
+		 >
+			<picker-view-column style="background-color: transparent;">
+				<view class="pickers" v-for="item in weightRange" :key="item">
+					{{item}}
+				</view>
+			</picker-view-column>
 			
+		</picker-view>
+		</view>
+		<view class="button">
+				<button @click="change">选择身高</button>
+			</view>
 	</view>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+		weightRange:[160,165,170,175,178,180,183,185,188,190,195,199],
+		modelChange:180,
+		count:'',
+		isShow:false,
+		bottomStyle:`background:transparent`,
+		topStyle:'background:transparent'
+    };
+  },
+  methods:{
+	  show(){
+		  this.isShow  =true
+	  },
+	   getChange(e){
+	   		this.count	= e.detail.value;
+	   },
+	   change(){
+		 this.modelChange = this.weightRange[this.count]
+		 this.isShow = false
+	   }
   }
 }
 </script>
 
-<style lang="scss">
+<style >
+.main{
+	width: 100%;
+	height: 700px;
+	border: 1px solid;
+	background-color: #94A9FE;
+}
+.header{
+	width: 80%;
+	height: 60px;
+	margin: 20px auto;
+}
+.img{
+	width: 80%;
+	height: 300px;
+	margin: auto;
+}
+.imgs{
+	width: 50%;
+	height: 90%;
+	margin-left: 25%;
+	margin-top: 5%;
+	animation: move 1s ease-in-out;
+}
+@keyframes move{
+	0%{
+		transform: translateX(300px);
+	}
+	100%{
+		transform: translateX(0);
+	}
+}
+.imgage{
+	width: 100%;
+	height: 100%;
+}
+.bottom{
+	width: 80%;
+	height: 30px;
+	font-size: 35px;
+	margin:30px auto;
+	text-align: center;
+}
+.kg{
+	width: 80%;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+	margin:50px auto;
+	font-size: 20px;
+	background-color: #86A2EF;
+	border-top:2px solid #4F7CEC;
+	border-bottom: 2px solid #4F7CEC;
+}
+.buttons{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:70px auto;
+	z-index: 1;
+	
+}
+button{
+	border-radius: 20px;
+	color:white;
+	background-color: #94ABFD;
+}
+
+.mask{
+	width: 100%;
+	height: 1000px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-color: #96A7E6;
 	
+}
+.tz{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:20px auto;
+	text-align: center;
+	font-size: 30px;
+}
+
+.button{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:70px auto;
+	z-index: 2;
+	
+}
+.picker{
+	width: 80%;
+	height: 300px;
+	margin: auto;
+	text-align: center;
+	z-index: 2;
+}
+.picker-view{
+	width: 100%;
+	height: 300px;
+}
+.pickers{
+	text-align: center;
+}
 </style>

pages/information/gril_weight/gril_weight.vue

@@ -1,17 +1,179 @@
+
 <template>
-  <view>
+<view class="main">
+	<view class="header">
+		<image class="imgage" src="../../../static/pro.png"></image>
+	</view>
+	<view class="img">
+		<image class="imgs" src="../../../static/Group.png"></image>
+	</view>
+	<view class="bottom">
+		你当前的体重是？
+	</view>
+	<view class="kg">
+			{{modelChange}}kg
+	</view>
+	
+</view>
+<view class="buttons">
+		<button @click="show">下一步</button>
+	</view>
+	<view class="mask" v-if="isShow">
+		<view class="tz">
+			你当前的体重是{{modelChange}}kg
+		</view>
+		<view class="picker" >
+		<picker-view  @change="getChange"  class="picker-view" mask-top-style="background-image: linear-gradient(to bottom,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))"
+ mask-bottom-style="background-image: linear-gradient(to top,rgba(17, 17, 17, 0.9),rgba(17, 17, 17, 0.5))">
+			<picker-view-column >
+				<view class="pickers" v-for="item in weightRange" :key="item">
+					{{item}}
+				</view>
+			</picker-view-column>
 			
+		</picker-view>
+		</view>
+		<view class="button">
+				<button @click="change">选择体重</button>
+			</view>
 	</view>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+		weightRange:[50,51,52,53,54,55,56,57,58,59,60,70],
+		modelChange:55,
+		count:'',
+		isShow:false,
+		style:' #94A9FE	'
+    };
+  },
+  methods:{
+	  show(){
+		  this.isShow  =true
+	  },
+	   getChange(e){
+	   		this.count	= e.detail.value;
+	   },
+	   change(){
+		 this.modelChange = this.weightRange[this.count]
+		 this.isShow = false
+		 uni.navigateTo({
+		 	url:'/pages/information/girl_height/girl_height'
+		 })
+	   }
   }
 }
 </script>
 
-<style lang="scss">
+<style >
+.main{
+	width: 100%;
+	height: 700px;
+	border: 1px solid;
+	background-color: #94A9FE;
+}
+.header{
+	width: 80%;
+	height: 60px;
+	margin: 20px auto;
+}
+.img{
+	width: 80%;
+	height: 300px;
+	margin: auto;
+}
+.imgs{
+	width: 30%;
+	height: 90%;
+	margin-left: 33%;
+	margin-top: 5%;
+	animation: move 1s ease-in-out;
+}
+@keyframes move{
+	0%{
+		transform: translateX(300px);
+	}
+	100%{
+		transform: translateX(0);
+	}
+}
+
+.imgage{
+	width: 100%;
+	height: 100%;
+}
+.bottom{
+	width: 80%;
+	height: 30px;
+	font-size: 35px;
+	margin:30px auto;
+	text-align: center;
+}
+.kg{
+	width: 80%;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+	margin:50px auto;
+	font-size: 20px;
+	background-color: #86A2EF;
+	border-top:2px solid #4F7CEC;
+	border-bottom: 2px solid #4F7CEC;
+}
+.buttons{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:70px auto;
+	z-index: 1;
+	
+}
+button{
+	border-radius: 20px;
+	color:white;
+	background-color: #94ABFD;
+}
 
+.mask{
+	width: 100%;
+	height: 1000px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-color: #96A7E6;
+}
+.tz{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:20px auto;
+	text-align: center;
+	font-size: 30px;
+}
+
+.button{
+	width: 80%;
+	height: 30px;
+	line-height: 30px;
+	margin:70px auto;
+	z-index: 2;
+	
+}
+.picker{
+	width: 80%;
+	height: 300px;
+	margin: auto;
+	text-align: center;
+	z-index: 2;
+}
+.picker-view{
+	width: 100%;
+	height: 300px;
+}
+.pickers{
+	text-align: center;
+}
 </style>