ParkApp/pages/index/staff-temperature/staff-temperature.vue

<template>
	<view class="container">
		<view class="tabs" style="width: 420rpx;margin: 0rpx  auto;padding-top: 20rpx;">
			<scroll-view scroll-x class="nav" >
				<view class="flex text-center">
					<view  style="border: 1rpx solid #59a5f0;padding:15rpx 20rpx;" class="flex-sub" :class="index==subsectionCurrent?'nav-checked':'nav-unchecked'" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
<!-- 		<view class="tabs">
			<scroll-view scroll-x class="nav" style="background-color: #efefef;color: #5b5b5b;">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==subsectionCurrent?'text-checked':''" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="" style="height: 20rpx;"></view>
		</view> -->
		<view style="height: 100%;">
			<swiper style="height: 100%;" :current="subsectionCurrent"  @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view  @click="goDetail(item)" class="mine_order_statue" >
							<view class="flex justify-between" style="padding: 10rpx 0 10rpx 10rpx ;">
								<view class="flex">
									<image  src="http://139.9.103.171:1888/miniofile/xlyq/del/cewen1.jpg"  ></image>
									<view  class="flex flex-direction justify-around padding-left-30">
										<view class="">
											<text class="text-bold">姓名：</text>
											<text>李德希</text>
										</view>
										<view class="">
											<text class="text-bold">温度：</text>
											<text>36.2 ℃ </text>
										</view>
										<view class="">
											<text class="text-bold">测温时间：</text>
											<text>2020-12-15 14:18:56</text>
										</view>
									</view>
								</view>
								<view class="flex align-center justify-center">
									<text class="cuIcon-right"></text>
								</view>
							</view>
						</view>
						<view  @click="goDetail(item)" class="mine_order_statue" >
							<view class="flex justify-between" style="padding: 10rpx 0 10rpx 10rpx ;">
								<view class="flex">
									<image  src="http://139.9.103.171:1888/miniofile/xlyq/del/cewen2.jpg"  ></image>
									<view  class="flex flex-direction justify-around padding-left-30">
										<view class="">
											<text class="text-bold">姓名：</text>
											<text>李德希</text>
										</view>
										<view class="">
											<text class="text-bold">温度：</text>
											<text>37.5 ℃ </text>
											<text class="text-red">【异常】</text>
										</view>
										<view class="">
											<text class="text-bold">测温时间：</text>
											<text>2020-12-17 14:18:56</text>
										</view>
									</view>
								</view>
								<view class="flex align-center justify-center">
									<text class="cuIcon-right"></text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view  @click="goDetail(item)" class="mine_order_statue" >
							<view class="flex justify-between" style="padding: 10rpx 0 10rpx 10rpx ;">
								<view class="flex">
									<image  src="http://139.9.103.171:1888/miniofile/xlyq/del/cewen1.jpg"  ></image>
									<view  class="flex flex-direction justify-around padding-left-30">
										<view class="">
											<text class="text-bold">姓名：</text>
											<text>李德希</text>
										</view>
										<view class="">
											<text class="text-bold">温度：</text>
											<text>37.5 ℃ </text>
											<text class="text-red">【异常】</text>
										</view>
										<view class="">
											<text class="text-bold">测温时间：</text>
											<text>2020-12-17 14:18:56</text>
										</view>
									</view>
								</view>
								<view class="flex align-center justify-center">
									<text class="cuIcon-right"></text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				subsectionCurrent:0,
				swiperCurrent:0,
				subsectionList:[
					{
						name: '全部记录'
					},
					{
						name: '异常记录'
					}
				]
				
			}
		},
		methods: {
			goDetail(item){
				uni.navigateTo({
					url:"/pages/index/staff-temperature/detail"
				})
			},
			subsectionChange(index){
				this.subsectionCurrent=index
			},
			swiperChange(e) {
			  uni.pageScrollTo({
			      scrollTop: 0,
			      duration: 0
			  });
			  this.subsectionCurrent = e.detail.current
			},
			animationfinish({detail: { current }}) {
				this.swiperCurrent = current;
				this.subsectionCurrent = current;
			},
		}
	}
</script>

<style lang="scss">
	.container {
		  height: calc(100vh);
		  background-color: #F6F6F6;
		  padding: 90rpx 0rpx 0rpx;
		 .tabs {
			 height: 90rpx;
		    position: fixed;
		    top: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 3;
		  }
	}
	
	.nav-checked{
		background-color: #59a5f0;
		color: #FFFFFF;
		font-weight: 800;
	}
	
	.nav-unchecked{
		background-color: #FFFFFF;
		color: #59a5f0;
	}
	
	.text-checked{
		font-weight: 800;
		background-color: #FFFFFF;
		color: #2f7ff5;
		font-size: 800;
	}
	
	view{
		box-sizing: border-box;
	}
	.scroll-view {
		height: 150rpx;
		white-space: nowrap;
		width: 100%;
		position: relative;
		top: -30rpx;
	}
	.scroll-view-item {
		color: #FFFFFF;
		background-image: linear-gradient(to right, #2f7ff5, #2f7ff5);
		display: inline-block;
		text-align: left;
		padding: 20rpx 40rpx;
		margin:0 8rpx;
		width:24%;
		border-radius: 12rpx;
	}
	.scroll-view-item:first-child{
		margin-left: 30rpx;
	}
	.scroll-view-item:last-child{
		margin-right: 30rpx;
	}
.mine_order_statue {
	margin: 18upx 14upx 0;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 20rpx;
	image{
		background-color: #FFFFFF;
		width: 160rpx;
		height: 160rpx;
	}
}
</style>