sist_web/src/views/header/index.vue

<template>
  <el-row>
    <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
      <div class="grid-content"></div>
    </el-col>
    <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
      <div class="header">
        <!--头部部分-->
        <div class="top">
          <el-row>
            <el-col :span="2">
              <div class="link">
                {{ $t('message.student') }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="link">
                {{ $t('message.staff') }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="link">
                {{ $t('message.alumni') }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="link">
                {{ $t('message.examine') }}
              </div>
            </el-col>
            <el-col :span="3">
              <div class="link">
                {{ $t('message.Services portal') }}
              </div>
            </el-col>
            <el-col :offset="11" :span="2">
              <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
            </el-col>
          </el-row>
        </div>
        <!--导航部分-->
        <div class="bottom">
          <el-row>
            <el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
              <div class="icon">
                <div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
                <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
              </div>
            </el-col>
            <el-col v-show="width>=992" :span="1">
              <div class="grid-content"></div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19">
              <div class="banner">
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>学院首页</div>
                  </div>
                </router-link>
                <router-link to="/sp">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>学院概况</div>
                  </div>
                </router-link>
                <router-link to="/ts">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>党群工作</div>
                  </div>
                </router-link>
                <router-link to="/et">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>师资队伍</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>教育教学</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>科学研究</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>学科建设</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>学生工作</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>校友工作</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>国际化</div>
                  </div>
                </router-link>
                <router-link to="/">
                  <div class="link_text">
                    <div class="border"></div>
                    <div>资料下载</div>
                  </div>
                </router-link>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-col>
    <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
      <div class="grid-content"></div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      width: document.documentElement.clientWidth
    }
  },
  methods: {
    switchLang() {
      let lang = ''
      if (this.$i18n.locale === 'en') {
        lang = 'cn'
      } else {
        lang = 'en'
      }
      this.$i18n.locale = lang;
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  .top {
    font-size: 1.2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 3rem;
    width: 100%;
    height: 3rem;
    background: #1956BC;

    .switchLang {
      cursor: pointer;
      font-size: 1.6rem;
    }
    .link{
      width: 80%;
      margin: 0 auto;
      border-radius: 1.1rem;
    }

    .link:hover {
      background: rgba(255, 255, 255, 0.7);
    }

  }

  .bottom {
    height: 8rem;
    background: rgba(25, 86, 188, 0.6);
    border-radius: 0rem 0rem 2rem 2rem;

    .icon {
      margin-left: 20%;

      div {
        margin-top: 1rem;
      }

      .icont {
        img {
          width: 18.3rem;
        }
      }

      .iconb {
        img {
          width: 8.9rem;
        }
      }
    }

    .banner {
      a {
        text-decoration: none;
        color: #ffffff;
      }

      width: 100%;
      height: 8rem;
      clear: left;

      .link_text {
        width: 9%;
        height: 100%;
        line-height: 8.2rem;
        text-align: center;
        float: left;
        font-size: 1.4rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
        position: relative;

        .border {
          position: absolute;
          top: 0;
          left: 10%;
          width: 80%;
          margin: 0 auto;
          height: 0.4rem;
          background: transparent;
          border-radius: 0.2rem;
        }
      }
      .link_text:hover{
        .border{
          background-color: #fff;
        }
      }
    }
  }
}


</style>