81 lines
2.5 KiB
Vue
81 lines
2.5 KiB
Vue
<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>
|