Skip to content
This repository was archived by the owner on Jul 20, 2025. It is now read-only.

Commit 289bfed

Browse files
Jim-Lin-4549Jim-Lin-4549
committed
feat: added new website pages | nightly 2.0.0
1 parent d6256ea commit 289bfed

15 files changed

Lines changed: 308 additions & 42 deletions

File tree

‎package.json‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
{
2-
"name": "sonolight",
3-
"version": "0.0.0",
4-
"private": true,
5-
"type": "module",
6-
"scripts": {
7-
"dev": "vite",
8-
"dev on lan": "vite --host 0.0.0.0",
9-
"build": "run-p type-check \"build-only {@}\" --",
10-
"preview": "vite preview",
11-
"build-only": "vite build",
12-
"type-check": "vue-tsc --build"
13-
},
14-
"dependencies": {
15-
"vue": "^3.5.13",
16-
"vue-router": "^4.5.0"
17-
},
18-
"devDependencies": {
19-
"@tsconfig/node22": "^22.0.0",
20-
"@types/node": "^22.10.2",
21-
"@vitejs/plugin-vue": "^5.2.1",
22-
"@vue/tsconfig": "^0.7.0",
23-
"autoprefixer": "^10.4.20",
24-
"daisyui": "^4.12.23",
25-
"npm-run-all2": "^7.0.2",
26-
"postcss": "^8.4.49",
27-
"sass": "^1.83.0",
28-
"sass-loader": "^16.0.4",
29-
"tailwindcss": "^3.4.17",
30-
"typescript": "~5.6.3",
31-
"vite": "^6.0.5",
32-
"vite-plugin-vue-devtools": "^7.6.8",
33-
"vue-tsc": "^2.1.10"
34-
}
2+
"name": "sonolight",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"dev on lan": "vite --host 0.0.0.0",
9+
"build": "run-p type-check \"build-only {@}\" --",
10+
"preview": "vite preview",
11+
"build-only": "vite build",
12+
"type-check": "vue-tsc --build"
13+
},
14+
"dependencies": {
15+
"vue": "^3.5.13",
16+
"vue-router": "^4.5.0"
17+
},
18+
"devDependencies": {
19+
"@tsconfig/node22": "^22.0.0",
20+
"@types/node": "^22.10.2",
21+
"@vitejs/plugin-vue": "^5.2.1",
22+
"@vue/tsconfig": "^0.7.0",
23+
"autoprefixer": "^10.4.20",
24+
"daisyui": "^4.12.23",
25+
"npm-run-all2": "^7.0.2",
26+
"postcss": "^8.4.49",
27+
"sass": "^1.83.0",
28+
"sass-loader": "^16.0.4",
29+
"tailwindcss": "^3.4.17",
30+
"typescript": "~5.6.3",
31+
"vite": "^6.0.5",
32+
"vite-plugin-vue-devtools": "^7.6.8",
33+
"vue-tsc": "^2.1.10"
34+
}
3535
}

src/app/Home/LaptopHome.vue renamed to src/app/Home/Laptop.vue

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
<script lang="ts" setup>
2+
import { useRouter } from "vue-router";
23
4+
const $router = useRouter();
35
</script>
46

