diff --git a/src/assets/header/logo.png b/src/assets/header/logo.png
new file mode 100644
index 0000000..41516a1
Binary files /dev/null and b/src/assets/header/logo.png differ
diff --git a/src/assets/header/logo@2x.png b/src/assets/header/logo@2x.png
new file mode 100644
index 0000000..0c3051b
Binary files /dev/null and b/src/assets/header/logo@2x.png differ
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index bced5df..34e9cfa 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,70 +1,71 @@
 <template>
+  <div style="background: linear-gradient(180deg, rgba(61, 96, 163, 0.91) 0%, rgba(61, 96, 163, 0.64) 35%, rgba(61, 96, 163, 0.42) 65%, rgba(73, 133, 234, 0.33) 77%, rgba(73, 133, 234, 0.02) 100%);
+">
   <div class="header">
     <!--头部部分-->
-    <!--    <div class="top">-->
-    <!--      <el-row>-->
-    <!--&lt;!&ndash;        <el-col :span="2">&ndash;&gt;-->
-    <!--&lt;!&ndash;          <div class="link">&ndash;&gt;-->
-    <!--&lt;!&ndash;            {{ $t('message.student') }}&ndash;&gt;-->
-    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
-    <!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
-    <!--&lt;!&ndash;        <el-col :span="2">&ndash;&gt;-->
-    <!--&lt;!&ndash;          <div class="link">&ndash;&gt;-->
-    <!--&lt;!&ndash;            {{ $t('message.staff') }}&ndash;&gt;-->
-    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
-    <!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
-    <!--&lt;!&ndash;        <el-col :span="2">&ndash;&gt;-->
-    <!--&lt;!&ndash;          <div class="link">&ndash;&gt;-->
-    <!--&lt;!&ndash;            {{ $t('message.alumni') }}&ndash;&gt;-->
-    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
-    <!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
-    <!--&lt;!&ndash;        <el-col :span="2">&ndash;&gt;-->
-    <!--&lt;!&ndash;          <div class="link">&ndash;&gt;-->
-    <!--&lt;!&ndash;            {{ $t('message.examine') }}&ndash;&gt;-->
-    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
-    <!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
-    <!--&lt;!&ndash;        <el-col :span="3">&ndash;&gt;-->
-    <!--&lt;!&ndash;          <div class="link">&ndash;&gt;-->
-    <!--&lt;!&ndash;            {{ $t('message.services_portal') }}&ndash;&gt;-->
-    <!--&lt;!&ndash;          </div>&ndash;&gt;-->
-    <!--&lt;!&ndash;        </el-col>&ndash;&gt;-->
-    <!--        <el-col :span="11">-->
-    <!--          <div style="width: 10px;height: 10px;"></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="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 :span="11">-->
+<!--          <div style="width: 10px;height: 10px;"></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" :span="1">
-                  <div class="grid-content"></div>
-                </el-col>
+        <!--        <el-col v-show="width" :span="1">-->
+        <!--          <div class="grid-content"></div>-->
+        <!--        </el-col>-->
         <div class="bottom-div" style="margin-left: 1rem;">
-          <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="8" :xl="8">
+          <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5">
             <div class="icon">
-              <div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
+              <div class="icont"><img src="@/assets/header/logo@2x.png" alt=""></div>
               <!--            <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>-->
             </div>
           </el-col>
-          <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
+          <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
             <div class="banner">
               <router-link to="/home">
                 <div class="link_text">
-                  <div v-show="$i18n.locale  === 'cn'" style="padding: 0 1.1rem;" class="link_text_title">首页</div>
-                  <div v-show="$i18n.locale  === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
+                  <div  v-show="$i18n.locale  === 'cn'" class="link_text_title cn_title">首页</div>
+                  <div v-show="$i18n.locale  === 'en'" class="link_text_title en_title">Home</div>
                 </div>
               </router-link>
-
-            <span v-for="(menu,index) in menuData" :key="index">
+              <span v-for="(menu,index) in menuData" :key="index">
 <!--                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'en'&& menu.displayType == 2)">-->
               <div class="link_text" v-if="menu.displayType != 4">
                 <div class="link_text_title">
