导航相关自适应优化

src/App.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-import Setting from '@/setting';
-import util from '@/libs/util';
+import Setting from '@/setting'
+import util from '@/libs/util'
 export default {
   name: 'App',
   created () {
@@ -32,55 +32,23 @@ export default {
       }
       return flagPc;
     }
-    var flagZt = IsPCModel();
+    var flagZt = IsPCModel()
     this.$store.commit('updateModelType', flagZt)
     window.onresize = this.throttle(() => {
-      if (document.body.clientWidth <= 1200) {
+      const w = document.body.clientWidth
+      if (w <= 680) {
+        // w <= 480 && this.$store.commit('set', true)
         this.$store.commit('updateModelType', false)
-      } else if (document.body.clientWidth > 1700) {
-        this.$store.commit('updateModelType', true)
-        this.$store.dispatch('updateNavSumA', 10)
-        sessionStorage.setItem('navPageSize', 10)
-      } else if (document.body.clientWidth > 1600 && document.body.clientWidth <= 1700) {
-        this.$store.commit('updateModelType', true)
-        if (this.$i18n.locale == 'en') {
-          this.$store.dispatch('updateNavSumA', 9)
-          sessionStorage.setItem('navPageSize', 9)
-        } else {
-          this.$store.dispatch('updateNavSumA', 10)
-          sessionStorage.setItem('navPageSize', 10)
-        }
-      } else if (document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
-        this.$store.commit('updateModelType', true)
-        this.$store.dispatch('updateNavSumA', 9)
-        sessionStorage.setItem('navPageSize', 9)
-      } else if (document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
-        this.$store.commit('updateModelType', true)
-        if (this.$i18n.locale == 'en') {
-          this.$store.dispatch('updateNavSumA', 7)
-          sessionStorage.setItem('navPageSize', 7)
-        } else {
-          this.$store.dispatch('updateNavSumA', 8)
-          sessionStorage.setItem('navPageSize', 8)
-        }
-      } else if (document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
-        this.$store.commit('updateModelType', true)
-        if (this.$i18n.locale == 'en') {
-          this.$store.dispatch('updateNavSumA', 6)
-          sessionStorage.setItem('navPageSize', 6)
-        } else {
-          this.$store.dispatch('updateNavSumA', 7)
-          sessionStorage.setItem('navPageSize', 7)
-        }
-      } else if (document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
-        this.$store.commit('updateModelType', true)
-        if (this.$i18n.locale == 'en') {
-          this.$store.dispatch('updateNavSumA', 6)
-          sessionStorage.setItem('navPageSize', 6)
-        } else {
-          this.$store.dispatch('updateNavSumA', 6)
-          sessionStorage.setItem('navPageSize', 6)
-        }
+      } else if (w > 1700) {
+        this.setNav(10)
+      } else if (w > 1600) {
+        this.setNav(9)
+      } else if (w > 1400) {
+        this.setNav(8)
+      } else if (w > 1200) {
+        this.setNav(6)
+      } else if (w > 980) {
+        this.setNav(4)
       } else {
         this.$store.commit('updateModelType', true)
       }
@@ -90,15 +58,14 @@ export default {
     window.onbeforeunload = function () {
       sessionStorage.removeItem('navPageSize')
     }
-    if (document.body.clientWidth > 1600) {
+    const w = document.body.clientWidth
+    if (w > 1700) {
       sessionStorage.setItem('navPageSize', 10)
-    } else if (document.body.clientWidth > 1500 && document.body.clientWidth <= 1600) {
+    } else if (w > 1600) {
       sessionStorage.setItem('navPageSize', 9)
-    } else if (document.body.clientWidth > 1400 && document.body.clientWidth <= 1500) {
+    } else if (w > 1400) {
       sessionStorage.setItem('navPageSize', 8)
-    } else if (document.body.clientWidth > 1300 && document.body.clientWidth <= 1400) {
-      sessionStorage.setItem('navPageSize', 7)
-    } else if (document.body.clientWidth > 1200 && document.body.clientWidth <= 1300) {
+    } else if (w > 1200) {
       sessionStorage.setItem('navPageSize', 6)
     }
   },
@@ -114,7 +81,12 @@ export default {
           prev = Date.now();
         }
       }
-    }
+    },
+    setNav(num) {
+      this.$store.commit('updateModelType', true)
+      this.$store.dispatch('updateNavSumA', num)
+      sessionStorage.setItem('navPageSize', num)
+    },
   },
 };
 </script>

