.ul-title-bar {
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  padding-left: $space-sm;
  position: relative;
  line-height: 1.5;
  display: flex;
  align-items: center;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 3px;
    border-radius: $radius-sm;
    background: linear-gradient(0deg, $color-primary-light, $color-primary-base);
  }
  

  // 响应式设计
  @include media-breakpoint-down(md) {
    font-size: $font-size-base;
    &::before {
      height: 14px;
    }
  }
}

.ul-title-bar {
  font-size: 14px;
  font-weight: 700;
  padding-left: 8px;
  position: relative;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.ul-title-bar::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(0deg, var(--ul-color-primary-light), var(--ul-color-primary-base));
}
@media (max-width: 767.98px) {
  .ul-title-bar {
    font-size: 14px;
  }
  .ul-title-bar::before {
    height: 14px;
  }
}

<view class="ul-title-bar">分组标题</view>

.ul-title-decorated {
    text-align: center;
    position: relative;
    padding-bottom: $space-md;

    &__main {
        font-size: $font-size-lg;
        color: $color-text;
        font-weight: $font-weight-bold;
    }

    &__plus {
        font-size: $font-size-base;
        color: $color-text-secondary;
        margin-top: $space-xs;
        text-transform: uppercase;
    }

    &__line {
        width: 40px;
        height: 4px;
        background: linear-gradient(90deg, $color-primary-base, $color-primary-hover);
        border-radius: $radius-sm;
        margin: $space-md auto 0;
    }

    // 响应式设计
    @include media-breakpoint-down(md) {
        &__main {
            font-size: $font-size-lg;
        }

        &__plus {
            font-size: $font-size-sm;
        }
    }
}

