Footer 长音效果修复，逐字效果增强，进行一些BUG修复

src/components/Footer.vue

@@ -40,19 +40,30 @@
           <div class="lrc-all"
             :key="store.playerLrc.length != 0 ? `lrc-line-${store.playerLrc[0][2]}` : `lrc-line-null`">
             <music-one theme="filled" size="18" fill="#efefef" />
+            <!-- &nbsp; -->
+            <!-- <Icon size="20" style="transform: rotate(-18deg);" class="paws-1">
+              <paw />
+            </Icon> -->
             <span class="yrc-box">
               <span class="yrc-2 lrc-text text-hidden" id="yrc-2-wrap">
                 <span v-for="i in store.playerLrc" :key="`lrc-over-char-${i[2]}-${i[3]}`" v-html="i[4]">
                 </span>
               </span>
               <span class="yrc-1 lrc-text text-hidden" id="yrc-1-wrap">
-                <span v-for="i in store.playerLrc" :key="`lrc-char-${i[2]}-${i[3]}`"
+                <span v-for="i in store.playerLrc" :key="`lrc-char-${i[2]}-${i[3]}`" :class="[
-                  :style="`opacity: ${i[1] ? '1' : '0.6'}`"
+                  'yrc-char',
-                  :class="`yrc-char ${i[0] ? 'fade-in' : 'fade-in-start'} ${i[0] > 1.5 ? 'long-tone' : 'fade-in-start'}`"
+                  i[0] && Number(i[6]) > 0 ? 'fade-in' : 'fade-in-start',
-                  :id="`lrc-char-${i[2]}-${i[3]}`" v-html="i[4]">
+                  i[0] && Number(i[5]) > 1019 && Number(i[6]) > 0 ? 'long-tone' : 'fade-in-start',
+                  i[0] && Number(i[6]) <= 0 ? 'fade-out' : '',
+                  i[1] ? 'yrc-style-s2' : 'yrc-style-s1'
+                ]" :id="`lrc-char-${i[2]}-${i[3]}`" v-html="i[4]">
                 </span>
               </span>
             </span>
+            <!-- <Icon size="20" style="transform: rotate(18deg);" class="paws-2">
+              <paw />
+            </Icon> -->
+            <!-- &nbsp; -->
             <music-one theme="filled" size="18" fill="#efefef" />
           </div>
         </Transition>
@@ -60,7 +71,15 @@
           <!-- 逐行模块 -->
           <div class="lrc-all" :key="store.getPlayerLrc">
             <music-one theme="filled" size="18" fill="#efefef" />
+            <!-- &nbsp; -->
+            <!-- <Icon size="20" style="transform: rotate(-18deg);" class="paws-3">
+              <paw />
+            </Icon> -->
             <span class="lrc-text text-hidden" v-html="store.getPlayerLrc[0][4]" :class="`lrc-char`" />
+            <!-- <Icon size="20" style="transform: rotate(18deg);" class="paws-4">
+              <paw />
+            </Icon> -->
+            <!-- &nbsp; -->
             <music-one theme="filled" size="18" fill="#efefef" />
           </div>
         </Transition>
@@ -71,6 +90,8 @@
 
 <script setup>
 import { MusicOne } from "@icon-park/vue-next";
+// import { Icon } from "@vicons/utils";
+// import { Paw } from "@vicons/ionicons5";
 import { mainStore } from "@/store";
 import config from "@/../package.json";
 
