63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
|
<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>
|