meilan-app/src/components/h-tabs/h-tabs.vue

<template>
  <view class="h-tabs" :style="{ '--active-color': activeColor }">
    <view v-for="item in tabs" :key="item[valueKey]" :class="{ active: item[valueKey] === currentValue }"
      :style="[item[valueKey] === currentValue ? item.activeStyle : item.style]" class="h-tabs-item"
      @click="handleTabClick(item)">
      {{ item[labelKey] }}
      <!-- 显示红点 -->
      <view v-if="item.unreadCount > 0" class="h-tabs-red-dot"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HTabs',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number],
      default: ''
    },
    valueKey: {
      type: String,
      default: 'type'
    },
    labelKey: {
      type: String,
      default: 'title'
    },
    activeColor: {
      type: String,
      default: '#2A70D1'
    }
  },
  data() {
    return {
      currentValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.currentValue = newVal;
    }
  },
  methods: {
    handleTabClick(item) {
      this.currentValue = item[this.valueKey];
      this.$emit('input', this.currentValue);
      this.$emit('change', this.currentValue, item);
    }
  }
};
</script>

<style lang="scss" scoped>
.h-tabs {
  display: flex;
  padding: 0 0 32rpx;
  font-size: 28rpx;
  color: #666666;
  line-height: 32rpx;
  gap: 48rpx;
  width: 100%;

  // 默认样式
  .h-tabs-item {
    position: relative;
    cursor: pointer;
    padding: 0 8rpx;

    &.active {
      font-size: 36rpx;
      color: var(--active-color);
      line-height: 42rpx;

      &:after {
        content: "";
        position: absolute;
        bottom: -12rpx;
        left: 0;
        width: 50%;
        height: 6rpx;
        background: var(--active-color);
        border-radius: 12rpx;
        transition: all 0.3s ease;
      }
    }
  }

  // 红点样式
  .h-tabs-red-dot {
    position: absolute;
    top: -4rpx;
    right: 0;
    width: 16rpx;
    height: 16rpx;
    background-color: #FF4D4F;
    border-radius: 50%;
    transform: translateX(50%);
  }
}
</style>