✨ grey the cemetery page

nicejade · Oct 11, 2022 · 77cdc0d · 77cdc0d
1 parent 92da7d2
commit 77cdc0d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
@@ -18,6 +18,11 @@ html {
   height: 100%;
 }
 
+.filter-grayscale {
+  -webkit-filter: grayscale(100%); 
+  filter: grayscale(100%);
+}
+
 @media (max-width: 960px) {
   html {
     font-size: 65%;

diff --git a/src/components/homepage/HomeLotus.vue b/src/components/homepage/HomeLotus.vue
@@ -42,7 +42,6 @@ export default {
 
   methods: {
     onExploreAll() {
-      debugger
       this.$gtagTracking('mian-explore-all', 'index')
     },
   },

diff --git a/src/helper/document.js b/src/helper/document.js
@@ -32,3 +32,8 @@ export const removeClass = (el = {}, className) => {
     )
   }
 }
+
+export const greyOutWebsite = (isGrey = true) => {
+  const action = isGrey ? 'add' : 'remove'
+  document.getElementById('app').classList[action]('filter-grayscale')
+}
diff --git a/src/views/Cemetery.vue b/src/views/Cemetery.vue
@@ -12,7 +12,11 @@
                 <preview-md v-once :value="cemeteryDescStr"></preview-md>
               </mark>
             </div>
-            <links-list :is-abstract="true" :pdata="pastLinksArray" :is-loading="isLoading"></links-list>
+            <links-list
+              :is-abstract="true"
+              :pdata="pastLinksArray"
+              :is-loading="isLoading"
+            ></links-list>
           </div>
           <aside-list></aside-list>
         </div>
@@ -25,6 +29,7 @@
 import DEFAULT_CONF from './../config/default'
 import { parse } from 'helper/marked'
 import PreviewMd from 'components/markdown/PreviewMd.vue'
+import { greyOutWebsite } from './../helper/document'
 
 const cemeteryDescStr = `天地不仁，以万物为刍狗。年与时驰间，[倾城之链](https://nicelinks.site/)所收录的优质网站，也难逃时间洗礼；其中诸多内容，因为各种缘由而消隐逝去；[倾城之链 - 产品公墓](https://nicelinks.site/cemetery)，就是将不再能访问的、可能永远被人遗忘的产品列出来，留个纪念，缅怀过往。`
 
@@ -55,12 +60,16 @@ export default {
 
   mounted() {
     this.$setPageTitle(this.$t('productCemetery'))
-
     const descNode = document.querySelector('meta[name="description"]')
-    descNode.setAttribute(
-      'content',
-      parse(this.cemeteryDescStr).replace(/<[^>]*>/g, '')
-    )
+    descNode.setAttribute('content', parse(this.cemeteryDescStr).replace(/<[^>]*>/g, ''))
+  },
+
+  updated() {
+    greyOutWebsite()
+  },
+
+  destroyed() {
+    greyOutWebsite(false)
   },
 
   methods: {