11

src/views/header/index.vue

@@ -47,13 +47,13 @@
     <!--导航部分-->
     <div class="bottom">
       <el-row>
-        <el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
+        <el-col v-show="width" :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">
+        <el-col v-show="width" :span="1">
           <div class="grid-content"></div>
         </el-col>
         <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19">
@@ -65,7 +65,7 @@
               </div>
             </router-link>
 
-            <span  v-for="menu in menuData">
+            <span  v-for="(menu,index) in menuData" :key="index">
             <a>
               <div class="link_text">
                 <div class="border"></div>
@@ -73,7 +73,7 @@
                 <div v-show="english">{{ menu.englishTitle }}</div>
                 <div class="secondary">
                   <ul>
-                    <li v-for="item in menu.children" @click="menuCut(item)">
+                    <li v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
                       <span v-show="!english">{{ item.title }}</span>
                       <span v-show="english">{{ item.englishTitle }}</span>
                     </li>
@@ -151,18 +151,34 @@ export default {
   data() {
     return {
       english:false,
-      width: document.documentElement.clientWidth,
+      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() {
-    getNavigation({}).then(res=>{
-      this.menuData = res.data
-    })
+    if (this.pc){
+      getNavigation({}).then(res=>{
+        this.menuData = res.data
+        sessionStorage.setItem("menu",JSON.stringify(res.data))
+      })
+    }
+      //this.$router.push("/" + menu.encodeId);
+    //}
   },
   methods: {
     menuCut(menu){
-      this.$router.push("/" + menu.encodeId);
+      this.$router.push("/pc/" + menu.encodeId);
     },
     switchLang() {
       let lang = ''
@@ -311,6 +327,12 @@ export default {
   }
 }
 
+@media screen and (min-width: 1200px){
+  .banner{
+    margin: 0 auto;
+  }
+}
+
 
 
 </style>