src/assets/images/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720166307938" class="icon" viewBox="0 0 1225 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24154" width="26.318359375" height="22" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M373.743577 159.446919h793.902152a57.400891 57.400891 0 1 0 0-114.801782H373.743577a57.400891 57.400891 0 0 0 0 114.801782z" fill="#1583ff" p-id="24155"></path><path d="M102.046028 102.046028m-102.046028 0a102.046028 102.046028 0 1 0 204.092056 0 102.046028 102.046028 0 1 0-204.092056 0Z" fill="#1583ff" p-id="24156"></path><path d="M1167.645729 454.599109H373.743577a57.400891 57.400891 0 1 0 0 114.801782h793.902152a57.400891 57.400891 0 0 0 0-114.801782z" fill="#1583ff" p-id="24157"></path><path d="M102.046028 512m-102.046028 0a102.046028 102.046028 0 1 0 204.092056 0 102.046028 102.046028 0 1 0-204.092056 0Z" fill="#1583ff" p-id="24158"></path><path d="M1167.645729 864.553081H373.743577a57.400891 57.400891 0 0 0 0 114.801782h793.902152a57.400891 57.400891 0 1 0 0-114.801782z" fill="#1583ff" p-id="24159"></path><path d="M102.046028 921.953972m-102.046028 0a102.046028 102.046028 0 1 0 204.092056 0 102.046028 102.046028 0 1 0-204.092056 0Z" fill="#1583ff" p-id="24160"></path></svg>

src/assets/images/more.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720166434553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2605" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M166.6 99.6h228.6c37.9 0 68.6 30.7 68.6 68.6v228.6c0 37.9-30.7 68.6-68.6 68.6H166.6c-38 0-68.6-30.8-68.6-68.6V168.2c0-38 30.7-68.6 68.6-68.6z m457.3 0h228.6c38 0 68.6 30.7 68.6 68.6v228.6c0 37.9-30.7 68.6-68.6 68.6H623.9c-37.9 0-68.6-30.7-68.6-68.6V168.2c0-38 30.7-68.6 68.6-68.6zM166.6 556.8h228.6c37.9 0 68.6 30.7 68.6 68.6V854c0 37.9-30.7 68.6-68.6 68.6H166.6c-38 0-68.6-30.7-68.6-68.6V625.5c0-37.9 30.7-68.7 68.6-68.7z m685.9 45.8c12.7 0 22.8 10.3 22.8 22.8V854c0 12.7-10.3 22.8-22.8 22.8H623.9c-12.7 0-22.8-10.3-22.8-22.8V625.5c0-12.7 10.3-22.8 22.8-22.8h228.6z m0-45.8H623.9c-37.9 0-68.6 30.7-68.6 68.6V854c0 37.9 30.7 68.6 68.6 68.6h228.6c37.9 0 68.6-30.7 68.6-68.6V625.5c0.1-37.9-30.6-68.7-68.6-68.7z" fill="#1583ff" p-id="2606"></path></svg>

src/assets/images/more1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720165999289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15720" width="22" height="22" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M62.385351 714.233957l244.450455 0 0 244.451478L62.385351 958.685435 62.385351 714.233957 62.385351 714.233957zM62.385351 714.233957" fill="#1583ff" p-id="15721"></path><path d="M388.321678 388.299677l244.449431 0 0 244.450455L388.321678 632.750131 388.321678 388.299677 388.321678 388.299677zM388.321678 388.299677" fill="#1583ff" p-id="15722"></path><path d="M62.385351 388.299677l244.450455 0 0 244.450455L62.385351 632.750131 62.385351 388.299677 62.385351 388.299677zM62.385351 388.299677" fill="#1583ff" p-id="15723"></path><path d="M388.321678 62.365396l244.449431 0 0 244.450455L388.321678 306.815851 388.321678 62.365396 388.321678 62.365396zM388.321678 62.365396" fill="#1583ff" p-id="15724"></path><path d="M62.385351 62.365396l244.450455 0 0 244.450455L62.385351 306.815851 62.385351 62.365396 62.385351 62.365396zM62.385351 62.365396" fill="#1583ff" p-id="15725"></path><path d="M714.253912 714.233957l244.451478 0 0 244.451478L714.253912 958.685435 714.253912 714.233957 714.253912 714.233957zM714.253912 714.233957" fill="#1583ff" p-id="15726"></path><path d="M388.321678 714.233957l244.449431 0 0 244.451478L388.321678 958.685435 388.321678 714.233957 388.321678 714.233957zM388.321678 714.233957" fill="#1583ff" p-id="15727"></path><path d="M714.253912 62.365396l244.451478 0 0 244.450455L714.253912 306.815851 714.253912 62.365396 714.253912 62.365396zM714.253912 62.365396" fill="#1583ff" p-id="15728"></path><path d="M714.253912 388.299677l244.451478 0 0 244.450455L714.253912 632.750131 714.253912 388.299677 714.253912 388.299677zM714.253912 388.299677" fill="#1583ff" p-id="15729"></path></svg>

