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.
75 lines
1.8 KiB
75 lines
1.8 KiB
2 years ago
|
<template>
|
||
|
|
<div class="map-header">
|
||
|
|
<div class="flex">
|
||
|
|
<div class="item" v-for="(item, index) in list" :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 {
|
||
|
|
list: [
|
||
|
|
{ name: '年平均气温', units: '°C', num: '24' },
|
||
|
|
{ name: '年日光照', units: '小时', num: '2700' },
|
||
|
|
{ name: '无霾期', units: '天', num: '200' },
|
||
|
|
{ name: '年平均降水', units: '毫升', num: '687' },
|
||
|
|
{ name: '土壤有机质', units: '含量', num: '1.5%' }
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() { },
|
||
|
|
methods: {},
|
||
|
|
components: {},
|
||
|
|
computed: {},
|
||
|
|
watch: {},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: 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>
|