.ul-fieldset-basic {
  border: 1px solid $color-border;
  border-radius: $radius-sm;
  padding: $space-sm $space-md;
  margin-bottom: $space-sm;

  &__legend {
    font-size: $font-size-base;
    font-weight: $font-weight-normal;
    padding: 0 $space-sm;
    margin-left: $space-lg; // 保持视觉间距
    border: none;
    width: auto;
  }

  &__body {
    padding: $space-sm 0;
    color: $color-text-secondary;
  }

  // 主题色变体
  @each $name, $color in $theme-colors {
    &.#{$name} {
      border-color: $color;

      .ul-fieldset-basic__legend {
        color: $color;
      }
    }
  }
}

.ul-fieldset-basic {
  border: 1px solid var(--ul-color-border);
  border-radius: 2px;
  padding: 8px 16px;
  margin-bottom: 8px;
}
.ul-fieldset-basic__legend {
  font-size: 14px;
  font-weight: 400;
  padding: 0 8px;
  margin-left: 24px;
  border: none;
  width: auto;
}
.ul-fieldset-basic__body {
  padding: 8px 0;
  color: var(--ul-color-text-secondary);
}
.ul-fieldset-basic.primary {
  border-color: var(--ul-color-primary-base);
}
.ul-fieldset-basic.primary .ul-fieldset-basic__legend {
  color: var(--ul-color-primary-base);
}
.ul-fieldset-basic.success {
  border-color: var(--ul-color-success-base);
}
.ul-fieldset-basic.success .ul-fieldset-basic__legend {
  color: var(--ul-color-success-base);
}
.ul-fieldset-basic.danger {
  border-color: var(--ul-color-danger-base);
}
.ul-fieldset-basic.danger .ul-fieldset-basic__legend {
  color: var(--ul-color-danger-base);
}
.ul-fieldset-basic.warning {
  border-color: var(--ul-color-warning-base);
}
.ul-fieldset-basic.warning .ul-fieldset-basic__legend {
  color: var(--ul-color-warning-base);
}
.ul-fieldset-basic.info {
  border-color: var(--ul-color-info-base);
}
.ul-fieldset-basic.info .ul-fieldset-basic__legend {
  color: var(--ul-color-info-base);
}
.ul-fieldset-basic.dark {
  border-color: var(--ul-color-dark-base);
}
.ul-fieldset-basic.dark .ul-fieldset-basic__legend {
  color: var(--ul-color-dark-base);
}
.ul-fieldset-basic.light {
  border-color: var(--ul-color-light-base);
}
.ul-fieldset-basic.light .ul-fieldset-basic__legend {
  color: var(--ul-color-light-base);
}
.ul-fieldset-basic.gray {
  border-color: var(--ul-color-gray-base);
}
.ul-fieldset-basic.gray .ul-fieldset-basic__legend {
  color: var(--ul-color-gray-base);
}

<fieldset class="ul-fieldset-basic">
    <legend class="ul-fieldset-basic__legend">默认</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic primary">
    <legend class="ul-fieldset-basic__legend">Primary</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic success">
    <legend class="ul-fieldset-basic__legend">Success</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic danger">
    <legend class="ul-fieldset-basic__legend">Danger</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic warning">
    <legend class="ul-fieldset-basic__legend">Warning</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic info">
    <legend class="ul-fieldset-basic__legend">Info</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>
<fieldset class="ul-fieldset-basic dark">
    <legend class="ul-fieldset-basic__legend">Dark</legend>
    <view class="ul-fieldset-basic__body">这里是 fieldset 的内容区域。 </view>
</fieldset>

.ul-fieldset-mobile {
  margin: 15px auto;
  width: 375px;
  border-radius: 36px;
  box-shadow: 0 0 20px rgba(0, 0, .1);
  border: 8px solid #333;
  overflow: hidden;
  background-color: #fff;
  

  &__header {
    height: 28px;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__speaker {
    width: 40px;
    height: 6px;
    background-color: #666;
    border-radius: 3px;
  }

  &__body {
    flex: 1;
    overflow-y: auto;
    height: 667px;
  }

  &__footer {
    height: 34px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &__home-bar {
    width: 134px;
    height: 5px;
    background-color: #333;
    border-radius: 100px;
  }
}

.ul-fieldset-mobile {
  margin: 15px auto;
  width: 375px;
  border-radius: 36px;
  box-shadow: 0 0 20px black;
  border: 8px solid #333;
  overflow: hidden;
  background-color: #fff;
}
.ul-fieldset-mobile__header {
  height: 28px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ul-fieldset-mobile__speaker {
  width: 40px;
  height: 6px;
  background-color: #666;
  border-radius: 3px;
}
.ul-fieldset-mobile__body {
  flex: 1;
  overflow-y: auto;
  height: 667px;
}
.ul-fieldset-mobile__footer {
  height: 34px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ul-fieldset-mobile__home-bar {
  width: 134px;
  height: 5px;
  background-color: #333;
  border-radius: 100px;
}

<view class="ul-fieldset-mobile">
    <view class="ul-fieldset-mobile__header">
        <view class="ul-fieldset-mobile__speaker"></view>
    </view>
    <view class="ul-fieldset-mobile__body">
        <p style="padding:15px;color: #999;">手机内容区域</p>
    </view>
    <view class="ul-fieldset-mobile__footer">
        <view class="ul-fieldset-mobile__home-bar"></view>
    </view>
</view>