57 lines
2.1 KiB
Vue
57 lines
2.1 KiB
Vue
<template>
|
|
<section class="traffic-1">
|
|
<div class="rank-list">
|
|
<TrafficRankRow v-for="item in rankList" :key="item.rank" :item="item" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import TrafficRankRow from './TrafficRankRow.vue'
|
|
|
|
const rankList = ref([
|
|
{ rank: 1, lines: '1,3,7,15', station: '上海火车站', type: '进出站', today: '8.40', compare: '6.20', percent: 92 },
|
|
{ rank: 2, lines: '1,3,7,15', station: '上海体育场', type: '进出站', today: '8.20', compare: '5.20', percent: 80 },
|
|
{ rank: 3, lines: '1,3,7,15', station: '延安西路', type: '进出站', today: '6.40', compare: '3.20', percent: 70 },
|
|
{ rank: 4, lines: '1,3,7,15', station: '上大路', type: '进出站', today: '6.20', compare: '6.20', percent: 50 },
|
|
{ rank: 5, lines: '1,3,7,15', station: '上海体育馆', type: '进出站', today: '6.20', compare: '6.20', percent: 40 },
|
|
{ rank: 6, lines: '1,3,7,15', station: '上海南站', type: '进出站', today: '6.20', compare: '6.20', percent: 38 },
|
|
{ rank: 7, lines: '1,3,7,15', station: '大渡河路', type: '进出站', today: '6.20', compare: '6.20', percent: 38 },
|
|
{ rank: 8, lines: '1,3,7,15', station: '大渡河路', type: '进出站', today: '6.20', compare: '6.20', percent: 38 },
|
|
{ rank: 9, lines: '1,3,7,15', station: '红宝石路', type: '进出站', today: '6.20', compare: '6.20', percent: 38 },
|
|
{ rank: 10, lines: '1,3,7,15', station: '吴中路', type: '进出站', today: '6.20', compare: '6.20', percent: 10 }
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.traffic-1 {
|
|
position: absolute;
|
|
left: 21.33px;
|
|
top: 128px;
|
|
width: 861.53px;
|
|
height: 894px;
|
|
opacity: 1;
|
|
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: url('/imgs/traffic/1-bg.png') no-repeat center center;
|
|
background-size: cover;
|
|
backdrop-filter: blur(10px);
|
|
|
|
.rank-list {
|
|
position: absolute;
|
|
top: 140px;
|
|
right: 10px;
|
|
bottom: 30px;
|
|
left: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
}
|
|
</style>
|