间距并不等于没有层次

组件是 Vue 3 的 script setup。三个按钮横排，类名分别是 btn-checkin、btn-history、btn-share。点击函数各自打印去打卡、查看历史记录、分享。函数体里没有跳转，也没有请求。

颜色和间距是写死的

组的背景是 #f5f5f5，内边距 20 像素，圆角 10 像素，间距 20 像素，内容居中。按钮无边框，圆角 8 像素，内边距 12 像素乘 24 像素，字号 16、字重 500，字是白色。阴影是 0 4 像素 6 像素，透明度 0.1。悬停时上移 2 像素，阴影改成 0 6 像素 8 像素、透明度 0.15，过渡 0.3 秒。三个背景色是 #4CAF50、#2196F3、#FF9800。图标和文字间距 8 像素，图标字号 20。

对话把间距和内边距叫成负空间，把纯色和圆角叫成扁平。阴影和上移仍然在制造层次。扁平若是指没有凸起，这两条和说法不一致。间距本身只是空隙，不是按钮没有高度。

样式带 scoped。类名不会漏到组件外面。要改颜色，改的是这三个背景规则，不是模板里的中文。

三个处理函数都是控制台输出。接真实打卡、历史或分享时，要替换函数体。只改颜色不会产生这些动作。

过渡写在 all 上。颜色、阴影和位移都会跟着 0.3 秒。对话没有单独写一条只动位置的过渡。

按钮没有禁用态。连续点击会连续打印。没有节流。

组是 flex。窗口变窄时，对话没有写折行。三个按钮可能挤在一行里，间距仍然是 20 像素。