121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
|
<div class="data-list-item">
|
|
<h4 class="data-list-item-title">
|
|
{{ item.stationName }}
|
|
</h4>
|
|
<div class="data-list-item-container">
|
|
<div class="data-list-item-content">
|
|
<div class="data-list-item-children">
|
|
<div class="data-list-item-child">
|
|
<label>Station Type:</label>
|
|
<span>{{ item.stationType }}</span>
|
|
</div>
|
|
<div class="data-list-item-child" style="word-break: break-all">
|
|
<label>Altitude:</label>
|
|
<span>{{ item.altitude + 'm' }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-list-item-children">
|
|
<div class="data-list-item-child">
|
|
<label>Lon And Lat:</label>
|
|
<span>{{ Number(item.lon).toFixed(6) }} {{ Number(item.lat).toFixed(6) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-list-item-children">
|
|
<div class="data-list-item-child">
|
|
<label>Status:</label>
|
|
<span class="green">{{ item.status }}</span>
|
|
</div>
|
|
<div class="data-list-item-child">
|
|
<label>Signal:</label>
|
|
<span class="green">{{ item.signal }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.data-list-item {
|
|
width: 322px;
|
|
cursor: pointer;
|
|
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&-title {
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-family: Arial;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
position: relative;
|
|
padding-left: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&-container {
|
|
display: flex;
|
|
}
|
|
|
|
&-content {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: 10px 10px 10px 14px;
|
|
flex: 1;
|
|
color: #6ebad0;
|
|
background: url(~@/assets/images/station-operation/data-item-bg.png) center no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.data-list-item-children {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.data-list-item-child {
|
|
color: #fff;
|
|
|
|
&:nth-child(2n + 1) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:nth-child(2n) {
|
|
width: 110px;
|
|
flex-shrink: 0;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
label {
|
|
color: #6ebad0;
|
|
font-family: Arial;
|
|
}
|
|
|
|
span {
|
|
margin-left: 10px;
|
|
&.green {
|
|
color: #0cff00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|