.ul-descriptions-easy-item {
  display: flex;
  align-items: flex-start;
  gap: $space-md;
  padding: $space-sm 0;
  font-size: $font-size-sm;

  &__name {
    color: $color-text-secondary;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: $line-height-base;
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: $space-sm;
    color: $color-text;
    line-height: $line-height-base;
  }

  &__separator {
    color: $color-text-placeholder;
    font-style: normal;
  }

  // 垂直布局修饰符
  &.vertical {
    flex-direction: column;
    gap: $space-xs;
    align-items: stretch;
  }
}

.ul-descriptions-easy-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
  font-size: 12px;
}
.ul-descriptions-easy-item__name {
  color: var(--ul-color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}
.ul-descriptions-easy-item__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ul-color-text);
  line-height: 1.5;
}
.ul-descriptions-easy-item__separator {
  color: var(--ul-color-text-placeholder);
  font-style: normal;
}
.ul-descriptions-easy-item.vertical {
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}

<view class="ul-descriptions-easy-item">
    <view class="ul-descriptions-easy-item__name">发货</view>
    <view class="ul-descriptions-easy-item__content"><span class="ul-descriptions-easy-item__text">山东临沂</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">免运费</span></view>
</view>
<view class="ul-descriptions-easy-item">
    <view class="ul-descriptions-easy-item__name">保障</view>
    <view class="ul-descriptions-easy-item__content"><span class="ul-descriptions-easy-item__text">7天无理由退货</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">运费险</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">正品保障</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">假一赔十</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">72小时快速退换</span></view>
</view>
<view class="ul-descriptions-easy-item vertical">
    <view class="ul-descriptions-easy-item__name">服务</view>
    <view class="ul-descriptions-easy-item__content"><span class="ul-descriptions-easy-item__text">24小时发货</span> <i class="ul-descriptions-easy-item__separator">|</i> <span class="ul-descriptions-easy-item__text">破损包退换</span></view>
</view>

.ul-descriptions-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: $space-md;
  border: 1px solid $color-border;
  border-radius: $radius-base;
  padding: $space-md;
  background-color: $color-white;

  &__item {
    display: flex;
    gap: $space-sm;
    padding: $space-sm 0;
    border-bottom: 1px solid $color-border;
    align-items: baseline;

    // 占满整行
    &.full-line {
      grid-column: 1 / -1;
    }
  }

  &__label {
    color: $color-text-secondary;
    font-size: $font-size-base;
    white-space: nowrap;
    flex-shrink: 0;
  }

  &__value {
    color: $color-text;
    font-size: $font-size-base;
    word-break: break-all;
    flex: 1;
  }

  // 特殊内容样式
  &__poster-item {
    max-width: 100px;
    border-radius: $radius-sm;
  }

  &__article-item {
    line-height: $line-height-base * 1.2;
    color: $color-text-secondary;
  }

  // 布局变体
  &.horizontal {
    .ul-descriptions-form__item {
      flex-direction: row;
      align-items: baseline;
    }
  }

  &.vertical {
    .ul-descriptions-form__item {
      flex-direction: column;
      align-items: flex-start;
    }
    .ul-descriptions-form__label {
      font-weight: $font-weight-bold;
      color: $color-text;
      margin-bottom: $space-xs;
    }
  }

  // 响应式设计
  @include media-breakpoint-down(sm) {
    grid-template-columns: 1fr; // 移动端始终为单列
    padding: $space-sm;
    gap: $space-sm;

    &__item {
      flex-direction: column;
      align-items: flex-start;
    }

    &__label {
      font-weight: $font-weight-bold;
      color: $color-text;
      margin-bottom: $space-xs;
    }
  }
}