@@ -101,10 +122,10 @@ const siteUrl = computed(() => {
 // 逐字模块1
 .yrc-char {
   display: inline-block;
-  opacity: 0.3;
+  opacity: 0.6;
   transform: translateY(1px);
-  background-clip: text;
   -webkit-background-clip: text;
+  background-clip: text;
   font-family: MiSans-Regular;
   transition:
     opacity 0.3s linear,
@@ -112,8 +133,8 @@ const siteUrl = computed(() => {
     transform 0.3s linear;
 
   &.fade-in-start {
-    text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
+    text-shadow: 0px 0px 2px rgba(255, 240, 245, 1);
-    opacity: 0.3; // 初始显示的透明度
+    opacity: 0.6;
     transform: translateY(1px);
     transition:
       color 0.5s linear,
@@ -131,13 +152,51 @@ const siteUrl = computed(() => {
       transform 0.3s linear;
   }
 
+  &.fade-out {
+    opacity: 1;
+    transform: translateY(-1px);
+    text-shadow: 0px 0px 6px rgba(255, 240, 245, 1),
+      0px 0px 2px rgba(176, 224, 230, 1),
+      0px 0px 2px rgba(230, 230, 250, 1);
+    transition:
+      color 0.5s linear,
+      opacity 0.3s linear,
+      transform 0.3s linear;
+  }
+
   &.fade-enter-active {
     animation: float-up 0.3s linear forwards;
   }
 
   &.long-tone {
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
+    opacity: 1;
-    animation: pulse 1.5s infinite alternate;
+    transform: translateY(-1px);
+    animation: pulse 1s ease-in-out forwards;
+    transition:
+      color 0.5s linear,
+      opacity 0.3s linear,
+      transform 0.3s linear;
+  }
+
+  &.yrc-style-s1 {
+    opacity: 0.6;
+    color: rgba(220, 220, 220, 1);
+    transition:
+      color 0.5s linear,
+      opacity 0.3s linear,
+      transform 0.3s linear;
+  }
+
+  &.yrc-style-s2 {
+    opacity: 1;
+    color: rgba(255, 240, 245, 1);
+    text-shadow: 0px 0px 6px rgba(255, 240, 245, 1),
+      0px 0px 2px rgba(176, 224, 230, 1),
+      0px 0px 2px rgba(230, 230, 250, 1);
+    transition:
+      color 0.5s linear,
+      opacity 0.3s linear,
+      transform 0.3s linear;
   }
 }
 
@@ -153,29 +212,37 @@ const siteUrl = computed(() => {
 
 @keyframes colorFade {
   from {
-    color: #dfd9d9;
+    color: rgba(220, 220, 220, 1);
     opacity: 0.6;
-    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
+    text-shadow: 0px 0px 3px rgba(255, 240, 245, 1),
+      0px 0px 0px rgba(176, 224, 230, 1),
+      0px 0px 0px rgba(230, 230, 250, 1);
   }
 
   to {
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255, 240, 245, 1);
     opacity: 1;
-    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
+    text-shadow: 0px 0px 6px rgba(255, 240, 245, 1),
+      0px 0px 2px rgba(176, 224, 230, 1),
+      0px 0px 2px rgba(230, 230, 250, 1);
   }
 }
 
 @keyframes pulse {
   from {
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
+    color: rgba(220, 220, 220, 1);
-      0 0 20px rgba(255, 255, 255, 0.6),
+    opacity: 0.6;
-      0 0 30px rgba(255, 255, 255, 0.4);
+    text-shadow: 0px 0px 3px rgba(255, 240, 245, 1),
+      0px 0px 0px rgba(255, 182, 193, 1),
+      0px 0px 0px rgba(255, 192, 203, 1);
   }
 
   to {
-    text-shadow: 0 0 15px rgba(255, 255, 255, 1),
+    color: rgba(255, 255, 255, 0.8);
-      0 0 25px rgba(255, 255, 255, 0.8),
+    opacity: 1;
-      0 0 35px rgba(255, 255, 255, 0.6);
+    text-shadow: 3px 3px 7px rgba(255, 240, 245, 1),
+      0px 0px 12px rgba(255, 182, 193, 1),
+      0px 0px 12px rgba(255, 192, 203, 1);
   }
 }
 
@@ -191,8 +258,10 @@ const siteUrl = computed(() => {
   display: inline-block;
   position: absolute;
   width: auto;
-  opacity: 0.5;
+  opacity: 0.6;
-  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 6px rgba(255, 240, 245, 1),
+    0px 0px 2px rgba(176, 224, 230, 1),
+    0px 0px 2px rgba(230, 230, 250, 1);
   font-family: MiSans-Regular;
   overflow: hidden;
   white-space: nowrap;
@@ -207,9 +276,11 @@ const siteUrl = computed(() => {
 .lrc-char {
   display: inline;
   opacity: 1;
-  background-clip: text;
   -webkit-background-clip: text;
-  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
+  background-clip: text;
+  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8),
+    0 0 2px rgba(255, 165, 0, 1),
+    0 0 2px rgba(255, 179, 71, 1);
   font-family: MiSans-Regular;
   transition:
     opacity 0.3s linear,
@@ -218,6 +289,7 @@ const siteUrl = computed(() => {
 
 // End
 
+
 #footer {
   width: 100%;
   position: absolute;

src/components/Player.vue

@@ -304,7 +304,8 @@ function showYrc() {
           const [[start, duration], word, line, row] = it;
           const isCurrent = now >= start && now <= start + duration;
           const isSungLyrics = start + duration < now;
-          return [isCurrent, isSungLyrics, line, row, word, "auto"];
+          const lessdur = start + duration - now;
+          return [isCurrent, isSungLyrics, line, row, word, duration, lessdur, "auto"];
         })
         : [[true, 1, 0, 0, `${store.playerTitle} - ${store.playerArtist}`]];
     if (store.playerLrc.toString() != yrcLyric.toString()) {

src/main.js

@@ -46,6 +46,7 @@ window.addEventListener("beforeunload", () => {
 
 app.use(pinia);
 app.mount("#app");
+const store = mainStore();
 
 // PWA
 navigator.serviceWorker.addEventListener("controllerchange", async () => {