<template>
  <div class="login">
    <el-row :inline="true" justify="space-between" class="title">
      <div class="imgBox">
<!--        <img class="img" src="@/assets/images/logo@2x.png" alt="">-->
      </div>
      <div class="title-right">
        <router-link to="login" class="tilt-btn">
          <div class="text" :class="{'btnText':route.name=='login'}">登录</div>
          <div class="text-B" :class="{'btn-B':route.name=='login'}">LOGIN</div>
        </router-link>
        <router-link to="register" class="tilt-btn" active-class="btn">
          <div class="text" :class="{'btnText':route.name=='register'}">注册会员</div>
          <div class="text-B" :class="{'btn-B':route.name=='register'}">REGISTERED</div>
        </router-link>
        <router-link to="regulations" class="tilt-btn" active-class="btn">
          <div class="text" :class="{'btnText':route.name=='regulations'}">会员管理办法</div>
          <div class="text-B" :class="{'btn-B':route.name=='regulations'}">Regulations</div>
        </router-link>
      </div>
    </el-row>
    <router-view class="login-center" />
    <div class="el-login-footer">
      <span>中国跆拳道协会版权所有</span>
    </div>
  </div>
</template>

<script setup>

import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'

const route = useRoute()

const index = ref(0)

watch(() => route.name, (val) => {
  switch (val) {
    case 'login':
      index.value = 1
      break
    case 'register':
      index.value = 2
      break
    case 'regulations':
      index.value = 3
      break
  }
})

</script>

<style lang="scss" scoped>

.title {display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  height: 100px;
  background-color: #fff;
}
.title-right {
  display: flex;
  justify-content: space-between;
}
:deep(.el-tabs__nav-wrap::after) {
  border: 0;
  opacity: 0;
}
:deep(.el-tabs__nav) {
  // text-align: center;
  width: 100%;
}

.title-left {
  color: #043793;
  font-weight: 900;
  font-size: 30px;
  margin-left: 100px;
  padding-top: 25px;
}

.tilt-btn {
  // background-color: #043793;
  color: #043793;
  font-weight: 700;
  background-color: none;
  font-size: 20px;
  margin-right: 20px;
  padding:0 20px;
  cursor: pointer;
}
.btn {
  // color: #fff;
  // background-color: #043793;
  border-radius: 10px;
}
.title-text {
  color: #043793;
  font-weight: 500;
  font-size: 20px;
}

.login {
  height: 100%;
}
.login-center {
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.img{
  height: 70px;
}
.text{
  font-size: 1.2vw;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4C5359;
  margin-top: 10px;
}
.text-B{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #95A1A6;
  margin-top: 10px;
}

.btnText{
color:#014A9F
}
.btn-B{
  color:#008BF7
}

:deep(.el-button--success){
  width: 440px;
  height: 60px;
  background: #014A9F;
  border-radius: 4px;
  span{
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
  }

}

:deep(.el-tabs__item){
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}
:deep(.is-active){
  color: #014A9F;

}


// :deep()

@media (max-width: 1400px) {
  .title{height: 70px;
    .img{height: 55px}
  }
  .text{font-size: 1.3vw;}
  .text-B{margin-top: 0}
}
</style>