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; } 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 @@ @@ -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() { 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 @@ + + + + + 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`;