fix: 优化移动端适配布局

2025-05-04 10:19:48 +08:00
parent 54631416ff
commit 6378cd7106
5 changed files with 64 additions and 24 deletions
@@ -264,11 +264,12 @@ const toggleButtonTitle = computed(() => {
 </script>

 <template>
-  <!-- +++ 使用 :class 绑定来条件化样式 +++ -->
-  <div :class="['flex bg-header border border-border overflow-hidden h-10',
-               { 'rounded-t-md mx-2 mt-2': !isMobile } // 只在非移动端应用这些类
+  <!-- +++ 使用 :class 绑定来条件化样式，包括高度 (修正 props 引用) +++ -->
+  <div :class="['flex bg-header border border-border overflow-hidden',
+               { 'rounded-t-md mx-2 mt-2': !props.isMobile }, // Desktop margins/rounding - Use props.isMobile
+               props.isMobile ? 'h-8' : 'h-10' // Mobile height h-8, Desktop h-10 - Use props.isMobile
              ]">
-    <div class="flex items-center overflow-x-auto flex-shrink min-w-0">
+    <div class="flex items-center overflow-x-auto flex-shrink min-w-0 h-full"> <!-- Ensure inner div has h-full -->
      <ul class="flex list-none p-0 m-0 h-full flex-shrink-0">
        <li
          v-for="session in sessions"