顶部菜单栏响应式

src/app/top-bar/top-bar.component.scss

@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* header.component.css */
+.flex {
+  /* 标题栏的通用样式 */
+  /* ... */
+
+  /* 响应式布局样式 */
+}
+
+/* 媒体查询样式 */
+@media (max-width: 768px) {
+  .flex {
+    /* 在移动设备上的样式 */
+    /* ... */
+  }
+}

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;
+    }
+
+
 }