yunzerwebsite/yunzer_go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加新布局

Browse Source
This commit is contained in:
hero920103
2025-10-29 17:32:34 +08:00
parent 74df0e539c
commit b9938b4c0d
2866 changed files with 11551 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pc/src/assets/less/index.less
+2
View File
@@ -0,0 +1,2 @@
@import './reset.less';
@import './style.less';
pc/src/assets/less/reset.less
+192
View File
@@ -0,0 +1,192 @@
// reset.less - 现代 CSS 样式重置
// 统一盒模型为 border-box
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
// 基础字体与颜色设置
html {
// 基础字体大小 (1rem = 16px)
font-size: 16px;
// 平滑滚动
scroll-behavior: smooth;
height: 100%;
width: 100%;
}
body {
// 继承父级字体设置
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1rem;
line-height: 1.5; // 舒适行高
color: #333; // 基础文本色
background-color: #fff; // 基础背景色
-webkit-text-size-adjust: 100%; // 防止iOS横屏字体放大
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
// 移除默认边框
img,
iframe,
embed,
object,
video {
border: 0;
}
// 图片与媒体元素自适应
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
max-width: 100%;
height: auto;
}
// 表格重置
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
// 列表样式重置
ul,
ol,
li {
list-style: none;
}
// 文本元素重置
a {
color: inherit; // 继承父级颜色
text-decoration: none;
background-color: transparent;
}
a:hover,
a:focus {
outline: none;
}
// 标题元素重置
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
// 表单元素重置
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
// 按钮样式重置
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// 输入框聚焦样式
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
// 文本区域不允许拖拽调整大小
textarea {
overflow: auto;
resize: vertical; // 仅允许垂直调整
}
// 移除占位符默认样式
::-webkit-input-placeholder {
color: #999;
opacity: 1;
}
::-moz-placeholder {
color: #999;
opacity: 1;
}
:-ms-input-placeholder {
color: #999;
opacity: 1;
}
::placeholder {
color: #999;
opacity: 1;
}
// 清除浮动
.clearfix::after {
content: "";
display: table;
clear: both;
}
// 隐藏元素（屏幕阅读器可见）
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
pc/src/assets/less/style.less
+379
View File
@@ -0,0 +1,379 @@
// 主题变量定义
:root {
// 亮色主题
--primary-color: #409eff;
--success-color: #67c23a;
--warning-color: #e6a23c;
--danger-color: #f56c6c;
--info-color: #909399;
// 背景颜色
--bg-color: #ffffff;
--bg-color-page: #f2f3f5;
--bg-color-overlay: #ffffff;
// 文字颜色
--text-color-primary: #303133;
--text-color-regular: #606266;
--text-color-secondary: #909399;
--text-color-placeholder: #c0c4cc;
--text-color-disabled: #c0c4cc;
// 边框颜色
--border-color: #dcdfe6;
--border-color-light: #e4e7ed;
--border-color-lighter: #ebeef5;
--border-color-extra-light: #f2f6fc;
--border-color-dark: #d4d7de;
--border-color-darker: #cdd0d6;
// 填充颜色
--fill-color: #f0f2f5;
--fill-color-light: #f5f7fa;
--fill-color-lighter: #fafafa;
--fill-color-extra-light: #fafcff;
--fill-color-dark: #ebedf0;
--fill-color-darker: #e6e8eb;
--fill-color-blank: #ffffff;
// 阴影
--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
// 头部背景
--header-bg-color: #0081ff;
--header-text-color: #ffffff;
// 侧边栏背景
--aside-bg-color: #0081ff;
--aside-text-color: #ffffff;
// 卡片背景
--card-bg-color: #ffffff;
--card-border-color: #ebeef5;
// Element Plus 组件主题适配
--el-bg-color: var(--bg-color);
--el-bg-color-page: var(--bg-color-page);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-regular);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-border-color: var(--border-color);
--el-fill-color: var(--fill-color);
--el-fill-color-light: var(--fill-color-light);
--el-fill-color-lighter: var(--fill-color-lighter);
--el-fill-color-extra-light: var(--fill-color-extra-light);
--el-fill-color-dark: var(--fill-color-dark);
--el-fill-color-darker: var(--fill-color-darker);
--el-fill-color-blank: var(--fill-color-blank);
}
// 暗色主题
[data-theme="dark"] {
--primary-color: #409eff;
--success-color: #67c23a;
--warning-color: #e6a23c;
--danger-color: #f56c6c;
--info-color: #909399;
// 背景颜色
--bg-color: #1d1e1f;
--bg-color-page: #141414;
--bg-color-overlay: #1d1e1f;
// 文字颜色
--text-color-primary: #e5eaf3;
--text-color-regular: #cfd3dc;
--text-color-secondary: #a3a6ad;
--text-color-placeholder: #6c6e72;
--text-color-disabled: #6c6e72;
// 边框颜色
--border-color: #4c4d4f;
--border-color-light: #414243;
--border-color-lighter: #363637;
--border-color-extra-light: #2b2b2c;
--border-color-dark: #58585b;
--border-color-darker: #636466;
// 填充颜色
--fill-color: #2b2b2c;
--fill-color-light: #262727;
--fill-color-lighter: #1d1e1f;
--fill-color-extra-light: #191919;
--fill-color-dark: #39393a;
--fill-color-darker: #424243;
--fill-color-blank: transparent;
// 阴影
--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
--box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.3);
// 头部背景
--header-bg-color: #252628;
--header-text-color: #e5eaf3;
// 侧边栏背景（暗色模式下保持可见）
--aside-bg-color: #252628;
--aside-text-color: #e5eaf3;
// 卡片背景
--card-bg-color: #252526;
--card-border-color: #3c3c3d;
// Element Plus 组件主题适配
--el-bg-color: var(--bg-color);
--el-bg-color-page: var(--bg-color-page);
--el-text-color-primary: var(--text-color-primary);
--el-text-color-regular: var(--text-color-regular);
--el-text-color-secondary: var(--text-color-secondary);
--el-text-color-placeholder: var(--text-color-placeholder);
--el-border-color: var(--border-color);
--el-fill-color: var(--fill-color);
--el-fill-color-light: var(--fill-color-light);
--el-fill-color-lighter: var(--fill-color-lighter);
--el-fill-color-extra-light: var(--fill-color-extra-light);
--el-fill-color-dark: var(--fill-color-dark);
--el-fill-color-darker: var(--fill-color-darker);
--el-fill-color-blank: var(--fill-color-blank);
}
// 基础样式应用
body {
background-color: var(--bg-color-page);
color: var(--text-color-primary);
transition: background-color 0.3s ease, color 0.3s ease;
}
// 卡片样式
.el-card {
background-color: var(--card-bg-color);
border-color: var(--card-border-color);
color: var(--text-color-primary);
}
// 输入框样式
.el-input__inner {
background-color: var(--fill-color-blank);
border-color: var(--border-color);
color: var(--text-color-primary);
&::placeholder {
color: var(--text-color-placeholder);
}
}
// 按钮样式过渡
.el-button {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
// 表格样式
.el-table {
background-color: var(--bg-color);
color: var(--text-color-primary);
th {
background-color: var(--fill-color-light);
color: var(--text-color-primary);
}
td {
border-color: var(--border-color-lighter);
}
}
// 菜单样式
.el-menu {
background-color: var(--aside-bg-color);
border-color: var(--border-color);
}
// 下拉菜单样式（全局）
.el-dropdown {
.el-dropdown__popper {
.el-dropdown-menu {
background-color: var(--bg-color-overlay) !important;
border-color: var(--border-color) !important;
box-shadow: var(--box-shadow);
.el-dropdown-menu__item {
color: var(--text-color-primary) !important;
transition: background-color 0.2s ease, color 0.2s ease;
.el-icon {
color: var(--text-color-primary) !important;
}
&:not(.is-disabled):hover {
background-color: var(--fill-color-light) !important;
color: var(--text-color-primary) !important;
}
&.is-divided {
border-top-color: var(--border-color) !important;
margin-top: 4px;
padding-top: 4px;
}
}
}
}
}
// 分页组件样式（全局）
.el-pagination {
color: var(--text-color-primary) !important;
transition: color 0.3s ease;
// 按钮样式
.btn-prev,
.btn-next {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-regular) !important;
transition: all 0.3s ease;
&:hover:not(:disabled) {
background-color: var(--fill-color-light) !important;
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
&:disabled {
color: var(--text-color-disabled) !important;
background-color: var(--fill-color) !important;
border-color: var(--border-color-lighter) !important;
cursor: not-allowed;
.el-icon {
color: var(--text-color-disabled) !important;
}
}
.el-icon {
color: inherit;
}
}
// 页码按钮
.el-pager {
li {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-regular) !important;
transition: all 0.3s ease;
&:hover:not(.is-disabled):not(.is-active) {
background-color: var(--fill-color-light) !important;
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
&.is-active {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #ffffff !important;
font-weight: 500;
&:hover {
background-color: var(--primary-color) !important;
opacity: 0.9;
}
}
&.is-disabled {
color: var(--text-color-disabled) !important;
cursor: not-allowed;
background-color: var(--fill-color) !important;
}
}
}
// 输入框和选择器
.el-pagination__sizes {
.el-select {
.el-input__inner {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-primary) !important;
}
}
}
.el-pagination__total {
color: var(--text-color-regular) !important;
font-weight: 400;
}
.el-pagination__jump {
color: var(--text-color-regular) !important;
.el-input__inner {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-primary) !important;
&:focus {
border-color: var(--primary-color) !important;
}
}
}
// 简单分页样式（is-background 模式）
&.is-background {
.btn-prev,
.btn-next {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-regular) !important;
&:hover:not(:disabled) {
background-color: var(--fill-color-light) !important;
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
&:disabled {
background-color: var(--fill-color) !important;
border-color: var(--border-color-lighter) !important;
color: var(--text-color-disabled) !important;
.el-icon {
color: var(--text-color-disabled) !important;
}
}
}
.el-pager {
li {
background-color: var(--fill-color-blank) !important;
border-color: var(--border-color) !important;
color: var(--text-color-regular) !important;
&:hover:not(.is-active):not(.is-disabled) {
background-color: var(--fill-color-light) !important;
border-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
&.is-active {
background-color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #ffffff !important;
}
&.is-disabled {
background-color: var(--fill-color) !important;
border-color: var(--border-color-lighter) !important;
color: var(--text-color-disabled) !important;
}
}
}
}
}