upd: add download link button in homepage

Author: ATRIOR-LCL

src/client/components/download-button.vue

@@ -16,11 +16,7 @@ export default class DownloadButton extends Vue {
   @Prop({ type: Boolean, default: false }) isHome: Boolean;
   @Prop({ type: String, required: true }) version!: string;
 
-  // 检测是否为移动设备 - 使用传入的平台信息而不是直接检测 userAgent
-  // 避免 SSR 水合不匹配问题
   get isMobileDevice(): boolean {
-    // 基于传入的平台信息判断，而不是 navigator.userAgent
-    // 只有 windows 和 mac 被认为是桌面平台
     return this.platform !== 'windows' && this.platform !== 'mac';
   }
 

src/client/components/home-footer.vue

@@ -53,7 +53,7 @@ footer {
   height: auto;
   margin-bottom: 50px;
   user-select: none;
-  margin-top: 60px;
+  margin-top: 200px;
 
   @media screen and (max-width: 768px) {
     height: auto;
@@ -75,7 +75,6 @@ footer {
 
     &-item {
       font-size: var(--font-small-size);
-      // width: 150px;
       height: fit-content;
       padding: 5px 10px;
       color: var(--font-secondary-color);

src/client/components/nav-bar.vue

@@ -29,7 +29,7 @@ export default class NavBar extends Vue {
   }
 
   checkMobile() {
-    this.isMobile = window.innerWidth < 900;
+    this.isMobile = window.innerWidth <= 768;
     if (!this.isMobile) {
       this.mobileMenuOpen = false;
     }
@@ -339,7 +339,7 @@ export default class NavBar extends Vue {
 
 .content-header {
   height: 70px;
-  @media screen and (max-width: 1000px) {
+  @media screen and (max-width: 768px) {
     position: fixed;
     top: 0;
   }
@@ -356,7 +356,7 @@ export default class NavBar extends Vue {
     height: 100%;
     border-radius: 100px;
 
-    @media screen and (max-width: 1000px) {
+    @media screen and (max-width: 768px) {
       width: 100vw;
       border-radius: 0;
       outline: none;
@@ -379,14 +379,13 @@ export default class NavBar extends Vue {
     }
 
     & .logo {
-      // flex-basis: 40%;
       width: fit-content;
       height: 100%;
       display: flex;
       justify-content: left;
       padding-left: 40px;
       cursor: pointer;
-      @media screen and (max-width: 900px) {
+      @media screen and (max-width: 768px) {
         flex-basis: 100%;
         justify-content: center;
         padding-left: 0;

src/client/modules/home/home.view.vue

@@ -52,7 +52,8 @@ export default class Home extends Vue {
       // 服务端默认为非移动设备
       this.isMobile = false;
     }
-  };  private handleResize = () => {
+  };
+  private handleResize = () => {
     this.checkIfMobile();
   };
 
@@ -80,7 +81,7 @@ export default class Home extends Vue {
 
     // 等待版本数据加载完成
     while (!this.homeState.version) {
-      await new Promise(resolve => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
 
     // 等待图片和其他资源加载完成
@@ -171,6 +172,21 @@ export default class Home extends Vue {
           })
         "
       >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <path d="M12 8v8" />
+          <path d="m8 12 4 4 4-4" />
+        </svg>
         前往下载
       </div>
     </client-only>
@@ -183,18 +199,30 @@ export default class Home extends Vue {
 
 <style scoped lang="less">
 .to-download-button {
-  width: fit-content;
-  height: fit-content;
-  padding: 5px 20px;
-  font-size: var(--font-small-size);
-  background-color: var(--glass-bg-color);
-  border: 2px solid var(--glass-border-color);
+  padding: 10px 15px;
+  @media screen and (min-width: 768px) {
+    padding: 15px 20px;
+  }
+  @media screen and (min-width: 1700px) {
+    padding: 20px 25px;
+  }
+  border: none;
+  outline: none;
   border-radius: 100px;
-  cursor: pointer;
+  font-size: var(--font-small-size);
+  font-weight: 600;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  margin-top: 100px;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(15px);
+  outline: 1px solid rgba(255, 255, 255, 0.4);
   color: var(--font-secondary-color);
-  z-index: 10;
-  transition: color 0.3s ease;
-  margin: 50px;
+  transition: color 0.5s ease;
+  cursor: pointer;
   &:hover {
     color: var(--font-primary-color);
   }
@@ -229,11 +257,13 @@ export default class Home extends Vue {
 }
 
 /* 动态组件过渡效果 */
-.beams-enter-active, .beams-leave-active {
+.beams-enter-active,
+.beams-leave-active {
   transition: opacity 0.8s ease-in-out;
 }
 
-.beams-enter-from, .beams-leave-to {
+.beams-enter-from,
+.beams-leave-to {
   opacity: 0;
 }
 </style>

src/client/modules/releases/releases.view.vue

@@ -32,12 +32,12 @@ export default class Releases extends Vue {
       const response = await axios.get('https://cdn.algoux.cn/algo-bootstrap/version.json?t=' + Date.now());
       return {
         releasesState: response.data,
-      }
+      };
     } catch (error) {
       console.error('Failed to load release data in asyncData:', error);
       return {
         releasesState: this.releasesState, // 使用默认值
-      }
+      };
     }
   }
 
@@ -68,14 +68,13 @@ export default class Releases extends Vue {
 @import url('../../index.less');
 .release {
   width: 100%;
-  height: 100vh;
+  height: auto;
   gap: 70px;
   position: relative;
   @media screen and (max-width: 1200px) {
-    height: auto;
     gap: 40px;
   }
-  padding-top: 120px;
+  padding-top: 150px;
   background-color: var(--bg-color);
   display: flex;
   flex-direction: column;
@@ -92,13 +91,9 @@ export default class Releases extends Vue {
     width: 100%;
     height: auto;
     display: flex;
-    @media screen and (max-width: 1200px) {
-      flex-direction: column;
-      gap: 50px;
-      margin-bottom: 100px;
-    }
 
     @media screen and (max-width: 768px) {
+      flex-direction: column;
       gap: 50px;
       margin-bottom: 50px;
     }