76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div class="outer_div">
|
|
<div class="connection-container">
|
|
<div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div>
|
|
<div v-else class="bar" style='height: 20%'></div>
|
|
|
|
<div v-if="latency >= 70 || latency == 0" class="grayed_bar" style='height: 40%'></div>
|
|
<div v-else class="bar" style='height: 40%'></div>
|
|
|
|
<div v-if="latency >= 60 || latency == 0" class="grayed_bar" style='height: 60%'></div>
|
|
<div v-else class="bar" style='height: 60%'></div>
|
|
|
|
<div v-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
|
|
<div v-else class="bar" style='height: 80%'></div>
|
|
</div>
|
|
<!-- <span class="connection_number">{{ latency }} ms</span> -->
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
latency: { required: true, type: Number},
|
|
},
|
|
computed: {
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.outer_div {
|
|
display: flex;
|
|
position: relative;
|
|
height: 25%;
|
|
width: 10%;
|
|
}
|
|
.connection-container {
|
|
position: relative;
|
|
justify-content: center;
|
|
display: flex;
|
|
gap: 0.05em;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 12%;
|
|
/* background-color: white; */
|
|
}
|
|
.bar {
|
|
width:100%;
|
|
background-color: white;
|
|
border: 0.1em solid black;
|
|
margin-top: auto;
|
|
border-radius: 20%;
|
|
}
|
|
.grayed_bar {
|
|
width:100%;
|
|
background-color: rgb(136, 135, 135);
|
|
border: 0.1em solid black;
|
|
margin-top: auto;
|
|
opacity: 0.2;
|
|
border-radius: 20%;
|
|
}
|
|
.connection_number {
|
|
position: absolute;
|
|
left: 110%;
|
|
bottom: 0%;
|
|
width: 180%;
|
|
font-size:0.8em;
|
|
}
|
|
|
|
</style> |