JP-Equipment-Jingli/pages/projectDepartment/exportApplication/exportApplication.vue

<template>
	<view>
		<view class="head">
			<u-navbar title="出库申请"></u-navbar>
			<view class="tabs">
				<u-tabs bar-width="80" inactive-color="#777777" active-color="#101010":list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			      <view class="screen" @click="changeShow()">
			      	  筛选<u-icon size="24" name="arrow-down" color="#777777"></u-icon>
			      </view>
				  <view class="options" v-if="this.show==true" @click="changeShow()">
				  	选项3
				  </view>
			</view>
	
		</view>
		<view class="list1" v-if="this.current==0">
			<view class="item" v-for="item in 2">
				<view class="title">
					刘群的出库申请
				</view>
				<view class="group">
					<view class="name">
						申请人：
					</view>
					<view class="value">
						刘群
					</view>
				</view>
				<view class="group">
					<view class="name">
						申请时间：
					</view>
					<view class="value">
					2023/03/15 16:15
					</view>
				</view>
				
			</view>
		</view>
		<view class="list2" v-if="this.current==1" > 
			<view class="item" v-for="item in 2">
				<view class="title">
					刘群的出库申请2
				</view>
				<view class="group">
					<view class="name">
						申请人：
					</view>
					<view class="value">
						刘群
					</view>
				</view>
				<view class="group">
					<view class="name">
						申请时间：
					</view>
					<view class="value">
					2023/03/15 16:15
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="bottom">
			<button>填写出库申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '未审批'
				}, {
					name: '已审批'
				}	
				],
				current: 0,
				show:false
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			changeShow(){
				this.show=!this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100rpx;
		
	}
	.head{
		background: linear-gradient(180deg, rgba(190,211,240,1) 0%,rgba(244,244,246,1) 100%) ;
		height: 590rpx;
		padding: 0 32rpx;
		/deep/.u-navbar{
			background: 0!important;
		}
		/deep/.u-border-bottom:after{
			height: 0;
		}
	}
	.tabs{
		display: flex;
		justify-content: space-between;
		align-items: center;
		/deep/.u-tabs{
			background: 0 !important;
			width: 250rpx;
		}
		/deep/.u-tab-bar{
			background-color: #2A8EFB !important;
		}
		.screen{
			color: #415058;
			position: relative;
			font-family: Microsoft Yahei;
			/deep/.uicon-arrow-down{
				margin-left: 4rpx;
			}
		}
		.options{
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #fff;
			color: rgba(65, 80, 88, 1);
			font-family: Microsoft Yahei;
			position: absolute;
			top: 160rpx;
			right: 24rpx;
			box-shadow:5px 5px 10px gray;
		}
		
	}


 .list1,.list2{
	 padding: 0 32rpx;
	 margin-top: -400rpx;
	 .item{
		 border-radius: 8px;
		 background-color: rgba(255, 255, 255, 1);
		 padding: 32rpx;
		 margin-bottom: 24rpx;
		 .title{
			 color: rgba(51, 51, 51, 1);
			 font-size: 36rpx;
			 margin-bottom: 16rpx;
		 }
		 .group{
			 display: flex;
			 color: rgba(119, 119, 119, 1);
			 margin-top: 16rpx;
			 font-weight: bold;
		 }
	 }
	 
 }

.bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 16rpx 32rpx;
	uni-button{
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(22,119,255,1) 0%,rgba(16,98,213,1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: Microsoft Yahei;
	}
}
</style>