vue实现水平4个卡片风格布局展示数据

页面布局

<template>
  <div class="ratecard">
    <div class="ratecard-box" v-for="item in rateCardData" :key="item">
      <div class="box-row">
        <h2>{{ item.name }}</h2>
      </div>
      <div class="box-row">
        <h3
          :class="{
            'long-color': item.status == 'up',
            'short-color': item.status == 'down'
          }"
        >
          {{ item.value }}
        </h3>
      </div>
    </div>
  </div>
</template>

源码

<script setup>
import { ref } from 'vue';
const rateCardData = ref([
  {
    name: 'BTC持仓加权资金费率',
    value: '0.0059%',
    status: 'no'
  },
  {
    name: 'BTC成交量加权资金费率',
    value: '0.0059%',
    status: 'up'
  },
  {
    name: 'ETH持仓加权资金费率',
    value: '0.0059%',
    status: 'down'
  },
  {
    name: 'ETH成交量加权资金费率',
    value: '0.0059%',
    status: 'up'
  }
]);
</script>

<style lang="less" scoped>
.ratecard {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  .ratecard-box {
    display: flex;
    flex-direction: column;
    width: 290px;
    height: 129px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #18191e;
    padding: 30px;
    justify-content: space-between;
    .box-row {
      font-family: DIN;
      font-size: 24px;
      color: #fff;
      h2 {
        color: #fff;
        font-family: PingFang SC;
        font-size: 14px;
      }
    }
  }
}
</style>