57
<template>
68
<main class="w-screen h-screen">
79
<section id="left">
8-
<div class="skew-x-12 translate-x-1/4">
10+
<div class="ani-div">
911
<section id="texts">
1012
<h1 class="text-[4.4vw] tracking-[0.07em]">声致发光</h1>
11-
<h2 class="text-[2.2vw]">Minecraft <span class="tracking-[0.07em]">赛博遗产的最终归宿</span></h2>
13+
<h2 class="text-[2.2vw]">Minecraft <span class="tracking-[0.07em]">赛博遗产的最终归宿</span>
14+
</h2>
1215
</section>
1316
<section id="buttons" class="mt-12 flex gap-6">
14-
<button class="btn w-[7vw] bg-[wheat] text-black">进入项目</button>
15-
<button class="btn w-[9vw] btn-secondary border-[wheat] border-[0.3vw] box-border text-[wheat]">
17+
<button class="btn w-[7.5vw] bg-[wheat] text-black" @click="$router.push(`/project/select`)">
18+
进入项目
19+
</button>
20+
<button class="btn w-[9vw] btn-secondary border-[wheat] border-[0.3vw] box-border text-[wheat]"
21+
@click="$router.push(`/toolbox/select`)">
1622
进入工具箱
1723
</button>
1824
</section>
@@ -35,12 +41,29 @@
3541
color: wheat;
3642
background: url("@/assets/images/BgItems.webp"), linear-gradient(to right, #991b1b, #991b1b);
3743
background-size: cover;
44+
background-position-x: -75%;
3845
box-shadow: 2px 0 16px 16px #731515;
46+
transform: translateX(-25%) skewX(-12deg);
47+
48+
49+
div.ani-div {
50+
opacity: 0;
51+
transform: translateX(5%) skewX(9deg);
52+
animation: onEnter .2s ease-in-out forwards;
53+
animation-delay: .1s;
54+
}
3955
4056
button.btn {
4157
height: 5vh;
42-
font-size: 1.2vw;
58+
font-size: 1.1vw;
4359
}
4460
}
4561
}
62+
63+
@keyframes onEnter {
64+
to {
65+
opacity: 1;
66+
transform: translateX(25%) skewX(9deg);
67+
}
68+
}
4669
</style>

