i18n-demo/src/components/IphHeader.vue

<!--
 * @Descripttion: 头部导航栏
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-04-09 14:17:59
 * @LastEditors: dream
 * @LastEditTime: 2021-04-09 15:20:07
-->
<template>
  <div class="header">
    <div class="line">
      <div class="line-title">{{$t('index.headerTitle')}}</div>
      <div class="call-me">{{$t('index.contactUs')}}</div>
    </div>
    <div class="nav">
      <img class="logo-img" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2939464207,3798916386&fm=26&gp=0.jpg" />
      <ul class="nav-menu-list">
        <li :class="currentNav === index ? 'active' : ''" v-for="(item, index) in navList" :key="index" @click="changeNavTab(index)">{{$t(item)}}</li>
      </ul>
      <div class="local">
        <span :class="local === 'zh_c' ? 'active' : ''" @click="chengeLanguage('zh_c')">CH</span>
        <span>|</span>
        <span :class="local === 'en' ? 'active' : ''" @click="chengeLanguage('en')">EN</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IphHeader',
  data () {
    return {
      local: 'zh_c',
      currentNav: 0,
      navList: [
        'index.nav[0]',
        'index.nav[1]',
        'index.nav[2]',
        'index.nav[3]',
        'index.nav[4]',
        'index.nav[5]'
      ]
    }
  },
  methods: {
    changeNavTab (index) {
      this.currentNav = index
    },
    chengeLanguage (val) {
      this.local = val
      this.$i18n.locale = val
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  .line {
    padding: 12px;
    display: flex;
    align-items: center;
    .line-title {
      flex: 1;
      text-align: center;
    }
    .call-me {
      color: '#169BD5';
      cursor: pointer;
    }
  }
  .nav {
    display: flex;
    align-items: center;
    padding: 0 32px;
    .logo-img {
      width: 90px;
      height: 70px;
    }
    .nav-menu-list {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;
      list-style: none;
      li {
        padding: 24px;
        color: #55C0EE;
        cursor: pointer;
      }
      .active {
        font-weight: 600;
        color: #169BD5;
      }
    }
    .local {
      display: flex;
      align-items: center;
      span {
        padding: 6px;
        cursor: pointer;
      }
      .active {
        color: #169BD5;
      }
    }
  }
}
</style>