jsh_erp_app/pages/check/index.vue

<template>
	<view class="check-page">
		<u-navbar height="40px" title="盘点" bgColor="#fff" autoBack placeholder>
		</u-navbar>
		<view class="container_main">
			<u-sticky :offsetTop="offsetTop" bgColor="#fff">
				<view class="search-box">
					<u-search placeholder="请输入单据编号或名称" shape="square" v-model="searchKey" :showAction="false"></u-search>
				</view>
				<view class="type-box">
					<u-tabs 
						:list="tabList" 
						:inactiveStyle="{color:'#000',fontSize:'24rpx'}"
						:activeStyle="{color:'#000',fontSize:'24rpx'}" 
						lineColor="#0256FF" 
						lineWidth="66rpx" 
						:scrollable="false"
						@click="tabClick"
						>
					</u-tabs>
				</view>
			</u-sticky>
			<view class="content-box">
				<view class="content-box-val">
					<check-item v-for="item in 6" :key="item"></check-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import checkItem from './components/check-item.vue'
	export default{
		components:{
			checkItem
		},
		data() {
			return {
				offsetTop:0,
				tabList: [{
						index: 0,
						name: '全部任务'
					},
					{
						index: 1,
						name: '待盘点'
					},
					{
						index: 2,
						name: '盘点中'
					},
					{
						index: 3,
						name: '已盘点'
					},
					{
						index: 4,
						name: '已取消'
					}
				],
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight;
			this.offsetTop = statusBarHeight + 40
		}
	}
</script>

<style lang="scss" scoped>
	.check-page {
		min-height: 100vh;
		background-color: #F0F6FB;
		.container_main {
			.search-box {
				background-color: rgba(191, 200, 219, 0.2);
				margin: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 8rpx;
			
				::v-deep .u-search__content {
					background-color: transparent !important;
			
					.u-search__content__input {
						background-color: transparent !important;
					}
				}
			
				.scan-icon {
					width: 100rpx;
					height: 100%;
			
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		
			.content-box {
				padding: 24rpx;
				&-val {
					border-radius: 16rpx 16rpx 0 0;
					overflow: hidden;
				}
			}
		}
	}
</style>