feat: 页面调整

src/renderer/views/home/ChatGuide.vue

@@ -1,121 +1,80 @@
 <template>
-  <div class="chat-guide">
-    <div class="hero-area">
-      <h1 class="greet">你好，<br/>我今天能帮你什么？</h1>
+  <!-- 页面根节点：不滚动 -->
+  <div class="h-full bg-white overflow-hidden">
 
-      <div class="input-wrap">
-        <div class="tag">智能问数</div>
-        <div class="fake-input">
-          <div class="placeholder">给我发布或者布置任务</div>
-          <div class="actions">
-            <button class="link">🔗</button>
-            <button class="send">✈</button>
+    <!-- 唯一滚动容器 -->
+    <div class="h-full overflow-y-auto">
+
+      <!-- Hero：吸顶 -->
+      <div class="sticky top-0 z-20 bg-white px-12 pt-10 pb-6
+               max-[800px]:px-5">
+        <h1 class="text-[28px] font-bold mb-7 leading-tight">
+          你好，<br />
+          我今天能帮你什么？
+        </h1>
+
+        <!-- input -->
+        <div class="flex flex-col gap-3">
+          <div class="inline-flex items-center justify-center w-[108px]
+                   px-3 py-1.5 rounded-2xl border border-[#E5E8EE]
+                   text-[13px] text-[#333]">
+            智能问数
+          </div>
+
+          <div class="h-[174px] bg-white rounded-lg border border-[#eef2f6]
+                   shadow-[0_1px_0_rgba(0,0,0,0.03)]
+                   p-[18px] flex flex-col justify-between">
+            <div class="text-[#bfc9d4]">
+              给我发布或者布置任务
+            </div>
+
+            <div class="flex justify-between items-center">
+              <button class="text-[#9fb0c4]">🔗</button>
+              <button class="bg-[#f1f6fb] px-2.5 py-1.5 rounded-md">
+                ✈
+              </button>
+            </div>
+          </div>
+
+          <!-- header -->
+          <div class="flex justify-between items-center mt-4">
+            <h3 class="text-base font-semibold">任务中心</h3>
+            <a class="text-[#3b82f6] text-[13px] cursor-pointer">
+              编辑
+            </a>
           </div>
         </div>
       </div>
-      <div class="task-header">
-        <h3>任务中心</h3>
-        <a class="edit">编辑</a>
-      </div>
-    </div>
 
-    <div class="task-area">
-      <div class="task-list">
-        <div class="task-card" v-for="n in 14" :key="n">
-          <div class="task-icon">销</div>
-          <div class="task-body">
-            <div class="task-title">每日销售数据</div>
-            <div class="task-desc">分析用于销售渠道每日数据汇总及简要展示</div>
+      <!-- 内容区 -->
+      <div class="px-12 pb-10 pt-4
+               max-[800px]:px-5">
+        <div class="grid grid-cols-2 gap-4
+                 max-[800px]:grid-cols-1">
+          <div v-for="n in 14" :key="n" class="flex gap-3 items-start p-3.5
+                   rounded-[10px] border border-[#dfeaf6] bg-white">
+            <div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
+                     border border-dashed border-[#9fc0e8]
+                     flex items-center justify-center
+                     text-[#3b82f6] text-[23px]">
+              销
+            </div>
+
+            <div>
+              <div class="font-semibold">
+                每日销售数据
+              </div>
+              <div class="text-[#9aa5b1] text-[13px] mt-1.5">
+                分析用于销售渠道每日数据汇总及简要展示
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 </script>
-
-<style scoped>
-.chat-guide {
-  height: 100%;
-  overflow: visible;
-  background: #fff;
-  padding: 40px 48px;
-  box-sizing: border-box;
-}
-
-.hero-area {
-  position: sticky;
-  top: 0;
-  background: #ffffff;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  z-index: 10;
-}
-
-.greet {
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 28px 0;
-}
-
-.input-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px }
-.tag {
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width: 108px;
-  padding:6px 10px;
-  border-radius: 16px;
-  background: transparent;
-  color:#333;
-  font-size:13px;
-  border: 1px solid #E5E8EE;
-  box-sizing: border-box;
-}
-
-.fake-input {
-  height: 174px;
-  background: #fff;
-  border-radius: 8px;
-  padding: 18px;
-  border: 1px solid #eef2f6;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
-  display:flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.placeholder { color:#bfc9d4 }
-.actions { display:flex; justify-content: space-between; align-items: center; width:100% }
-.actions .link { background:transparent; border:none; color:#9fb0c4 }
-.actions .send { background:#f1f6fb; border:none; padding:6px 10px; border-radius:6px }
-
-.task-area { margin-top: 20px }
-.task-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 }
-.task-header h3 { margin:0; font-size:16px }
-.task-header .edit { color:#3b82f6; font-size:13px }
-
-.task-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
-.task-card {
-  display:flex;
-  gap:12px;
-  align-items:flex-start;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid #dfeaf6;
-  background:#fff;
-}
-.task-icon { width:44px;height:44px;background: #EFF6FF; border-radius:8px;border:1px dashed #9fc0e8;display:flex;align-items:center;justify-content:center;color:#3b82f6; font-size: 23px; }
-.task-title { font-weight:600 }
-.task-desc { color:#9aa5b1; font-size:13px; margin-top:6px }
-
-/* make content under hero scroll while hero stays sticky */
-.chat-guide::before{ content:''; display:block; height:8px }
-
-@media (max-width: 800px){
-  .chat-guide { padding:20px }
-  .task-list { grid-template-columns: 1fr }
-}
-
-</style>