delivery-depot-uniapp/pages/components/InfoItem.vue

<template>
  <view :class="[isFirst ? 'no-border' : '', 'info-item-component']">
    <text class="label">{{ label }}</text>
	<template v-if="isImage">
		<image class="kqt-image" :src="value"></image>
	</template>
	<text v-else class="value">{{ value }}</text>
  </view>
</template>
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
	label: String,
	value: [String, Number],
	isFirst: Boolean,
	isImage: Boolean
});
</script>
<style lang="scss" scoped>
	.info-item-component {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30rpx 0;
	  border-top: 1px solid #e5e9ed;
	
	  &.no-border {
		border: none;
	  }
		  
	  .label {
	    font-weight: bold;
	    color: #777777;
	  }
	
	  .value, .kqt-image {
	    flex: 1;
	    text-align: right;
	    color: #0f2239;
	    font-weight: 600;
	  }
	  
	  .kqt-image {
	    max-width: 50%;
	  }
	}
</style>