Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Home page background add supports for light mode

Browse Source
This commit is contained in:
LittleSheep 2025-03-20 21:42:39 +08:00
parent 234043fece
commit 95e0d3fb29
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pages/index.vue
View File

@ -12,7 +12,7 @@
enter: { enter: {
y: 0, y: 0,
opacity: 1, opacity: 1,
transition: { duration: 0.8 } transition: { duration: 0.8 },
}, },
}" }"
:src="Logo" :src="Logo"
@ -107,11 +107,13 @@ const { data: products } = await useAsyncData("products", () => {
const canvasRef = ref(null) const canvasRef = ref(null)
onMounted(() => { onMounted(() => {
const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
const canvas: HTMLCanvasElement = canvasRef.value! const canvas: HTMLCanvasElement = canvasRef.value!
const ctx = canvas.getContext("2d")! const ctx = canvas.getContext("2d")!
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1
canvas.width = window.innerWidth * dpr; canvas.width = window.innerWidth * dpr
canvas.height = window.innerHeight * dpr; canvas.height = window.innerHeight * dpr
let particles: Particle[] = [] let particles: Particle[] = []
const numParticles = 100 const numParticles = 100
@ -139,10 +141,10 @@ onMounted(() => {
} }
draw() { draw() {
ctx.beginPath(); ctx.beginPath()
ctx.arc(this.x * dpr, this.y * dpr, this.size * dpr, 0, Math.PI * 2); ctx.arc(this.x * dpr, this.y * dpr, this.size * dpr, 0, Math.PI * 2)
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; ctx.fillStyle = isDarkMode ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)"
ctx.fill(); ctx.fill()
} }
} }
@ -156,17 +158,17 @@ onMounted(() => {
function drawLines() { function drawLines() {
for (let i = 0; i < particles.length; i++) { for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) { for (let j = i + 1; j < particles.length; j++) {
let dx = particles[i].x - particles[j].x; let dx = particles[i].x - particles[j].x
let dy = particles[i].y - particles[j].y; let dy = particles[i].y - particles[j].y
let distance = Math.sqrt(dx * dx + dy * dy); let distance = Math.sqrt(dx * dx + dy * dy)
if (distance < 100) { if (distance < 100) {
ctx.beginPath(); ctx.beginPath()
ctx.moveTo(particles[i].x * dpr, particles[i].y * dpr); ctx.moveTo(particles[i].x * dpr, particles[i].y * dpr)
ctx.lineTo(particles[j].x * dpr, particles[j].y * dpr); ctx.lineTo(particles[j].x * dpr, particles[j].y * dpr)
ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; ctx.strokeStyle = isDarkMode ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)"
ctx.lineWidth = 0.5 * dpr; ctx.lineWidth = 0.5 * dpr
ctx.stroke(); ctx.stroke()
} }
} }
} }