aiot-app/pages/pda/outsourcing/components/outsourcingData.vue

<template>
  <view class="card_box">
    <view class="item_box rx-sc">
      <view class="round">{{ index + 1 }}</view>
      <view class="orderId">{{ item.categoryCode }} </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view class="lable">名称：</view>
        <view>{{ item.categoryName }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>编码：</view>
        <view>{{ item.categoryCode }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>规格：</view>
        <view>{{ item.specification }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>型号：</view>
        <view>{{ item.modelType }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view>类型：</view>
        <view v-if="item.sourceType == 1" class="gylx">物品清单</view>
        <view v-if="item.sourceType == 2" class="gylx">带料清单</view>
        <view v-if="item.sourceType == 3" class="gylx">产出清单</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view>牌号：</view>
        <view>{{ item.brandNum }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">数量：</view>
        <view>{{ item.totalCount }}{{ item.measuringUnit }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>重量：</view>
        <view v-if="item.totalWeight">
          {{ item.totalWeight }}{{ item.weightUnit }}
        </view>
        <view v-else>无</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">物料代号：</view>
        <view>{{ item.extInfo.materielCode }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>客户代号：</view>
        <view> {{ item.extInfo.clientCode }} </view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view class="lable">刻码：</view>
        <view>{{ item.extInfo.engrave }}</view>
      </view>
    </view>
  </view>
</template>

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

    index: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {};
  },
  methods: {},
};
</script>

<!-- <style lang="scss" scoped>
.card_box {
  width: 750rpx;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e1e1e1;

  .item_box {
    margin-top: 10rpx;

    .round {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 20rpx;
    }

    .orderId {
      color: #000;
      font-family: PingFang HK;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      margin-left: 16rpx;
    }

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 38rpx;
      word-wrap: break-word;
    }

    .item-right {
      flex: 1;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }
  }
}
</style> -->

<style lang="scss" scoped>
.card_box {
  width: 100%;
  padding: 20rpx 26rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #f1f1f1;
  background: #fff;

  .item_box {
    margin-top: 14rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .round {
      width: 46rpx;
      height: 46rpx;
      line-height: 46rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 22rpx;
      flex-shrink: 0;
    }

    .orderId {
      color: #111;
      font-size: 30rpx;
      font-weight: 600;
      margin-left: 18rpx;
      word-break: break-all;
    }

    .item_one {
      display: flex;
      width: 100%;
      font-size: 28rpx;
      line-height: 42rpx;
      color: #333;
      margin-top: 6rpx;
      word-wrap: break-word;

      .lable {
        color: #666;
        margin-right: 8rpx;
        flex-shrink: 0;
      }
    }

    .gylx {
      color: $theme-color;
      font-weight: 500;
    }

    /* 自适应 2列布局，超出自动换行 */
    .perce50 {
      width: 48%;
    }
  }
}
</style>