ebike-ui/ebike-maintenance/components/bike-info/bike-info.vue

<template>
	<div style="padding: 20px 10px 10px 10px;background-color: white;">
		<div style="position:absolute;right:0px;top: -7px;" @click="$emit('close')">
			<uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="20" color="#777777" />
		</div>
		<div class="divRow" style="justify-content: space-between !important;">
			<div style="font-size:14px;font-weight: bolder;">
				{{data.bikeCode}}
			</div>
			<div>
				<label>状态：</label>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikexuanzhong" :color="color"
						size="16" /></label>
				<label>正常</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">剩余电量：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeelectricity-full"
						:color="color" size="16" /></label>
				<label>{{data.dl}}</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">可骑行距离：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" :color="color"
						size="16" /></label>
				<label>{{data.jl}}</label>
			</div>

		</div>
		<div style="margin-top: 30px;margin-bottom: 30px;">
			<label style="margin-right: 15px;"><uni-icons custom-prefix="iconfont" type="icon-ebikejinggao"
					color="#FF7200" size="12" /></label>
			<label style="font-size: 12px;">安全骑行，遵守交通规则</label>
		</div>
		<!-- <div>
			<div class="divBtn" @click="$emit('close')">关闭</div>
		</div> -->
	</div>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	const props = defineProps(["bikecode"]);
	const methods = defineEmits(["close"])
	const color = ref("#61D145");
	const data = ref({
		bikeCode: props.bikecode,
		zt: 1,
		dl: "86%",
		jl: "50km"
	})
	
	onMounted(()=>{
		showModelMessage("该功能暂未实现！")
	})
</script>

<style scoped>
	.divRow {
		font-size: 12px;
		color: #000;
		line-height: 25px;
		display: flex;
	}

	.lbTitle {
		text-align: right;
		width: 80px;
	}

	.lbImg {
		margin-right: 5px;
	}

</style>