meilan-app/src/pages/inspectionStatistics/components/DataCard.vue

<template>
  <view class="data-card-container">
    <view class="card-grid">
      <view v-for="(item, index) in cardData" :key="index" class="card-item">
        <view class="card-content">
          <!-- 左侧内容 -->
          <view class="left-content">
            <view class="label">{{ item.label }}</view>
            <view class="value">{{ item.value }}</view>
          </view>

          <!-- 右侧图片 -->
          <view class="right-content">
            <image :src="item.image" class="card-image" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DataCard',
  props: {
    // 卡片数据数组
    cardData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 示例数据

    }
  },
  computed: {

  }
}
</script>

<style lang="scss" scoped>
.data-card-container {
  padding: 24rpx 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important; // 每行两个等宽列
  gap: 24rpx;

  .card-item {
    min-width: 0;
    box-sizing: border-box;

    .card-content {
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 160rpx;

      .left-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 8rpx;
          font-weight: 400;
        }

        .value {
          font-size: 45rpx;
          color: #333;
          font-weight: bold;
          line-height: 1.2;
        }
      }

      .right-content {
        flex-shrink: 0;
        margin-left: 24rpx;

        .card-image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 8rpx;
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 750px) {
  .card-grid {
    grid-template-columns: 1fr; // 小屏幕下每行一个
  }
}
</style>