<template>
|
<div class="mark-list-container">
|
<div class="mark-list">
|
<div class="mark-item">
|
<span>直连充电</span>
|
<div class="mark-color float"></div>
|
</div>
|
<div class="mark-item">
|
<span>放电</span>
|
<div class="mark-color discharge"></div>
|
</div>
|
<div class="mark-item">
|
<span>充电</span>
|
<div class="mark-color charge"></div>
|
</div>
|
<div class="mark-item">
|
<span>停电放电</span>
|
<div class="mark-color power-cut"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "mapMarkList",
|
data() {
|
return {};
|
}
|
}
|
</script>
|
|
<style scoped>
|
.mark-list-container {
|
position: absolute;
|
bottom: 32px;
|
right: 32px;
|
}
|
.mark-list {
|
display: inline-block;
|
background-color: #041C42;
|
padding: 16px 32px;
|
border-radius: 12px;
|
}
|
.mark-item {
|
text-align: right;
|
margin-top: 4px;
|
margin-bottom: 4px;
|
}
|
.mark-item span {
|
font-size: 16px;
|
}
|
.mark-item .mark-color {
|
display: inline-block;
|
width: 40px;
|
height: 20px;
|
background-color: grey;
|
margin-left: 8px;
|
}
|
.mark-item .mark-color.float {
|
background-color: #0081FE;
|
}
|
.mark-item .mark-color.discharge {
|
background-color: #FE696A;
|
}
|
.mark-item .mark-color.charge {
|
background-color: #65F53E;
|
}
|
.mark-item .mark-color.power-cut {
|
background-color: #7668F9;
|
}
|
</style>
|
