From ba60c3dc5ea7909193c4299c74cf64060b0e000a Mon Sep 17 00:00:00 2001
From: clay <20932067@zju.edu.cn>
Date: Mon, 3 Jan 2022 16:27:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=B4=E9=83=A8=E9=BC=A0=E6=A0=87=E7=BB=8F?=
 =?UTF-8?q?=E8=BF=87=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |   2 +-
 src/views/header/index.vue | 146 ++++++++++++++++++++++++++++++-------
 2 files changed, 119 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 820406a..cc051a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -64,7 +64,7 @@ export default {
 .headers {
   width: 100%;
   z-index: 9999;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
 }
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index 3995d25..df14b2b 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -41,25 +41,83 @@
         <!--导航部分-->
         <div class="bottom">
           <el-row>
-            <el-col :span="4">
+            <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 :offset="1" :span="19">
-              <div  class="banner">
-                <router-link to="/" ><div>学院首页</div></router-link>
-                <router-link to="/sp" ><div>学院概况</div></router-link>
-                <router-link to="/ts" ><div>党群工作</div></router-link>
-                <router-link to="/et" ><div>师资队伍</div></router-link>
-                <router-link to="/" ><div>教育教学</div></router-link>
-                <router-link to="/" ><div>科学研究</div></router-link>
-                <router-link to="/" ><div>学科建设</div></router-link>
-                <router-link to="/" ><div>学生工作</div></router-link>
-                <router-link to="/" ><div>校友工作</div></router-link>
-                <router-link to="/" ><div>国际化</div></router-link>
-                <router-link to="/" ><div>资料下载</div></router-link>
+            <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>
@@ -75,6 +133,11 @@
 <script>
 export default {
   name: "index",
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
   methods: {
     switchLang() {
       let lang = ''
@@ -106,7 +169,13 @@ export default {
       cursor: pointer;
       font-size: 1.6rem;
     }
-    .link:hover{
+    .link{
+      width: 80%;
+      margin: 0 auto;
+      border-radius: 1.1rem;
+    }
+
+    .link:hover {
       background: rgba(255, 255, 255, 0.7);
     }
 
@@ -116,44 +185,65 @@ export default {
     height: 8rem;
     background: rgba(25, 86, 188, 0.6);
     border-radius: 0rem 0rem 2rem 2rem;
-    .icon{
+
+    .icon {
       margin-left: 20%;
-      div{
+
+      div {
         margin-top: 1rem;
       }
-      .icont{
-        img{
+
+      .icont {
+        img {
           width: 18.3rem;
         }
       }
-      .iconb{
-        img{
+
+      .iconb {
+        img {
           width: 8.9rem;
         }
       }
     }
-    .banner{
-      a{
+
+    .banner {
+      a {
         text-decoration: none;
         color: #ffffff;
       }
+
       width: 100%;
       height: 8rem;
       clear: left;
-      div{
+
+      .link_text {
         width: 9%;
         height: 100%;
-        line-height: 8rem;
+        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;
+        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;
+        }
       }
-      div:hover{
-        background: rgba(255, 255, 255, 0.7);
+      .link_text:hover{
+        .border{
+          background-color: #fff;
+        }
       }
     }
   }