sist_web/src/views/header/mobile_herder.vue

<template>
<div class="mobile_herder">
  <div class="bottom">
    <div @click="drawer = true">
      <i class="el-icon-s-fold"></i>
    </div>
    <div class="img">
      <img src="@/assets/header/sy_logo1@2x.png" alt="">
    </div>
    <div class="img">
      <img src="@/assets/header/sy_logo2@2x.png" alt="">
    </div>
    <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
  </div>
  <el-drawer
    size="60%"
    :append-to-body="true"
    :withHeader="false"
    :visible.sync="drawer"
    :direction="direction"
  >
<!--    <div class="banner">导航</div>-->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="1">
        <span slot="title">学院首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <span>党群工作</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <span>师资队伍</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <span>教育教学</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <span>科学研究</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <span>学科建设</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <span>学生工作</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="8">
        <template slot="title">
          <span>校友工作</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="9">
        <template slot="title">
          <span>国际化</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="10">
        <span slot="title">资料下载</span>
      </el-menu-item>
    </el-menu>
  </el-drawer>
</div>

</template>

<script>
export default {
  name: "mobile_herder",
  data() {
    return {
      drawer: false,
      direction: 'ltr',
    };
  },
  methods: {
    switchLang() {
      let lang = ''
      if (this.$i18n.locale === 'en') {
        lang = 'cn'
      } else {
        lang = 'en'
      }
      this.$i18n.locale = lang;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style>
/*#el-drawer__title{*/
/*  display: none !important;*/
/*}*/
</style>

<style scoped lang="scss">
.banner{
  text-align: center;
  height: 4rem;
  font-size: 3rem;
  margin-top: 3rem ;
}
  .mobile_herder{
    .top{
      padding-left: 2rem;
      height: 4rem;
      background-color: #1956BC;
      line-height: 4rem;
      font-size: 1.6rem;
      color: #ffffff;
    }
    .bottom{
      background-color: #1956BC;
      padding-left: 2rem;
      font-size: 5rem;
      height: 6.3rem;
      line-height: 6rem;
      cursor: pointer;
      clear: left;
      .el-icon-s-fold{
        width: 6rem;
        height: 6rem;
        color: white;
      }
      div{
        float: left;
      }
      .switchLang{
        float: right;
        font-size: 2rem;
        color: #ffffff;
        margin-right: 3rem;
      }
      img{
        height: 3rem;
        line-height: 6rem;
      }
      .img{
        margin-left: 3rem;
      }
      //width: 100%;
    }
  }
</style>