mojiahui/dafuweng-buildadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
Zhenhui
2026-03-06 00:29:28 +08:00
commit 9ed4c1bc58
577 changed files with 57404 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
web/src/styles/app.scss Normal file
View File

@@ -0,0 +1,240 @@
/* 基本样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none !important;
}
html,
body,
#app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family:
Helvetica Neue,
Helvetica,
PingFang SC,
Hiragino Sans GB,
Microsoft YaHei,
SimSun,
sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: var(--ba-bg-color);
color: var(--el-text-color-primary);
font-size: var(--el-font-size-base);
}
// 阿里 iconfont Symbol引用css
.iconfont-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.w100 {
width: 100% !important;
}
.h100 {
height: 100% !important;
}
.ba-center {
display: flex;
align-items: center;
justify-content: center;
}
.default-main {
margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}
.zoom-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
.block-help {
display: block;
width: 100%;
color: #909399;
font-size: 13px;
line-height: 16px;
padding-top: 5px;
}
/* 表格顶部菜单-s */
.table-header {
.table-header-operate .icon {
font-size: 14px !important;
color: var(--el-color-white) !important;
}
.el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important;
}
}
/* 表格顶部菜单-e */
/* 鼠标置入浮动效果-s */
.suspension {
transition: all 0.3s ease;
}
.suspension:hover {
-webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02);
-ms-transform: translateY(-4px) scale(1.02);
-o-transform: translateY(-4px) scale(1.02);
transform: translateY(-4px) scale(1.02);
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
z-index: 2147483600;
border-radius: 6px;
}
/* 鼠标置入浮动效果-e */
/* 表格-s */
.ba-table-box {
border-radius: var(--el-border-radius-round);
}
.ba-table-alert {
background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color);
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* 表格-e */
/* 新增/编辑表单-s */
.ba-operate-dialog {
overflow: hidden;
border-radius: var(--el-border-radius-base);
padding-bottom: 52px;
}
.ba-operate-dialog .el-dialog__header {
border-bottom: 1px solid var(--ba-bg-color);
.el-dialog__headerbtn {
top: 4px;
}
}
.ba-operate-dialog .el-dialog__body {
height: 58vh;
}
.ba-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.ba-operate-form {
padding-top: 20px;
}
/* 新增/编辑表单-e */
/* 全局遮罩-s */
.ba-layout-shade {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2147483599;
}
/* 全局遮罩-e */
/* 图片上传预览-s */
.img-preview-dialog .el-dialog__body {
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
}
}
/* 图片上传预览-e */
/* 页面切换动画-s */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.3s ease;
}
// slide-right
.slide-right-enter-from {
opacity: 0;
transform: translateX(-20px);
}
.slide-right-leave-to {
opacity: 0;
transform: translateX(20px);
}
// slide-left
.slide-left-enter-from {
@extend .slide-right-leave-to;
}
.slide-left-leave-to {
@extend .slide-right-enter-from;
}
/* 页面切换动画-e */
/* 布局相关-s */
.frontend-footer-brother {
min-height: calc(100vh - 120px);
}
.user-views {
padding-left: 15px;
.user-views-card {
margin-bottom: 15px;
}
}
.ba-aside-drawer {
.el-drawer__body {
padding: 0;
}
}
/* 布局相关-e */
/* 暗黑模式公共样式-s */
.ba-icon-dark {
color: var(--el-text-color-primary) !important;
}
/* 暗黑模式公共样式-e */
/* NProgress-s */
#nprogress {
.bar,
.spinner {
z-index: 2147483600;
}
}
/* NProgress-e */
/* 自适应-s */
@media screen and (max-width: 768px) {
.xs-hidden {
display: none;
}
}
@media screen and (max-width: 1024px) {
.ba-operate-dialog {
width: 96%;
}
}
@media screen and (max-width: 991px) {
.user-views {
padding: 0;
}
}
/* 自适应-e */

27
web/src/styles/dark.scss Normal file
View File

@@ -0,0 +1,27 @@
@use 'sass:map';
@use 'mixins.scss' as *;
@use 'element-plus/theme-chalk/src/dark/css-vars.scss';
// Background
$bg-color: () !default;
$bg-color: map.merge(
(
'': #141414,
'overlay': #1d1e1f,
),
$bg-color
);
// Border
$border-color: () !default;
$border-color: map.merge(
(
'': #4c4d4f,
),
$border-color
);
html.dark {
@include set-component-css-var('bg-color', $bg-color);
@include set-component-css-var('border-color', $border-color);
}

87
web/src/styles/element.scss Normal file
View File