.ul-descriptions-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  border: 1px solid var(--ul-color-border);
  border-radius: 4px;
  padding: 16px;
  background-color: var(--ul-color-white);
}
.ul-descriptions-form__item {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ul-color-border);
  align-items: baseline;
}
.ul-descriptions-form__item.full-line {
  grid-column: 1 / -1;
}
.ul-descriptions-form__label {
  color: var(--ul-color-text-secondary);
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ul-descriptions-form__value {
  color: var(--ul-color-text);
  font-size: 14px;
  word-break: break-all;
  flex: 1;
}
.ul-descriptions-form__poster-item {
  max-width: 100px;
  border-radius: 2px;
}
.ul-descriptions-form__article-item {
  line-height: 1.8;
  color: var(--ul-color-text-secondary);
}
.ul-descriptions-form.horizontal .ul-descriptions-form__item {
  flex-direction: row;
  align-items: baseline;
}
.ul-descriptions-form.vertical .ul-descriptions-form__item {
  flex-direction: column;
  align-items: flex-start;
}
.ul-descriptions-form.vertical .ul-descriptions-form__label {
  font-weight: 700;
  color: var(--ul-color-text);
  margin-bottom: 4px;
}
@media (max-width: 575.98px) {
  .ul-descriptions-form {
    grid-template-columns: 1fr;
    padding: 8px;
    gap: 8px;
  }
  .ul-descriptions-form__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .ul-descriptions-form__label {
    font-weight: 700;
    color: var(--ul-color-text);
    margin-bottom: 4px;
  }
}

<view class="ul-title-section">类名 ul-descriptions-form horizontal</view>
<view class="ul-descriptions-form horizontal">
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">商品分类</view>
        <view class="ul-descriptions-form__value">图书</view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">商品标题</view>
        <view class="ul-descriptions-form__value">中国科幻基石丛书：三体全集（套装1-3册） </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">封面</view>
        <view class="ul-descriptions-form__value">
            <img class="ul-descriptions-form__poster-item" src="http://cdn.bookcase.ulthon.com/upload/book/619142b09b36c.jpe" alt="">
        </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">作者</view>
        <view class="ul-descriptions-form__value">刘慈欣 </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">价格</view>
        <view class="ul-descriptions-form__value">50.30</view>
    </view>
    <view class="ul-descriptions-form__item full-line">
        <view class="ul-descriptions-form__label">商品详情</view>
        <view class="ul-descriptions-form__value">
            <view class="ul-descriptions-form__article-item">第一部 《三体》 文化大革命如火如荼地进行，天文学家叶文洁在其间历经劫难，被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线，向宇宙发出地球文明的第一声啼鸣，取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下，四光年外的“三体文明”百余次毁灭与重生，正被逼迫不得不逃离母星，而恰在此时，他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标，彻底改变了人类的命运。 地球的基础科学出现了异常的扰动，纳米科学家汪淼进入神秘的网络游戏《三体》，开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时，接触到了地球上应对三体人到来而形成的一个秘密组织（ETO）。地球防卫组织中国区作战中心通过“古筝计划”，一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋，获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后，庞大的三体舰队开始向地球进发，人类的末日悄然来临 [3-6] 。 第二部 《三体2：黑暗森林》 三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类组建起同样庞大的太空舰队，同时（PDC）利用三体人思维透明的致命缺陷，制订了“面壁计划”。出乎意料地，社会学教授罗辑被选出作为四位“面壁者”之一，展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义，逐渐成长为一位坚定的面壁者，两个文明间的博弈，面壁计划的实施，人类舰队的末日战役，罗辑与三体文明的对决，都通过他的视角一一展现。罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。 借助于这一发现，他以向全宇宙公布三体世界的位置坐标相威胁，暂时制止了三体对太阳系的入侵，使地球与三体建立起脆弱的战略平衡 [7-10] 。 第三部 《三体3：死神永生》 与三体文明的战争使人类首次看到了宇宙黑暗的真相，地球文明像一个恐惧的孩子，熄灭了寻友的篝火，在暗夜中发抖。自以为历经沧桑，其实刚刚蹒跚学步；自以为悟出了生存竞争的秘密，其实还远没有竞争的资格。 使两个文明命悬一线的黑暗森林打击，不过是宇宙战场上一个微不足道的插曲。真正的星际战争没人见过，也不可能见到，因为战争的方式和武器已经远远超出人类的想象，目睹战场之日，即是灭亡之时。 宇宙的田园时代已经远去，昙花一现的终极规律，像一个幽灵，在宇宙中游荡。人类马上要为自己的幼稚付出代价 [11-13] 。 </view>
        </view>
    </view>
</view>
<view class="ul-title-section">类名 ul-descriptions-form vertical</view>
<view class="ul-descriptions-form vertical">
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">商品分类</view>
        <view class="ul-descriptions-form__value">图书</view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">商品标题</view>
        <view class="ul-descriptions-form__value">中国科幻基石丛书：三体全集（套装1-3册） </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">封面</view>
        <view class="ul-descriptions-form__value">
            <img class="ul-descriptions-form__poster-item" src="http://cdn.bookcase.ulthon.com/upload/book/619142b09b36c.jpe" alt="">
        </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">作者</view>
        <view class="ul-descriptions-form__value">刘慈欣 </view>
    </view>
    <view class="ul-descriptions-form__item">
        <view class="ul-descriptions-form__label">价格</view>
        <view class="ul-descriptions-form__value">50.30</view>
    </view>
    <view class="ul-descriptions-form__item full-line">
        <view class="ul-descriptions-form__label">商品详情</view>
        <view class="ul-descriptions-form__value">
            <view class="ul-descriptions-form__article-item">第一部 《三体》 文化大革命如火如荼地进行，天文学家叶文洁在其间历经劫难，被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线，向宇宙发出地球文明的第一声啼鸣，取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下，四光年外的“三体文明”百余次毁灭与重生，正被逼迫不得不逃离母星，而恰在此时，他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标，彻底改变了人类的命运。 地球的基础科学出现了异常的扰动，纳米科学家汪淼进入神秘的网络游戏《三体》，开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时，接触到了地球上应对三体人到来而形成的一个秘密组织（ETO）。地球防卫组织中国区作战中心通过“古筝计划”，一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋，获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。 在运用超技术锁死地球人的基础科学之后，庞大的三体舰队开始向地球进发，人类的末日悄然来临 [3-6] 。 第二部 《三体2：黑暗森林》 三体人在利用科技锁死了地球人的科学之后，出动庞大的宇宙舰队直扑太阳系，面对地球文明前所未有的危局，人类组建起同样庞大的太空舰队，同时（PDC）利用三体人思维透明的致命缺陷，制订了“面壁计划”。出乎意料地，社会学教授罗辑被选出作为四位“面壁者”之一，展开对三体人的秘密反击。虽然三体人自身无法识破人类的计谋，却依靠由地球人中的背叛者挑选出的“破壁人”与“面壁者”进行智慧博弈。 在这场你死我活的文明生存竞争中，罗辑由一开始的逃避和享乐主义，逐渐成长为一位坚定的面壁者，两个文明间的博弈，面壁计划的实施，人类舰队的末日战役，罗辑与三体文明的对决，都通过他的视角一一展现。罗辑证实了宇宙文明间的黑暗森林法则，任何暴露自己位置的文明都将很快被消灭。 借助于这一发现，他以向全宇宙公布三体世界的位置坐标相威胁，暂时制止了三体对太阳系的入侵，使地球与三体建立起脆弱的战略平衡 [7-10] 。 第三部 《三体3：死神永生》 与三体文明的战争使人类首次看到了宇宙黑暗的真相，地球文明像一个恐惧的孩子，熄灭了寻友的篝火，在暗夜中发抖。自以为历经沧桑，其实刚刚蹒跚学步；自以为悟出了生存竞争的秘密，其实还远没有竞争的资格。 使两个文明命悬一线的黑暗森林打击，不过是宇宙战场上一个微不足道的插曲。真正的星际战争没人见过，也不可能见到，因为战争的方式和武器已经远远超出人类的想象，目睹战场之日，即是灭亡之时。 宇宙的田园时代已经远去，昙花一现的终极规律，像一个幽灵，在宇宙中游荡。人类马上要为自己的幼稚付出代价 [11-13] 。 </view>
        </view>
    </view>
</view>

.ul-descriptions-info {
    display: flex;
    flex-wrap: wrap;
    margin: 0 #{-$space-lg / 2}; // 使用负边距技术来抵消子项的内边距

    &__item {
        display: flex;
        align-items: start; // 顶部对齐以适应多行内容
        gap: $space-sm;
        box-sizing: border-box;
        width: 50%;
        padding: #{$space-md / 2} #{$space-lg / 2}; // 通过内边距创建行列间距

        // 独占一行的修饰符
        &.block {
            width: 100%;
        }
    }

    // 垂直布局状态
    &.vertical {
        .ul-descriptions-info__item {
            flex-direction: column;
            gap: $space-xs; // 垂直排列时使用较小的间距
        }
    }

    
    &__name {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        white-space: nowrap; // 标签保持单行
    }

    &__value {
        font-size: $font-size-sm;
        color: $color-text;
        word-break: break-word; // 允许长单词或URL换行
    }
}

.ul-descriptions-info {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.ul-descriptions-info__item {
  display: flex;
  align-items: start;
  gap: 8px;
  box-sizing: border-box;
  width: 50%;
  padding: 8px 12px;
}
.ul-descriptions-info__item.block {
  width: 100%;
}
.ul-descriptions-info.vertical .ul-descriptions-info__item {
  flex-direction: column;
  gap: 4px;
}
.ul-descriptions-info__name {
  font-size: 12px;
  color: var(--ul-color-text-secondary);
  white-space: nowrap;
}
.ul-descriptions-info__value {
  font-size: 12px;
  color: var(--ul-color-text);
  word-break: break-word;
}

<view class="ul-title-bar">默认排列</view>
<view class="ul-descriptions-info">
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">柜台价</view>
        <view class="ul-descriptions-info__value">16元</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">适用年龄</view>
        <view class="ul-descriptions-info__value">1-12岁</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">生产年份</view>
        <view class="ul-descriptions-info__value">2023年</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">尺寸</view>
        <view class="ul-descriptions-info__value">宽23cm 高 18cm</view>
    </view>
    <view class="ul-descriptions-info__item block">
        <view class="ul-descriptions-info__name">详细地址</view>
        <view class="ul-descriptions-info__value">这是一个非常非常非常非常非常非常非常非常非常非常非常长的地址，它需要独占一行来显示。</view>
    </view>
</view>
<view class="ul-title-bar">上下排列</view>
<view class="ul-descriptions-info vertical">
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">柜台价</view>
        <view class="ul-descriptions-info__value">16元</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">适用年龄</view>
        <view class="ul-descriptions-info__value">1-12岁</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">生产年份</view>
        <view class="ul-descriptions-info__value">2023年</view>
    </view>
    <view class="ul-descriptions-info__item">
        <view class="ul-descriptions-info__name">尺寸</view>
        <view class="ul-descriptions-info__value">宽23cm 高 18cm</view>
    </view>
    <view class="ul-descriptions-info__item block">
        <view class="ul-descriptions-info__name">详细地址</view>
        <view class="ul-descriptions-info__value">这是一个非常非常非常非常非常非常非常非常非常非常非常长的地址，它需要独占一行来显示。</view>
    </view>
</view>

.ul-descriptions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: $space-sm $space-md; // 行间距和列间距
  padding: $space-sm 0;
  font-size: $font-size-sm;

  &__label {
    color: $color-text-secondary;
    font-weight: $font-weight-medium;
    white-space: nowrap;
    padding: $space-xs $space-sm;
    background-color: $color-bg;
    border-radius: $radius-sm;
  }

  &__value {
    color: $color-text;
    display: inline-flex;
    align-items: center;
    gap: $space-xs;

    .primary {
      color: $color-primary-base;
      font-weight: $font-weight-bold;
    }
    .success {
      color: $color-success-base;
    }
    .danger {
      color: $color-danger-base;
    }
  }

  // 垂直排列
  &.vertical {
    .ul-descriptions-row__label,
    .ul-descriptions-row__value {
      flex-basis: 100%;
    }
    .ul-descriptions-row__value {
      padding-left: $space-sm;
    }
  }

  // 响应式设计
  @include media-breakpoint-down(sm) {
    gap: $space-sm; // 移动端统一间距
    font-size: $font-size-xs;

    &__label {
      padding: 2px $space-xs;
    }
  }
}

.ul-descriptions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 0;
  font-size: 12px;
}
.ul-descriptions-row__label {
  color: var(--ul-color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  background-color: var(--ul-color-bg);
  border-radius: 2px;
}
.ul-descriptions-row__value {
  color: var(--ul-color-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ul-descriptions-row__value .primary {
  color: var(--ul-color-primary-base);
  font-weight: 700;
}
.ul-descriptions-row__value .success {
  color: var(--ul-color-success-base);
}
.ul-descriptions-row__value .danger {
  color: var(--ul-color-danger-base);
}
.ul-descriptions-row.vertical .ul-descriptions-row__label, .ul-descriptions-row.vertical .ul-descriptions-row__value {
  flex-basis: 100%;
}
.ul-descriptions-row.vertical .ul-descriptions-row__value {
  padding-left: 8px;
}
@media (max-width: 575.98px) {
  .ul-descriptions-row {
    gap: 8px;
    font-size: 10px;
  }
  .ul-descriptions-row__label {
    padding: 2px 4px;
  }
}

<view class="ul-descriptions-row">
    <view class="ul-descriptions-row__label">当日价格</view>
    <view class="ul-descriptions-row__value">当日均价： <span class="primary">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__value">相对比前日：<span class="success">价格平稳</span></view>
    <view class="ul-descriptions-row__label">近7日价格</view>
    <view class="ul-descriptions-row__value">最高价：<span class="primary">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__value">最低价：<span class="primary">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__label">联系方式</view>
    <view class="ul-descriptions-row__value">电话：15376477393</view>
    <view class="ul-descriptions-row__value">邮箱：service@ulthon.com</view>
</view>
<view class="ul-title-section">垂直排列 .vertical</view>
<view class="ul-descriptions-row vertical">
    <view class="ul-descriptions-row__label">当日价格</view>
    <view class="ul-descriptions-row__value">当日均价： <span class="primary">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__value">相对比前日：<span class="success">价格平稳</span></view>
    <view class="ul-descriptions-row__label">近7日价格</view>
    <view class="ul-descriptions-row__value">最高价：<span class="danger">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__value">最低价：<span class="primary">11.66</span>元/斤 </view>
    <view class="ul-descriptions-row__label">联系方式</view>
    <view class="ul-descriptions-row__value">电话：15376477393</view>
    <view class="ul-descriptions-row__value">邮箱：service@ulthon.com</view>
</view>