first commit
This commit is contained in:
@@ -0,0 +1,2 @@
|
||||
@import './reset.less';
|
||||
@import './style.less';
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,432 @@
|
||||
// Element Plus Message z-index
|
||||
:root {
|
||||
--el-message-z-index: 9999;
|
||||
}
|
||||
|
||||
// body 样式
|
||||
body {
|
||||
// background-color: #f5f7fa;
|
||||
color: #303133;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
// container-box 样式
|
||||
.container-box {
|
||||
// background-color: #ffffff;
|
||||
// border: 1px solid #ebeef5;
|
||||
padding: 24px;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 14px 0 0 0;
|
||||
}
|
||||
|
||||
// 修复 ElMessage 显示问题
|
||||
// 只修复定位，保持 Element Plus 官方样式
|
||||
.el-message {
|
||||
// 确保消息固定在页面顶部中央，不受父容器影响
|
||||
position: fixed !important;
|
||||
z-index: var(--el-message-z-index, 9999) !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.wang-editor-wrapper{
|
||||
border: 1px solid #dcdfe6 !important;
|
||||
|
||||
.toolbar-container{
|
||||
border-bottom: 1px solid #dcdfe6 !important;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1a1a2e !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
font-size: 14px !important;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: 600 !important;
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
s, del {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #1a1a2e !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3973ff !important;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:hover {
|
||||
color: #3973ff !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #f5f7fa !important;
|
||||
color: #1a1a2e !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 3px !important;
|
||||
padding: 2px 6px !important;
|
||||
font-family: 'Consolas', 'Monaco', monospace !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f7fa !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
border-radius: 4px !important;
|
||||
color: #1a1a2e !important;
|
||||
padding: 12px 16px !important;
|
||||
margin: 12px 0 !important;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
color: #1a1a2e !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid #3973ff !important;
|
||||
background-color: #f5f7fa !important;
|
||||
color: #606266 !important;
|
||||
padding: 8px 16px !important;
|
||||
margin: 12px 0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse !important;
|
||||
border: 1px solid #e4e7ed !important;
|
||||
width: 100% !important;
|
||||
|
||||
th, td {
|
||||
border: 1px solid #e4e7ed !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #1a1a2e !important;
|
||||
padding: 8px 12px !important;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f7fa !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc !important;
|
||||
color: #1a1a2e !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal !important;
|
||||
color: #1a1a2e !important;
|
||||
padding-left: 24px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #1a1a2e !important;
|
||||
line-height: 1.8 !important;
|
||||
margin: 4px 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #e4e7ed !important;
|
||||
margin: 16px 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 8px 0 !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
color: #1a1a2e !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
.wang-editor-wrapper {
|
||||
border-color: #3d3d3d !important;
|
||||
background-color: #1a1a1a !important;
|
||||
|
||||
.toolbar-container {
|
||||
background-color: #2d2d2d !important;
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
background-color: #1a1a1a !important;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #4d4d4d !important;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2d2d2d !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.w-e-text),
|
||||
:deep(.w-e-text-container) {
|
||||
background-color: transparent !important;
|
||||
|
||||
* {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #e0e0e0 !important;
|
||||
margin: 8px 0 !important;
|
||||
line-height: 1.8 !important;
|
||||
font-size: 14px !important;
|
||||
text-indent: 0 !important;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: 600 !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
em, i {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
s, del {
|
||||
text-decoration: line-through !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 18px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #e0e0e0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 600 !important;
|
||||
margin: 16px 0 12px !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4f84ff !important;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&:hover {
|
||||
color: #4f84ff !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #2d2d2d !important;
|
||||
color: #e0e0e0 !important;
|
||||
border-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #2d2d2d !important;
|
||||
border-color: #3d3d3d !important;
|
||||
color: #e0e0e0 !important;
|
||||
|
||||
code {
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-color: #4f84ff !important;
|
||||
background-color: #2d2d2d !important;
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
table {
|
||||
border-color: #3d3d3d !important;
|
||||
|
||||
th, td {
|
||||
border-color: #3d3d3d !important;
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #2d2d2d !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol, li {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: #3d3d3d !important;
|
||||
}
|
||||
|
||||
img, video {
|
||||
max-width: 100% !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.w-e-panel-tab-content {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item__label{
|
||||
min-width: 80px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user