aiot-app/pages/home/backlog/components/Content.vue

<template>
  <view class="content-container">
    <!-- 维修 -->
    <view v-if="planType == '3'" class="repair">
      <view class="title"> 故障描述 </view>
      <view class="content">
        {{ item.repairsDescription }}
        <!-- <view class="img-list">
					<image v-for="(item, index) in repairsImgList" :key='index' :src="apiUrl + item" mode=""></image>
				</view> -->
        <u-album :urls="repairsImgList"></u-album>
      </view>
      <view class="title"> 维修方案 </view>
      <view class="content">
        {{ item.maintenanceContent }}
      </view>
    </view>
    <view v-else>
      <view
        class="kd-check-card"
        v-for="(itm, index) in item.itemList || []"
        :key="item.id"
      >
        <view class="title">
          <text class="label">{{ ++index }}</text>
          <text>{{ itm.name }}</text>
        </view>
        <view class="card-cell">
          <text class="label">内容</text>
          <text class="cell-content">{{ itm.content }}</text>
        </view>
        <view class="card-cell">
          <text class="label">标准</text>
          <text class="cell-content">{{ itm.norm }}</text>
        </view>
        <view class="beijian" v-if="planType == 2">
          <view class="beijian-title">备品备件</view>
          <view class="beijian-col" v-for="itm in item.partList">
            {{ itm.name }}({{ itm.code }}/{{ itm.model }})
            <text>{{ itm.num }}{{ itm.unit }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CheckCard from './CheckCard'
export default {
  components: { CheckCard },
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    planType: String
  },

  data () {
    return {}
  },
  computed: {
    repairsImgList () {
      return this.item.repairsImg.split(',').map(i => {
        return this.apiUrl + i
      })
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
$border-color: #f2f2f2;
.content-container {
  padding: 0 20rpx;
  .repair {
    position: relative;
    padding: 20rpx 0;
    &::before {
      content: '';
      border-top: 20rpx solid #f2f2f2;
      display: block;
      position: absolute;
      top: 0;
      right: -50rpx;
      left: -50rpx;
    }
    .title {
      border-bottom: 1rpx dashed #7f7f7f;
      margin-bottom: 20rpx;
      padding: 10rpx 0;
      font-weight: bold;
    }

    .img-list {
      display: flex;
      flex-wrap: wrap;
      image {
        width: 150rpx;
      }
    }
  }

  .kd-check-card {
    font-size: 28rpx;
    border: 1rpx solid $border-color;
    .label {
      display: inline-block;
      width: 80rpx;
      text-align: center;
      border-right: 1px solid $border-color;
      justify-content: center;
    }
    .title {
      line-height: 72rpx;
      font-weight: bold;
      background-color: #f2f2f2;
    }
    .card-cell {
      min-height: 72rpx;
      display: flex;
      align-items: stretch;
      border: 1px solid $border-color;
      text {
        display: flex;
        align-items: center;
      }
    }
    .beijian {
      border-right: 1px solid $border-color;
      border-left: 1px solid $border-color;
      .beijian-title {
        background-color: #f2f2f2;
        text-align: center;
        padding: 8rpx 0;
      }
      .beijian-col {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid $border-color;
        padding: 8rpx 14rpx;
        .text {
          white-space: nowrap;
        }
      }
    }
    .cell-content {
      flex: 1;
    }
    .result-text {
      min-height: 100rpx;
      padding: 10rpx;
    }
    .cell-content {
      padding-left: 8rpx;
    }
  }
}
</style>