slibra-official-web/components/BaseTabs.vue

<script setup lang="ts">

const props = defineProps<{
  data: any[];
  type: string;
	listWidth: string;
}>()
const { locale } = useI18n();
const emit = defineEmits<{
  (e:'on-click', i: number): void
}>()

const modelValue = defineModel<number>();

const tabItemWidth = computed(() => {
  // const proportion = Number((100 / props.data.length).toFixed(2));
  return props.data.length === 4 ? 'w-[50%]' : 'w-[33%]';
})

const handleClickTab = (index: number) => {

  if (process.client) {

    const scrollTop = document.documentElement.scrollTop;

    if ( scrollTop >= 506 ) {
      window.scrollTo({ top: 437, left: 0, behavior: 'smooth' });
    }

  }

  modelValue.value = index;
  emit('on-click', index);
}
</script>

<template>
  <n-affix :top="70" :trigger-top="70">
    <div class="tab-container" :class="locale">
      <ul
				class="tab-list px-[10px] text-[16px] md:text-[18px]"
				:class="[type === 'center'? 'center' : 'between']"
				:style="listWidth === '1380'&& locale === 'en'? 'max-width: 1380px; margin: 0 auto;' : ''"
			>
        <li v-for="(item, index) in data" :key="item.langKey"
          :class="['tab-item', tabItemWidth, 'md:w-[25%]', { active: index === modelValue }]"
          @click="handleClickTab(index)"
        >
          <span class="px-[20px] py-[5px] md:py:[10px]">{{ $t(item.langKey) }}</span>
        </li>
      </ul>
    </div>
  </n-affix>
</template>

<style scoped lang="scss">
 .n-affix {
    z-index: 101;
  }
.tab-container {
  width: 100vw;
  background: linear-gradient(90deg, #A5EAFD 0%, #6CF098 100%);

  .n-affix {
    z-index: 10;
  }
}
.tab-list {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 26px;
  color: $t-color-primary;

  .tab-item {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;

    span {
      border: 1px solid transparent;
      display: inline-block;
      padding: 10px 20px;
    }
  }

  .active {
    span {
      border-color: #000;
      border-radius: 24px;
      font-weight: bold;
      transition: all 0.3s;
    }
  }
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

@media screen and (max-width: 640px) {
  .en {
    .tab-list {
      padding: 10px 0;
      .tab-item {
        font-size: 12px;
        span {
          padding: 10px;
        }
      }
    }
		.tab-container{
			.tab-list{
				.tab-item {
					width: 100%;
				}
			}
		}
  }
}
 .en{
	 .tab-list{
		 /*max-width: 1280px;*/
		 .tab-item {
			 width: 25%;
			 font-size: 14px !important;
		 }
	 }
 }
</style>