样式和车辆信息

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

@@ -0,0 +1,63 @@
+<template>
+	<div style="padding: 10px;background-color: white;">
+		<div class="divRow" style="justify-content: space-between !important;">
+			<div style="font-size: 14px;">
+				{{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: 10px;">安全骑行，遵守交通规则</label>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	const props=defineProps(["bikecode"]);
+	const color=ref("#61D145");
+	const data=ref({
+		bikeCode:props.bikecode,
+		zt:1,
+		dl:"86%",
+		jl:"50km"
+	})
+</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>

ebike-maintenance/pages/user/home/home.vue

@@ -2,7 +2,7 @@
 	<map id="mapRef" ref="mapRef" style="width: 100%;height: 100vh;" show-location :longitude="location.longitude"
 		:latitude="location.latitude" :markers="markers" :scale="scale" :polygons="polygons" :polyline="polylines"
 		:circles="circles" />
-	<div class="divMapTools" style="left: 10px;">
+	<div v-if="!showBikeInfo" class="divMapTools" style="left: 10px;">
 		<div>
 			<image class="divImg" src="/static/userui/home/localtion.png" @click="refresh" />
 		</div>
@@ -10,7 +10,7 @@
 			<image class="divImg" src="/static/userui/home/fault.png" @click="reportFault" />
 		</div>
 	</div>
-	<div class="divMapTools" style="right: 10px;">
+	<div  v-if="!showBikeInfo"  class="divMapTools" style="right: 10px;">
 		<div>
 			<image class="divImg" src="/static/userui/home/packing.png" @click="getSite" />
 		</div>
@@ -103,6 +103,9 @@
 			</div>
 		</uni-card>
 	</div>
+	<div v-if="showBikeInfo" style="position: absolute;z-index: 2000;bottom: 0;width: 100vw;">
+		<bike-info bikecode="123456"/>
+	</div>
 
 </template>
 
@@ -122,6 +125,7 @@
 	} from "@/utils/api.js";
 	
 	import { findIndex } from 'lodash';
+	
 
 	const location = ref({
 		longitude: "",
@@ -158,6 +162,7 @@
 
 	//车辆
 	let arrBikeData = [];
+	const showBikeInfo=ref(false);
 
 	//加载数据
 	function getLoalcationData () {

ebike-maintenance/static/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4868066 */
-  src: url('iconfont.ttf?t=1743500476242') format('truetype');
+  src: url('iconfont.ttf?t=1744624163365') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-ebikeditu2:before {
+  content: "\e620";
+}
+
+.icon-ebikejinggao:before {
+  content: "\e607";
+}
+
+.icon-ebikexuanzhong:before {
+  content: "\e616";
+}
+
+.icon-ebikeelectricity-full:before {
+  content: "\e996";
+}
+
+.icon-ebikeback:before {
+  content: "\e606";
+}
+
 .icon-ebikedingwei2:before {
   content: "\e619";
 }