‎src/app/Project/Select/Laptop.vue‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<script lang="ts" setup>
2+
import { useRouter } from "vue-router";
3+
import CompRegionBtn from "@/components/CompRegionBtn.vue";
4+
5+
const $router = useRouter();
6+
</script>
7+
8+
<template>
9+
<main class="w-screen h-screen">
10+
<section id="left">
11+
<div class="ani-div">
12+
<section>
13+
<h1>主分区</h1>
14+
<CompRegionBtn
15+
description="Minecraft: Java Edition"
16+
name="Java 版">
17+
<template #ico>
18+
<img alt="" src="@/assets/icons/MdiJava.svg" />
19+
</template>
20+
</CompRegionBtn>
21+
<CompRegionBtn
22+
class="w-[97.5%]"
23+
description="Minecraft: Bedrock Edition"
24+
name="基岩版">
25+
<template #ico>
26+
<img alt="" src="@/assets/images/bedrock-128px.webp" />
27+
</template>
28+
</CompRegionBtn>
29+
</section>
30+
<section>
31+
<h1>特殊分区</h1>
32+
<CompRegionBtn
33+
class="w-[90%]"
34+
description="无用但有趣的红石机器"
35+
name="沙雕红石">
36+
<template #ico>
37+
<img alt="" src="@/assets/images/redstone.png" />
38+
</template>
39+
</CompRegionBtn>
40+
</section>
41+
<button class="btn bg-[wheat] w-[6vw] mt-auto -skew-x-[4deg]" @click="$router.push(`/`)">返回主页</button>
42+
</div>
43+
</section>
44+
</main>
45+
</template>
46+
47+
<style lang="scss" scoped>
48+
main {
49+
background: linear-gradient(to right, #000c, #000c), url("@/assets/images/BgMachine.webp") no-repeat;
50+
background-size: 110vw 110vh;
51+
background-position-x: 40vw;
52+
width: 100vw;
53+
height: 100vh;
54+
55+
section#left {
56+
@apply w-11/12 h-full -skew-x-12 -translate-x-1/4;
57+
@apply flex flex-col pt-16;
58+
color: wheat;
59+
background: url("@/assets/images/BgItems.webp"), linear-gradient(to right, #991b1b, #991b1b);
60+
background-size: cover;
61+
background-position-x: -75%;
62+
box-shadow: 2px 0 16px 16px #731515;
63+
transform: translateX(-25%) skewX(-12deg);
64+
65+
66+
div.ani-div {
67+
@apply flex flex-col gap-16;
68+
opacity: 0;
69+
transform: translateX(5%) skewX(9deg);
70+
animation: onEnter .2s ease-in-out forwards;
71+
animation-delay: .1s;
72+
73+
section {
74+
@apply flex flex-col gap-4 w-[67%];
75+
76+
h1 {
77+
@apply text-4xl -skew-x-[9deg];
78+
}
79+
80+
img {
81+
@apply w-16 h-16;
82+
}
83+
}
84+
}
85+
}
86+
}
87+
88+
@keyframes onEnter {
89+
to {
90+
opacity: 1;
91+
transform: translateX(calc(25% + 2rem)) skewX(12deg);
92+
}
93+
}
94+
</style>

‎src/app/Toolbox/Select/Laptop.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script lang="ts" setup>
2+
import CompInConstruct from "@/components/CompInConstruct.vue";
3+
</script>
4+
5+
<template>
6+
<main class="w-screen h-screen">
7+
<section id="left">
8+
<div class="ani-div">
9+
<CompInConstruct />
10+
</div>
11+
</section>
12+
</main>
13+
</template>
14+
15+
<style lang="scss" scoped>
16+
main {
17+
background: linear-gradient(to right, #000e, #000e), url("@/assets/images/BgMachine.webp") no-repeat;
18+
background-size: 110vw 110vh;
19+
background-position-x: 40vw;
20+
width: 100vw;
21+
height: 100vh;
22+
23+
section#left {
24+
@apply w-[120%] h-full -skew-x-12 -translate-x-1/4;
25+
@apply flex flex-col justify-center items-center;
26+
color: wheat;
27+
background-size: 1200px;
28+
background: url("@/assets/images/BgItems.webp"), linear-gradient(to right, #991b1b, #991b1b);
29+
background-position-x: -75vw;
30+
box-shadow: 2px 0 16px 16px #731515;
31+
transform: translateX(-25%) skewX(-12deg);
32+
33+
div.ani-div {
34+
opacity: 0;
35+
transform: translateX(-1vw) skewX(9deg);
36+
animation: onEnter .2s ease-in-out forwards;
37+
animation-delay: .15s;
38+
}
39+
40+
button.btn {
41+
height: 5vh;
42+
font-size: 1.2vw;
43+
}
44+
}
45+
}
46+
47+
@keyframes onEnter {
48+
to {
49+
opacity: 1;
50+
transform: skewX(9deg);
51+
}
52+
}
53+
</style>

‎src/assets/icons/MdiJava.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎src/assets/images/BgItems.webp‎

-1.88 KB
Loading

‎src/assets/images/bedrock-128px.webp‎

4.7 KB
Loading

‎src/assets/images/redstone.png‎

10.1 KB
Loading

‎src/components/CompInConstruct.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { useRouter } from "vue-router";
3+
4+
const $router = useRouter();
5+
</script>
6+
7+
<template>
8+
<section class="flex flex-col">
9+
<h1 class="text-6xl">此页面施工中</h1>
10+
<br>
11+
<h2 class="text-3xl">请稍后再试</h2>
12+
<br>
13+
<br>
14+
<button class="btn bg-[wheat] w-[7vw]" @click="$router.push(`/`)">返回主页</button>
15+
</section>
16+
</template>
17+
18+
<style lang="scss" scoped>
19+
button.btn {
20+
height: 5vh;
21+
font-size: 1.1vw;
22+
}
23+
</style>

‎src/components/CompRegionBtn.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts" setup>
2+
const props = defineProps<{
3+
readonly name: string;
4+
readonly description?: string
5+
}>();
6+
</script>
7+
8+
<template>
9+
<button class="CompRegionBtn">
10+
<slot name="ico"></slot>
11+
<object>
12+
<h1>{{ name }}</h1>
13+
<span>{{ description }}</span>
14+
</object>
15+
</button>
16+
</template>
17+
18+
<style lang="scss" scoped>
19+
button.CompRegionBtn {
20+
@apply btn bg-[wheat] py-4 -skew-x-[4deg];
21+
height: fit-content;
22+
23+
object {
24+
@apply ml-12 mr-auto flex items-baseline gap-4;
25+
26+
h1 {
27+
@apply text-4xl;
28+
}
29+
}
30+
}
31+
</style>

0 commit comments

Comments
 (0)