|
|
|
|
@ -1,70 +1,98 @@
|
|
|
|
|
/* 重置body的内边距和外边距为0,消除默认样式影响 */
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 设置html元素的滚动行为为平滑滚动,点击锚点时页面平滑过渡 */
|
|
|
|
|
html {
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 移除卡片的阴影效果:始终有阴影的卡片、聚焦或悬停时有阴影的卡片 */
|
|
|
|
|
.el-card.is-always-shadow,
|
|
|
|
|
.el-card.is-hover-shadow:focus,
|
|
|
|
|
.el-card.is-hover-shadow:hover {
|
|
|
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
|
|
|
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* 阴影偏移、模糊、扩散、颜色均设为0,即无阴影 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 主内容卡片样式:最小高度为视口高度减去126px,确保内容区域占满剩余空间 */
|
|
|
|
|
.main-card {
|
|
|
|
|
min-height: calc(100vh - 126px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 操作按钮容器样式:使用弹性布局,垂直居中对齐,设置上下外边距 */
|
|
|
|
|
.operation-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 1.25rem;
|
|
|
|
|
margin-top: 2.25rem;
|
|
|
|
|
display: flex; /* 启用弹性盒模型 */
|
|
|
|
|
align-items: center; /* 子元素垂直居中 */
|
|
|
|
|
margin-bottom: 1.25rem; /* 底部外边距 */
|
|
|
|
|
margin-top: 2.25rem; /* 顶部外边距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 分页组件容器样式:右浮动,设置上下外边距 */
|
|
|
|
|
.pagination-container {
|
|
|
|
|
float: right;
|
|
|
|
|
margin-top: 1.25rem;
|
|
|
|
|
margin-bottom: 1.25rem;
|
|
|
|
|
float: right; /* 右对齐 */
|
|
|
|
|
margin-top: 1.25rem; /* 顶部外边距 */
|
|
|
|
|
margin-bottom: 1.25rem; /* 底部外边距 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 对话框标题容器样式:弹性布局,垂直居中,字体加粗 */
|
|
|
|
|
.dialog-title-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
display: flex; /* 启用弹性盒模型 */
|
|
|
|
|
align-items: center; /* 子元素垂直居中 */
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 对话框标题中的图标样式:设置字体大小和右外边距 */
|
|
|
|
|
.dialog-title-container i {
|
|
|
|
|
font-size: 1.5rem;
|
|
|
|
|
margin-right: 0.5rem;
|
|
|
|
|
font-size: 1.5rem; /* 图标大小 */
|
|
|
|
|
margin-right: 0.5rem; /* 右侧外边距,与文字间隔 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 富文本编辑器全屏模式样式:高度强制设为100%视口高度 */
|
|
|
|
|
.v-note-wrapper.fullscreen {
|
|
|
|
|
height: 100vh !important;
|
|
|
|
|
height: 100vh !important; /* !important强制覆盖其他样式 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 标题样式:绝对定位在左侧,设置字体大小、粗细和颜色 */
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #202a34;
|
|
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
|
|
left: 0; /* 左对齐 */
|
|
|
|
|
font-size: 16px; /* 字体大小 */
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
color: #202a34; /* 字体颜色 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 标题前的装饰线:通过伪元素添加左侧边框,设置宽度、高度和右外边距 */
|
|
|
|
|
.title::before {
|
|
|
|
|
content: '';
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 16px;
|
|
|
|
|
border-left: 3px solid #0081ff;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
content: ''; /* 伪元素必须设置content属性 */
|
|
|
|
|
width: 24px; /* 宽度 */
|
|
|
|
|
height: 16px; /* 高度 */
|
|
|
|
|
border-left: 3px solid #0081ff; /* 左侧边框样式(宽度、样式、颜色) */
|
|
|
|
|
margin-right: 20px; /* 右侧外边距,与文字间隔 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 侧边导航栏的滚动条样式:隐藏水平滚动条 */
|
|
|
|
|
.side-nav-bar .el-scrollbar__wrap {
|
|
|
|
|
overflow-x: hidden !important;
|
|
|
|
|
overflow-x: hidden !important; /* 强制隐藏水平滚动条 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 上传文件列表项的缩略图样式:保持图片比例并覆盖容器 */
|
|
|
|
|
.el-upload-list__item-thumbnail {
|
|
|
|
|
object-fit: cover !important;
|
|
|
|
|
object-fit: cover !important; /* 图片填充方式:保持比例并覆盖容器,可能裁剪部分内容 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 照片容器中的复选框样式:绝对定位在左上角 */
|
|
|
|
|
.photo-container .el-checkbox__input {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
top: 0.3rem;
|
|
|
|
|
left: 0.8rem;
|
|
|
|
|
position: absolute !important; /* 绝对定位 */
|
|
|
|
|
top: 0.3rem; /* 距离顶部的距离 */
|
|
|
|
|
left: 0.8rem; /* 距离左侧的距离 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 相册选择项中的单选框样式:绝对定位在左上角,提高层级避免被遮挡 */
|
|
|
|
|
.album-check-item .el-radio__input {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
top: 1.2rem;
|
|
|
|
|
left: 0.2rem;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
position: absolute !important; /* 绝对定位 */
|
|
|
|
|
top: 1.2rem; /* 距离顶部的距离 */
|
|
|
|
|
left: 0.2rem; /* 距离左侧的距离 */
|
|
|
|
|
z-index: 1000; /* 层级设为1000,确保在其他元素上方 */
|
|
|
|
|
}
|