bike/pages_admin/worke/woke_deviceMgmt.vue

<template>
	<view class="page">
		<u-navbar title="设备管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='36'></u-navbar>
		<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>
		<view class="stause_box">
			<view class="stause_li">
				设备状态 <view class="iconfont icon-xiangxia1"></view>
			</view>
			<view class="stause_li" style="margin-left: 30rpx;">
				电量排序 <view class="iconfont icon-xiangxia1"></view>
			</view>
		</view>
		<template>
			<view class="info_card" style="margin-top: 20rpx;">
				<view class="info_tit">
					<view class="tit_left">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN" mode=""></image>
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS" mode=""></image>
						车牌号：U-00122323
					</view>
					<view class="tit_right">
						<view class="yuan"></view>
						待租
					</view>
				</view>
				<view class="lines"></view>
				<view class="cont">
				
				
					<view class="info_li">
						<view class="half_infoli">
							支付金额：<span>￥0.00</span>
						</view>
						<view class="half_infoli">
							已退款：<span>￥0.00</span>
						</view>
					</view>
					<view class="info_li">
						<view class="half_infoli">
							手续费：<span>￥0.00</span>
						</view>
						<view class="half_infoli">
							收入：<span style="color:#4C97E7 ;">￥0.00</span>
						</view>
					</view>
				</view>
			</view>
				
		</template>
		<view class="bot_box">
			<view class="step1" v-if="stepindex ==1">
				<view class="step1_left">
					设备总数：<span>10</span>
				</view>
				<view class="right_box">
					批量操作
				</view>
			</view>
			<view class="step2">
				<view class="top">
					<view class="top_left">
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN" mode=""></image>
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS" mode=""></image>
						全选
					</view>
					<view class="top_right">
						已选设备：1
					</view>
				</view>
				<view class="bot_btn">
					<view class="btn">
						取消
					</view>
				<!-- 	<view class="btn">
						返仓
					</view> -->
					<view class="btn">
						车辆禁用
					</view>
					<view class="btn">
						车辆解禁
					</view>
				
					
				</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	page {
		background-color: #F6F6F6 ;
	}

	.page {
		width: 750rpx;
		.info_card {
			background: #FFFFFF;
		
			.info_tit {
				display: flex;
				flex-wrap: nowrap;
				padding: 22rpx 28rpx;
				
				.tit_left{
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
					image{
						width: 46rpx;
						height: 46rpx;
					}
				}
				.tit_right{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: auto;
					font-weight: 400;
					font-size: 28rpx;
					color: #4C97E7;
					.yuan{
						margin-right: 12rpx;
						margin-top: 6rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background: #4C97E7;
					}
				}
			}
		
			.lines {
				width: 750rpx;
				height: 2rpx;
				border: 2rpx solid #ccc;
			}
		
			.cont {
				padding: 26rpx 28rpx;
		
				.info_li {
					display: flex;
					flex-wrap: nowrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
		
					span {
						color: #3D3D3D;
					}
		
					line-height: 48rpx;
		
					.half_infoli {
							display: flex;
							flex-wrap: nowrap;
						width: 50%;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
		
						span {
							color: #3D3D3D;
						}
						.input{
							width: 30%;
						}
					}
				}
			}
		}
		.bot_box{
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 232rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
			.step2{
				padding:42rpx 32rpx ;
				display: flex;
				flex-wrap: wrap;
				// align-items: center;
				// flex-wrap: nowrap;
				width: 100%;
				height: 100%;
				.top{
					width: 100%;
					display: flex;
					.top_left{
						display: flex;
						flex-wrap: nowrap;
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;
						image{
							width: 46rpx;
							height: 46rpx;
						}
					}
					
					.top_right{
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-left: auto;
					}
				}
				.bot_btn{
					
					display: flex;
					flex-wrap: wrap;
					
					width: 750rpx;
					
					background: #fff;
					// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
					
					.btn:nth-child(4n) {
					    margin-right: 0;
					}
					.btn{
						margin-right: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 164rpx;
						height: 66rpx;
						background: #E2F2FF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #4C97E7;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}
			.step1{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				width: 100%;
				height: 100%;
				.step1_left{
					font-weight: 400;
					font-size: 36rpx;
					color: #3D3D3D;
					span{
						color: #4C97E7;
					}
				}
				.right_box{
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 244rpx;
					height: 66rpx;
					background: #4C97E7;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #4C97E7;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		.stause_box{
			background: #fff;
			padding: 44rpx 30rpx;
			display: flex;
			flex-wrap: nowrap;
			.stause_li{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;
				.icon-xiangxia1{
					margin-left: 6rpx;
					font-size: 20rpx;
				}
			}
		}
		.tap{
			padding-top: 24rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			background: #fff;
			.tap_cont{
				text-align: center;
				padding-bottom: 15rpx;
				width: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				border-bottom: 6rpx solid #fff ;
			}
			.act1{
				border-bottom: 6rpx solid #4C97E7 ;
				color: #4C97E7;
			}
		}
	}
</style>