.ul-title-decorated {
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}
.ul-title-decorated__main {
  font-size: 16px;
  color: var(--ul-color-text);
  font-weight: 700;
}
.ul-title-decorated__plus {
  font-size: 14px;
  color: var(--ul-color-text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
}
.ul-title-decorated__line {
  width: 40px;
  height: 4px;
  background: linear-gradient(90deg, var(--ul-color-primary-base), var(--ul-color-primary-hover));
  border-radius: 2px;
  margin: 16px auto 0;
}
@media (max-width: 767.98px) {
  .ul-title-decorated__main {
    font-size: 16px;
  }
  .ul-title-decorated__plus {
    font-size: 12px;
  }
}

<view class="ul-section">
    <view class="ul-title-decorated">
        <view class="ul-title-decorated__main">精品酒店 </view>
        <view class="ul-title-decorated__plus">Boutique Hotel</view>
        <view class="ul-title-decorated__line"></view>
    </view>
</view>
<view style="width:200px" class="ul-section">
    <view class="ul-title-decorated">
        <view class="ul-title-decorated__main">精品酒店 </view>
        <view class="ul-title-decorated__plus">Boutique Hotel</view>
        <view class="ul-title-decorated__line"></view>
    </view>
</view>

.ul-title-section {
    font-size: $font-size-md;
    font-weight: $font-weight-medium;
    color: $color-text-secondary;
    margin: $space-md 0 $space-sm 0;
    padding-bottom: $space-xs;
    border-bottom: 1px solid $color-border;
    line-height: $line-height-base;
    
    // 大号标题
    &.large {
        font-size: $font-size-lg;
        font-weight: $font-weight-bold;
        margin: $space-xl 0 $space-md 0;
    }
    
    // 小号标题
    &.small {
        font-size: $font-size-sm;
        margin: $space-md 0 $space-xs 0;
    }
    
    // 居中对齐
    &.center {
        text-align: center;
    }
    
    // 带边框（加强版）
    &.border {
        border-bottom: 2px solid $color-primary-base;
        color: $color-text;
        font-weight: $font-weight-bold;
    }
    
    // 带图标
    &.icon {
        display: flex;
        align-items: center;
    }
    
    &__icon {
        margin-right: $space-sm;
        color: $color-primary-base;
        font-size: inherit;
    }
    
    // 深色模式
    &.dark {
        color: $color-white;
        border-bottom-color: rgba($color-white, 0.3);
        
        &.border {
            border-bottom-color: $color-white;
        }
        
        .ul-title-section__icon {
            color: $color-white;
        }
    }
    
    // 禁用状态
    &.disabled {
        color: $color-text-disabled;
        border-bottom-color: $color-border;
        cursor: not-allowed;
        
        .ul-title-section__icon {
            color: $color-text-disabled;
        }
    }
    
    // 响应式设计
    @include media-breakpoint-down(md) {
        font-size: $font-size-sm;
        margin: $space-md 0 $space-xs 0;
        
        &.large {
            font-size: $font-size-md;
            margin: $space-lg 0 $space-sm 0;
        }
        
        &.small {
            font-size: $font-size-xs;
        }
    }
    
    @include media-breakpoint-down(sm) {
        .ul-title-section__icon {
            margin-right: $space-xs;
        }
    }
}

.ul-title-section {
  font-size: 14px;
  font-weight: 500;
  color: var(--ul-color-text-secondary);
  margin: 16px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ul-color-border);
  line-height: 1.5;
}
.ul-title-section.large {
  font-size: 16px;
  font-weight: 700;
  margin: 32px 0 16px 0;
}
.ul-title-section.small {
  font-size: 12px;
  margin: 16px 0 4px 0;
}
.ul-title-section.center {
  text-align: center;
}
.ul-title-section.border {
  border-bottom: 2px solid var(--ul-color-primary-base);
  color: var(--ul-color-text);
  font-weight: 700;
}
.ul-title-section.icon {
  display: flex;
  align-items: center;
}
.ul-title-section__icon {
  margin-right: 8px;
  color: var(--ul-color-primary-base);
  font-size: inherit;
}
.ul-title-section.dark {
  color: var(--ul-color-white);
  border-bottom-color: rgba(var(--ul-color-white), 0.3);
}
.ul-title-section.dark.border {
  border-bottom-color: var(--ul-color-white);
}
.ul-title-section.dark .ul-title-section__icon {
  color: var(--ul-color-white);
}
.ul-title-section.disabled {
  color: var(--ul-color-text-placeholder);
  border-bottom-color: var(--ul-color-border);
  cursor: not-allowed;
}
.ul-title-section.disabled .ul-title-section__icon {
  color: var(--ul-color-text-placeholder);
}
@media (max-width: 767.98px) {
  .ul-title-section {
    font-size: 12px;
    margin: 16px 0 4px 0;
  }
  .ul-title-section.large {
    font-size: 14px;
    margin: 24px 0 8px 0;
  }
  .ul-title-section.small {
    font-size: 10px;
  }
}
@media (max-width: 575.98px) {
  .ul-title-section .ul-title-section__icon {
    margin-right: 4px;
  }
}

<view class="ul-title-section">基础标题</view>
<view class="ul-title-section large">大号标题</view>
<view class="ul-title-section small">小号标题</view>
<view class="ul-title-section center">居中标题 </view>
<view class="ul-title-section border">带边框标题</view>
<view class="ul-title-section icon"><i class="fa fa-star ul-title-section__icon"></i> 带图标标题</view>
<view class="ul-title-section dark">深色模式标题</view>
<view class="ul-title-section disabled">禁用状态标题</view>
<view class="ul-title-section">销售</view>
<view class="ul-title-section">设计</view>

