fashion-ssr-vue3/pages/account/favourites.vue

<script lang='ts' setup>
const activeName = ref()
const router = useRouter()
const route = useRoute()

function handleClick(tab: any) {
  const tabName = tab.paneName
  activeName.value = tabName
  router.push({
    path: '/account/favourites',
    query: {
      tab: tabName,
    },
  })
}
onMounted(() => {
  activeName.value = route.query.tab as string
})
</script>

<template>
  <div class="">
    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
      Favourites
    </div>
    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
      <el-tab-pane label="Products" name="products">
        <business-account-favourite-products :active-name="activeName" />
      </el-tab-pane>
      <el-tab-pane label="Brands" name="following">
        <business-account-favourite-brands :active-name="activeName" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang='less' scoped>
.favorite-tabs {
  background-color: #FAFAFA;
  border-radius: 10px;
  padding: 20px;
  padding-top: 0px;
  ::v-deep(.el-tabs__header){
    .el-tabs__item{
      color: #333;
      &.is-active {
        color: #C58C64!important;
      }
    }
    .el-tabs__active-bar{
      background-color: #C58C64!important;
    }
  }
}
</style>