Skip to content

Commit 3919da7

Browse files
BLazyGuBLazyGu
committed
做了点移动端适配（
1 parent 038cbae commit 3919da7

2 files changed

Lines changed: 60 additions & 24 deletions

File tree

‎app/components/Hero.vue‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
:bevel-thickness="0.01"
1414
:bevel-size="0.02"
1515
:bevel-segments="40"
16-
:size="0.6"
16+
:size="particleSize"
1717
:curve-segments="10"
1818
>
1919
<TresMeshMatcapMaterial :matcap="matcapTexture" />
@@ -27,7 +27,7 @@
2727
:bevel-thickness="0.01"
2828
:bevel-size="0.02"
2929
:bevel-segments="40"
30-
:size="0.6"
30+
:size="particleSize"
3131
:curve-segments="10"
3232
>
3333
<TresMeshMatcapMaterial :matcap="matcapTexture" />
@@ -41,7 +41,7 @@
4141
:bevel-thickness="0.01"
4242
:bevel-size="0.02"
4343
:bevel-segments="40"
44-
:size="0.5"
44+
:size="smallParticleSize"
4545
:curve-segments="10"
4646
>
4747
<TresMeshMatcapMaterial :matcap="matcapTexture" />
@@ -55,7 +55,7 @@
5555
:bevel-thickness="0.01"
5656
:bevel-size="0.02"
5757
:bevel-segments="40"
58-
:size="0.6"
58+
:size="particleSize"
5959
:curve-segments="10"
6060
>
6161
<TresMeshMatcapMaterial :matcap="matcapTexture" />
@@ -69,7 +69,7 @@
6969
:bevel-thickness="0.01"
7070
:bevel-size="0.02"
7171
:bevel-segments="40"
72-
:size="0.5"
72+
:size="smallParticleSize"
7373
:curve-segments="10"
7474
>
7575
<TresMeshMatcapMaterial :matcap="matcapTexture" />
@@ -83,24 +83,24 @@
8383
/>
8484
</TresCanvas>
8585

86-
<div class="z-10 w-full flex flex-col items-center justify-center gap-y-10 py-20 sm:py-28">
86+
<div class="z-10 w-full flex flex-col items-center justify-center gap-y-6 sm:gap-y-10 py-12 sm:py-20 md:py-28 px-4">
8787
<!-- <div class="flex items-center justify-center gap-2 rounded-full bg-blue-100 px-8 py-1 text-lg text-blue-400 font-500 font-misans">
8888
<span>
8989
🎉 我们正在招新
9090
</span>
9191
<span class="i-ph-arrow-right-light" />
9292
</div> -->
93-
<div class="relative w-full">
94-
<h1 class="hero-gradient relative z-10 bg-clip-text text-center text-7xl text-transparent font-shuhei sm:text-9xl">
93+
<div class="relative w-full max-w-full overflow-hidden">
94+
<h1 class="hero-gradient relative z-10 bg-clip-text text-center text-5xl sm:text-7xl md:text-9xl text-transparent font-shuhei px-2">
9595
智造
9696
<br>
9797
无限可能
9898
</h1>
99-
<div class="absolute left-1/2 top-[58%] sm:top-1/2 w-full -translate-x-1/2 -translate-y-1/2">
100-
<svg width="100%" height="100%">
99+
<div class="absolute left-1/2 top-[58%] sm:top-1/2 w-full -translate-x-1/2 -translate-y-1/2 px-2">
100+
<svg width="100%" height="100%" class="max-w-full">
101101
<text
102-
class="dashed text-8xl font-[900] sm:text-[10rem] stroke-zinc-600" x="50%" y="56%"
103-
style="font-family: 'misans', sans-seri f;"
102+
class="dashed text-6xl sm:text-8xl md:text-[10rem] font-[900] stroke-zinc-600" x="50%" y="56%"
103+
style="font-family: 'misans', sans-serif;"
104104
dominant-baseline="middle"
105105
text-anchor="middle"
106106
>
@@ -109,13 +109,13 @@
109109
</svg>
110110
</div>
111111
</div>
112-
<div class="text-center text-gray-500 dark:text-gray-400 text-2xl font-medium">
112+
<div class="text-center text-gray-500 dark:text-gray-400 text-base sm:text-xl md:text-2xl font-medium px-4">
113113
<p>From COSMO，to the cosmos.</p>
114114
</div>
115115
</div>
116116

