smart-large-screen-light-ln/src/views/indexs/left-top.vue

<template>
  <div class="top-cards-wrapper">
    <!-- 左侧卡片1 -->
    <div class="top-card">
      <div class="card-icon">
        <img src="@/assets/img/left/1.svg" alt="" />
      </div>
      <div class="card-content">
        <div class="card-label">{{ cards[0].label }}</div>
        <div class="card-value">
          <span class="number">{{ cards[0].value }}</span>
          <span class="unit">{{ cards[0].unit }}</span>
        </div>
      </div>
    </div>

    <!-- 左侧卡片2 -->
    <div class="top-card">
      <div class="card-icon">
        <img src="@/assets/img/left/2.svg" alt="" />
      </div>
      <div class="card-content">
        <div class="card-label">{{ cards[1].label }}</div>
        <div class="card-value">
          <span class="number">{{ cards[1].value }}</span>
          <span class="unit">{{ cards[1].unit }}</span>
        </div>
      </div>
    </div>

    <!-- 中间标题区域 -->
    <div class="center-title">
      <div class="title-text">羚牛全国车辆信息</div>
      <div class="status-badge">922 功能中</div>
    </div>

    <!-- 右侧卡片1 -->
    <div class="top-card">
      <div class="card-icon">
        <img src="@/assets/img/left/3.svg" alt="" />
      </div>
      <div class="card-content">
        <div class="card-label">{{ cards[2].label }}</div>
        <div class="card-value">
          <span class="number">{{ cards[2].value }}</span>
          <span class="unit">{{ cards[2].unit }}</span>
        </div>
      </div>
    </div>

    <!-- 右侧卡片2 -->
    <div class="top-card">
      <div class="card-icon">
        <img src="@/assets/img/left/4.svg" alt="" />
      </div>
      <div class="card-content">
        <div class="card-label">{{ cards[3].label }}</div>
        <div class="card-value">
          <span class="number">{{ cards[3].value }}</span>
          <span class="unit">{{ cards[3].unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentGET } from "api/modules";

export default {
  name: "BlinkingIcons",
  data() {
    return {
      cards: [
        {
          id: 1,
          value: "8463.91",
          unit: "kg",
          label: "当日减碳量",
          srcValue: "@/assets/img/left/1.svg",
        },
        {
          id: 2,
          value: "1027.98",
          unit: "kg",
          label: "当日用氢量",
          srcValue: "@/assets/img/left/2.svg",
        },
        {
          id: 3,
          value: "403 / 977",
          unit: "辆",
          label: "在线数量",
          srcValue: "@/assets/img/left/3.svg",
        },
        {
          id: 4,
          value: "18012.87",
          unit: "km",
          label: "当日行驶里程",
          srcValue: "@/assets/img/left/4.svg",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      currentGET("big1").then((res) => {
        console.log("当日实况");
        console.log(res);
        let onLineCount = 0;
        let vehicleCount = 0;
        let dayCarbon = 0;
        let dayHydrogen = 0;
        let dayMileage = 0;

        if (res !== null && res.data !== null) {
          if (res.data.onLineCount !== null) onLineCount = res.data.onLineCount;
          if (res.data.vehicleCount !== null)
            vehicleCount = res.data.vehicleCount;
          if (res.data.dayCarbon !== null) dayCarbon = res.data.dayCarbon;
          if (res.data.dayHydrogen !== null) dayHydrogen = res.data.dayHydrogen;
          if (res.data.dayMileage !== null) dayMileage = res.data.dayMileage;
        }

        // 当日减碳量
        let change = this.cards[0];
        change.value = dayCarbon;
        this.$set(this.cards, 0, change);

        // 当日用氢量
        change = this.cards[1];
        change.value = dayHydrogen;
        this.$set(this.cards, 1, change);

        // 在线数量
        change = this.cards[2];
        change.value = res.data.onLineCount + " / " + res.data.vehicleCount;
        this.$set(this.cards, 2, change);

        // 当日行驶里程
        change = this.cards[3];
        change.value = dayMileage;
        this.$set(this.cards, 3, change);
      });
    },
  },
};
</script>

<style scoped>
.top-cards-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  background-color: transparent;
}

/* 数据卡片 */
.top-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.top-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15);
}

.card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 212, 170, 0.05));
  border-radius: 8px;
}

.card-icon img {
  width: 32px;
  height: 32px;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-label {
  font-size: 13px;
  color: #666666;
  line-height: 1.2;
}

.card-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.card-value .number {
  font-size: 22px;
  font-weight: 700;
  color: #00D4AA;
  line-height: 1;
}

.card-value .unit {
  font-size: 13px;
  color: #999999;
}

/* 中间标题区域 */
.center-title {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 170, 0.2);
}

.title-text {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  letter-spacing: 1px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #00D4AA;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 212, 170, 0.3);
}
</style>