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

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>