From bac7d196825f96a04415ab932a4eeaeff9fd1941 Mon Sep 17 00:00:00 2001
From: myh <yunhao.meng@outlook.com>
Date: Thu, 4 Jan 2024 01:18:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E8=8F=9C=E5=8D=95=E6=A0=8F?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/top-bar/top-bar.component.scss | 18 +++++++++++++++-
 src/app/top-bar/top-bar.component.ts   | 29 ++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/app/top-bar/top-bar.component.scss b/src/app/top-bar/top-bar.component.scss
index bd6213e..e43fb6c 100644
--- a/src/app/top-bar/top-bar.component.scss
+++ b/src/app/top-bar/top-bar.component.scss
@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* header.component.css */
+.flex {
+  /* 标题栏的通用样式 */
+  /* ... */
+
+  /* 响应式布局样式 */
+}
+
+/* 媒体查询样式 */
+@media (max-width: 768px) {
+  .flex {
+    /* 在移动设备上的样式 */
+    /* ... */
+  }
+}
\ No newline at end of file
diff --git a/src/app/top-bar/top-bar.component.ts b/src/app/top-bar/top-bar.component.ts
index 59a483e..aedc00b 100644
--- a/src/app/top-bar/top-bar.component.ts
+++ b/src/app/top-bar/top-bar.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
-import {NgOptimizedImage} from '@angular/common';
-import {RouterLink} from "@angular/router";
+import { Component, HostListener, OnInit } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { RouterLink } from "@angular/router";
 
 @Component({
     standalone: true,
@@ -9,5 +9,26 @@ import {RouterLink} from "@angular/router";
     styleUrls: ['./top-bar.component.scss'],
     imports: [NgOptimizedImage, RouterLink],
 })
-export class TopBarComponent {
+export class TopBarComponent implements OnInit {
+    isMobile: boolean = false;
+
+    constructor() {
+
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize(event: Event) {
+        this.updateLayout();
+    }
+
+    ngOnInit(): void {
+        this.updateLayout();
+    }
+
+    updateLayout() {
+        const screenWidth = window.innerWidth;
+        this.isMobile = screenWidth < 768;
+    }
+
+
 }
\ No newline at end of file