重构 HomeView tailwind

tonecn/src/views/HomeView.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-let containerHeight = ref('800px');
 onMounted(() => {
-  // 主盒子高度根据初始视窗高度自适应
-  containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
-
   // 界面特效字体
   let nameElement = document.getElementById("my-name");
   if (nameElement == null) {
@@ -27,50 +23,30 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div class="bcc"></div>
-  <div class="main-container" id="home-main">
-    <img src="../assets/logo.jpg" alt="" class="logo">
-    <div class="name" id="my-name">特恩(TONE)</div>
-    <div class="self-introduction">一名计算机类专业在校本科大三学生</div>
-    <div class="button-container">
+  <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+  <div
+    class="flex max-w-[800px] flex-col items-center justify-center mx-auto min-h-[420px] sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)]"
+    id="home-main">
+    <img src="../assets/logo.jpg" alt="" class="w-[150px] rounded-full">
+    <div class="name text-[34px] sm:text-[42px]" id="my-name">特恩(TONE)</div>
+    <div class="mt-[10px] sm:text-[23px] text-[16px] cursor-default text-[#888] transition-all duration-200">
+      一名计算机类专业在校本科大三学生</div>
+    <div class="mt-[28px] mb-[30px] flex items-center justify-center flex-wrap sm:flex-row flex-col gap-[10px]">
       <a href="https://space.bilibili.com/474156211" target="_blank">
-        <button class="button" id="button-resource">哔哩哔哩</button>
+        <button
+          class="cursor-pointer sm:w-[130px] w-[180px] sm:h-[46px] h-[40px] bg-[#2591f0] hover:bg-[#1d74c0] text-white border-none text-[16px] rounded-[23px] mx-[10px] transition-all duration-200 shadow-lg"
+          id="button-resource">哔哩哔哩</button>
       </a>
       <a href="https://github.com/tonecn" target="_blank">
-        <button class="button button-style2" id="button-code">GitHub</button>
+        <button
+          class="cursor-pointer sm:w-[130px] w-[180px] sm:h-[46px] h-[40px] bg-[#e87f29] hover:bg-[#d5782c] text-white border-none text-[16px] rounded-[23px] mx-[10px] transition-all duration-200 shadow-lg"
+          id="button-code">GitHub</button>
       </a>
     </div>
   </div>
 </template>
 <style scoped>
-.bcc {
-  background-color: #fafafa;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-
-.main-container {
-  margin: 0 auto;
-  max-width: 800px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transition: height 0.2s;
-  height: v-bind(containerHeight);
-}
-
-.logo {
-  border-radius: 50%;
-  width: 150px;
-}
-
 .name {
-  font-size: 42px;
   font-weight: 800;
   margin-top: 25px;
   cursor: default;
@@ -80,74 +56,4 @@ onMounted(() => {
   color: transparent;
   transition: font-size 0.2s;
 }
-
-.self-introduction {
-  margin-top: 10px;
-  font-size: 23px;
-  cursor: default;
-  color: #888;
-  transition: font-size 0.2s;
-}
-
-.button-container {
-  margin-top: 28px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.button {
-  cursor: pointer;
-  width: 130px;
-  height: 46px;
-  background-color: #2591f0;
-  color: #fff;
-  border: none;
-  font-size: 16px;
-  border-radius: 23px;
-  margin: 0 10px;
-  transition: background-color 0.2s;
-  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
-}
-
-.button-style2 {
-  background-color: #e87f29;
-}
-
-#button-resource:hover {
-  background-color: #1d74c0;
-}
-
-#button-code:hover {
-  background-color: #d5782c;
-}
-
-@media screen and (max-width: 470px) {
-  .name {
-    font-size: 34px;
-  }
-
-  .self-introduction {
-    font-size: 16px;
-  }
-
-  .button-container {
-    flex-direction: column;
-    gap: 10px;
-    margin-bottom: 60px;
-  }
-
-  .button {
-    width: 180px;
-    height: 40px;
-  }
-}
-
-@media screen and (max-width: 800px) {
-  .main-container {
-    height: calc(v-bind(containerHeight) + 15px);
-  }
-}
 </style>