<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>
