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

7
src/views/home.vue
View File

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

6
src/views/login.vue
View File

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