.ul-link-select {
    display: flex;
    align-items: flex-start;
    padding: $space-sm;
    gap: $space-md;

    &__title {
        color: $color-text;
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1.5; // 确保与选项的行高一致
        padding: $space-xs 0; // 与选项的垂直内边距保持一致
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        gap: $space-sm;
        flex: 1;
    }

    &__item {
        padding: $space-xs $space-md;
        color: $color-text-secondary;
        font-size: $font-size-sm;
        cursor: pointer;
        border-radius: $radius-base;
        transition: all 0.2s ease;
        white-space: nowrap;
        line-height: 1.5; // 与标题保持一致的行高

        &:hover {
            color: $color-primary-base;
            background-color: $color-primary-light;
        }

        &.active {
            color: $color-primary-base;
            background-color: $color-primary-light;
            font-weight: $font-weight-medium;
        }

        &.disabled {
            color: $color-text-disabled;
            cursor: not-allowed;
            
            &:hover {
                color: $color-text-disabled;
                background-color: transparent;
            }
        }
    }

    // 按钮样式模式
    &.button {
        .ul-link-select__item {
            border: 1px solid $color-border;
            background-color: $color-white;

            &:hover {
                border-color: $color-primary-base;
                color: $color-primary-base;
                background-color: $color-white;
            }

            &.active {
                border-color: $color-primary-base;
                color: $color-white;
                background-color: $color-primary-base;
            }
            
        }
    }

    // 垂直排列模式
    &.vertical {
        flex-direction: column;
        align-items: flex-start;

        .ul-link-select__list {
            flex-direction: column;
            width: 100%;
            align-items: flex-start; // 确保选项左对齐
        }

        .ul-link-select__item {
            width: auto; // 改为auto，让背景色只包围文字内容
            text-align: left;
            display: inline-block; // 确保宽度只包围内容
        }
    }

    // 响应式设计
    @include media-breakpoint-down(md) {
        flex-direction: column;
        gap: $space-sm;

        &__title {
            margin-bottom: $space-xs;
        }

        &__list {
            width: 100%;
        }

        &__item {
            padding: $space-sm $space-md;
            font-size: $font-size-base;
        }
    }

    @include media-breakpoint-down(sm) {
        &__list {
            gap: $space-xs;
        }

        &__item {
            padding: $space-xs $space-sm;
            font-size: $font-size-sm;
        }
    }
}

.ul-link-select {
  display: flex;
  align-items: flex-start;
  padding: 8px;
  gap: 16px;
}
.ul-link-select__title {
  color: var(--ul-color-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  padding: 4px 0;
}
.ul-link-select__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.ul-link-select__item {
  padding: 4px 16px;
  color: var(--ul-color-text-secondary);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.5;
}
.ul-link-select__item:hover {
  color: var(--ul-color-primary-base);
  background-color: var(--ul-color-primary-light);
}
.ul-link-select__item.active {
  color: var(--ul-color-primary-base);
  background-color: var(--ul-color-primary-light);
  font-weight: 500;
}
.ul-link-select__item.disabled {
  color: var(--ul-color-text-placeholder);
  cursor: not-allowed;
}
.ul-link-select__item.disabled:hover {
  color: var(--ul-color-text-placeholder);
  background-color: transparent;
}
.ul-link-select.button .ul-link-select__item {
  border: 1px solid var(--ul-color-border);
  background-color: var(--ul-color-white);
}
.ul-link-select.button .ul-link-select__item:hover {
  border-color: var(--ul-color-primary-base);
  color: var(--ul-color-primary-base);
  background-color: var(--ul-color-white);
}
.ul-link-select.button .ul-link-select__item.active {
  border-color: var(--ul-color-primary-base);
  color: var(--ul-color-white);
  background-color: var(--ul-color-primary-base);
}
.ul-link-select.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.ul-link-select.vertical .ul-link-select__list {
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
}
.ul-link-select.vertical .ul-link-select__item {
  width: auto;
  text-align: left;
  display: inline-block;
}
@media (max-width: 767.98px) {
  .ul-link-select {
    flex-direction: column;
    gap: 8px;
  }
  .ul-link-select__title {
    margin-bottom: 4px;
  }
  .ul-link-select__list {
    width: 100%;
  }
  .ul-link-select__item {
    padding: 8px 16px;
    font-size: 14px;
  }
}
@media (max-width: 575.98px) {
  .ul-link-select__list {
    gap: 4px;
  }
  .ul-link-select__item {
    padding: 4px 8px;
    font-size: 12px;
  }
}

<view class="ul-section">
    <view class="ul-link-select">
        <view class="ul-link-select__title">风格:</view>
        <view class="ul-link-select__list">
            <view class="ul-link-select__item active">全部 </view>
            <view class="ul-link-select__item">国产</view>
            <view class="ul-link-select__item">欧美</view>
            <view class="ul-link-select__item">日韩</view>
        </view>
    </view>
</view>
<view class="ul-section ul-bg-white">
    <view class="ul-link-select button">
        <view class="ul-link-select__title">风格:</view>
        <view class="ul-link-select__list">
            <view class="ul-link-select__item active">全部 </view>
            <view class="ul-link-select__item">国产</view>
            <view class="ul-link-select__item">欧美</view>
            <view class="ul-link-select__item">日韩</view>
        </view>
    </view>
</view>
<view class="ul-section">
    <view class="ul-link-select vertical">
        <view class="ul-link-select__title">分类:</view>
        <view class="ul-link-select__list">
            <view class="ul-link-select__item active">全部分类 </view>
            <view class="ul-link-select__item">电子产品</view>
            <view class="ul-link-select__item">服装配饰 </view>
            <view class="ul-link-select__item">家居用品 </view>
            <view class="ul-link-select__item">运动户外</view>
        </view>
    </view>
</view>