feat(工具箱): 完善“原神时钟”，添加时间信息和提示文本

src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue

@@ -350,7 +350,7 @@ onBeforeUnmount(() => {
   width: 32em;
   height: 32em;
   border-radius: 50%;
-  font-size: 1rem;
+  font-size: 11px;
   overflow: hidden;
   filter: brightness(1.1) saturate(0.9);
 }

src/views/ToolboxView/Other/GenshinImpactClock/GenshinButton.vue

@@ -37,12 +37,11 @@ defineProps({
 .genshin-button {
   display: inline-block;
   position: relative;
-  margin: 1rem 0.5rem;
+  padding: 8px;
-  padding: 0.5rem;
+  border-radius: 24px;
-  border-radius: 1.5rem;
   background-color: #ECE3D6;
   color: #494246;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: bold;
   line-height: 1;
   white-space: nowrap;
@@ -63,7 +62,7 @@ defineProps({
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.25rem;
+  padding: 4px;
   border-radius: 50%;
   background-color: #2D2D2D;
   color: #FFFFFF;
@@ -71,6 +70,6 @@ defineProps({
 
 .btn-label {
   display: inline-block;
-  padding: 0 3.5rem;
+  padding: 0 56px;
 }
 </style>

src/views/ToolboxView/Other/GenshinImpactClock/GenshinImpactClock.vue

@@ -1,18 +1,40 @@
 <template>
   <div class="tool-detail-page">
 
+    <!-- 左 -->
+    <div class="page-column">
+      <time-info />
+    </div>
+
+    <!-- 右 -->
+    <div class="page-column">
+
+      <!-- 时钟 -->
       <clock-element ref="clockRef" />
 
-    <!-- <genshin-button
+      <!-- 上限提示 -->
-      icon-color="#F44336"
+      <div class="time-notice">
-      icon-name="mdi-close"
+        <span
-    >取消</genshin-button> -->
+          v-show="true"
+          class="time-notice-text"
+        >时间到达上限</span>
+      </div>
 
+      <!-- 确认时间 -->
+      <div class="time-submit">
+        <span
+          v-if="false"
+          class="time-notice-text"
+        >时间少于30分钟</span>
         <genshin-button
+          v-else
           icon-color="#FFC107"
           icon-name="mdi-circle-outline"
           @click="handleConfirm"
         >确认</genshin-button>
+      </div>
+
+    </div>
 
   </div>
 </template>
@@ -24,6 +46,7 @@ import {
 
 import ClockElement from './ClockElement.vue';
 import GenshinButton from './GenshinButton.vue';
+import TimeInfo from './TimeInfo.vue';
 
 /**
  * @desc 时钟元素 ref
@@ -45,6 +68,43 @@ function handleConfirm() {
 
 <style lang="less" scoped>
 .tool-detail-page {
+  border-radius: 8px;
   background-color: #000;
+  font-size: 16px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.page-column {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;;
+  vertical-align: middle;
+  height: 100%;
+  white-space: initial;
+
+  &:not(:first-child) {
+    margin-left: 64px;
+  }
+}
+
+.time-notice {
+  display: flex;
+  height: 40px;
+  margin-top: 16px;
+}
+
+.time-notice-text {
+  margin: auto 0;
+  font-weight: bold;
+  color: #FFF;
+  opacity: 0.5;
+  font-size: 14px;
+}
+
+.time-submit {
+  display: flex;
+  height: 40px;
 }
 </style>

src/views/ToolboxView/Other/GenshinImpactClock/TimeInfo.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="time-info"
+    :style="{ '--image-time-info-arrow': IMAGE_TIME_INFO_ARROW }"
+  >
+
+    <!-- 装饰元素 -->
+    <div class="arrow-element"></div>
+
+    <!-- 标题 -->
+    <div class="time-title time-title-current">当前时间</div>
+
+    <!-- 当前时间值 -->
+    <div class="time-value time-value-current">12:00</div>
+
+    <!-- 三角形图标 -->
+    <div class="triangle-icon">
+      <span class="mdi mdi-triangle-small-down"></span>
+    </div>
+
+    <!-- 标题 -->
+    <div class="time-title time-title-target">调整到</div>
+
+    <!-- 三角形图标 -->
+    <div class="triangle-icon">
+      <span class="mdi mdi-triangle-small-down"></span>
+    </div>
+
+    <!-- 目标时间值 -->
+    <div class="time-value time-value-target">12:00</div>
+
+    <!-- 时间差 -->
+    <div class="time-diff">+2日</div>
+
+    <!-- 装饰元素 -->
+    <div class="arrow-element"></div>
+
+  </div>
+</template>
+
+<script setup>
+import {
+  IMAGE_TIME_INFO_ARROW,
+} from './common-data';
+</script>
+
+<style lang="less" scoped>
+.time-info {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 8em;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.arrow-element {
+  margin: 1.75em 0;
+  width: 100%;
+  height: 1.5em;
+  background-image: var(--image-time-info-arrow);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.time-diff {
+  color: #ECE3D6;
+  font-size: 0.75em;
+}
+
+.time-title {
+  color: #AFA189;
+}
+
+.time-title-target {
+  margin: 0.25em 0;
+}
+
+.time-value {
+  color: #ECE3D6;
+  font-size: 1.25em;
+}
+
+.time-value-current {
+  margin-top: 1.25em;
+  margin-bottom: 0.25em;
+}
+
+.time-value-target {
+  margin-top: 0.25em;
+  margin-bottom: 0.5em;
+}
+
+.triangle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: #FFF;
+  font-size: 1.5em;
+  opacity: 0.2;
+}
+</style>

src/views/ToolboxView/Other/GenshinImpactClock/common-data.js

@@ -13,4 +13,5 @@ export const IMAGE_TIME_ICON_DUSK = `url("${IMAGE_BASE}/time_icon_dusk.png")`;
 export const IMAGE_TIME_ICON_MORNING = `url("${IMAGE_BASE}/time_icon_morning.png")`;
 export const IMAGE_TIME_ICON_NIGHT = `url("${IMAGE_BASE}/time_icon_night.png")`;
 export const IMAGE_TIME_ICON_NOON = `url("${IMAGE_BASE}/time_icon_noon.png")`;
+export const IMAGE_TIME_INFO_ARROW = `url("${IMAGE_BASE}/time_info_arrow.png")`;
 export const IMAGE_TIME_ZONE_COLOR = `${IMAGE_BASE}/time_zone_color.png`;