feat: frame

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/Hero.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="w-full flex flex-col justify-center overflow-hidden h-svh sm:px-8">
+  <div class="relative h-full w-full flex flex-col justify-center overflow-hidden sm:px-8">
     <TresCanvas class="opacity-50 absolute! w-full!">
       <TresPerspectiveCamera
         :position="[0, 0, 3]"
         :fov="75"
       />
-
       <Suspense>
         <Text3D
           :position="[-2, 1, 0]"
@@ -85,12 +84,12 @@
     </TresCanvas>
 
     <div class="z-10 w-full flex flex-col items-center justify-center gap-y-10 py-20 sm:py-28">
-      <div class="flex items-center justify-center gap-2 rounded-full bg-blue-100 px-8 py-1 text-lg text-blue-600 font-500 font-misans">
+      <!-- <div class="flex items-center justify-center gap-2 rounded-full bg-blue-100 px-8 py-1 text-lg text-blue-600 font-500 font-misans">
         <span>
           🎉 我们正在招新
         </span>
         <span class="i-ph-arrow-right-light" />
-      </div>
+      </div> -->
       <div class="relative w-full">
         <h1 class="hero-gradient relative z-10 bg-clip-text text-center text-6xl text-transparent font-shuhei sm:text-8xl">
           智造
@@ -109,12 +108,6 @@
           </svg>
         </div>
       </div>
-      <button
-        type="button"
-        class="button-shadow border border-zinc-600 rounded-lg px-4 py-2 text-xl text-zinc-900 font-500 font-misans"
-      >
-        了解更多
-      </button>
     </div>
   </div>
 </template>
@@ -136,25 +129,4 @@ const matcapTexture = await useTexture(['/22.png']);
   stroke-linejoin: round;
   stroke-linecap: round;
 }
-
-.button-shadow {
-  transition: all 0.3s ease-in-out;
-  box-shadow:
-    0px 1.9px 2.3px rgba(0, 0, 0, 0.009),
-    0px 4.5px 5.6px rgba(0, 0, 0, 0.014),
-    0px 8.5px 10.5px rgba(0, 0, 0, 0.019),
-    0px 15.2px 18.8px rgba(0, 0, 0, 0.025),
-    0px 28.4px 35.1px rgba(0, 0, 0, 0.032),
-    0px 68px 84px rgba(0, 0, 0, 0.05);
-}
-
-.button-shadow:hover {
-  box-shadow:
-    0px 3.5px 3.2px rgba(0, 0, 0, 0.025),
-    0px 8.4px 7.8px rgba(0, 0, 0, 0.034),
-    0px 15.8px 14.7px rgba(0, 0, 0, 0.041),
-    0px 28.1px 26.1px rgba(0, 0, 0, 0.047),
-    0px 52.6px 48.9px rgba(0, 0, 0, 0.054),
-    0px 126px 117px rgba(0, 0, 0, 0.07);
-}
 </style>

components/LoadingAnimation.vue

@@ -11,7 +11,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-
-</script>

layouts/default.vue

@@ -1,22 +1,73 @@
 <template>
   <!-- <LoadingAnimation class="z-100" /> -->
-  <NavBar />
-  <slot />
-  <div
-    class="fixed right-0 top-0 h-1/3 w-1/5 bg-blue blur-200"
-    :style="`opacity: 0.${count};`"
-  />
-  <div
-    class="fixed bottom-0 left-0 h-1/3 w-1/5 bg-blue blur-200"
-    :style="`opacity: 0.${count};`"
-  />
+  <div class="p-2 h-dvh">
+    <div
+      class="grid-container overflow-clip border rounded-md transition-all duration-700"
+      :class="[screen === 'full' ? 'w-full h-full' : 'w-90% h-90%']"
+    >
+      <div class="grid-menu w-12 border-r bg-white/20 backdrop-blur-lg">
+        <div class="h-12 border-b p-2.5 -mr-1">
+          <NuxtImg src="/cosmo-logo.svg" />
+        </div>
+      </div>
+
+      <div class="grid-header grid grid-cols-3 h-12 items-center border-b bg-white/20 p-2 backdrop-blur-lg">
+        <div class="col-start-2 justify-self-center">
+          <span class="mr-1 text-blue font-700">
+            COSMO
+          </span>
+          <span class="text-zinc-6 font-600">
+            智慧校园平台运研中心
+          </span>
+        </div>
+
+        <!-- Window buttons -->
+        <div class="col-start-3 mr-2 flex justify-self-end gap-3 text-zinc-5">
+          <div v-if="screen === 'full'" class="i-ph:minus cursor-pointer" @click="screen = 'minimized'" />
+          <div v-else class="i-ph:plus cursor-pointer" @click="screen = 'full'" />
+          <div class="i-ph:square cursor-pointer" @click="toggle" />
+          <div class="i-ph:x cursor-pointer" />
+        </div>
+      </div>
+
+      <div class="grid-main overflow-y-scroll">
+        <slot />
+      </div>
+
+      <div class="grid-dot flex items-center justify-center border-r border-t bg-white/20 backdrop-blur-lg">
+        <!-- <div class="h-2 w-2 rounded-full bg-blue" /> -->
+      </div>
+
+      <div class="grid-footer grid grid-cols-3 h-12 items-center border-t bg-white/20 p-2 text-zinc-6 backdrop-blur-lg">
+        <div class="col-start-3 mr-4 flex items-center justify-self-end gap-6">
+          <NuxtLink to="https://the1068.pictures/" target="_blank">
+            <div class="text-xs font-semibold leading-[0.6rem] font-serif">
+              10<br>68
+            </div>
+          </NuxtLink>
+          <NuxtLink to="https://github.com/SMS-COSMO" target="_blank">
+            <div class="i-ph:github-logo" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="fixed right-10 top-20 h-1/3 w-1/5 bg-blue blur-200 -z-10"
+      :style="`opacity: 0.${count};`"
+    />
+    <div
+      class="fixed bottom-20 left-20 h-1/3 w-1/5 bg-blue blur-200 -z-10"
+      :style="`opacity: 0.${count};`"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 const { count, inc, dec } = useCounter(50);
 const increasing = ref(true);
 
-useTimeoutPoll(
+useIntervalFn(
   () => {
     if (count.value >= 95)
       increasing.value = false;
@@ -27,7 +78,42 @@ useTimeoutPoll(
     else
       dec(5);
   },
-  350,
-  { immediate: true },
+  300,
 );
+
+const screen = ref<'full' | 'minimized'>('full');
+
+const { toggle } = useFullscreen();
 </script>
+
+<style>
+.grid-container {
+  display: grid;
+  grid-template-areas:
+    'menu header'
+    'menu main'
+    'dot footer';
+  grid-template-columns: 3rem 1fr;
+  grid-template-rows: 3rem 1fr 3rem;
+}
+
+.grid-menu {
+  grid-area: menu;
+}
+
+.grid-header {
+  grid-area: header;
+}
+
+.grid-footer {
+  grid-area: footer;
+}
+
+.grid-main {
+  grid-area: main;
+}
+
+.grid-dot {
+  grid-area: dot;
+}
+</style>