property/user_ui/mine/pages/car/charge.vue

<template>
	<view class="charge">
		<view class="flex1">
			<view class="chabox">
				<view class="chatop mb38 flexcj">
					<view class="tit flex0 mr12">7号充电桩</view>
					<view class="txt">设备编号：400569856561B</view>
				</view>
				<view class="cimgs mb18">
					<image :src="carc"></image>
					<view class="flexcc mt5"><text class="cir"></text>正在充电中…</view>
				</view>
				<view class="chamain mb20">
					<view class="flexc mb30">
						<view class="chaml flexcc w50">
							<image :src="chara"></image>
							<view>
								<view class="f12 mb4">充电时长</view>
								<view class="f18">00 : 31 : 05</view>
							</view>
						</view>
						<view class="chaml flexcc w50">
							<image :src="charb"></image>
							<view>
								<view class="f12 mb4">已充电量度</view>
								<view class="f12"><text class="f18">33.12</text> 度</view>
							</view>
						</view>
					</view>
					<view class="chamc flexcc">
						<view>电量 30.3A</view>
						<view>电压 220V</view>
						<view>功率 15KW</view>
					</view>
				</view>
				
				<view class="rhbtn">停止充电</view>
			</view>
			<view class="chabox chalist">
				<view class="tit mb14">最近充电</view>
				<view class="flexc">
					<view class="flex1">11月10日 23:17:51</view>
					<view class="flex0">46.32度</view>
					<image :src="rimg"></image>
				</view>
			</view>
			
		</view>
		<view class="charftit flexcc">客服电话 <text class="co025 ml2">400-400-1234</text></view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{},
		data(){
			return{
				carc:require('@/mine/static/house/carc.png'),
				chara:require('@/mine/static/house/chara.png'),
				charb:require('@/mine/static/house/charb.png'),
				rimg:require('@/mine/static/house/rimg.png'),
				list:[],
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
			}
		},
		onLoad: function() {
		
		},
		methods:{
			checkPermi, checkRole,
			// getNextFn(){
			// 	this.$tab.navigateTo("/work/pages/business/add")
			// },
			getDataFn(){
				var params={
					pageSize:this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType=this.tabidx
				getNoticeList(params).then(res=>{
					if(res.code==200){
						
					}else{
						this.$toast(res.msg)
					}
				})
				
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.charge{padding: 20rpx 24rpx 100rpx;display: flex;flex-direction: column;min-height: 100vh;
	.charftit{font-weight: 500;flex: 0 0 auto;font-size: 24rpx;color: #AAAAAA;}
	.chabox{background: #FFFFFF;margin-bottom: 60rpx;border-radius: 20rpx;padding: 34rpx 24rpx 40rpx;
		.chatop{
			.tit{font-weight: bold;font-size: 30rpx;color: #272727;}
			.txt{font-weight: 500;font-size: 26rpx;color: #666666;}
		}
		.cimgs{
			image{width: 506rpx;height: 200rpx;margin: 0 auto;}
			view{font-weight: bold;font-size: 26rpx;color: #272727;
				.cir{display: inline-block;width: 14rpx;height: 14rpx;margin-right: 16rpx;background: #0AC86E;border-radius: 50%;}
			}
		}
		.chamain{background: #EFF4FF;border-radius: 20rpx;
			padding: 48rpx 20rpx 20rpx;
			.chaml{
				image{width: 30rpx;height: 30rpx;margin-right: 20rpx;flex: 0 0 auto;}
				view{font-weight: bold;color: #272727;}	
			}
			.chamc{
				view{font-weight: 500;font-size: 26rpx;color: #949494;padding: 0 38rpx;border-right: 2rpx solid #CDCDCD;box-sizing: border-box;line-height: 36rpx;
					&:last-child{border-right: none;}
				}
			}
		}
		&.chalist{padding:34rpx 24rpx 32rpx ;
			.tit{font-weight: bold;font-size: 30rpx;color: #272727;}
			.txt{font-weight: 500;font-size: 26rpx;color: #666666;}
			image{width:16rpx;height: 24rpx;flex: 0 0 auto;margin-left: 44rpx;}
		}
	}
	
}
</style>