CarRental_back/page_Operator/order.vue

<template>
	<view class="page">
		<u-navbar :is-back="false" title="订单管理" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' height='45'></u-navbar>
			<view class="top">
				<view class="top_box">
					<view class="left_text">
						时间范围
					</view>
					<view class="timebox">
						<view class="left_time" @click="time1=true">
							{{firsTime}}
						</view>
						-
						<view class="right_time" @click="time2=true">
							{{lasTime}}
						</view>
					</view>
				</view>
			
				<view class="top_box" style="margin-top: 20rpx;">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/u9UrXmvCyDk2IGqEWGvw" mode="" style="width: 44rpx;height: 44rpx;margin-right: 22rpx;"></image>
					<view class="sear_ipt">
						<input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
							placeholder-style="color:#C7CDD3" @input="search()">
					</view>
				</view>
				<view class="tab_box">
					<view class="tab_li act1">
						待确认
						<view class="line " ></view>
					</view>
					<view class="tab_li">
						待接单
						<view class="line"></view>
					</view>
					<view class="tab_li">
						待配送
						<view class="line"></view>
					</view>
				</view>
			</view>
			<view class="order_cont">
				<view class="order_card">
					<view class="order_li">
						<view class="txt">
							全新车网红泡泡
						</view>
						<view class="txt1">
							待还车
						</view>
					</view>
					<view class="order_li">
						<view class="txt2">
							门店：云行租车（汇丰公寓）
						</view>
						
					</view>
					<view class="order_li">
						<view class="txt2">
							用户：李某某 159****2697
						</view>
						<view class="type">
							联系用户
						</view>
					</view>
					<view class="line"></view>
					<view class="order_li">
						<view class="txt2">
							还车时间：2024-09-11 13:56
						</view>
						<view class="txt3">
							11小时11分
						</view>
					</view>
					<view class="order_li">
						<view class="txt2">
							换车方式：未完成
						</view>
						
					</view>
					<view class="order_li">
						<view class="txt2">
							取车地址：福鼎市太姥山镇秦屿大道2号
						</view>
						
					</view>
					<view class="order_li">
						<view class="price">
							118.8元
						</view>
						<view class="btn">
							确认还车
						</view>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lasTime: '',
				firsTime: '',
				bgc: {
					backgroundColor: "#fff",
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7FAFE;
	}
	.page{
		.order_cont{
			.order_card{
				margin: 0 auto;
				margin-top: 18rpx;
				width: 714rpx;
				padding: 32rpx 24rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.line{
					margin-top: 22rpx;
					width: 100%;
					background:  #D8D8D8;
					height: 1rpx;
				}
				.order_li{
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price{
						font-weight: 600;
						font-size: 32rpx;
						color: #FF1C1C;
					}
					.btn{
						display: flex;
						align-items: center;
						justify-content: center;
						
						width: 334rpx;
						height: 58rpx;
						background: #4297F3;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						
						border: 2rpx solid #4297F3;
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
					}
					.txt3{
						 font-weight: 400;
						 font-size: 26rpx;
						 color: #4297F3;
					}
					.txt{
						font-weight: 600;
						font-size: 30rpx;
						color: #3D3D3D;
					}
					.txt1{
						font-weight: 400;
						font-size: 30rpx;
						color: #FF8C1E;
					}
					.txt2{
						font-weight: 400;
						font-size: 26rpx;
						color: #3D3D3D;
					}
					.type{
						padding: 6rpx 12rpx;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						border: 1rpx solid #4297F3;
						font-weight: 400;
						font-size: 24rpx;
						color: #4297F3;
					}
				}
			}
		}
		.top{
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			background: #FFFFFF;
			.tab_box{
				display: flex;
				flex-wrap: nowrap;
				margin-top: 48rpx;
				padding: 0 38rpx;
				
				.tab_li{
					margin-right: 32rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					width: 100rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #3B3838;
					.line{
						margin-top: 12rpx;
						width: 66rpx;
						height: 6rpx;
						background: #fff;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
					}
				}
				.act1{
					color: #4297F3;
					.line{
						background: #4297F3;
					}
				}
			}
			.top_box {
			
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				padding: 28rpx 30rpx;
				// padding: 20rpx 0;
			
				margin: 0 auto;
				width: 672rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			
				.left_text {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					width: 25%;
					font-weight: 400;
					font-size: 32rpx;
					color: #3D3D3D;
			
					.icon-xiangxia1 {
						font-size: 26rpx;
					}
				}
			
				.timebox {
					width: 75%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: 34rpx;
			
					.left_time {
						text-align: center;
						margin-right: 6rpx;
						height: 50rpx;
						width: 45%;
						border: 2rpx solid #ccc;
						border-radius: 12rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #979797;
					}
			
					.right_time {
						text-align: center;
						margin-left: 6rpx;
						height: 50rpx;
						width: 45%;
						border: 2rpx solid #ccc;
						border-radius: 12rpx;
						font-weight: 400;
						font-size: 32rpx;
						color: #979797;
					}
				}
			}
			
			
		}
	
	}
</style>