<template>
  <div class="logintab">
      <div :class="selected==1?'tab tab1':'tab'" @mouseover="tabchange(1)">{{lan.$t("shoujidenglu")}}</div>
      <div :class="selected==2?'tab tab1':'tab'" @mouseover="tabchange(2)">{{lan.$t("mimadenglu")}}</div>
  </div>
</template>

<script lang="ts">
import { useI18n } from '@/utils/i18n';
import { defineComponent , ref} from "vue";

export default defineComponent({
  name: "LoginTab",
  components: {},
 

  setup(prop,context) {
    const lan: any = useI18n();
    const selected=ref(1)
    function tabchange(e: number): void{
        selected.value=e
        context.emit("sel",e)

    }
    return {
      selected,
      tabchange,
      lan
    };
  },
});
</script>
<style lang="scss" scoped>
.logintab{
    display: flex;
    .tab{
        width: 130px;
        height: 29px;
        border-radius: 14px;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
        font-size: 11px;
        line-height: 28px;
    }
    .tab1{
        background: #08AE98;
        color: white;
    }
}
</style>