add rank btn

src/app.js

@@ -124,7 +124,7 @@ class App{
             <span class="title">统计</span>
             <ul id="total"></ul>
             <span style="padding:0.25rem; margin: 0.5rem 0; border: none; background: #ccc;"></span>
-            <span class="title">成就</span>
+            <span class="title">成就<button id="rank">排行榜</button></span>
             <ul id="achievements"></ul>
         `)
 
@@ -132,6 +132,9 @@ class App{
             .find('#specialthanks')
             .click(()=>this.switch('index'));
 
+        achievementPage
+            .find('#rank')
+            .click(()=>this.hint('别卷了，没有排行榜'));
         // Talent
         const talentPage = $(`
         <div id="main">

view/dark.css

@@ -135,6 +135,7 @@ body {
 }
 
 .sponsor,
+#rank,
 #specialthanks,
 #achievement {
   position: fixed;
@@ -164,6 +165,13 @@ body {
   padding: 0.5rem;
 }
 
+#rank {
+  position: absolute;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+}
+
 #spthx {
   position: fixed;
   display: grid;
@@ -221,6 +229,7 @@ body {
 
 .title {
   color: white;
+  position: relative;
   font-size: 1.5rem;
   font-weight: 700;
   padding: 1rem;
@@ -395,28 +404,57 @@ ul#total li .achievementtitle,
   }
 }
 
-.grade0b.selected {
+.grade0b.selected,
-  background-color: #c0c0c0 !important;
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #ccc 0px 0px 10px;
   color: #3b3b3b;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #c0c0c0 !important;
 }
 
 .grade1b.selected {
   background-color: #87cefa !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade2b.selected {
   background-color: #e7beff !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .grade3b.selected {
   background-color: #f1bfac !important;
-  box-shadow: #ccc 0px 0px 10px;
-  color: #3b3b3b;
 }
 
 .propinitial {

view/light.css

@@ -134,6 +134,7 @@ body {
 }
 
 .sponsor,
+#rank,
 #specialthanks,
 #achievement {
   position: fixed;
@@ -163,6 +164,13 @@ body {
   padding: 0.5rem;
 }
 
+#rank {
+  position: absolute;
+  top: 50%;
+  right: 1.5rem;
+  transform: translateY(-50%);
+}
+
 #spthx {
   position: fixed;
   display: grid;
@@ -218,6 +226,7 @@ body {
 }
 
 .title {
+  position: relative;
   font-size: 1.5rem;
   font-weight: 700;
   padding: 1rem;
@@ -622,28 +631,57 @@ i {
   }
 }
 
-.grade0b.selected {
+.grade0b.selected,
-  background-color: #444 !important;
+.grade1b.selected,
+.grade2b.selected,
+.grade3b.selected {
   box-shadow: #bbb 0px 0px 10px;
   color: #fff;
+  overflow: hidden;
+}
+.grade0b.selected.selected::after,
+.grade1b.selected.selected::after,
+.grade2b.selected.selected::after,
+.grade3b.selected.selected::after {
+  content: '';
+  position: absolute;
+  background-image: linear-gradient(to left, transparent, #fff 50%, transparent 100%);
+  opacity: 1;
+  top: 0;
+  bottom: 0;
+  width: 40px;
+  opacity: 0;
+  animation: blink 2s linear infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0;
+    transform: translateX(-100vw);
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(80px);
+  }
+}
+
+.grade0b.selected {
+  background-color: #444 !important;
 }
 
 .grade1b.selected {
   background-color: #407dec !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade2b.selected {
   background-color: #b362e7 !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 .grade3b.selected {
   background-color: #ff7f4d !important;
-  box-shadow: #bbb 0px 0px 10px;
-  color: #fff;
 }
 
 @keyframes banner-in {

webpack.config.cjs

@@ -22,6 +22,10 @@ module.exports = {
         directory: path.join(__dirname, 'src'),
         publicPath: '/src',
       },
+      {
+        directory: path.join(__dirname, 'lib'),
+        publicPath: '/lib',
+      }
     ],
   },
   output: {