Skip to content

Commit d6a56ea

Browse files
gradyllgradyll
committed
修改时间样式
1 parent 974fb3a commit d6a56ea

File tree

1 file changed

+185
-45
lines changed

1 file changed

+185
-45
lines changed

‎.vitepress/theme/components/Layout.vue‎

Lines changed: 185 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,210 @@
11
<!-- .vitepress/theme/Layout.vue -->
22
<template>
3-
<div class="ll-wrapper">
4-
<div class="ll-title">
5-
<em class="ll-des">在一起</em>
6-
<span class="ll-day-num">{{ Time }}</span>
7-
<spam>天</spam>
3+
<div class="fullscreen-container">
4+
<div class="cyber-clock">
5+
<div class="glitch-container">
6+
<div class="glitch" data-text="在一起">在一起</div>
7+
</div>
8+
<div class="number-container">
9+
<div class="number glitch-number" :data-text="dayCount">
10+
{{ dayCount }}
11+
</div>
12+
</div>
13+
<div class="time-container">
14+
<div class="time">{{ formattedTime }}</div>
15+
</div>
16+
<div class="scan-line"></div>
817
</div>
9-
<div class="ll-time"></div>
1018
</div>
1119
</template>
20+
1221
<script setup>
13-
import { onMounted, ref } from "vue";
14-
let Time = ref(0);
22+
import { ref, onMounted, onUnmounted } from 'vue'
1523
16-
const setAnniversary = (time) => {
17-
let date= new Date(time).getTime();
18-
let cur = Date.now();
19-
let days = Math.floor((cur - date) / 1000 / 60 / 60 / 24);
20-
return days;
21-
};
24+
const formattedTime = ref('16:51:39')
25+
const dayCount = ref('0')
2226
23-
const getTime = () => {
24-
const date = new Date()
25-
const year = date.getFullYear()
26-
const h = date.getHours()
27-
const m = date.getMinutes() < 10 ? '0'+ date.getMinutes() : date.getMinutes()
28-
const s = date.getSeconds() < 10 ? '0'+ date.getSeconds() : date.getSeconds()
29-
return `${h}:${m}:${s}`
27+
const calculateDays = () => {
28+
const startDate = new Date('2021-10-30')
29+
const today = new Date()
30+
const timeDiff = today.getTime() - startDate.getTime()
31+
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
32+
dayCount.value = days.toString()
3033
}
3134
32-
const mountedDom = () => {
33-
document.querySelector('.ll-time').innerHTML = getTime()
35+
const updateTime = () => {
36+
const now = new Date()
37+
formattedTime.value = now.toLocaleTimeString('zh-CN', {
38+
hour12: false,
39+
hour: '2-digit',
40+
minute: '2-digit',
41+
second: '2-digit'
42+
})
3443
}
3544
36-
45+
let timer
3746
onMounted(() => {
38-
Time.value = setAnniversary("2021-10-30");
39-
setInterval(() => {
40-
mountedDom()
47+
calculateDays() // 初始计算天数
48+
timer = setInterval(() => {
49+
updateTime()
50+
// 每天凌晨更新天数
51+
const now = new Date()
52+
if (now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) {
53+
calculateDays()
54+
}
4155
}, 1000)
42-
});
56+
})
57+
58+
onUnmounted(() => {
59+
clearInterval(timer)
60+
})
4361
</script>
44-
<style scoped lang="less">
45-
.ll-wrapper {
62+
63+
<style scoped>
64+
.fullscreen-container {
65+
width: 100vw;
66+
height: 100vh;
4667
display: flex;
47-
flex-direction: column;
4868
justify-content: center;
4969
align-items: center;
50-
height: calc(100vh - 310px);
51-
font-size: 36px;
70+
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
71+
margin: 0;
72+
padding: 0;
73+
overflow: hidden;
74+
position: fixed;
75+
top: 0;
76+
left: 0;
77+
}
78+
79+
.cyber-clock {
80+
background: rgba(10, 10, 10, 0.8);
81+
padding: 3rem;
82+
border-radius: 15px;
83+
position: relative;
84+
overflow: hidden;
85+
box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
86+
backdrop-filter: blur(10px);
87+
border: 1px solid rgba(0, 255, 255, 0.1);
88+
}
89+
90+
.glitch-container {
91+
margin-bottom: 1rem;
92+
}
93+
94+
.glitch {
95+
color: #fff;
96+
font-size: 2rem;
97+
position: relative;
98+
text-shadow: 0 0 5px #00fff2;
99+
}
100+
101+
.glitch::before,
102+
.glitch::after {
103+
content: attr(data-text);
104+
position: absolute;
105+
left: 0;
106+
top: 0;
107+
width: 100%;
108+
height: 100%;
109+
}
110+
111+
.glitch::before {
112+
left: 2px;
113+
text-shadow: -2px 0 #ff00c1;
114+
animation: glitch-1 2s infinite linear alternate-reverse;
115+
}
116+
117+
.glitch::after {
118+
left: -2px;
119+
text-shadow: 2px 0 #00fff2;
120+
animation: glitch-2 3s infinite linear alternate-reverse;
121+
}
122+
123+
.number-container {
124+
margin: 2rem 0;
125+
}
126+
127+
.number {
128+
font-size: 5rem;
129+
font-weight: bold;
130+
color: #fff;
131+
text-shadow: 0 0 10px #00fff2;
132+
}
52133
53-
.ll-title {
54-
margin-bottom: 50px;
134+
.time-container {
135+
margin-top: 1rem;
136+
}
137+
138+
.time {
139+
font-family: monospace;
140+
font-size: 2.5rem;
141+
color: #00fff2;
142+
text-shadow: 0 0 5px #00fff2;
143+
}
144+
145+
.scan-line {
146+
position: absolute;
147+
top: 0;
148+
left: 0;
149+
width: 100%;
150+
height: 100%;
151+
background: linear-gradient(
152+
to bottom,
153+
transparent,
154+
rgba(0, 255, 242, 0.1) 50%,
155+
transparent
156+
);
157+
animation: scan 4s linear infinite;
158+
}
159+
160+
@keyframes glitch-1 {
161+
0% {
162+
clip-path: inset(20% 0 30% 0);
163+
}
164+
20% {
165+
clip-path: inset(60% 0 10% 0);
166+
}
167+
40% {
168+
clip-path: inset(40% 0 50% 0);
169+
}
170+
60% {
171+
clip-path: inset(80% 0 5% 0);
172+
}
173+
80% {
174+
clip-path: inset(10% 0 70% 0);
55175
}
56-
.ll-des:not(.dark) {
57-
background: linear-gradient(315deg, #42d392 25%, #647eff);
58-
-webkit-background-clip: text;
59-
-webkit-text-fill-color: transparent;
60-
font-weight: bolder;
176+
100% {
177+
clip-path: inset(30% 0 20% 0);
61178
}
62-
.ll-day-num {
63-
font-size: 72px;
179+
}
180+
181+
@keyframes glitch-2 {
182+
0% {
183+
clip-path: inset(15% 0 35% 0);
184+
}
185+
20% {
186+
clip-path: inset(55% 0 15% 0);
187+
}
188+
40% {
189+
clip-path: inset(45% 0 45% 0);
190+
}
191+
60% {
192+
clip-path: inset(75% 0 10% 0);
193+
}
194+
80% {
195+
clip-path: inset(15% 0 65% 0);
196+
}
197+
100% {
198+
clip-path: inset(25% 0 25% 0);
64199
}
65200
}
66-
.dark .ll-wrapper {
67-
background-color: var(--vp-c-bg);
68-
color: var(--vp-c-text-1);
201+
202+
@keyframes scan {
203+
from {
204+
transform: translateY(-100%);
205+
}
206+
to {
207+
transform: translateY(100%);
208+
}
69209
}
70210
</style>

0 commit comments

Comments
 (0)