@@ -0,0 +1,87 @@
.el-menu {
user-select: none;
.el-sub-menu__title:hover {
background-color: var(--el-color-primary-light-9) !important;
}
}
.el-table {
--el-table-border-color: var(--ba-border-color);
}
.el-card {
border: none;
.el-card__header {
border-bottom: 1px solid var(--el-border-color-extra-light);
}
}
.el-divider__text.is-center {
transform: translateX(-50%) translateY(-62%);
}
/* 修复 Chrome 浏览器输入框内选中字符行高异常的问题开始 <<< */
.el-input {
.el-input__inner {
line-height: calc(var(--el-input-height, 40px) - 4px);
}
}
/* 修复 Chrome 浏览器输入框内选中字符行高异常的问题结束 >>> */
/* 输入框样式统一开始 <<< */
.el-input-number.is-controls-right {
.el-input__wrapper {
padding-left: 11px;
}
.el-input__inner {
text-align: left;
}
}
.el-textarea__inner {
padding: 5px 11px;
}
.datetime-picker {
height: 32px;
padding-top: 0;
padding-bottom: 0;
}
/* 输入框样式统一结束 >>> */
/* dialog 滚动条样式优化开始 <<< */
.el-overlay-dialog,
.ba-scroll-style {
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-thumb {
background: #eaeaea;
border-radius: var(--el-border-radius-base);
box-shadow: none;
-webkit-box-shadow: none;
}
&:hover {
&::-webkit-scrollbar-thumb:hover {
background: #c8c9cc;
}
}
}
@supports not (selector(::-webkit-scrollbar)) {
.el-overlay-dialog,
.ba-scroll-style {
scrollbar-width: thin;
scrollbar-color: #c8c9cc #eaeaea;
}
}
/* dialog 滚动条样式优化结束 >>> */
/* 小屏设备 el-radio-group 样式优化开始 <<< */
.ba-input-item-radio {
margin-bottom: 10px;
.el-radio-group {
.el-radio {
margin-bottom: 8px;
}
}
}
/* 小屏设备 el-radio-group 样式优化结束 >>> */

5
web/src/styles/index.scss Normal file
View File

@@ -0,0 +1,5 @@
@use '/@/styles/app';
@use '/@/styles/element';
@use '/@/styles/var';
@use '/@/styles/dark';
@use '/@/styles/markdown';

54
web/src/styles/loading.scss Normal file
View File

@@ -0,0 +1,54 @@
.block-loading {
width: 100%;
height: 100%;
position: fixed;
z-index: 2147483600;
background-color: var(--ba-bg-color);
}
.block-loading .block-loading-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.block-loading .block-loading-box-warp {
width: 80px;
height: 80px;
}
.block-loading .block-loading-box-warp .block-loading-box-item {
width: 33.333333%;
height: 33.333333%;
background: #409eff;
float: left;
animation: block-loading-animation 1.2s infinite ease;
border-radius: 1px;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
animation-delay: 0s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
animation-delay: 0.1s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
animation-delay: 0.2s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
animation-delay: 0.3s;
}
.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes block-loading-animation {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}

242
web/src/styles/markdown.scss Normal file
View File

File diff suppressed because one or more lines are too long

30
web/src/styles/mixins.scss Normal file
View File

@@ -0,0 +1,30 @@
@mixin set-css-var-value($name, $value) {
#{joinVarName($name)}: #{$value};
}
@function joinVarName($list) {
$name: '--ba';
@each $item in $list {
@if $item != '' {
$name: $name + '-' + $item;
}
}
@return $name;
}
@function getCssVarName($args...) {
@return joinVarName($args);
}
/*
* 通过映射设置所有的CSS变量
*/
@mixin set-component-css-var($name, $variables) {
@each $attribute, $value in $variables {
@if $attribute == 'default' {
#{getCssVarName($name)}: #{$value};
} @else {
#{getCssVarName($name, $attribute)}: #{$value};
}
}
}

32
web/src/styles/var.scss Normal file
View File

@@ -0,0 +1,32 @@
@use 'sass:map';
@use 'mixins' as *;
// 后台主体窗口左右间距
$main-space: 16px;
$primary-light: #3f6ad8;
// --ba-background
$bg-color: () !default;
$bg-color: map.merge(
(
'': #f5f5f5,
'overlay': #ffffff,
),
$bg-color
);
// --ba-border-color
$border-color: () !default;
$border-color: map.merge(
(
'': #f6f6f6,
),
$border-color
);
:root {
@include set-css-var-value('main-space', $main-space);
@include set-css-var-value('color-primary-light', $primary-light);
@include set-component-css-var('bg-color', $bg-color);
@include set-component-css-var('border-color', $border-color);
}