labsop_scientific_h5/components/ui/CommonInfoRow.vue

<template>
  <view class="ui-info-row" :class="{
    'info-column': isColumn || (value && String(value).length > 50),
    'no-border': noBorder
  }">
    <view class="item-label" :class="{ 'bold-label': isBold }">
      {{ label }}
    </view>
    <view class="item-value" :class="{ 'amount-text': isAmount, 'text-left': forceLeft }">
      <slot>
        <text v-if="value">{{ value }}</text>
        <text v-else class="empty-placeholder">-</text>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * UI 通用组件 - 详情行渲染
 * 提供左 Lable、右 Value 的通用排版。
 * 自动处理长文本自动切换上下排版。
 */
defineProps<{
  /** 字段标题 */
  label: string;
  /** 字段数值 */
  value?: string | number;
  /** 是否强制上下排版 */
  isColumn?: boolean;
  /** 是否红色金额显示 */
  isAmount?: boolean;
  /** 是否标题文字加粗 */
  isBold?: boolean;
  /** 是否显示左对齐（默认数值右对齐） */
  forceLeft?: boolean;
  /** 去除底部边框 */
  noBorder?: boolean;
}>();
</script>

<style lang="scss" scoped>
.ui-info-row {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 2rpx dashed #f5f5f5;
  font-size: 28rpx;
  line-height: 1.5;

  &:last-child,
  &.no-border {
    border-bottom: none;
  }

  /* 标签样式 */
  .item-label {
    color: #343a3f;
    width: 200rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
    display: -webkit-box;
    // -webkit-line-clamp: 1;
    // -webkit-box-orient: vertical;
    // line-clamp: 1;
    // overflow: hidden;

    &.bold-label {
      font-weight: 600;
      color: #1a1e21;
    }
  }

  /* 数值表现 */
  .item-value {
    color: #585858;
    flex: 1;
    text-align: right;
    word-break: break-all;
    font-weight: 400;
    box-sizing: border-box;

    &.text-left {
      text-align: left;
    }

    /* 金额专用展现风格 */
    &.amount-text {
      color: #ff4d4f;
      font-weight: 600;
      font-family: 'DIN-Medium', sans-serif;
    }

    .empty-placeholder {
      color: #c0c4cc;
    }
  }

  /**
   * 上下结构（针对长文本，如备注、简介）
   */
  &.info-column {
    flex-direction: column;
    align-items: flex-start;

    .item-label {
      width: 100%;
      margin-bottom: 16rpx;
      color: #909399;
      /* 二级标题弱化 */
    }

    .item-value {
      text-align: left;
      width: 100%;
      background-color: #f8fafc;
      padding: 16rpx;
      border-radius: 12rpx;
      min-height: 80rpx;
      // display: -webkit-box;
      // -webkit-line-clamp: 2;
      // -webkit-box-orient: vertical;
      // line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>