You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.3 KiB
76 lines
1.3 KiB
<template>
|
|
<div class="map-header">
|
|
<div class="flex">
|
|
<div class="item" v-for="(item, index) in data" :key="index">
|
|
<div class="name">{{ item.name }}</div>
|
|
<section>
|
|
<span :class="{ num: true, yellow: index === 4 }">{{
|
|
item.num
|
|
}}</span>
|
|
<span :class="{ units: true, yellow: index === 4 }">{{
|
|
item.units
|
|
}}</span>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
created () {
|
|
},
|
|
methods: {},
|
|
components: {},
|
|
computed: {},
|
|
watch: {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex {
|
|
@include flex();
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
|
|
.item {
|
|
@include flex(column);
|
|
|
|
section {
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.name {
|
|
font-size: 20px;
|
|
color: #acbbd4;
|
|
}
|
|
|
|
.num {
|
|
font-family: lihei;
|
|
font-size: 26px;
|
|
color: #ffffff;
|
|
font-style: italic;
|
|
text-shadow: 0 0 10px #fff;
|
|
}
|
|
|
|
.units {
|
|
font-size: 16px;
|
|
color: #869db8;
|
|
margin-left: 5px;
|
|
}
|
|
.yellow {
|
|
color: #ffc486;
|
|
text-shadow: 0 0 10px #ffc486;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|