.ul-title-tag {
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    color: $color-text;
    background-color: $color-light-base;
    padding: $space-sm $space-md;
    margin-bottom: $space-md;
    margin-right: $space-md;
    position: relative;
    

    &.width-limit{
      max-width: 60px;
      text-align: right;
      text-align: center;
    }
    
    &::after {
        content: '';
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid $color-light-base;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    
    // Use a loop to generate Sass variables for theme colors
    @each $name, $color in $theme-colors {
        $bg-color: #{$name}-bg;
        $text-color: #{$name}-text;

        &.#{$name} {
            background-color: $color;
            color: var(--ul-color-#{$text-color});
            
            &::after {
                border-left-color: $color;
            }
        }
    }
    
    // Responsive design
    @include media-breakpoint-down(md) {
        font-size: $font-size-sm;
        padding: $space-xs $space-sm;
        
        &::after {
            right: -6px;
            border-left-width: 6px;
            border-top-width: 6px;
            border-bottom-width: 6px;
        }
    }
    
    @include media-breakpoint-down(sm) {
        margin-right: $space-sm;
        
        &::after {
            right: -5px;
            border-left-width: 5px;
            border-top-width: 5px;
            border-bottom-width: 5px;
        }
    }
}

.ul-title-tag {
  font-size: 14px;
  font-weight: 500;
  color: var(--ul-color-text);
  background-color: var(--ul-color-light-base);
  padding: 8px 16px;
  margin-bottom: 16px;
  margin-right: 16px;
  position: relative;
}
.ul-title-tag.width-limit {
  max-width: 60px;
  text-align: right;
  text-align: center;
}
.ul-title-tag::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid var(--ul-color-light-base);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.ul-title-tag.primary {
  background-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-text);
}
.ul-title-tag.primary::after {
  border-left-color: var(--ul-color-primary-base);
}
.ul-title-tag.success {
  background-color: var(--ul-color-success-base);
  color: var(--ul-color-success-text);
}
.ul-title-tag.success::after {
  border-left-color: var(--ul-color-success-base);
}
.ul-title-tag.danger {
  background-color: var(--ul-color-danger-base);
  color: var(--ul-color-danger-text);
}
.ul-title-tag.danger::after {
  border-left-color: var(--ul-color-danger-base);
}
.ul-title-tag.warning {
  background-color: var(--ul-color-warning-base);
  color: var(--ul-color-warning-text);
}
.ul-title-tag.warning::after {
  border-left-color: var(--ul-color-warning-base);
}
.ul-title-tag.info {
  background-color: var(--ul-color-info-base);
  color: var(--ul-color-info-text);
}
.ul-title-tag.info::after {
  border-left-color: var(--ul-color-info-base);
}
.ul-title-tag.dark {
  background-color: var(--ul-color-dark-base);
  color: var(--ul-color-dark-text);
}
.ul-title-tag.dark::after {
  border-left-color: var(--ul-color-dark-base);
}
.ul-title-tag.light {
  background-color: var(--ul-color-light-base);
  color: var(--ul-color-light-text);
}
.ul-title-tag.light::after {
  border-left-color: var(--ul-color-light-base);
}
.ul-title-tag.gray {
  background-color: var(--ul-color-gray-base);
  color: var(--ul-color-gray-text);
}
.ul-title-tag.gray::after {
  border-left-color: var(--ul-color-gray-base);
}
@media (max-width: 767.98px) {
  .ul-title-tag {
    font-size: 12px;
    padding: 4px 8px;
  }
  .ul-title-tag::after {
    right: -6px;
    border-left-width: 6px;
    border-top-width: 6px;
    border-bottom-width: 6px;
  }
}
@media (max-width: 575.98px) {
  .ul-title-tag {
    margin-right: 8px;
  }
  .ul-title-tag::after {
    right: -5px;
    border-left-width: 5px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
}

<view class="ul-title-tag width-limit">销售</view>
<view class="ul-title-tag primary width-limit">设计</view>
<view class="ul-title-tag success">开发</view>
<view class="ul-title-tag danger">运营</view>
<view class="ul-title-tag warning">市场</view>
<view class="ul-title-tag info">产品</view>
<view class="ul-title-tag dark">技术</view>
<view class="ul-title-tag gray">财务</view>