From fcda9746265b187ba493cc3616aea1bf9438c047 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Sun, 13 Oct 2024 12:00:08 +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=E6=B7=BB=E5=8A=A0=E6=97=B6=E9=97=B4=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=92=8C=E6=8F=90=E7=A4=BA=E6=96=87=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Other/GenshinImpactClock/ClockElement.vue |   2 +-
 .../GenshinImpactClock/GenshinButton.vue      |  11 +-
 .../GenshinImpactClock/GenshinImpactClock.vue |  80 +++++++++++--
 .../Other/GenshinImpactClock/TimeInfo.vue     | 106 ++++++++++++++++++
 .../Other/GenshinImpactClock/common-data.js   |   1 +
 5 files changed, 183 insertions(+), 17 deletions(-)
 create mode 100644 src/views/ToolboxView/Other/GenshinImpactClock/TimeInfo.vue

diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue b/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue
index f2c6277..7d4c71a 100644
--- a/src/views/ToolboxView/Other/GenshinImpactClock/ClockElement.vue
+++ b/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);
 }
diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/GenshinButton.vue b/src/views/ToolboxView/Other/GenshinImpactClock/GenshinButton.vue
index 9cc0cef..a1663c8 100644
--- a/src/views/ToolboxView/Other/GenshinImpactClock/GenshinButton.vue
+++ b/src/views/ToolboxView/Other/GenshinImpactClock/GenshinButton.vue
@@ -37,12 +37,11 @@ defineProps({
 .genshin-button {
   display: inline-block;
   position: relative;
-  margin: 1rem 0.5rem;
-  padding: 0.5rem;
-  border-radius: 1.5rem;
+  padding: 8px;
+  border-radius: 24px;
   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>
diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/GenshinImpactClock.vue b/src/views/ToolboxView/Other/GenshinImpactClock/GenshinImpactClock.vue
index ac125fc..c58c1c3 100644
--- a/src/views/ToolboxView/Other/GenshinImpactClock/GenshinImpactClock.vue
+++ b/src/views/ToolboxView/Other/GenshinImpactClock/GenshinImpactClock.vue
@@ -1,18 +1,40 @@
 <template>
   <div class="tool-detail-page">
 
-    <clock-element ref="clockRef" />
+    <!-- 左 -->
+    <div class="page-column">
+      <time-info />
+    </div>
 
-    <!-- <genshin-button
-      icon-color="#F44336"
-      icon-name="mdi-close"
-    >取消</genshin-button> -->
+    <!-- 右 -->
+    <div class="page-column">
 
-    <genshin-button
-      icon-color="#FFC107"
-      icon-name="mdi-circle-outline"
-      @click="handleConfirm"
-    >确认</genshin-button>
+      <!-- 时钟 -->
+      <clock-element ref="clockRef" />
+
+      <!-- 上限提示 -->
+      <div class="time-notice">
+        <span
+          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>
diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/TimeInfo.vue b/src/views/ToolboxView/Other/GenshinImpactClock/TimeInfo.vue
new file mode 100644
index 0000000..039aeff
--- /dev/null
+++ b/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>
diff --git a/src/views/ToolboxView/Other/GenshinImpactClock/common-data.js b/src/views/ToolboxView/Other/GenshinImpactClock/common-data.js
index 2d88af7..6ecd10d 100644
--- a/src/views/ToolboxView/Other/GenshinImpactClock/common-data.js
+++ b/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`;