front/pages/information/girl_height/girl_height.vue

<template>
<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 {
		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 >
.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>