fix: 修复搜索页缩小后布局问题

sl1673495 · Aug 22, 2019 · 20d4679 · 20d4679
1 parent 68c8420
commit 20d4679
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/src/layout/index.vue b/src/layout/index.vue
@@ -21,7 +21,7 @@
 <script type="text/ecmascript-6">
 import LayoutHeader from "./header"
 import LayoutMenu from "./menu"
-import { layoutCenterPaths } from "@/router"
+import { layoutCenterNames } from "@/router"
 import { mapState } from "@/store/helper/music"
 
 export default {
@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     routerViewCls() {
-      return layoutCenterPaths.find(path => path === this.$route.path)
+      return layoutCenterNames.find(name => name === this.$route.name)
         ? "router-view-center"
         : ""
     },
@@ -59,11 +59,11 @@ export default {
     .content {
       flex: 1;
       overflow-y: auto;
-      // min-width: $layout-content-min-width;
+      min-width: $layout-content-min-width;
       margin-bottom: $mini-player-height;
 
       .router-view-center {
-        max-width: $center-content-width;
+        max-width: $center-content-max-width;
         margin: auto;
       }
     }

diff --git a/src/page/search/playlists.vue b/src/page/search/playlists.vue
@@ -60,7 +60,7 @@ export default {
 <style lang="scss" scoped>
 .search-playlists {
   max-width: 1000px;
-  padding: 16px 0;
+  padding: $page-padding;
   margin: auto;
 
   .list-wrap {

diff --git a/src/router.js b/src/router.js
@@ -14,7 +14,7 @@ const Mvs = () => import('@/page/mvs')
 const Mv = () => import('@/page/mv')
 
 // 内容需要居中的页面
-export const layoutCenterPaths = ['/discovery', '/playlists', '/songs', '/mvs']
+export const layoutCenterNames = ['discovery', 'playlists', 'songs', 'mvs']
 
 // 需要显示在侧边栏菜单的页面
 export const menuRoutes = [
@@ -82,14 +82,17 @@ export default new Router({
         },
         {
           path: 'songs',
+          name: 'searchSongs',
           component: SearchSongs,
         },
         {
           path: 'playlists',
+          name: 'searchPlaylists',
           component: SearchPlaylists,
         },
         {
           path: 'mvs',
+          name: 'searchMvs',
           component: SearchMvs,
         },
       ],

diff --git a/src/style/variables.scss b/src/style/variables.scss
@@ -21,9 +21,9 @@ $border: 1px solid #3f3f3f;
 
 $page-padding: 16px 32px;
 // layout
-$layout-content-min-width: 1050px;
+$layout-content-min-width: 700px;
 // content
-$center-content-width: 1000px;
+$center-content-max-width: 1000px;
 // header
 $header-height: 50px;