mrr.sj.front/components/common/service-first-tab.vue

<template>
  <!-- 根元素绑定CSS变量，关联props中的颜色 -->
  <view 
    class="service-first-tab" 
    :style="[
      { backgroundColor: bgColor },
      { '--active-color': activeColor },  // 激活色变量
      { '--inactive-color': inactiveColor }, // 非激活色变量
      { '--tab-padding-top': tabPaddingTop}, // 
	   { '--tab-padding-bottom': tabPaddingBottom} // 
    ]"
  >
    <scroll-view
      scroll-x
      class="tab-scroll"
      :show-scrollbar="false"
      @touchmove.prevent.stop
    >
      <view class="tab-container">
        <view
          v-for="(tab, index) in tabs"
          :key="tab.id"
          :class="['tab-item', { active: activeId == tab.id }]"
		  :style="{ paddingTop: tabPaddingTop,paddingBottom: tabPaddingBottom }"
          @click="handleTabClick(tab)"
        >
          <text class="tab-text">{{ tab.title }}</text>
          <view class="tab-active-indicator" v-if="activeId == tab.id"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "ServiceFirstTab",
  props: {
    tabs: {
      type: Array,
      required: true,
      default: () => [],
    },
    activeId: {
      type: [String, Number],
      default: "",
    },
    tabWidth: {
      type: Number,
      default: 140,
    },
    // 已定义的激活色props（无需修改）
    activeColor: {
      type: String,
      default: "#FF4767",
    },
    // 已定义的非激活色props（无需修改）
    inactiveColor: {
      type: String,
      default: "#333",
    },
    fontSize: {
      type: Number,
      default: 28,
    },
    indicatorHeight: {
      type: Number,
      default: 6,
    },
    bgColor: {
      type: String,
      default: "#fafafa",
    },
	//itempading
	tabPaddingTop: {
		type: String,
		default: "30rpx",  // 默认值就是复合写法，验证生效
	},
	tabPaddingBottom: {
		type: String,
		default: "14rpx",  // 默认值就是复合写法，验证生效
	},
  },
  methods: {
    handleTabClick(tab) {
      if (this.activeId === tab.id) return;
      this.$emit("tab-click", tab.id, tab.title, tab);
    },
  },
};
</script>

<style scoped>
.service-first-tab {
  position: relative;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.05);
}


/* 反圆角 */
/* .service-first-tab::after {
  content: '';
  position: absolute;

  left: 0;
  width: 100%;
  height: 40rpx;
  background: #fafafa;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
} */

.tab-scroll {
  width: 100%;
  white-space: nowrap;
}

.tab-container {
  display: flex;
  padding: 0 30rpx;
  gap: 60rpx;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
 /* padding: 0 20rpx; */
  /* height: 88rpx; */
  justify-content: center;
  position: relative;
}

/* 非激活色：使用CSS变量 --inactive-color */
.tab-text {
  font-size: 30rpx;
  color: var(--inactive-color); 
  transition: color 0.2s;
  white-space: nowrap;
  
}

/* 激活色：使用CSS变量 --active-color */
.tab-item.active .tab-text {
  color: var(--active-color); 
  font-weight: 500;
}

/* 下划线颜色：与激活色一致，使用 --active-color */
.tab-active-indicator {
  position: absolute;
  bottom: 0;
  width: 32rpx;
  height: 6rpx; /* 可关联 indicatorHeight props，见延伸优化 */
  background-color: var(--active-color); 
  border-radius: 10rpx;
  transition: all 0.2s;
}
</style>