aiot-app/pages/home/components/KdCard.vue

<template>
  <view class="kd-card">
    <view class="card-title">
      {{ title }}
      <text class="stauts"> 待执行 </text>
    </view>
    <view class="card-body">
      <view class="card-col">
        <text class="label">紧急程度</text>
        <text class="content">谢谢。</text>
      </view>
      <view class="card-col">
        <text class="label">报修人</text>
        <text class="content">舜发于畎亩之中</text>
      </view>
      <view class="card-col">
        <text class="label">报修原因</text>
        <text class="content"
          >舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。</text
        >
      </view>
    </view>
    <view class="card-footer">
      查看详情 <u-icon name="arrow-right"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    item: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.kd-card {
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  border-radius: 8rpx;
  .card-footer,
  .card-title {
    display: flex;
    justify-content: space-between;
    padding: 8rpx 12rpx;
  }

  .card-body {
    padding: 0 20rpx;
    border-top: 1rpx solid #f2f2f2;
    border-bottom: 1rpx solid #f2f2f2;
    .card-col {
      padding: 8rpx 0;
      display: flex;

      // line-height: ;
      .label {
        display: inline-block;
        width: 5em;
        color: #555;
      }
      .content {
        flex: 1;
        word-break: break-all;
      }
    }
  }
}
</style>