xjs
/
payment-statistics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 日期和时间组件合并

master
xjs 2025-06-05 10:33:41 +08:00
parent 28952fc52f
commit 78322d65cd
3 changed files with 77 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/watch/DigitalWatch.vue
View File

@ -1,78 +1,81 @@
<template>
<div class="digital-watch" :style="{
'--size-scale': sizeScale,
'--color-led': ledColor,
'--color-led-off': ledOffColor,
'--color-background': backgroundColor,
'--color-glow': glowColor
}">
<div class="time-container">
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(hours[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(hours[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(hours[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(hours[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(hours[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(hours[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(hours[0], 6)" class="segment-g"></div>
<div class="flex items-center">
<div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
<div class="digital-watch ml-[10px]" :style="{
'--size-scale': sizeScale,
'--color-led': ledColor,
'--color-led-off': ledOffColor,
'--color-background': backgroundColor,
'--color-glow': glowColor
}">
<div class="time-container">
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(hours[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(hours[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(hours[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(hours[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(hours[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(hours[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(hours[0], 6)" class="segment-g"></div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(hours[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(hours[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(hours[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(hours[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(hours[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(hours[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(hours[1], 6)" class="segment-g"></div>
</div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(hours[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(hours[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(hours[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(hours[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(hours[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(hours[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(hours[1], 6)" class="segment-g"></div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(minutes[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(minutes[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(minutes[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(minutes[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(minutes[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(minutes[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(minutes[0], 6)" class="segment-g"></div>
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(minutes[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(minutes[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(minutes[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(minutes[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(minutes[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(minutes[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(minutes[0], 6)" class="segment-g"></div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(minutes[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(minutes[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(minutes[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(minutes[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(minutes[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(minutes[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(minutes[1], 6)" class="segment-g"></div>
</div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(minutes[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(minutes[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(minutes[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(minutes[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(minutes[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(minutes[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(minutes[1], 6)" class="segment-g"></div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="separator">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(seconds[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(seconds[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(seconds[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(seconds[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(seconds[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(seconds[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(seconds[0], 6)" class="segment-g"></div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(seconds[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(seconds[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(seconds[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(seconds[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(seconds[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(seconds[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(seconds[1], 6)" class="segment-g"></div>
<div class="digit-group">
<div class="seven-segment">
<div :class="getSegmentClass(seconds[0], 0)" class="segment-a"></div>
<div :class="getSegmentClass(seconds[0], 1)" class="segment-b"></div>
<div :class="getSegmentClass(seconds[0], 2)" class="segment-c"></div>
<div :class="getSegmentClass(seconds[0], 3)" class="segment-d"></div>
<div :class="getSegmentClass(seconds[0], 4)" class="segment-e"></div>
<div :class="getSegmentClass(seconds[0], 5)" class="segment-f"></div>
<div :class="getSegmentClass(seconds[0], 6)" class="segment-g"></div>
</div>
<div class="seven-segment">
<div :class="getSegmentClass(seconds[1], 0)" class="segment-a"></div>
<div :class="getSegmentClass(seconds[1], 1)" class="segment-b"></div>
<div :class="getSegmentClass(seconds[1], 2)" class="segment-c"></div>
<div :class="getSegmentClass(seconds[1], 3)" class="segment-d"></div>
<div :class="getSegmentClass(seconds[1], 4)" class="segment-e"></div>
<div :class="getSegmentClass(seconds[1], 5)" class="segment-f"></div>
<div :class="getSegmentClass(seconds[1], 6)" class="segment-g"></div>
</div>
</div>
</div>
</div>
@ -117,7 +120,7 @@ const getSegmentClass = (digit: string, index: number) => {
let timer: number | null = null;
let { hours, minutes, seconds, formateTime } = useDate()
let { year, month, day, weekday,hours, minutes, seconds, formateTime } = useDate()
onMounted(() => {
formateTime();

7
src/views/home.vue
View File

@ -4,8 +4,7 @@
<SvgComponent :content="headerSvg" class="w-full h-[98px]" />
<SvgComponent :content="titleSvg" class="w-[50%] h-[69px] absolute top-0 left-50% translate-x-[-50%]" />
<div class="absolute top-[25%] right-[24px] translate-y-[-25%] z-1 flex items-center justify-center w-max">
<div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
<DigitalWatch class="ml-[10px]" />
<DigitalWatch class="" />
<div class="text-[#45A2FF] flex items-center ml-[10px]">
<SvgIcon name="avatar" class="w-[16px] h-[16px]"/>
<div class="mx-[5px]">{{ username }}</div>
@ -116,7 +115,7 @@
loader: () => import("./components/WinCustomer.vue")
});
import { useDate } from "@/composables/useDate";
import { useFetchAllData } from "./composables/useFetchData"
import { runImmediatelyAll, updateTime } from "@/composables/usePolling";
import { formatDatetime } from "@/utils/date";
@ -124,7 +123,6 @@
import { getRequest, postRequest } from "@/api/customFetch";
import { useUserStore } from "@/store/user";
const { year, month, day, weekday, formateTime } = useDate();
const router = useRouter();
@ -173,7 +171,6 @@
}
onBeforeMount(() => {
formateTime();
headerBackgroundSvg();
headerTitleSvg();
getUserInfo();

6
src/views/login.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="login-bg">
<div class="flex items-center justify-end mt-[17px] mr-[24px]">
<div class="text-[#45A2FF] text-[14px]">{{ year }}-{{ month }}-{{ day }}&nbsp;{{ weekday }}</div>
<DigitalWatch class="ml-[10px]" />
<DigitalWatch class="" />
</div>
<SvgComponent :content="titleSvg" class="h-[156px] mt-[95px]" />
<div class="login-form-wrapper w-[622px] h-[419px] mx-auto mt-[87px]">
@ -40,9 +39,7 @@
import { postRequest } from "@/api/customFetch";
import { useUserStore } from "@/store/user";
import DigitalWatch from "@/components/watch/DigitalWatch.vue";
import { useDate } from "@/composables/useDate";
const { year, month, day, weekday, formateTime } = useDate();
const router = useRouter();
const userStore = useUserStore();
@ -105,7 +102,6 @@
};
onBeforeMount(() => {
formateTime();
getTitleSvg();
});
</script>