117117
<!-- 向下箭头指示器 -->
118-
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
118+
<div class="absolute bottom-4 sm:bottom-8 left-1/2 transform -translate-x-1/2 z-20">
119119
<div class="arrow-indicator">
120120
<svg class="w-7 h-7 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="currentColor">
121121
<path d="M12 18L6 12h12z" />
@@ -127,6 +127,24 @@
127127

128128
<script setup lang="ts">
129129
const matcapTexture = await useTexture(['/22.png']);
130+
131+
// 响应式粒子大小：移动端小，PC端大
132+
const isMobile = ref(false);
133+
134+
onMounted(() => {
135+
const checkMobile = () => {
136+
isMobile.value = window.innerWidth < 640;
137+
};
138+
checkMobile();
139+
window.addEventListener('resize', checkMobile);
140+
onUnmounted(() => {
141+
window.removeEventListener('resize', checkMobile);
142+
});
143+
});
144+
145+
// 粒子大小计算
146+
const particleSize = computed(() => isMobile.value ? 0.25 : 0.6);
147+
const smallParticleSize = computed(() => isMobile.value ? 0.22 : 0.5);
130148
</script>
131149

132150
<style scoped>

‎app/layouts/default.vue‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,19 @@
1212
</div>
1313

1414
<div class="grid-header grid grid-cols-3 h-12 items-center border-b border-neutral-300 bg-white/20 p-2 backdrop-blur-lg">
15-
<div class="col-start-2 justify-self-center">
16-
<span class="mr-1 text-blue-400 font-[700]">
17-
COSMO
18-
</span>
19-
<span class="text-zinc-6 font-[600]">
20-
智慧校园平台运研中心
21-
</span>
15+
<div class="col-start-2 justify-self-center sm:justify-self-center px-2 -mt-0.5 sm:mt-0">
16+
<div class="flex flex-col sm:flex-row items-center sm:items-center gap-0 sm:gap-1">
17+
<span class="text-blue-400 font-[700] text-xs sm:text-sm">
18+
COSMO
19+
</span>
20+
<span class="text-zinc-6 font-[600] text-xs sm:text-sm whitespace-nowrap">
21+
智慧校园平台运研中心
22+
</span>
23+
</div>
2224
</div>
2325

2426
<!-- Window buttons -->
25-
<div class="col-start-3 mr-2 flex justify-self-end gap-3 text-zinc-5">
27+
<div class="col-start-3 mr-1 sm:mr-2 flex justify-self-end gap-2 sm:gap-3 text-zinc-5">
2628
<UIcon v-if="screen === 'full'" name="i-ph:minus" class="cursor-pointer" @click="screen = 'minimized'" />
2729
<UIcon v-else name="i-ph:plus" class="cursor-pointer" @click="screen = 'full'" />
2830
<UIcon name="i-ph:square" class="cursor-pointer" @click="toggle" />
@@ -59,11 +61,11 @@
5961
</div>
6062

6163
<div
62-
class="fixed right-10 top-20 h-1/3 w-1/5 bg-blue-400 blur-[200px] -z-10 transition-all"
64+
class="fixed right-10 top-20 h-1/3 w-1/5 bg-blue-400 blur-[100px] sm:blur-[200px] -z-10 transition-all"
6365
:style="`opacity: 0.${count};`"
6466
/>
6567
<div
66-
class="fixed bottom-20 left-20 h-1/3 w-1/5 bg-blue-400 blur-[200px] -z-10 transition-all"
68+
class="fixed bottom-20 left-20 h-1/3 w-1/5 bg-blue-400 blur-[100px] sm:blur-[200px] -z-10 transition-all"
6769
:style="`opacity: 0.${count};`"
6870
/>
6971
</div>
@@ -149,4 +151,20 @@ const items = ref([
149151
min-height: 3rem;
150152
padding: 0 1rem;
151153
}
154+
155+
@media (max-width: 640px) {
156+
.grid-header {
157+
min-height: 3rem;
158+
padding: 0.25rem 0.5rem;
159+
}
160+
161+
.grid-header .col-start-2 {
162+
max-width: calc(100% - 4rem);
163+
overflow: visible;
164+
}
165+
166+
.grid-header .col-start-3 {
167+
min-width: 3rem;
168+
}
169+
}
152170
</style>

0 commit comments

Comments
 (0)