diff --git a/middleware/redirect-to-song.js b/middleware/redirect-to-song.js
new file mode 100644
index 0000000..f75c364
--- /dev/null
+++ b/middleware/redirect-to-song.js
@@ -0,0 +1,5 @@
+export default ({ $axios, store, redirect }) => {
+  if (!store.state.user.userTatus) {
+    redirect('/song')
+  }
+}
diff --git a/nuxt.config.js b/nuxt.config.js
index 335227e..42ce67c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -16,15 +16,14 @@ export default {
       { hid: 'description', name: 'description', content: '' },
       { name: 'format-detection', content: 'telephone=no' }
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
-    ]
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [
-    'ant-design-vue/dist/antd.css'
-  ],
+  css: ['ant-design-vue/dist/antd.css'],
+
+  router: {
+  },
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
@@ -55,8 +54,7 @@ export default {
   },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {
-  },
+  build: {},
   env: {
     NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
     API_URL: env[process.env.NODE_ENV].API_URL
diff --git a/pages/index.vue b/pages/index.vue
index df6005b..499303a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,8 +24,8 @@
         <div class="cotent-search">
           <div>
             <a-select
+              class="cotent-search-select"
               :default-value="selectionDefaultValue"
-              style="width: 120px"
               @change="handleChange"
             >
               <a-select-option value="all">
@@ -47,8 +47,8 @@
           </div>
           <a-input-search
             v-model="inputVal"
+            class="cotent-search-search"
             placeholder="请输入歌名"
-            style="width: 200px"
             @search="onSearch"
           />
         </div>
@@ -100,7 +100,9 @@ export default {
       })
     }
   },
-  created () {},
+  created () {
+    this.$router.push('/song')
+  },
   mounted () {
     if (this.checkIfSupportLocalstorage()) {
       this.handleData()
@@ -168,7 +170,6 @@ body,
 
 .ant-layout {
   display: flex;
-  min-width: 375px;
   min-height: 100%;
 }
 
@@ -183,7 +184,7 @@ body,
 }
 
 .logo {
-  height: 100px;
+  max-height: 90px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -198,7 +199,7 @@ body,
 }
 
 .ant-layout-content {
-  height: calc(100vh - 100px - 69px);
+  height: calc(100vh - 80px - 69px);
   padding: 0 10% !important;
   background: #fff;
   overflow: auto;
@@ -219,4 +220,12 @@ body,
   justify-content: space-between;
   align-items: center;
 }
+
+.cotent-search-select {
+  min-width: 80px;
+}
+
+.cotent-search-search {
+  min-width: 150px;
+}
 </style>
diff --git a/pages/index/song.vue b/pages/index/song.vue
index 1a93cb8..4abfb03 100644
--- a/pages/index/song.vue
+++ b/pages/index/song.vue
@@ -39,8 +39,9 @@ export default {
         pageSize: 10,
         showSizeChanger: true,
         pageSizeOptions: ['10', '20', '30', '40', '50'],
-        showTotal: total => `共 ${total} 首歌曲`,
-        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
+        // showTotal: total => `共 ${total} 首歌曲`,
+        onShowSizeChange: (current, pageSize) =>
+          this.onSizeChange(current, pageSize),
         style: {
           textAlign: 'center !important',
           display: 'flex',
@@ -74,7 +75,7 @@ export default {
   mounted () {
     const currentPageSize = localStorage.getItem('pageSize')
     if (currentPageSize !== null) {
-      this.pagination.pageSize = currentPageSize
+      this.pagination.pageSize = parseInt(currentPageSize)
     }
   },
   methods: {
@@ -82,7 +83,7 @@ export default {
       console.log(current)
     },
     onSizeChange (current, pageSize) {
-      localStorage.setItem('pageSize', pageSize)
+      localStorage.setItem('pageSize', pageSize.toString())
     },
     rowClick (record, index) {
       return {
@@ -110,13 +111,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.ant-layout {
+  min-width: 320px;
+}
+
 .ant-layout-content {
   height: 75%;
   background-color: #fff;
   padding: 0 0 !important;
 }
 
-.a-list {
+.a-table {
   display: flex;
   justify-content: center;
   align-items: center;