feat: 从冻结 GoAdmin 源码重建 Sense 骨架 (#61)
This commit is contained in:
QiuSW
@@ -0,0 +1,213 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
* 通用css样式布局处理
|
||||
* Copyright (c) 2019 ruoyi
|
||||
*/
|
||||
/** 基础通用 **/
|
||||
.pt5 {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.pr5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pb5 {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mt5 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mb8 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml0 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mt20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.m20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
.el-table .el-table__header-wrapper th {
|
||||
word-break: break-word;
|
||||
background-color: #f8f8f9;
|
||||
color: #515a6e;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/** 表单布局 **/
|
||||
.form-header {
|
||||
font-size: 15px;
|
||||
color: #6379bb;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 8px 10px 25px 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/** 表格布局 **/
|
||||
.pagination-container {
|
||||
position: relative;
|
||||
height: 25px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 15px;
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
|
||||
.pagination-container .el-pagination {
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.el-table .fixed-width .el-button--mini {
|
||||
color: #409EFF;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.el-tree-node__content > .el-checkbox {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* text color */
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #1c84c6;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #23c6c8;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: #f8ac59;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: #ed5565;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* image */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.delete-popconfirm{
|
||||
margin-left: 10px;
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
.pt5{padding-top:5px}.pr5{padding-right:5px}.pb5{padding-bottom:5px}.mt5{margin-top:5px}.mr5{margin-right:5px}.mb5{margin-bottom:5px}.mb8{margin-bottom:8px}.ml5{margin-left:5px}.mt10{margin-top:10px}.mr10{margin-right:10px}.mb10{margin-bottom:10px}.ml0{margin-left:10px}.mt20{margin-top:20px}.mr20{margin-right:20px}.mb20{margin-bottom:20px}.m20{margin-left:20px}.el-dialog{margin-top:6vh !important}.el-table .el-table__header-wrapper th{word-break:break-word;background-color:#f8f8f9;color:#515a6e;height:40px;font-size:13px}.form-header{font-size:15px;color:#6379bb;border-bottom:1px solid #ddd;margin:8px 10px 25px 10px;padding-bottom:5px}.pagination-container{position:relative;height:25px;margin-bottom:10px;margin-top:15px;padding:10px 20px !important}.pagination-container .el-pagination{right:0;position:absolute}.el-table .fixed-width .el-button--mini{color:#409EFF;padding-left:0;padding-right:0;width:inherit}.el-tree-node__content>.el-checkbox{margin-right:8px}.list-group-striped>.list-group-item{border-left:0;border-right:0;border-radius:0;padding-left:0;padding-right:0}.list-group{padding-left:0px;list-style:none}.list-group-item{border-bottom:1px solid #e7eaec;border-top:1px solid #e7eaec;margin-bottom:-1px;padding:11px 0px;font-size:13px}.pull-right{float:right !important}.el-card__header{padding:14px 15px 7px;min-height:40px}.el-card__body{padding:15px 20px 20px 20px}.card-box{padding-right:15px;padding-left:15px;margin-bottom:10px}.text-navy{color:#1ab394}.text-primary{color:inherit}.text-success{color:#1c84c6}.text-info{color:#23c6c8}.text-warning{color:#f8ac59}.text-danger{color:#ed5565}.text-muted{color:#888888}.img-circle{border-radius:50%}.img-lg{width:120px;height:120px}.avatar-upload-preview{position:absolute;top:50%;transform:translate(50%, -50%);width:180px;height:180px;border-radius:50%;box-shadow:0 0 4px #ccc;overflow:hidden}.el-tabs__item{font-size:13px}
|
||||
@@ -0,0 +1,204 @@
|
||||
// ══════════════════════════════════════════════════════════════════
|
||||
// 全局业务样式 — 布局、表单搜索、工具类
|
||||
// ══════════════════════════════════════════════════════════════════
|
||||
|
||||
// ── 间距工具类 ─────────────────────────────────────────────────
|
||||
.pt5 { padding-top: 5px; }
|
||||
.pr5 { padding-right: 5px; }
|
||||
.pb5 { padding-bottom: 5px; }
|
||||
.mt5 { margin-top: 5px; }
|
||||
.mr5 { margin-right: 5px; }
|
||||
.mb5 { margin-bottom: 5px; }
|
||||
.mb8 { margin-bottom: 8px; }
|
||||
.ml5 { margin-left: 5px; }
|
||||
.mt10 { margin-top: 10px; }
|
||||
.mr10 { margin-right: 10px; }
|
||||
.mb10 { margin-bottom: 10px; }
|
||||
.mt20 { margin-top: 20px; }
|
||||
.mr20 { margin-right: 20px; }
|
||||
.mb20 { margin-bottom: 20px; }
|
||||
|
||||
// ── 搜索栏 ─────────────────────────────────────────────────────
|
||||
// 业务页面统一使用 .search-form 包裹搜索区域
|
||||
.search-form {
|
||||
padding: 14px 16px 6px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #eef0f6;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-input__wrapper,
|
||||
.el-select .el-input__wrapper {
|
||||
background: #fafbff;
|
||||
}
|
||||
}
|
||||
|
||||
// ── 操作按钮行 .mb8 ─────────────────────────────────────────────
|
||||
// 兼容原有 el-row :gutter="10" class="mb8" 写法
|
||||
.el-row.mb8 {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
// ── 表格容器 ───────────────────────────────────────────────────
|
||||
.el-table {
|
||||
.el-table__header-wrapper,
|
||||
.el-table__fixed-header-wrapper {
|
||||
th {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
.el-button [class*="el-icon-"] + span { margin-left: 1px; }
|
||||
}
|
||||
|
||||
// 操作列按钮
|
||||
.el-button.is-link + .el-divider--vertical + .el-button.is-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ── 分页容器 ──────────────────────────────────────────────────
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
// ── 表单分区标题 .form-header ────────────────────────────────
|
||||
.form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
border-bottom: 2px solid #ede9fe;
|
||||
margin: 8px 0 20px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// ── 卡片容器 .card-box ──────────────────────────────────────
|
||||
.card-box {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// ── Tree ────────────────────────────────────────────────────
|
||||
.tree-border {
|
||||
margin-top: 5px;
|
||||
border: 1px solid #eef0f6;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ── 拖拽排序 ────────────────────────────────────────────────
|
||||
.sortable-ghost {
|
||||
opacity: 0.8;
|
||||
color: #fff !important;
|
||||
background: #4f46e5 !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// ── Drawer ──────────────────────────────────────────────────
|
||||
.demo-drawer__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
form { flex: 1; }
|
||||
}
|
||||
|
||||
.demo-drawer__footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
button { flex: 1; }
|
||||
}
|
||||
|
||||
// ── 图片相关 ────────────────────────────────────────────────
|
||||
.img-circle { border-radius: 50%; }
|
||||
.img-lg { width: 120px; height: 120px; }
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ── 顶部右侧按钮 ────────────────────────────────────────────
|
||||
.top-right-btn {
|
||||
position: relative;
|
||||
float: right;
|
||||
}
|
||||
|
||||
// ── 文字色工具 ──────────────────────────────────────────────
|
||||
.text-primary { color: #4f46e5; }
|
||||
.text-success { color: #10b981; }
|
||||
.text-warning { color: #f59e0b; }
|
||||
.text-danger { color: #f43f5e; }
|
||||
.text-info { color: #3b82f6; }
|
||||
.text-muted { color: #94a3b8; }
|
||||
|
||||
// ── pull-right ──────────────────────────────────────────────
|
||||
.pull-right { float: right !important; }
|
||||
|
||||
// ── 通用列表组 ──────────────────────────────────────────────
|
||||
.list-group {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
margin-bottom: -1px;
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// ── 子菜单顶部导航栏修正 ──────────────────────────────────
|
||||
.el-menu--horizontal > .el-submenu .el-submenu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
}
|
||||
|
||||
// ── 操作工具栏（替代 el-row :gutter="10" class="mb8"）──────
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@use './variables.scss' as *;
|
||||
|
||||
@mixin colorBtn($color) {
|
||||
background: $color;
|
||||
|
||||
&:hover {
|
||||
color: $color;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blue-btn {
|
||||
@include colorBtn($blue)
|
||||
}
|
||||
|
||||
.light-blue-btn {
|
||||
@include colorBtn($light-blue)
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
@include colorBtn($red)
|
||||
}
|
||||
|
||||
.pink-btn {
|
||||
@include colorBtn($pink)
|
||||
}
|
||||
|
||||
.green-btn {
|
||||
@include colorBtn($green)
|
||||
}
|
||||
|
||||
.tiffany-btn {
|
||||
@include colorBtn($tiffany)
|
||||
}
|
||||
|
||||
.yellow-btn {
|
||||
@include colorBtn($yellow)
|
||||
}
|
||||
|
||||
.pan-btn {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
padding: 14px 36px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 600ms ease all;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background: #fff;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
width: 100%;
|
||||
transition: 600ms ease all;
|
||||
}
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
width: 0;
|
||||
transition: 400ms ease all;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: inherit;
|
||||
top: inherit;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
margin: 0;
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -0,0 +1,576 @@
|
||||
// ══════════════════════════════════════════════════════════════════
|
||||
// Design System — Element Plus 全量组件覆盖
|
||||
// 参考 Ant Design 5.x 蓝色体系
|
||||
// Primary: #1677ff Hover: #4096ff Active: #0958d9
|
||||
// ══════════════════════════════════════════════════════════════════
|
||||
|
||||
// ── 全局 CSS Token (Ant Design 5.x Blue Palette) ────────────────
|
||||
:root {
|
||||
--el-color-primary: #1677ff;
|
||||
--el-color-primary-light-3: #4096ff;
|
||||
--el-color-primary-light-5: #69b1ff;
|
||||
--el-color-primary-light-7: #91caff;
|
||||
--el-color-primary-light-8: #bae0ff;
|
||||
--el-color-primary-light-9: #e6f4ff;
|
||||
--el-color-primary-dark-2: #0958d9;
|
||||
|
||||
--el-color-success: #52c41a;
|
||||
--el-color-danger: #ff4d4f;
|
||||
--el-color-warning: #faad14;
|
||||
|
||||
--el-border-radius-base: 6px;
|
||||
--el-border-radius-small: 4px;
|
||||
--el-border-color: #d9d9d9;
|
||||
--el-border-color-light: #f0f0f0;
|
||||
--el-border-color-lighter: #f5f5f5;
|
||||
|
||||
--el-text-color-primary: #000000d9;
|
||||
--el-text-color-regular: #000000a6;
|
||||
--el-text-color-secondary: #00000073;
|
||||
--el-text-color-placeholder:#00000040;
|
||||
|
||||
--el-bg-color: #ffffff;
|
||||
--el-fill-color-light: #fafafa;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 一、卡片 el-card
|
||||
// ═══════════════════════════════════
|
||||
.el-card {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,0.1), 0 6px 18px rgba(0,21,41,0.08) !important;
|
||||
}
|
||||
|
||||
.el-card__header {
|
||||
padding: 14px 16px !important;
|
||||
min-height: unset;
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
background: #fafafa;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #000000d9;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 二、按钮 el-button
|
||||
// ═══════════════════════════════════
|
||||
.el-button {
|
||||
border-radius: 6px;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s;
|
||||
|
||||
&--primary {
|
||||
background: #1677ff !important;
|
||||
border-color: #1677ff !important;
|
||||
&:hover, &:focus {
|
||||
background: #4096ff !important;
|
||||
border-color: #4096ff !important;
|
||||
}
|
||||
&:active { background: #0958d9 !important; border-color: #0958d9 !important; }
|
||||
&.is-plain {
|
||||
background: #e6f4ff !important;
|
||||
border-color: #91caff !important;
|
||||
color: #1677ff !important;
|
||||
&:hover { background: #1677ff !important; border-color: #1677ff !important; color: #fff !important; }
|
||||
}
|
||||
&.is-link { color: #1677ff !important; background: transparent !important; border: none !important; }
|
||||
}
|
||||
|
||||
&--success {
|
||||
background: #52c41a !important;
|
||||
border-color: #52c41a !important;
|
||||
&:hover { background: #73d13d !important; border-color: #73d13d !important; }
|
||||
&.is-plain {
|
||||
background: #f6ffed !important;
|
||||
border-color: #b7eb8f !important;
|
||||
color: #389e0d !important;
|
||||
&:hover { background: #52c41a !important; color: #fff !important; border-color: #52c41a !important; }
|
||||
}
|
||||
&.is-link { color: #52c41a !important; background: transparent !important; border: none !important; }
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: #ff4d4f !important;
|
||||
border-color: #ff4d4f !important;
|
||||
&:hover { background: #ff7875 !important; border-color: #ff7875 !important; }
|
||||
&.is-plain {
|
||||
background: #fff2f0 !important;
|
||||
border-color: #ffccc7 !important;
|
||||
color: #cf1322 !important;
|
||||
&:hover { background: #ff4d4f !important; color: #fff !important; border-color: #ff4d4f !important; }
|
||||
}
|
||||
&.is-link { color: #ff4d4f !important; background: transparent !important; border: none !important; }
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: #faad14 !important;
|
||||
border-color: #faad14 !important;
|
||||
color: #fff !important;
|
||||
&:hover { background: #ffc53d !important; border-color: #ffc53d !important; }
|
||||
&.is-plain {
|
||||
background: #fffbe6 !important;
|
||||
border-color: #ffe58f !important;
|
||||
color: #d48806 !important;
|
||||
&:hover { background: #faad14 !important; color: #fff !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&--default, &:not([class*='--']) {
|
||||
border-color: #d9d9d9 !important;
|
||||
color: #000000d9 !important;
|
||||
&:hover {
|
||||
border-color: #4096ff !important;
|
||||
color: #1677ff !important;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 三、输入框
|
||||
// ═══════════════════════════════════
|
||||
.el-input {
|
||||
&__wrapper {
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 0 1px #d9d9d9 inset !important;
|
||||
transition: box-shadow 0.2s;
|
||||
&:hover { box-shadow: 0 0 0 1px #4096ff inset !important; }
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px #1677ff inset, 0 0 0 3px rgba(22,119,255,0.1) !important;
|
||||
}
|
||||
}
|
||||
&__prefix-icon, &__suffix-icon { color: #00000040; }
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
&:hover { border-color: #4096ff; }
|
||||
&:focus {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 0 0 3px rgba(22,119,255,0.1);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-select .el-input__wrapper.is-focus {
|
||||
box-shadow: 0 0 0 1px #1677ff inset !important;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 四、表格 el-table
|
||||
// ═══════════════════════════════════
|
||||
.el-table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
font-size: 13px;
|
||||
|
||||
&::before, &::after { display: none; }
|
||||
|
||||
th.el-table__cell {
|
||||
background: #fafafa !important;
|
||||
color: #000000d9 !important;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
border-right: 1px solid #f0f0f0 !important;
|
||||
padding: 10px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
border-bottom: 1px solid #f0f0f0 !important;
|
||||
border-right: 1px solid #f5f5f5 !important;
|
||||
color: #000000d9;
|
||||
padding: 9px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
transition: background 0.15s;
|
||||
&:hover td.el-table__cell { background: #e6f4ff !important; }
|
||||
&:last-child td.el-table__cell { border-bottom: none !important; }
|
||||
}
|
||||
|
||||
&.el-table--striped .el-table__row--striped td.el-table__cell {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.el-checkbox__inner {
|
||||
border-color: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 五、表单 el-form
|
||||
// ═══════════════════════════════════
|
||||
.el-form-item {
|
||||
margin-bottom: 18px;
|
||||
|
||||
&__label {
|
||||
font-weight: 500;
|
||||
color: #000000d9;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&__error {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form--inline .el-form-item { margin-bottom: 10px; }
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 六、对话框 el-dialog
|
||||
// ═══════════════════════════════════
|
||||
.el-dialog {
|
||||
border-radius: 10px !important;
|
||||
overflow: hidden;
|
||||
transform: none;
|
||||
left: 0;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12) !important;
|
||||
|
||||
&__header {
|
||||
padding: 16px 20px 12px !important;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 600 !important;
|
||||
color: #000000d9 !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
&__headerbtn {
|
||||
top: 14px !important;
|
||||
right: 16px !important;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
&:hover { background: #f0f0f0; }
|
||||
.el-dialog__close {
|
||||
color: #00000073 !important;
|
||||
&:hover { color: #1677ff !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 20px 24px !important;
|
||||
color: #000000d9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 12px 20px 16px !important;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) { margin-top: 6vh !important; }
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 七、标签 el-tag
|
||||
// ═══════════════════════════════════
|
||||
.el-tag {
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
padding: 0 7px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
border: 1px solid;
|
||||
|
||||
&--success {
|
||||
background: #f6ffed !important;
|
||||
border-color: #b7eb8f !important;
|
||||
color: #389e0d !important;
|
||||
}
|
||||
&--danger {
|
||||
background: #fff2f0 !important;
|
||||
border-color: #ffccc7 !important;
|
||||
color: #cf1322 !important;
|
||||
}
|
||||
&--warning {
|
||||
background: #fffbe6 !important;
|
||||
border-color: #ffe58f !important;
|
||||
color: #d48806 !important;
|
||||
}
|
||||
&--info {
|
||||
background: #f5f5f5 !important;
|
||||
border-color: #d9d9d9 !important;
|
||||
color: #595959 !important;
|
||||
}
|
||||
&--primary, &:not([class*="el-tag--"]) {
|
||||
background: #e6f4ff !important;
|
||||
border-color: #91caff !important;
|
||||
color: #1677ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 八、分页 el-pagination
|
||||
// ═══════════════════════════════════
|
||||
.el-pagination {
|
||||
.el-pager li {
|
||||
border-radius: 6px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 13px;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin: 0 2px;
|
||||
background: #fff;
|
||||
transition: all 0.2s;
|
||||
&.is-active {
|
||||
background: #1677ff !important;
|
||||
border-color: #1677ff !important;
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
&:hover:not(.is-active) {
|
||||
color: #1677ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-prev, .btn-next {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d9d9d9;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #fff;
|
||||
&:hover { color: #1677ff; border-color: #1677ff; }
|
||||
&:disabled { background: #f5f5f5; color: #d9d9d9; border-color: #d9d9d9; }
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 九、下拉面板
|
||||
// ═══════════════════════════════════
|
||||
.el-select-dropdown {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12) !important;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
font-size: 13px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
margin: 0 4px;
|
||||
&.is-selected { color: #1677ff; font-weight: 600; background: #e6f4ff; }
|
||||
&:hover:not(.is-selected) { background: #e6f4ff; color: #1677ff; }
|
||||
&.is-disabled { color: #d9d9d9; }
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十、Tabs
|
||||
// ═══════════════════════════════════
|
||||
.el-tabs {
|
||||
&__active-bar { background: #1677ff; height: 2px; border-radius: 2px; }
|
||||
&__item {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000000a6;
|
||||
padding: 0 16px;
|
||||
&.is-active { color: #1677ff; font-weight: 600; }
|
||||
&:hover:not(.is-active) { color: #1677ff; }
|
||||
}
|
||||
&__nav-wrap::after { background-color: #f0f0f0; height: 1px; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十一、Dropdown
|
||||
// ═══════════════════════════════════
|
||||
.el-dropdown-menu {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12);
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
color: #000000d9;
|
||||
&:hover { background: #e6f4ff; color: #1677ff; }
|
||||
&.is-disabled { color: #d9d9d9; }
|
||||
&--divided { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; }
|
||||
}
|
||||
|
||||
a { display: block; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十二、Popover / Tooltip
|
||||
// ═══════════════════════════════════
|
||||
.el-popover {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
|
||||
padding: 12px !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十三、Radio / Checkbox
|
||||
// ═══════════════════════════════════
|
||||
.el-radio {
|
||||
.el-radio__inner { border-color: #d9d9d9; transition: all 0.2s; }
|
||||
&.is-checked {
|
||||
.el-radio__inner { border-color: #1677ff; background: #1677ff; }
|
||||
.el-radio__label { color: #1677ff; }
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
.el-checkbox__inner { border-color: #d9d9d9; border-radius: 3px; transition: all 0.2s; }
|
||||
&.is-checked {
|
||||
.el-checkbox__inner { background: #1677ff; border-color: #1677ff; }
|
||||
.el-checkbox__label { color: #1677ff; }
|
||||
}
|
||||
&.is-indeterminate .el-checkbox__inner { background: #1677ff; border-color: #1677ff; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十四、Switch / Progress
|
||||
// ═══════════════════════════════════
|
||||
.el-switch.is-checked .el-switch__core { border-color: #1677ff; background: #1677ff; }
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background: linear-gradient(90deg, #40a9ff, #1677ff);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十五、消息 / Alert
|
||||
// ═══════════════════════════════════
|
||||
.el-message {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.el-alert {
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
&.el-alert--success { background: #f6ffed; }
|
||||
&.el-alert--warning { background: #fffbe6; }
|
||||
&.el-alert--error { background: #fff2f0; }
|
||||
&.el-alert--info { background: #e6f4ff; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十六、面包屑
|
||||
// ═══════════════════════════════════
|
||||
.el-breadcrumb {
|
||||
&__inner, &__inner a {
|
||||
font-weight: 400 !important;
|
||||
color: #000000a6;
|
||||
}
|
||||
&__inner.is-link, &__inner a {
|
||||
&:hover { color: #1677ff; }
|
||||
}
|
||||
&__separator { color: #d9d9d9; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十七、Upload
|
||||
// ═══════════════════════════════════
|
||||
.el-upload {
|
||||
input[type="file"] { display: none !important; }
|
||||
&__input { display: none; }
|
||||
&-dragger {
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
background: #fafafa;
|
||||
transition: all 0.3s;
|
||||
&:hover { border-color: #1677ff; background: #e6f4ff; }
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container .el-upload {
|
||||
width: 100%;
|
||||
.el-upload-dragger { width: 100%; height: 200px; }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十八、DatePicker
|
||||
// ═══════════════════════════════════
|
||||
.el-date-editor { border-radius: 6px; }
|
||||
.el-range-editor.el-input__inner { display: inline-flex !important; }
|
||||
.el-range-separator { box-sizing: content-box; }
|
||||
.el-picker__popper {
|
||||
border-radius: 8px !important;
|
||||
border: 1px solid #f0f0f0 !important;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 十九、Drawer
|
||||
// ═══════════════════════════════════
|
||||
.el-drawer {
|
||||
overflow-y: auto;
|
||||
&__header {
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: #000000d9;
|
||||
font-size: 15px;
|
||||
}
|
||||
&__body { padding: 20px; }
|
||||
&__footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════
|
||||
// 二十、Misc
|
||||
// ═══════════════════════════════════
|
||||
.el-tree-node__content > .el-checkbox { margin-right: 8px; }
|
||||
.cell .el-tag { margin-right: 0; }
|
||||
.small-padding .cell { padding-left: 5px; padding-right: 5px; }
|
||||
.fixed-width .el-button--mini { padding: 7px 10px; width: 60px; }
|
||||
.status-col .cell { padding: 0 10px; text-align: center; }
|
||||
.delete-popconfirm { margin-left: 10px; }
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Element Plus theme variables (CSS Modules export for JS consumption)
|
||||
**/
|
||||
|
||||
/* theme color */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #FFBA00;
|
||||
$--color-danger: #ff4949;
|
||||
// $--color-info: #1E1E1E;
|
||||
|
||||
$--button-font-weight: 400;
|
||||
|
||||
// $--color-text-regular: #1f2d3d;
|
||||
|
||||
$--border-color-light: #dfe4ed;
|
||||
$--border-color-lighter: #e6ebf5;
|
||||
|
||||
$--table-border:1px solid#dfe6ec;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-plus/theme-chalk/fonts';
|
||||
|
||||
@use "element-plus/theme-chalk/src/index.scss" as *;
|
||||
|
||||
// export primary theme color for JS access
|
||||
:export {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Element Plus theme customization
|
||||
**/
|
||||
|
||||
/* theme color */
|
||||
$--el-color-primary: #1890ff !default;
|
||||
$--el-color-success: #13ce66 !default;
|
||||
$--el-color-warning: #FFBA00 !default;
|
||||
$--el-color-danger: #ff4949 !default;
|
||||
|
||||
$--el-button-font-weight: 400 !default;
|
||||
|
||||
$--el-border-color-light: #dfe4ed !default;
|
||||
$--el-border-color-lighter: #e6ebf5 !default;
|
||||
|
||||
$--el-table-border: 1px solid #dfe6ec !default;
|
||||
|
||||
// Element Plus uses CSS variables for theming, so we can override them
|
||||
:root {
|
||||
--el-color-primary: #{$--el-color-primary};
|
||||
--el-color-success: #{$--el-color-success};
|
||||
--el-color-warning: #{$--el-color-warning};
|
||||
--el-color-danger: #{$--el-color-danger};
|
||||
}
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
theme: $--el-color-primary;
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
@use './variables.scss' as *;
|
||||
@use './mixin.scss' as *;
|
||||
@use './transition.scss' as *;
|
||||
@use './element-plus.scss' as *;
|
||||
@use './sidebar.scss' as *;
|
||||
@use './btn.scss' as *;
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
// label {
|
||||
// font-weight: 700;
|
||||
// }
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inlineBlock {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
background: #eef1f6;
|
||||
padding: 8px 24px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
margin: 30px 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.draft {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-type,
|
||||
.link-type:focus {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: rgb(32, 160, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
padding-bottom: 10px;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//refine vue-multiselect plugin
|
||||
.multiselect {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.multiselect--active {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
|
||||
.el-card + .el-card {
|
||||
margin-top: 12px;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollBar {
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin relative {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@mixin pct($pct) {
|
||||
width: #{$pct};
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@mixin triangle($width, $height, $color, $direction) {
|
||||
$width: $width*0.5;
|
||||
$color-border-style: $height solid $color;
|
||||
$transparent-border-style: $width solid transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
|
||||
@if $direction==up {
|
||||
border-bottom: $color-border-style;
|
||||
border-left: $transparent-border-style;
|
||||
border-right: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==right {
|
||||
border-left: $color-border-style;
|
||||
border-top: $transparent-border-style;
|
||||
border-bottom: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==down {
|
||||
border-top: $color-border-style;
|
||||
border-left: $transparent-border-style;
|
||||
border-right: $transparent-border-style;
|
||||
}
|
||||
|
||||
@else if $direction==left {
|
||||
border-right: $color-border-style;
|
||||
border-top: $transparent-border-style;
|
||||
border-bottom: $transparent-border-style;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
@use './variables.scss' as *;
|
||||
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s;
|
||||
transition: width 0.28s;
|
||||
width: $sideBarWidth !important;
|
||||
background-color: $menuBg;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
--el-menu-bg-color: #{$menuBg};
|
||||
background-color: $menuBg !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
// 统一菜单项高度（Element Plus 2.x 默认 56px 偏大，收紧至 50px）
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title,
|
||||
.el-submenu__title {
|
||||
height: 50px !important;
|
||||
line-height: 50px !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
// 顶级 el-menu-item（如"首页"）必须设置深色背景，否则白字不可见
|
||||
.el-menu-item {
|
||||
background-color: $menuBg !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: $subMenuBg !important;
|
||||
color: $menuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 展开的子菜单 el-menu-item 强制暗色背景 + 白色文字
|
||||
.el-sub-menu .el-menu-item,
|
||||
.el-submenu .el-menu-item {
|
||||
background-color: $subMenuBg !important;
|
||||
color: #fff !important;
|
||||
min-width: $sideBarWidth !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover !important;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: $menuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 嵌套子菜单标题
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.nest-menu .el-submenu > .el-submenu__title {
|
||||
background-color: $subMenuBg !important;
|
||||
color: #fff !important;
|
||||
min-width: $sideBarWidth !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $subMenuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 父级菜单标题 hover 效果
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: $menuHover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active > .el-submenu__title {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu,
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
|
||||
> .el-sub-menu__title,
|
||||
> .el-submenu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-sub-menu,
|
||||
.el-submenu {
|
||||
> .el-sub-menu__title,
|
||||
> .el-submenu__title {
|
||||
> span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-sub-menu,
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$sideBarWidth, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
> .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.nest-menu .el-submenu > .el-submenu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the scroll bar appears when the subMenu is too long
|
||||
> .el-menu--popup {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// global transition css
|
||||
|
||||
/* fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.28s;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.fade-transform-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
:export {
|
||||
menuActiveText: #409EFF;
|
||||
subMenuActiveText: #f4f4f5;
|
||||
menuBg: #001529;
|
||||
menuHover: #000c17;
|
||||
menuLightBg: #ffffff;
|
||||
menuLightHover: #f0f1f5;
|
||||
subMenuBg: #000c17;
|
||||
subMenuHover: #001528;
|
||||
sideBarWidth: 210px;
|
||||
sidebarTitle: #ffffff;
|
||||
sidebarLightTitle: #001529;
|
||||
}
|
||||
+1
@@ -0,0 +1 @@
|
||||
:export{menuActiveText:#409EFF;subMenuActiveText:#f4f4f5;menuBg:#001529;menuHover:#000c17;menuLightBg:#fff;menuLightHover:#f0f1f5;subMenuBg:#000c17;subMenuHover:#001528;sideBarWidth:256px;sidebarTitle:#fff;sidebarLightTitle:#001529}
|
||||
@@ -0,0 +1,43 @@
|
||||
// base color
|
||||
$blue:#324157;
|
||||
$light-blue:#3A71A8;
|
||||
$red:#C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
|
||||
// sidebar — Ant Design Pro 经典深蓝配色
|
||||
$menuActiveText:#1677ff;
|
||||
$subMenuActiveText:#69b1ff;
|
||||
|
||||
$menuBg:#001529;
|
||||
$menuHover:#000c17;
|
||||
$sidebarTitle: #ffffff;
|
||||
|
||||
$menuLightBg:#ffffff;
|
||||
$menuLightHover:#e6f4ff;
|
||||
$sidebarLightTitle: #001d66;
|
||||
|
||||
$subMenuBg:#000c17;
|
||||
$subMenuHover:#001528;
|
||||
|
||||
$sideBarWidth: 210px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
:export {
|
||||
// menuText: $menuText;
|
||||
menuActiveText: $menuActiveText;
|
||||
subMenuActiveText: $subMenuActiveText;
|
||||
menuBg: $menuBg;
|
||||
menuHover: $menuHover;
|
||||
menuLightBg: $menuLightBg;
|
||||
menuLightHover: $menuLightHover;
|
||||
subMenuBg: $subMenuBg;
|
||||
subMenuHover: $subMenuHover;
|
||||
sideBarWidth: $sideBarWidth;
|
||||
sidebarTitle: $sidebarTitle;
|
||||
sidebarLightTitle: $sidebarLightTitle
|
||||
}
|
||||
Reference in New Issue
Block a user