样式调整启用前进返回按钮 [ci skip]

sunzongzheng · Feb 3, 2018 · 66a0e81 · 66a0e81
1 parent 984d09a
commit 66a0e81
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 29 deletions.
diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js
@@ -20,6 +20,17 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
  */
 let whiteListedModules = ['vue']
 
+const scss_loader = [
+  'vue-style-loader',
+  'css-loader',
+  'sass-loader',
+  {
+    loader: 'sass-resources-loader',
+    options: {
+      resources: [path.join(__dirname, '../src/renderer/assets/variable.scss')]
+    }
+  }
+]
 let rendererConfig = {
   devtool: '#cheap-module-eval-source-map',
   entry: {
@@ -50,6 +61,10 @@ let rendererConfig = {
         test: /\.node$/,
         use: 'node-loader'
       },
+      {
+        test: /\.scss$/,
+        use: scss_loader
+      },
       {
         test: /\.vue$/,
         use: {
@@ -58,7 +73,7 @@ let rendererConfig = {
             extractCSS: process.env.NODE_ENV === 'production',
             loaders: {
               sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
-              scss: 'vue-style-loader!css-loader!sass-loader'
+              scss: scss_loader
             }
           }
         }

diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,5 @@ thumbs.db
 !.gitkeep
 releases/
 .idea/
+package-lock.json
+yarn.lock
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "npm": "^5.5.1",
     "passport-qq": "0.0.3",
     "request": "^2.82.0",
+    "sass-resources-loader": "^1.3.1",
     "shelljs": "^0.7.8",
     "velocity-animate": "^1.5.0",
     "vue": "2.3.3",

diff --git a/src/renderer/assets/variable.scss b/src/renderer/assets/variable.scss
@@ -0,0 +1 @@
+$color-primary: #26B36C;
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
@@ -3,7 +3,7 @@ import Router from 'vue-router'
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   routes: [
     {
       path: '/',
@@ -43,5 +43,14 @@ export default new Router({
         }
       ]
     }
-  ]
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    return {x: 0, y: 0}
+  }
 })
+router.beforeEach((to, from, next) => {
+  console.log(to)
+  next()
+})
+export default router
+
diff --git a/src/renderer/view/main/components/lyrics/index.vue b/src/renderer/view/main/components/lyrics/index.vue
@@ -187,7 +187,10 @@
             height: calc(100% - 60px);
             .item {
                 padding: 8px 0;
+                transition: scale 1s;
                 &.active {
+                    transform: scale(1.2);
+                    transition: scale 1s;
                     color: #26B36C;
                 }
             }

diff --git a/src/renderer/view/main/components/searchBar/index.scss b/src/renderer/view/main/components/searchBar/index.scss
@@ -14,6 +14,10 @@
     font-size: 12px;
     margin-left: 16px;
     opacity: .4;
+    cursor: pointer;
+    &:hover {
+      color: $color-primary;
+    }
     &.right_arrow {
       transform: rotate(180deg);
     }

diff --git a/src/renderer/view/main/components/searchBar/index.vue b/src/renderer/view/main/components/searchBar/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div :class="s.app">
         <div :class="s.left">
-            <Icon type="left" :class="s.icon"></Icon>
-            <Icon type="left" :class="[s.icon,s.right_arrow]"></Icon>
+            <Icon type="left" :class="s.icon" @click="$router.go(-1)"></Icon>
+            <Icon type="left" :class="[s.icon,s.right_arrow]" @click="$router.go(1)"></Icon>
             <Icon type="shuaxin" :class="s.icon"></Icon>
             <div :class="s.inputArea">
                 <input :class="s.input"

diff --git a/src/renderer/view/main/index.vue b/src/renderer/view/main/index.vue
@@ -3,7 +3,7 @@
         <left-menu style="width: 200px;"></left-menu>
         <div :class="s.right">
             <search-bar :class="s.searchBar"></search-bar>
-            <div :class="s.main">
+            <div :class="s.main" ref="main">
                 <keep-alive include="rankMain,rankDetail">
                     <router-view></router-view>
                 </keep-alive>
@@ -38,6 +38,10 @@
     },
     computed: {
       ...mapState('lyrics', ['show']),
+    },
+    beforeRouteUpdate(to, from, next) {
+      this.$refs.main.scrollTop = 0
+      next()
     }
   }
 </script>

diff --git a/src/renderer/view/rank/main/index.vue b/src/renderer/view/rank/main/index.vue
@@ -26,6 +26,7 @@
 <style lang="scss" module="s">
     .app {
         padding: 0 16px;
+        overflow: hidden;
         .main {
             display: flex;
             flex-wrap: wrap;

diff --git a/yarn.lock b/yarn.lock
@@ -378,7 +378,7 @@ [email protected], async@^1.4.0, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmjs.org/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.0.0, async@^2.1.2, async@^2.1.5, async@^2.4.1:
+async@^2.0.0, async@^2.1.2, async@^2.1.4, async@^2.1.5, async@^2.4.1:
   version "2.6.0"
   resolved "https://registry.npmjs.org/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
@@ -2553,7 +2553,7 @@ debug@^3.0.0, debug@^3.1.0:
   dependencies:
     ms "2.0.0"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
 
@@ -4382,7 +4382,7 @@ import-local@^1.0.0:
     pkg-dir "^2.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
@@ -5190,7 +5190,7 @@ loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.5:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -5247,25 +5247,17 @@ lodash._basefor@^3.0.0:
   version "3.0.3"
   resolved "https://registry.npmjs.org/lodash._basefor/-/lodash._basefor-3.0.3.tgz#7550b4e9218ef09fad24343b612021c79b4c20c2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
   dependencies:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
+lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
 
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-
 lodash._createassigner@^3.0.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
@@ -5274,17 +5266,11 @@ lodash._createassigner@^3.0.0:
     lodash._isiterateecall "^3.0.0"
     lodash.restparam "^3.0.0"
 
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.npmjs.org/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
 
@@ -5386,7 +5372,7 @@ lodash.mergewith@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
-lodash.restparam@*, lodash.restparam@^3.0.0:
+lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
@@ -7313,7 +7299,7 @@ readable-stream@~1.1.10, readable-stream@~1.1.9:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
   dependencies:
@@ -7693,6 +7679,15 @@ sass-loader@^6.0.6:
     lodash.tail "^4.1.1"
     pify "^3.0.0"
 
+sass-resources-loader@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-1.3.1.tgz#6784abca83818e4f7c96a4da86af187e8615357e"
+  dependencies:
+    async "^2.1.4"
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    loader-utils "^1.0.4"
+
 sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -8870,7 +8865,7 @@ uuid@^3.0.0, uuid@^3.0.1, uuid@^3.1.0, uuid@~3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04"
 
-validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
+validate-npm-package-license@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
   dependencies: