将网页版的年度范围改成uni-app移动端的

1.效果图

原来的 

 移动端的

2.移动端相关代码 

<template>
	<view style="height: 100vh;">
		<uni-group>
		    <uni-forms :modelValue="queryParams" :label-width="70">
		    	<uni-forms-item label="年度范围" name="yearStart">
					<picker mode="date" @change="bindDateChange" fields="year">	
					  <view class="uni-input" 
                         :style=" {color:dateStart!=''?'#000000e6':'rgb(161, 161, 161)'}"
                      >
						   {
   
   {dateStart!=""?dateStart:'请选择开始年度'}}
					  </view>						
					</picker>
					<text style="width: 20px;text-align: center;">-</text>
					<picker mode="date" @change="bindDateChangeEnd" fields="year">
						<view class="uni-input" 
                            :style="{color:dateEnd!=''?'#000000e6':'rgb(161, 161, 161)'}"
                        >
							{
   
   {dateEnd!=""?dateEnd:'请选择结束年度'}}
						</view>						
					</picker>
		        </uni-forms-item>
			</uni-forms>
		</uni-group>
	</view>
</template>

<script>
	export default {
		name: 'index',
		components: {
		},
		data() {
			return {
				queryParams: {
					yearStart："",
                    yearEnd：""
				},
				date: '',
				dateStart:'',
				dateEnd:'',
			}
		},
		methods: {
			bindDateChange(e){
				this.dateStart = e.detail.value
				this.queryParams.yearStart = e.detail.value
			},
			bindDateChangeEnd(e){
				this.dateEnd = e.detail.value
				this.queryParams.yearEnd = e.detail.value
			},
		}
	}
</script>