refactor: 优化移动端响应式

Author: zhongchubing

.idea/watcherTasks.xml

@@ -48,13 +48,16 @@ export default {
 
 <style lang="scss" scoped>
 .affiche {
-  width: 100%;
+  width: auto;
   font-size: 14px;
   background: #fff;
   border-radius: 5px;
   padding: 5px 15px;
   display: flex;
   align-items: center;
+  p.medium {
+    margin: 0;
+  }
   i {
     font-size: 18px;
     font-weight: bold;

geekape-nav-main/components/Affiche.vue

@@ -1,13 +1,16 @@
 <template>
   <el-header>
-    <AppSearch />
-
-
-    <el-row type="flex">
-      <el-col>
-        <el-tooltip content="推荐网站"><i class="el-icon-circle-plus" @click="$emit('showPopup')"></i></el-tooltip>
-      </el-col>
-    </el-row>
+      <div>
+        <img class="header-logo" src="/logo-nav.png" />
+      </div>
+      <el-row type="flex">
+        <el-col>
+          <el-tooltip content="推荐网站"><i class="el-icon-circle-plus" @click="$emit('handleShowPopup')"></i></el-tooltip>
+        </el-col>
+        <el-col class="menu-toggle-btn">
+          <i class="el-icon-menu" @click="$emit('handleShowMenu')"></i>
+        </el-col>
+      </el-row>
   </el-header>
 </template>
 
@@ -17,6 +20,7 @@ export default {
   name: "AppHeader",
   components: {AppSearch},
   props: {
+
     dialogFormVisible: {
       type: Boolean,
       default: false
@@ -55,6 +59,11 @@ export default {
     color: #999;
     cursor: pointer;
   }
+
+  .header-logo {
+    width: 150px;
+    filter: invert(1);
+  }
 }
 
 
@@ -64,12 +73,22 @@ export default {
       display: none;
     }
   }
+
+  .header-logo,
+  .menu-toggle-btn {
+    display: block;
+  }
 }
 @media screen and (min-width: 569px) {
   .app-search {
     /deep/ .el-select {
       display: block;
     }
   }
+
+  .header-logo,
+  .menu-toggle-btn {
+    display: none;
+  }
 }
 </style>

geekape-nav-main/components/AppHeader.vue

@@ -70,9 +70,7 @@ export default {
       views[id] = view + 1;
       this.$storage.set("VIEWS", views);
       // window.open(href, "_blank");
-      this.$router.push({
-        path: `/nav/${id}`
-      })
+      await this.$router.push(`/nav/${id}`)
     },
     async handleStar() {
       const stars = this.$storage.get("STARS") || {};
@@ -91,13 +89,7 @@ export default {
 </script>
 
 <style lang="scss">
-@mixin text-overflow($line) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: $line;
-}
+
 .website-item {
   font-size: 12px;
   margin-bottom: 20px;

geekape-nav-main/components/AppNavItem.vue

@@ -6,12 +6,12 @@
   >
     <nuxt-link class="title" to="/">
       <img
-        v-if="!isCollapse"
+        v-show="!isCollapse"
         class="icon-logo"
         width="180"
         src="/logo-nav.png"
       />
-      <img v-else class="icon-logo" width="45" src="/logo-nav-icon.png"/>
+      <img v-show="isCollapse" class="icon-logo" width="45" src="/logo-nav-icon.png"/>
 
       <!-- <span>猿梦极客导航后台</span> -->
     </nuxt-link>
@@ -75,13 +75,17 @@
 export default {
   name: "AppNavMenus",
   props: {
+    show: {
+      type: Boolean,
+      default: true,
+    },
     categorys: {
       type: Array,
       default: () => []
     },
-    isCollapse: {
-      type: Boolean,
-      default: false
+    showMenuType: {
+      type: String,
+      default: 'half'
     }
   },
   data() {
@@ -93,7 +97,16 @@ export default {
   },
   computed: {
     sideBarWidth() {
-      return !this.isCollapse ? "220px" : "70px";
+      if (this.showMenuType == 'half') {
+        return '70px'
+      } else if (this.showMenuType == 'all') {
+        return '220px'
+      } else {
+        return 0
+      }
+    },
+    isCollapse() {
+      return this.showMenuType === 'half'
     }
   },
   methods: {
@@ -147,7 +160,6 @@ $sidebar-w: auto;
 
 .el-aside {
   overflow: hidden;
-
   .el-menu-vertical-demo.el-menu {
     height: 100vh;
     overflow-y: auto;
@@ -221,14 +233,20 @@ $sidebar-w: auto;
   }
 }
 
-
 @media screen and (max-width: 568px) {
+  .el-aside {
+    width: 0;
+  }
+
   .app-search,
   .sidebar-fix {
     display: none;
   }
 }
 @media screen and (min-width: 569px) {
+  .el-aside {
+    width: 70px;
+  }
   .app-search,
   .sidebar-fix {
     display: block;

geekape-nav-main/components/AppNavMenus.vue

@@ -4,7 +4,16 @@
   </div>
 </template>
 
-<style>
+<script>
+import AppNavMenus from "../components/AppNavMenus";
+import AppHeader from "../components/AppHeader";
+import { mapState } from "vuex";
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -24,32 +33,5 @@ html {
   margin: 0;
 }
 
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
 
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
 </style>

geekape-nav-main/layouts/default.vue

@@ -0,0 +1,72 @@
+import {mapState} from "vuex";
+import AppHeader from "../components/AppHeader";
+import AppNavMenus from "../components/AppNavMenus";
+import {throttle} from "../utils/utils";
+
+const layoutMixin = {
+  components: {AppHeader, AppNavMenus},
+  data() {
+    return {
+      isCollapse: true,
+      showPopup: false,
+      showLog: false,
+      // none, half, all
+      showMenuType: 'half',
+    }
+  },
+  computed: {
+    ...mapState(['category']),
+    isMobile() {
+      const width = window.innerWidth || document.body.clientWidth
+      return width < 568
+    },
+    sideBarWidth() {
+      if (this.showMenuType == 'half') {
+        return '70px'
+      } else if (this.showMenuType == 'all') {
+        return '220px'
+      } else {
+        return 0
+      }
+    },
+    contentMarginLeft() {
+      if (this.showMenuType == 'half') {
+        return '70px'
+      } else if (this.showMenuType == 'all') {
+        const width = window.innerWidth || document.body.clientWidth
+
+        if (this.isMobile) {
+          return 0
+        } else {
+          return '220px'
+        }
+      } else {
+        return 0
+      }
+    },
+  },
+  methods: {
+    async findNav(id) {
+      this.loading = true;
+      const { data } = await this.$api.findNav(id);
+      this.data = data;
+      this.loading = false;
+    },
+    async handleSubMenuClick(parentId, id) {
+      await this.findNav(parentId);
+    },
+    toggleMenu() {
+      this.showMenuType = this.showMenuType === 'none' ? 'all' : 'none'
+    },
+    toggleMenu2() {
+      this.showMenuType = this.showMenuType === 'all' ? 'half' : 'all'
+    }
+  },
+
+  mounted() {
+    this.showMenuType = this.isMobile ? 'none' : 'half'
+  }
+}
+
+
+export default layoutMixin

geekape-nav-main/mixins/layoutMixin.js

@@ -83,6 +83,9 @@ module.exports = {
    */
   build: {
     transpile: [/^element-ui/],
+    styleResources: {
+      scss: './static/styles/mixin.scss',
+    },
     /*
      ** You can extend webpack config here
      */