src/layouts/header/index.vue

@@ -30,8 +30,21 @@
     </template>
     <!-- 手机端 -->
     <div v-else class="mobile-tools">
-      <i class="login el-icon-user-solid" @click="toLogin"></i>
-      <i class="menu-icon" :class="modelType ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click.stop="updateModelType"></i>
+      <!-- 导航最右侧工具栏 -->
+      <div class="tools">
+        <!-- 如果图标超过5个，则显示省略号 -->
+        <el-popover placement="bottom" width="297" trigger="click" popper-class="tool-more">
+          <ul class="more-wrap">
+            <li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
+              <img v-if="item.icon" :src="item.icon" alt="" class="icon">
+              <p v-if="item.buttonText" class="text">{{ item.buttonText }}</p>
+            </li>
+          </ul>
+          <img slot="reference" src="@/assets/images/more.svg" alt="">
+        </el-popover>
+      </div>
+
+      <img class="menu-icon" src="@/assets/images/menu.svg" alt="" @click.stop="updateType(!modelType)">
       <div class="contentBox" v-show="modelType">
         <navbar ref="nav" :isHome.sync="isHome" @updateModelType="updateType"></navbar>
       </div>
@@ -159,29 +172,6 @@ export default {
         }
       }
     },
-    // 切换显示搜索
-    toggleSearch () {
-      this.showSearch = !this.showSearch
-      this.$nextTick(() => {
-        this.$refs.search.focus()
-      })
-    },
-    // mail点击
-    toMail () {
-      window.open('https://qiye.aliyun.com/alimail/auth/login?custom_login_flag=1&reurl=%2Falimail%2F')
-    },
-    // oa点击
-    toOa () {
-      window.open('http://oa.iasf.ac.cn/sys/portal/page.jsp')
-    },
-    // 切换语言
-    toggleLang () {
-      let id = +(this.$route.query.siteId || this.$store.state.content.site)
-      // 中英文站点的id是相邻的，有6个站点，1/2 3/4 5/6
-      id % 2 ? id++ : id--
-      location.href = this.$router.resolve(`/column?siteId=${id}`).href
-      location.reload()
-    },
     // 图标点击
     toolClick (item) {
       // 链接
@@ -205,19 +195,6 @@ export default {
         }
       }
     },
-    // 全局搜索
-    handleSearch () {
-      this.setKeyword(this.title)
-      this.modelType = !this.modelType
-      if (this.title) {
-        this.showSearch = false
-        this.$router.push(`/column/result`)
-      }
-    },
-    // 更改右侧盒子样式
-    updateModelType () {
-      this.modelType = !this.modelType
-    },
     updateType (type) {
       this.modelType = type
     }

src/store/index.js

@@ -10,35 +10,36 @@ const modulesFiles = require.context('./modules', true, /\.js$/);
 // you do not need `import app from './modules/app'`
 // it will auto require all vuex module from modules file
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
-    // set './app.js' => 'app'
-    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
-    const value = modulesFiles(modulePath);
-    modules[moduleName] = value.default;
-    return modules;
+  // set './app.js' => 'app'
+  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
+  const value = modulesFiles(modulePath);
+  modules[moduleName] = value.default;
+  return modules;
 }, {});
 
 const store = new Vuex.Store({
-    state: {
-        modelType: false, //true为PC端，false为手机端
-        navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量
+  state: {
+    modelType: false, //true为PC端，false为手机端
+    navSum: sessionStorage.getItem('navPageSize') || 10, // 导航栏显示的条目数量
+  },
+  mutations: {
+    // 根据屏幕尺寸分别移动或者pc
+    updateModelType (state, type) {
+      console.log("🚀 ~ updateModelType ~ type:", type)
+      state.modelType = type;
     },
-    mutations: {
-        // 根据屏幕尺寸分别移动或者pc
-        updateModelType(state, type) {
-            state.modelType = type;
-        },
-        // 根据屏幕尺寸显示的导航栏条数
-        updateNavSum(state,num) {
-            state.navSum = num
-        }
-    },
-    actions: {
-        updateNavSumA({ commit },data) {
-            commit('updateNavSum',data)
-        }
-    },
-    modules,
-    getters
+    // 根据屏幕尺寸显示的导航栏条数
+    updateNavSum (state, num) {
+      state.navSum = num
+    }
+  },
+  actions: {
+    updateNavSumA ({ commit }, data) {
+      commit('updateNavSum', data)
+    }
+  },
+  modules,
+  getters
 });
 
 export default store;