<template>
	<view class="page">
		<u-navbar title="换电工单" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
			<view class="top">
				<view class="search_box">
					
					<view class="search_center">
						<input type="text" class="ips" v-model="code" placeholder="编码/报修单号" placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
					</view>
					<view class="search_right">
						搜索
					</view>
				</view>
				<view class="tap">
					<view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
						全部
					</view>
					<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
						待换电
					</view>
					<view class="tap_cont" :class="curtitidx==2?'act1':''"  @click="changeidx(2)">
						换电中
					</view>
					<view class="tap_cont" :class="curtitidx==3?'act1':''"  @click="changeidx(3)">
						已完成
					</view>
				</view>
			</view>
			<view class="warp_box">
				<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }"  :current='curtitidx' @change="swiperchange" next-margin='-20rpx'>
					<swiper-item>
						<view class="swiper-item ">
							<view class="card">
								<view class="card_top">
									<view class="card_top_left">
										<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
										电单车
									</view>
									<view class="card_top_right">
										2024-03-24 22:28:51
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										报修单号
									</view>
									<view class="cont_info_right">
										2126459452821387
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										设备编号
									</view>
									<view class="cont_info_right">
										DS-21674651
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										剩余电量
									</view>
									<view class="cont_info_right">
										20%
									</view>
								</view>
								<view class="card_bot">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
									嵛山岛芦竹村三沙路68号
									<view class="stause">
										已完成
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item ">
							<view class="card">
								<view class="card_top">
									<view class="card_top_left">
										<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
										电单车
									</view>
									<view class="card_top_right">
										2024-03-24 22:28:51
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										报修单号
									</view>
									<view class="cont_info_right">
										2126459452821387
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										设备编号
									</view>
									<view class="cont_info_right">
										DS-21674651
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										剩余电量
									</view>
									<view class="cont_info_right">
										20%
									</view>
								</view>
								<view class="card_bot">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
									嵛山岛芦竹村三沙路68号
									<view class="stause">
										已完成
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item ">
							<view class="card">
								<view class="card_top">
									<view class="card_top_left">
										<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
										电单车
									</view>
									<view class="card_top_right">
										2024-03-24 22:28:51
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										报修单号
									</view>
									<view class="cont_info_right">
										2126459452821387
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										设备编号
									</view>
									<view class="cont_info_right">
										DS-21674651
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										剩余电量
									</view>
									<view class="cont_info_right">
										20%
									</view>
								</view>
								<view class="card_bot">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
									嵛山岛芦竹村三沙路68号
									<view class="stause">
										已完成
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item ">
							<view class="card">
								<view class="card_top">
									<view class="card_top_left">
										<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
										电单车
									</view>
									<view class="card_top_right">
										2024-03-24 22:28:51
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										报修单号
									</view>
									<view class="cont_info_right">
										2126459452821387
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										设备编号
									</view>
									<view class="cont_info_right">
										DS-21674651
									</view>
								</view>
								<view class="cont_info">
									<view class="cont_info_left">
										剩余电量
									</view>
									<view class="cont_info_right">
										20%
									</view>
								</view>
								<view class="card_bot">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
									嵛山岛芦竹村三沙路68号
									<view class="stause">
										已完成
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				code:'',
				curtitidx:0,
				swiperHeight:408
				 
			}
		},
		methods: {
			changeidx(idx){
				this.curtitidx=idx
			},
			swiperchange(){
				
			}
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #F3F3F3;
}
.page{
	width: 750rpx;
	.top{
		width: 750rpx;
		background: #fff;
		padding-top: 26rpx;
		.tap{
			margin-top: 24rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			
			.tap_cont{
				text-align: center;
				padding-bottom: 15rpx;
				width: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				border-bottom: 6rpx solid #fff ;
			}
			.act1{
				border-bottom: 6rpx solid #4C97E7 ;
				color: #4C97E7;
			}
		}
		.search_box{
			margin:0 auto;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			width: 680rpx;
			height:68rpx ;
			border: 2rpx solid #4C97E7;
			border-radius: 20rpx;
			// .search_left{
			// 	image{
			// 		width: 56rpx;
			// 		height: 56rpx;
			// 	}
			// }
			.search_center{
				margin-left: 40rpx;
				width: 490rpx;
			}
			.search_right{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				width: 112rpx;
				height: 68rpx;
				background: #4C97E7;
				border: 2rpx solid #4C97E7;
				border-radius:0 20rpx 20rpx 0;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	.warp_box{
		.swiper{
			.swiper-item{
				.card{
					margin: 16rpx auto;
					width: 752rpx;
					height: 408rpx;
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					.card_top{
						padding: 32rpx 38rpx 28rpx 38rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.card_top_left{
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							image{
								width: 42rpx;
								height: 42rpx;
								margin-right: 18rpx;
							}
							font-weight: 500;
							font-size: 32rpx;
							color: #3D3D3D;
						}
						.card_top_right{
							margin-left: auto;
							font-weight: 400;
							font-size: 28rpx;
							color: #808080;
						}
					}
					.cont_info{
						margin-left: 38rpx;
						margin-bottom: 28rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.cont_info_left{
							margin-right: 44rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #808080;
						}
						.cont_info_right{
							font-weight: 400;
							font-size: 28rpx;
							color: #3D3D3D;
						}
					}
					.card_bot{
						display: flex;
						align-items: center;
						border-top: 2rpx dashed #D8D8D8;
						height: 102rpx;
						image{
							margin-left: 40rpx;
							margin-right: 18rpx;
							width: 41.66rpx;
							height: 48rpx;
						}
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
						.stause{
							display: flex;align-items: center;
							justify-content: center;
							margin-left: auto;
							margin-right: 38rpx;
							width: 132rpx;
							height: 54rpx;
							background: #979797;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}
}
</style>