-                  <span style="padding: 0 1.1rem;" v-if="menu.displayType == 3 || menu.displayType == 1"
-                        v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
-                  <span style="padding: 0 .9rem" v-if="menu.displayType == 2 || menu.displayType == 1"
+                  <span  class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
+                         v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+                  <span class="en_title"v-if="menu.displayType == 2 || menu.displayType == 1"
                         v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
                   <div class="secondary">
                     <ul style="text-align:left;">
@@ -96,13 +97,14 @@
               </div>
             </span>
               <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>
-              <div class="switchLang" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
+              <div class="iconfont" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
             </div>
           </el-col>
         </div>
       </el-row>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -115,61 +117,76 @@ export default {
       english: false,
       width: document.documentElement.clientWidth >= 1200,
       pc: document.documentElement.clientWidth > 992,
-      menuData: []
-    };
+      menuData: [],
+    }
   },
   mounted() {
-    const that = this;
+    const that = this
     window.onresize = () => {
       return (() => {
         //这里写要操作的函数
-        window.screenWidth = document.body.clientWidth;
-        that.width = window.screenWidth >= 1200;
-      })();
-    };
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth >= 1200
+      })()
+    }
   },
   created() {
     if (this.pc) {
       getNavigation({}).then(res => {
-        this.menuData = res.data;
-        sessionStorage.setItem("menu", JSON.stringify(res.data));
-      });
+        this.menuData = res.data
+        sessionStorage.setItem("menu", JSON.stringify(res.data))
+      })
     }
   },
   methods: {
+    login() {
+      let routeData = this.$router.resolve("/admin");
+      window.open(routeData.href, "_blank")
+    },
     menuCut(menu) {
-      console.log(menu);
+      console.log(menu)
       this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
     },
-    login(){
-      let routeData = this.$router.resolve("/admin");
-      window.open(routeData.href,"_blank")
-    },
     switchLang() {
-      let lang = "";
-      if (this.$i18n.locale === "en") {
-        lang = "cn";
+      let lang = ''
+      if (this.$i18n.locale === 'en') {
+        lang = 'cn'
       } else {
-        lang = "en";
+        lang = 'en'
       }
-      sessionStorage.setItem("lang", lang);
-      let fullPath = this.$route.fullPath;
+      sessionStorage.setItem("lang", lang)
+      let fullPath = this.$route.fullPath
       debugger
-      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang);
+      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
     }
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
-.grid-content{
-  height: 1px;
+.cn_title{
+  padding: 0 0.7rem;
+}
+.en_title{
+  padding: 0 0.7rem;
+}
+.iconfont {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 7.6rem;
+  //line-height: 11rem;
+  padding-top: .7rem;
+  margin-left: .5rem;
+
+  img {
+    width: 2.5rem;
+    height: 2.6rem;
+  }
 }
 .header {
-  width: 100%;
+  //width: 100rem;
+  width: 124rem;
   margin: 0 auto;
-  background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
-
 
   .top {
     font-size: 1.2rem;
@@ -179,9 +196,12 @@ export default {
     text-align: center;
     width: 100%;
     height: 3rem;
-    background: #1956BC;
-
+    //background: #1956BC;
 
+    .switchLang {
+      cursor: pointer;
+      font-size: 1.6rem;
+    }
 
     .link {
       line-height: 2.2rem;
@@ -197,22 +217,24 @@ export default {
   }
 
   .bottom {
-    height: 11rem;
-    //background: linear-gradient(180deg, rgba(61,96,163,0.91) 0%, rgba(61,96,163,0.64) 35%, rgba(61,96,163,0.42) 65%, rgba(73,133,234,0.33) 77%, rgba(73,133,234,0.02) 100%);
-    //border-radius: 0rem 0rem 2rem 2rem;
+    height: 7.6rem;
+    //height: 11rem;
+    //background: rgba(25, 86, 188, 0.6);
+    border-radius: 0rem 0rem 2rem 2rem;
 
     .icon {
-      margin-left: 4rem;
+      margin-left: 1rem;
 
       div {
-        margin-top: 3.5rem;
-        margin-left: 10rem;
+        margin-top: 2.4rem;
+        //margin-top: 4.4rem;
       }
 
       .icont {
         img {
-          width: 22.6rem;
-          height: 4rem;
+          // todo logo有问题
+          //  width: 23.3rem;
+          width: 15rem;
         }
       }
 
@@ -229,11 +251,11 @@ export default {
         color: #ffffff;
       }
 
-      //width: 100%;
-      height: 11rem;
+      width: 100%;
+      height: 7.6rem;
+      //height: 11rem;
       clear: left;
       margin-left: 3rem;
-      display: flex;
 
       .link_text {
         height: 100%;
@@ -255,23 +277,7 @@ export default {
         position: relative;
       }
 
-      .iconfont {
-        margin-top: 2.1rem;
-        margin-left: 1.3rem;
-        img {
-          width: 2.5rem;
-          height: 2.6rem;
-        }
-      }
-      .switchLang {
-        margin-top: 2.1rem;
-        margin-left: .4rem;
-        cursor: pointer;
-        img{
-          width: 2.5rem;
-          height: 2.6rem;
-        }
-      }
+
       .secondary {
         display: none;
         width: 25rem;
diff --git a/src/views/header/index_new.vue b/src/views/header/index_new.vue
new file mode 100644
index 0000000..c65c211
--- /dev/null
+++ b/src/views/header/index_new.vue
@@ -0,0 +1,382 @@
+<template>
+  <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 :span="11">-->
+    <!--              <div style="width: 10px;height: 10px;"></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 type="flex" justify="center">
+
+          <el-col :sm="24" :md="21" :lg="16" :xl="16">
+            <el-row type="flex" justify="center">
+              <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="5" :xl="5">
+                <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 :xs="24" :sm="24" :md="21" :lg="19" :xl="19">
+                <div class="banner">
+                  <router-link to="/home">
+                    <div class="link_text">
+                      <div  v-show="$i18n.locale  === 'cn'" class="link_text_title cn_title">首页</div>
+                      <div v-show="$i18n.locale  === 'en'" class="link_text_title en_title">Home</div>
+                    </div>
+                  </router-link>
+                  <span v-for="(menu,index) in menuData" :key="index">
+<!--                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'en'&& menu.displayType == 2)">-->
+              <div class="link_text" v-if="menu.displayType != 4">
+                <div class="link_text_title">
+                  <span  class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
+                         v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+                  <span class="en_title"v-if="menu.displayType == 2 || menu.displayType == 1"
+                        v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
+                  <div class="secondary">
+                    <ul style="text-align:left;">
+                    <span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
+                    <li class="menu_list"
+                        v-if="item.displayType != 4 && (item.displayType == 3 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'cn'">
+                      <div class="menu_suffix">
+                        <div>
+                          <span>{{ item.title }}</span>
+                          <!--                          <span v-if="(item.displayType == 2 || item.displayType == 1)&&$i18n.locale  === 'en'" >{{ item.englishTitle }}</span>-->
+                        </div>
+                      </div>
+                    </li>
+                    <li class="menu_list"
+                        v-if="item.displayType != 4&&(item.displayType == 2 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'en'">
+                      <div class="menu_suffix" v-if="">
+                        <div>
+                          <span>{{ item.englishTitle }}</span>
+                        </div>
+                      </div>
+                    </li>
+                    </span>
+                  </ul>
+                  </div>
+                </div>
+                <!--<div class="secondary" v-if="index == 5">-->
+              </div>
+            </span>
+                  <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>
+                  <div class="iconfont" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+<!--        <el-col :span="2">-->
+<!--          <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>-->
+<!--          <div class="switchLang" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>-->
+<!--        </el-col>-->
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getNavigation} from "@/api";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      english: false,
+      width: document.documentElement.clientWidth >= 1200,
+      pc: document.documentElement.clientWidth > 992,
+      menuData: []
+    };
+  },
+  mounted() {
+    const that = this;
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth;
+        that.width = window.screenWidth >= 1200;
+      })();
+    };
+  },
+  created() {
+    if (this.pc) {
+      getNavigation({}).then(res => {
+        this.menuData = res.data;
+        sessionStorage.setItem("menu", JSON.stringify(res.data));
+      });
+    }
+  },
+  methods: {
+    menuCut(menu) {
+      console.log(menu);
+      this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
+    },
+    login() {
+      let routeData = this.$router.resolve("/admin");
+      window.open(routeData.href, "_blank")
+    },
+    switchLang() {
+      let lang = "";
+      if (this.$i18n.locale === "en") {
+        lang = "cn";
+      } else {
+        lang = "en";
+      }
+      sessionStorage.setItem("lang", lang);
+      let fullPath = this.$route.fullPath;
+      debugger
+      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.cn_title{
+  padding: 0 0.7rem;
+}
+.en_title{
+  padding: 0 0.7rem;
+}
+.iconfont {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 11rem;
+  padding-top: .7rem;
+  margin-left: .5rem;
+
+  img {
+    width: 2.5rem;
+    height: 2.6rem;
+  }
+}
+
+//.switchLang {
+//  cursor: pointer;
+//  display: inline-block;
+//  line-height: 11rem;
+//  padding-top: .5rem;
+//
+//  img {
+//    width: 2.5rem;
+//    height: 2.6rem;
+//  }
+//}
+.grid-content {
+  height: 1px;
+}
+
+.header {
+  width: 100%;
+  margin: 0 auto;
+  background: linear-gradient(180deg, rgba(61, 96, 163, 0.91) 0%, rgba(61, 96, 163, 0.64) 35%, rgba(61, 96, 163, 0.42) 65%, rgba(73, 133, 234, 0.33) 77%, rgba(73, 133, 234, 0.02) 100%);
+
+
+  .top {
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    text-align: center;
+    width: 100%;
+    height: 3rem;
+    background: #1956BC;
+
+    .link {
+      line-height: 2.2rem;
+      width: 80%;
+      margin: .4rem auto;
+      border-radius: 1.1rem;
+    }
+    .link:hover {
+      background: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  .bottom {
+    margin: 0 auto;
+    //width: 70%;
+    height: 11rem;
+    .icon {
+      div {
+        margin-top: 4em;
+      }
+      .icont {
+        img {
+          width: 22.6rem;
+        }
+      }
+      .iconb {
+        img {
+          width: 8.9rem;
+        }
+      }
+    }
+    .banner {
+      a {
+        text-decoration: none;
+        color: #ffffff;
+      }
+
+      //width: 100%;
+      height: 11rem;
+      clear: left;
+      //margin-left: 3rem;
+      display: flex;
+
+      .link_text {
+        height: 100%;
+        text-align: center;
+        float: left;
+        font-size: 1.6rem;
+        font-family: "微软雅黑";
+        font-weight: 400;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+
+      }
+
+      .link_text_title {
+        position: relative;
+      }
+
+      .secondary {
+        display: none;
+        width: 25rem;
+        position: absolute;
+        //top: 6rem;
+        background-color: transparent;
+        text-align: left !important;
+        margin-top: 1rem;
+        //display: block;
+        //width: 100%;
+        //height: 5rem;
+        //background-color: #1956BC;
+
+
+        ul {
+          background-color: #ffffff;
+          display: inline-block;
+          border-radius: 0 0 .5rem .5rem;
+
+          li {
+            margin-top: 1.2rem;
+            height: 2rem;
+            list-style: none;
+            //border-bottom: .1rem solid gray;
+            color: #666666;
+            //display: flex;
+            //align-items: center;
+            //justify-content: center;
+            //clear: left;
+
+            //.menu_prefix{
+            //  width: 1.2rem;
+            //}
+            .menu_suffix {
+
+              margin-left: .6rem;
+              display: inline-block;
+              //width: 14.3rem;
+              border-left: .2rem solid #ffffff;
+              margin-right: .8rem;
+              padding-left: .8rem;
+
+              div {
+                padding: 0.2rem .4rem;
+              }
+            }
+
+            div {
+              float: left;
+            }
+          }
+
+          li:hover {
+            //background-color: rgba(25, 86, 188, 0.6);
+          }
+
+          li:last-child {
+            margin-bottom: 1.4rem;
+            //border-bottom: none;
+
+          }
+        }
+      }
+
+
+      .link_text:hover {
+        //.border{
+        //  background-color: #fff;
+        //}
+        .secondary {
+          display: block;
+        }
+
+        .link_text_title {
+          //font-weight: bolder !important;
+        }
+      }
+
+      .menu_list:hover {
+        .menu_suffix {
+
+          border-left: .2rem solid #1956BC;
+
+          div {
+            color: #0054B0;
+            background-color: #C3D7EC;
+            border-radius: 0.2rem;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .banner {
+    margin: 0 auto;
+  }
+}
+
+
+</style>