front/pages/information/girl_weight/girl_weight.vue

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