aiot-app/components/sparepart/detail.vue

<template>
  <u-modal
    :show.sync="visible"
    class="maintenance-order"
    :showCancelButton="true"
    :showConfirmButton="false"
    @cancel="visible = false"
    :closeOnClickOverlay="true"
    cancelText="关闭"
  >
    <view class="" style="flex: 1">
      <view class="title">明细清单</view>
      <view class="register-content">
        <view class="inner">
          <view class="col" v-for="item in list" :key="item.id">
            {{ item.name }}({{ item.code }}/{{ item.model }})
            <view style="min-width: 100rpx">
              <text class="num">{{ item[numKey] }}</text>
              {{ item.unit }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    numKey: {
      type: String,
      default: 'num'
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    open () {
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.maintenance-order {
  /deep/ .u-modal__content {
    padding: 0 !important;

    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.4em !important;
    }
  }
  .title {
    background-color: rgba(51, 51, 51, 1);
    line-height: 60rpx;
    text-align: center;
    color: #fff;
  }
  .register-content {
    padding: 20rpx;
    min-height: 180rpx;

    .inner {
      border: 1rpx solid rgba(242, 242, 242, 1);
      .col {
        font-size: 28rpx;
        border-bottom: 1rpx solid rgba(242, 242, 242, 1);
        display: flex;
        padding: 10rpx;
        justify-content: space-between;

        .num {
          display: inline-block;
          width: 3em;
          text-align: center;
          margin-right: 4rpx;
          background-color: rgba(215, 215, 215, 1);
        }
      }
    }
  }
}
</style>