From b9bf86853559cddca3c92e8dc96690f26c6a8d06 Mon Sep 17 00:00:00 2001
From: clay <20932067@zju.edu.cn>
Date: Mon, 3 Jan 2022 20:29:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E6=B7=BB=E5=8A=A0banner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  16 +-
 src/views/header/mobile_herder.vue    | 230 ++++++++++++++++++++++++++
 src/views/index/components/bottom.vue |   1 -
 3 files changed, 240 insertions(+), 7 deletions(-)
 create mode 100644 src/views/header/mobile_herder.vue

diff --git a/src/App.vue b/src/App.vue
index 378bfd6..66802e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,8 @@
       <i class="el-icon-top" style="color: #409eff"></i>
     </div>
     <div class="headers">
-      <headers/>
+      <headers v-show="width" />
+      <MobileHerder v-show="!width"/>
     </div>
     <el-row>
       <el-col>
@@ -16,17 +17,20 @@
 </template>
 <script>
 import headers from './views/header/index'
+import MobileHerder from './views/header/mobile_herder'
 import footers from './views/footer/index'
 
 export default {
   name: 'App',
   components: {
     headers,
-    footers
+    footers,
+    MobileHerder
   },
   data() {
     return {
-      iftop: false
+      iftop: false,
+      width: document.documentElement.clientWidth >=992
     }
   },
   mounted() { //监听scroll方法
@@ -62,9 +66,9 @@ export default {
 .headers {
   width: 100%;
   z-index: 9999;
-  position: absolute;
-  top: 0;
-  left: 0;
+  /*position: absolute;*/
+  /*top: 0;*/
+  /*left: 0;*/
 }
 
 .totop {
diff --git a/src/views/header/mobile_herder.vue b/src/views/header/mobile_herder.vue
new file mode 100644
index 0000000..de13fa5
--- /dev/null
+++ b/src/views/header/mobile_herder.vue
@@ -0,0 +1,230 @@
+<template>
+<div class="mobile_herder">
+  <div class="top">
+    <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
+  </div>
+  <div class="bottom" @click="drawer = true">
+    <i class="el-icon-s-fold"></i>
+  </div>
+<!--  <i class="el-icon-s-unfold"></i>-->
+  <el-drawer
+    size="50%"
+    :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{
+      margin-left: 2rem;
+      font-size: 5rem;
+      height: 6rem;
+      line-height: 6rem;
+      cursor: pointer;
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/views/index/components/bottom.vue b/src/views/index/components/bottom.vue
index b2d45ec..1b7ca0e 100644
--- a/src/views/index/components/bottom.vue
+++ b/src/views/index/components/bottom.vue
@@ -80,7 +80,6 @@ export default {
 .bottom {
   margin-top: 2rem;
   background-image: url('../../../assets/index/bottom/sy_bj4.png');
-  //height: 66rem;
   padding-bottom: 4rem;
 
   .table {