<template>
  <!-- 页面根节点：不滚动 -->
  <div class="h-full bg-white overflow-hidden">

    <!-- 唯一滚动容器 -->
    <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="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>
