feat(web): optimize service quick bar layout for kiosk display

- Reduce service quick bar height from 120px to 100px for better space utilization
- Change service items from horizontal scroll to uniform distribution using flexbox
- Update service item dimensions from 140×90px to flex: 1 with min-width 140px and height 70px
- Adjust top padding from 220px to 200px to accommodate reduced service bar height
- Remove horizontal scrollbar styling and implement space-between alignment
- Reduce padding in service bar container from 1rem to 0.75rem
- Update layout documentation to reflect new coordinate ranges and dimensions
- Improves touch target accessibility and dialog area space on 1080x1920 displays

web/KIOSK_LAYOUT_OPTIMIZATION.md

@@ -17,8 +17,8 @@
 ┌──────────────────────────────┐ Y=0
 │ 顶部导航栏（100px）           │ ← 返回首页 + 标题
 ├──────────────────────────────┤ Y=100
-│ 服务快捷栏（120px）           │ ← 四川特色、政策解读等
-├──────────────────────────────┤ Y=220
+│ 服务快捷栏（100px）           │ ← 四川特色、政策解读等
+├──────────────────────────────┤ Y=200
 │                              │
 │ 中部对话区（flex: 1）         │ ← 消息列表 + 输入框
 │                              │
@@ -60,20 +60,20 @@
 - 包含：返回首页按钮（左）+ 应用标题（中）
 - 按钮尺寸：120×60px，满足最小触控目标
 
-#### 服务快捷栏（120px）
+#### 服务快捷栏（100px）
 - **复用原有设计**：保留 `SsService` 组件的渐变背景、阴影效果
-- **横向排列**：5个服务项横向滚动显示
+- **均匀分布**：5个服务项使用 `flex: 1` 和 `justify-content: space-between` 均匀分布
 - **样式类复用**：使用与原组件相同的 `itemClass` 逻辑
 - **背景色**：
   - 默认：`linear-gradient(180deg, rgba(250, 255, 253, 0.8), rgba(225, 245, 248, 0.8))`
   - 黄色：`linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 239, 0.7))`
   - 中心：`linear-gradient(90deg, #c2dff9, #c6e2fa)`
-- **尺寸**：每项 140×90px，图标半透明显示
+- **尺寸**：每项 `flex: 1`，最小宽度 140px，高度 70px，图标半透明显示
 
 #### 中部对话区
 - 使用 flexbox 自适应高度
 - 包含消息滚动区域和输入框
-- 输入框位置确保在 Y≤1440px 范围内（220px + 1220px）
+- 输入框位置确保在 Y≤1400px 范围内（200px + 1200px）
 
 #### 底部常见问题区（420px）
 - 固定高度，仅用于信息展示
@@ -128,8 +128,8 @@
 | 区域 | Y 坐标范围 | 高度 | 可操作性 |
 |------|-----------|------|---------|
 | 顶部导航 | 0-100px | 100px | ✅ 强烈推荐 |
-| 服务快捷栏 | 100-220px | 120px | ✅ 强烈推荐 |
-| 对话区域 | 220-1500px | ~1280px | ✅ 核心操作区 |
+| 服务快捷栏 | 100-200px | 100px | ✅ 强烈推荐 |
+| 对话区域 | 200-1500px | ~1300px | ✅ 核心操作区 |
 | 常见问题 | 1500-1920px | 420px | ⚠️ 仅展示 |
 
 ## 宽度对齐说明

web/src/views/HomeView.vue

@@ -454,7 +454,7 @@ watch(() => global.inputLine, () => {
             display: flex;
             flex-direction: column;
             height: 100vh;
-            padding: 220px 0 0 0; /* 顶部留出导航栏(100px) + 服务栏(120px)空间 */
+            padding: 200px 0 0 0; /* 顶部留出导航栏(100px) + 服务栏(100px)空间 */
 
             /* 对话区域：占据主要空间 */
             .chat-container {
@@ -572,13 +572,13 @@ watch(() => global.inputLine, () => {
       top: 100px;
       left: 0;
       right: 0;
-      height: 120px;
+      height: 100px; /* 从 120px 减小到 100px */
       background: #ffffff;
       border-bottom: 1px solid #E5E7EB;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1rem 0;
+      padding: 0.75rem 0; /* 从 1rem 减小到 0.75rem */
       z-index: 999;
       overflow: hidden;
 
@@ -587,22 +587,16 @@ watch(() => global.inputLine, () => {
         max-width: 100%;
         margin: 0 auto; /* 居中对齐 */
         display: flex;
+        justify-content: space-between; /* 均匀分布 */
         gap: 1rem;
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: hidden;
         padding: 0;
 
-        /* 隐藏滚动条但保持可滚动 */
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-
         .service-quick-item {
           position: relative;
-          flex-shrink: 0;
-          width: 140px;
-          height: 90px;
+          flex: 1; /* 弹性宽度，均匀分布 */
+          min-width: 140px; /* 最小宽度保证可读性 */
+          height: 70px; /* 从 90px 减小到 70px */
           border-radius: 0.75rem;
           overflow: hidden;
           cursor: pointer;