|
|
# 教师端教育风 · 代码片段
|
|
|
|
|
|
可直接复制。按需取用，不要整页照搬。
|
|
|
|
|
|
## 1. 页面根类令牌块（放 scoped 顶部）
|
|
|
|
|
|
```scss
|
|
|
.xxx-page {
|
|
|
/* 颜色 */
|
|
|
--edu-primary: #3b82f6;
|
|
|
--edu-primary-deep: #2563eb;
|
|
|
--edu-primary-soft: #eff6ff;
|
|
|
--text-strong: #1f2937;
|
|
|
--text-body: #6b7280;
|
|
|
--text-muted: #9ca3af;
|
|
|
--border-color: #e5e7eb;
|
|
|
|
|
|
/* 字号 */
|
|
|
--fs-page: 17px;
|
|
|
--fs-card: 14px;
|
|
|
--fs-body: 12px;
|
|
|
--fs-tag: 11px;
|
|
|
--fs-kpi: 26px;
|
|
|
--fs-num: 20px;
|
|
|
|
|
|
/* 间距（4px 基准）*/
|
|
|
--sp-1: 4px;
|
|
|
--sp-2: 8px;
|
|
|
--sp-3: 12px;
|
|
|
--sp-4: 16px;
|
|
|
--sp-5: 20px;
|
|
|
|
|
|
/* 圆角 / 控件 */
|
|
|
--r-card: 12px;
|
|
|
--r-control: 8px;
|
|
|
--control-h: 36px;
|
|
|
--field-w: 200px;
|
|
|
--btn-pad-x: 16px;
|
|
|
--btn-icon: 14px;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 2. 主按钮 outline（页面 scoped 本地强制版）
|
|
|
|
|
|
当全局未接管或需保证单页一定生效时使用：
|
|
|
|
|
|
```scss
|
|
|
.search-btn {
|
|
|
height: var(--control-h);
|
|
|
padding: 0 var(--btn-pad-x);
|
|
|
background-color: transparent !important;
|
|
|
background-image: none !important; /* 关键：清渐变层 */
|
|
|
border: 1px solid var(--edu-primary) !important;
|
|
|
color: var(--edu-primary) !important;
|
|
|
border-radius: var(--r-control) !important;
|
|
|
box-shadow: none !important;
|
|
|
font-size: var(--fs-body);
|
|
|
font-weight: 600;
|
|
|
gap: var(--sp-2); /* 自定义 SVG 图标间距 */
|
|
|
transition: background-color 0.18s ease, color 0.18s ease;
|
|
|
|
|
|
&:hover,
|
|
|
&:focus {
|
|
|
background-color: rgba(59, 130, 246, 0.1) !important;
|
|
|
color: var(--edu-primary-deep) !important;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
background-color: rgba(59, 130, 246, 0.18) !important;
|
|
|
color: var(--edu-primary-deep) !important;
|
|
|
}
|
|
|
|
|
|
.btn-svg {
|
|
|
width: var(--btn-icon);
|
|
|
height: var(--btn-icon);
|
|
|
/* SVG 内 fill / stroke 用 currentColor */
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 3. 输入框 / 下拉 / 日期 统一覆盖（teacher-light.scss 通用）
|
|
|
|
|
|
```scss
|
|
|
.el-input__wrapper,
|
|
|
.el-select__wrapper {
|
|
|
height: 36px !important;
|
|
|
background-color: #ffffff !important;
|
|
|
border-radius: 8px !important;
|
|
|
box-shadow: 0 0 0 1px #e5e7eb inset !important;
|
|
|
padding: 0 11px !important;
|
|
|
transition: box-shadow 0.18s ease;
|
|
|
|
|
|
&:hover {
|
|
|
box-shadow: 0 0 0 1px #d1d5db inset !important;
|
|
|
}
|
|
|
|
|
|
&.is-focus,
|
|
|
&:focus-within {
|
|
|
box-shadow: 0 0 0 1px #3b82f6 inset,
|
|
|
0 0 0 3px rgba(59, 130, 246, 0.12) !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-input__inner,
|
|
|
.el-select__selected-item {
|
|
|
font-size: 12px;
|
|
|
color: #1f2937;
|
|
|
-webkit-text-fill-color: #1f2937;
|
|
|
}
|
|
|
|
|
|
.el-input__inner::placeholder {
|
|
|
color: #9ca3af;
|
|
|
-webkit-text-fill-color: #9ca3af;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 4. 卡片
|
|
|
|
|
|
```scss
|
|
|
.card {
|
|
|
background: #ffffff;
|
|
|
border: 1px solid var(--border-color);
|
|
|
border-radius: var(--r-card);
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
|
padding: var(--sp-4);
|
|
|
|
|
|
&-title {
|
|
|
font-size: var(--fs-card);
|
|
|
font-weight: 700;
|
|
|
color: var(--text-strong);
|
|
|
margin: 0 0 var(--sp-3);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## 5. 走势图 tooltip + axisPointer（ECharts option）
|
|
|
|
|
|
```js
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
backgroundColor: "rgba(255, 255, 255, 0.98)",
|
|
|
borderColor: "rgba(59, 130, 246, 0.2)",
|
|
|
borderWidth: 1,
|
|
|
padding: [10, 14],
|
|
|
textStyle: { color: "#1f2937", fontSize: 13 },
|
|
|
axisPointer: {
|
|
|
type: "cross",
|
|
|
lineStyle: { color: "rgba(59,130,246,0.3)", type: "dashed" },
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
// ...
|
|
|
axisPointer: {
|
|
|
label: {
|
|
|
backgroundColor: "#2563eb",
|
|
|
color: "#ffffff",
|
|
|
fontSize: 11,
|
|
|
fontWeight: 600,
|
|
|
padding: [4, 8],
|
|
|
borderRadius: 4,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
// ...
|
|
|
axisPointer: {
|
|
|
label: { backgroundColor: "#2563eb", color: "#ffffff", fontSize: 11 },
|
|
|
},
|
|
|
},
|
|
|
```
|
|
|
|
|
|
## 6. 饼图 tooltip（item 触发）
|
|
|
|
|
|
```js
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
backgroundColor: "rgba(255, 255, 255, 0.98)",
|
|
|
borderColor: "rgba(59, 130, 246, 0.2)",
|
|
|
textStyle: { color: "#1f2937", fontSize: 13 },
|
|
|
formatter: "{b}: {c}人 ({d}%)",
|
|
|
},
|
|
|
```
|
|
|
|
|
|
## 7. 页面骨架参考
|
|
|
|
|
|
```html
|
|
|
<div class="xxx-page">
|
|
|
<!-- 页面标题（app-main 已提供 padding，这里不加）-->
|
|
|
<header class="page-head">
|
|
|
<h1 class="page-title">页面标题</h1>
|
|
|
<p class="page-sub">辅助说明</p>
|
|
|
</header>
|
|
|
|
|
|
<!-- KPI 行 -->
|
|
|
<div class="kpi-row">
|
|
|
<div class="kpi-card"><!-- 图标 + 标签 + 大数字 --></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 内容区 -->
|
|
|
<div class="content-grid">
|
|
|
<section class="card">...</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
## 8. 浏览器快速自检脚本（DevTools / browser_evaluate）
|
|
|
|
|
|
```js
|
|
|
const btn = document.querySelector(".search-btn");
|
|
|
const s = getComputedStyle(btn);
|
|
|
({
|
|
|
backgroundColor: s.backgroundColor, // rgba(0,0,0,0)
|
|
|
backgroundImage: s.backgroundImage, // 必须 none
|
|
|
borderColor: s.borderColor, // rgb(59,130,246)
|
|
|
color: s.color, // rgb(59,130,246)
|
|
|
height: s.height, // 36px
|
|
|
});
|
|
|
```
|