DataDisplayPlatform_WebApp/src/components/PortsCard.vue

<template>
  <div class="ports-box">
    <TitleLine icon="info-dark" title="港口"></TitleLine>
    <div class="bar mt10" style="height: 700px">
      <div v-for="(item, index) in arr" :key="index" class="ports df aic mb20">
        <img class="mr10" :src="exchangeUrl('position')" alt="" />
        <div class="mr50">{{ index + 1 }}小洋山港口</div>
        <img :src="exchangeUrl(index % 2 == 0 ? 'sunny' : 'cloud')" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { mapState } from "vuex";

export default {
  setup() {
    let arr = ref([]);
    arr.value.length = 50;
    function init() {}
    function exchangeUrl(icon) {
      return `/${icon}.png`;
    }
    onMounted(() => {
      init();
    });
    return {
      init,
      exchangeUrl,
      arr,
    };
  },
};
</script>
<style lang="scss" scoped>
.ports {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #e6f7ff;
  :first-child {
    width: 32px;
    height: 32px;
  }
  :last-child {
    width: 24px;
    height: 24px;
  }
}

.mr50 {
  margin-right: 50px;
}
</style>