20251115复盘记录：让分页乖乖“坐好”+ 卡片统一渐变描边与圆角

🌈 一、这次到底动了啥？（一句话总结）

分页贴卡片、内容区撑满视窗、卡片统一 4px 圆角 + 1px 渐变描边、去掉原生 number 的上下箭头。

🧩 二、每个改动点都讲讲（轻松但严谨）

🍰 1）分页条乖乖贴在卡片下方

以前分页掉在页面底部，下面留一块空空的白色区域，看起来有点寂寞。

现在：

外层容器：height: calc(100vh - offset)
内容区 flex 占满：flex: 1
分页区用 margin-top: auto 自动推到底

稳了。

分页终于坐在该坐的位置，像是"好！我贴这儿不动了！"的感觉。

🎀 2）数字输入框的原生箭头 → bye~

ElementPlus 的 controls="false" 只是让它不显示组件的按钮，

但浏览器原生 spinner 还是会偷偷冒出来：

于是补了这段"温柔但有效"的隐藏法术：

ruby 复制代码

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

最终效果：小清爽、小统一、小可爱。

🧊 3）卡片圆角统一为 4px（再配合 overflow: hidden）

所有卡片（包括"创建应用"的那块）统一 4px：

css 复制代码

border-radius: 4px;
overflow: hidden;

背景、图片、阴影都乖乖被圆角裁切，视觉秩序一下子出来了。

🌈 4）卡片依类型显示「1px 渐变描边」

两个不同类型的应用 → 两种独立渐变外边框。

但我没有走"伪元素 + mask"这种偏硬核的路线（lint 还会唠叨我）。

最终方案使用：

css 复制代码

border: 1px solid transparent;
border-image: linear-gradient(...) 1;

🛠 三、关键改的文件

文件名	职责
home.vue	布局、圆角、渐变边框、分页定位全部在这里
index.vue	隐藏数字输入 spinner 的 CSS 补充

非常干净，改动范围不乱跑。

🧠 四、为什么这样实现？（专业但不废话）

✔ calc 配合视口

因为你不想内容区"短一截"，也不想无限撑满，把顶部的导航栏扣掉即可。

✔ margin-top: auto

用 flex 让分页乖乖到容器底部，响应式自然又不容易炸。

✔ border-image 赢麻了

不用写 mask
不用 hack
圆角自然生效
浏览器心情更好（你心情也更好）

✔ 隐藏原生 spinner 的原因

为了视觉统一和手感更顺滑，是你看不见但会真切感受到的那种小优化。

🧯 五、踩到的小坑 & 解决办法

❗1）CSS 不小心写进了 `<script>`

页面直接红到发光 ⚠️

→ 恢复 data() / mounted()，重新整理结构。

❗2）mask 太爱挑浏览器

lint 提示 + 圆角锯齿（哎呦）。

→ 换 border-image，一切回归顺滑。

❗3）ElementPlus 的圆角覆盖你写的圆角

→ 调整选择器权重，仅对当前页面作用，必要时加 !important（谨慎使用）。