From 81b714333aa7e9e3dc112aa35937ba13aeaf59a6 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sun, 13 Oct 2024 00:33:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E7=AE=B1):=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E2=80=9C=E5=8E=9F=E7=A5=9E=E6=97=B6=E9=92=9F=E2=80=9D?=
 =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8=20CSS=20=E8=AE=A1=E7=AE=97=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E5=9B=BE=E6=A0=87=E9=AB=98=E4=BA=AE=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Other/GenshinImpactClock/ClockElement.vue | 51 +++++++++++++++----
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue b/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue
index 2fc7013..f2c6277 100644
--- a/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue
+++ b/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue
@@ -52,10 +52,22 @@
     <!-- 表盘 -->
     <div class="clock-dial bg-contain">
       <div class="time-icons">
-        <div class="time-morning bg-contain"></div>
-        <div class="time-noon bg-contain"></div>
-        <div class="time-dusk bg-contain"></div>
-        <div class="time-night bg-contain"></div>
+        <div
+          class="time-morning bg-contain"
+          style="--self-angle-1: 270; --self-angle-2: 270;"
+        ></div>
+        <div
+          class="time-noon bg-contain"
+          style="--self-angle-1: 0; --self-angle-2: 360;"
+        ></div>
+        <div
+          class="time-dusk bg-contain"
+          style="--self-angle-1: 90; --self-angle-2: 90;"
+        ></div>
+        <div
+          class="time-night bg-contain"
+          style="--self-angle-1: 180; --self-angle-2: 180;"
+        ></div>
       </div>
     </div>
 
@@ -107,8 +119,8 @@ const clockState = reactive({
 /** 下层指针状态 */
 const lowerPointer = reactive({
 
-  /** 视图角度 */
-  viewAngle: 60,
+  /** 视图角度，用于显示 */
+  viewAngle: 0,
 
 });
 
@@ -118,11 +130,11 @@ const upperPointer = reactive({
   /** 是否为第二圈 */
   isSecond: false,
 
-  /** 实际角度 */
+  /** 上层指针与下层指针相差的角度 */
   dataAngle: 0,
 
-  /** 视图角度 */
-  viewAngle: 60,
+  /** 视图角度，用于显示和交互 */
+  viewAngle: 0,
 
 });
 
@@ -144,7 +156,9 @@ const elStyle = computed(() => {
     '--image-time-icon-night': IMAGE_TIME_ICON_NIGHT,
     '--image-time-icon-noon': IMAGE_TIME_ICON_NOON,
     '--pointer-lower-angle': `${lowerPointer.viewAngle}deg`,
+    '--pointer-lower-angle-value': lowerPointer.viewAngle,
     '--pointer-upper-angle': `${upperPointer.viewAngle}deg`,
+    '--pointer-upper-angle-value': upperPointer.viewAngle,
   };
 });
 
@@ -554,13 +568,28 @@ onBeforeUnmount(() => {
     height: 100%;
 
     > div {
+      // [角度 1 相关计算]
+      // 计算指针角度与图标所在角度的差值（可能为负数）
+      --angle-1-diff: calc(var(--self-angle-1) - var(--pointer-lower-angle-value));
+      // 计算角度差值的绝对值
+      --angle-1-abs: ~"max(var(--angle-1-diff), var(--angle-1-diff) * -1)";
+      // 限制角度最大差值为 90
+      --angle-1-use: ~"min(90, var(--angle-1-abs))";
+      // [角度 2 相关计算，主要用于 360°]
+      // 计算指针角度与图标所在角度的差值（可能为负数）
+      --angle-2-diff: calc(var(--self-angle-2) - var(--pointer-lower-angle-value));
+      // 计算角度差值的绝对值
+      --angle-2-abs: ~"max(var(--angle-2-diff), var(--angle-2-diff) * -1)";
+      // 限制角度最大差值为 90
+      --angle-2-use: ~"min(90, var(--angle-2-abs))";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      opacity: 1;
-      // transition: opacity 1s;
+      // 根据角度计算透明度
+      // 注：计算两个角度的透明度，取最大值
+      opacity: ~"calc((90 - min(var(--angle-1-use), var(--angle-2-use))) / 90)";
     }
 
     .time-morning {