吴雨瞳添加了注释

master
wyt 4 months ago
parent 4144c8f9e7
commit 7fac64dafe

@ -1,17 +1,34 @@
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="">
<head>
<!-- HTML根元素lang属性为空表示语言由内容决定 -->
<head>
<!-- 头部区域,包含文档元数据 -->
<meta charset="utf-8" />
<!-- 设置字符编码为UTF-8确保多语言正常显示 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 针对IE浏览器的兼容性设置强制使用最新渲染引擎 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 视口设置width=device-width使宽度适配设备initial-scale=1.0设置初始缩放比例为1 -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<!-- 内容安全策略自动将HTTP请求升级为HTTPS提高安全性 -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>后台管理系统</title>
<script src="<%= BASE_URL %>lib/js/prism.js" data-manual></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="<%= BASE_URL %>lib/css/prism.css" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<!-- 设置网站图标路径使用Vue的BASE_URL变量 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css" />
<!-- 引入KaTeX的CSS文件用于数学公式渲染 -->
<script
src="http://connect.qq.com/qc_jssdk.js"
data-appid="101999415"
data-redirecturi="https://www.linhaojun.top/oauth/login/qq"></script>
<!-- 引入QQ登录SDK配置应用ID和回调地址实现QQ第三方登录 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js"></script>
<!-- 引入KaTeX的JS文件提供数学公式渲染功能 -->
</head>
<!-- 头部区域结束 -->
<body>
<!-- 页面主体内容区域 -->
<div id="app"></div>
<!-- Vue应用的挂载点所有Vue组件将渲染到这个div中 -->
</body>
<!-- 主体区域结束 -->
</html>

@ -1,174 +1,228 @@
/* 定义字体图标集,命名为'iconfont' */
@font-face {
font-family: 'iconfont';
/* 引入不同格式的字体文件确保兼容性t参数为时间戳用于缓存控制 */
src: url('iconfont.eot?t=1642953623912');
/* IE9兼容模式 */
src: url('iconfont.eot?t=1642953623912#iefix') format('embedded-opentype'),
url('iconfont.woff2?t=1642953623912') format('woff2'), url('iconfont.woff?t=1642953623912') format('woff'),
url('iconfont.ttf?t=1642953623912') format('truetype'), url('iconfont.svg?t=1642953623912#iconfont') format('svg');
/* WOFF2格式现代浏览器支持 */
url('iconfont.woff2?t=1642953623912') format('woff2'),
/* WOFF格式广泛支持 */
url('iconfont.woff?t=1642953623912') format('woff'),
/* TrueType格式通用字体格式 */
url('iconfont.ttf?t=1642953623912') format('truetype'),
/* SVG格式用于旧版浏览器 */
url('iconfont.svg?t=1642953623912#iconfont') format('svg');
}
/* 定义字体图标基础样式 */
.iconfont {
/* 使用上面定义的'iconfont'字体 */
font-family: 'iconfont' !important;
/* 去除斜体样式 */
font-style: normal;
/* 针对WebKit浏览器的字体抗锯齿优化 */
-webkit-font-smoothing: antialiased;
/* 针对Firefox OS X的字体抗锯齿优化 */
-moz-osx-font-smoothing: grayscale;
}
/* 动态点击图标 */
.el-icon-myiconfontdongtaidianji:before {
content: '\e62f';
content: '\e62f'; /* 图标对应的Unicode编码 */
}
/* 置顶图标 */
.el-icon-myzhiding:before {
content: '\e64a';
}
/* 评论图标 */
.el-icon-mypinglun:before {
content: '\e63a';
}
/* 表情图标 */
.el-icon-mybiaoqing:before {
content: '\e644';
}
/* 图片图标 */
.el-icon-mytupian:before {
content: '\e691';
}
/* 发布色块图标 */
.el-icon-myfabusekuai:before {
content: '\ec46';
}
/* 公开图标 */
.el-icon-mygongkai:before {
content: '\e6a9';
}
/* 草稿箱图标 */
.el-icon-mycaogaoxiang:before {
content: '\e726';
}
/* 页面配置图标 */
.el-icon-myyemianpeizhi:before {
content: '\e61f';
}
/* 接口管理图标 */
.el-icon-myjiekouguanli:before {
content: '\e624';
}
/* 导航栏图标-权限管理 */
.el-icon-mydaohanglantubiao_quanxianguanli:before {
content: '\e604';
}
/* 回收站图标 */
.el-icon-myhuishouzhan:before {
content: '\e7f2';
}
/* 照片图标 */
.el-icon-myzhaopian:before {
content: '\e623';
}
/* 文件图标 */
.el-icon-myFiles-59:before {
content: '\e7f3';
}
/* 图片填充图标 */
.el-icon-myimage-fill:before {
content: '\eb61';
}
/* 角色列表图标 */
.el-icon-myjiaoseliebiao:before {
content: '\e610';
}
/* 操作日志图标 */
.el-icon-mycaozuorizhi:before {
content: '\e7e8';
}
/* 菜单图标 */
.el-icon-mycaidan:before {
content: '\e60e';
}
/* 发布文章图标 */
.el-icon-myfabiaowenzhang:before {
content: '\e69e';
}
/* 文章列表图标 */
.el-icon-mywenzhangliebiao:before {
content: '\e62c';
}
/* 用户列表图标 */
.el-icon-myyonghuliebiao:before {
content: '\e613';
}
/* 消息图标 */
.el-icon-myxiaoxi:before {
content: '\e60d';
}
/* 留言图标 */
.el-icon-myliuyan:before {
content: '\e606';
}
/* 分类图标 */
.el-icon-myfenlei:before {
content: '\e86c';
}
/* 首页图标 */
.el-icon-myshouye:before {
content: '\e61e';
}
/* 文档图标 */
.el-icon-mywendang:before {
content: '\e622';
}
/* 系统图标 */
.el-icon-myxitong:before {
content: '\e600';
}
/* 评论组图标 */
.el-icon-mypinglunzu:before {
content: '\e765';
}
/* 设置图标 */
.el-icon-myshezhi:before {
content: '\e654';
}
/* 大数据可视化图标 */
.el-icon-mydashujukeshihuaico-:before {
content: '\e7ff';
}
/* 标签图标 */
.el-icon-myicontag:before {
content: '\e61d';
}
/* 列表图标 */
.el-icon-myliebiao:before {
content: '\e645';
}
/* 用户图标 */
.el-icon-myuser:before {
content: '\e607';
}
/* 访问量图标 */
.el-icon-myfangwenliang:before {
content: '\e676';
}
/* 密码图标 */
.el-icon-mymima:before {
content: '\e62e';
}
/* 退出图标 */
.el-icon-mytuichu:before {
content: '\e6c2';
}
/* 窗口缩放图标 */
.el-icon-myicwindowzoom48px:before {
content: '\e603';
}
/* 点赞图标 */
.el-icon-mydianzan:before {
content: '\e60c';
}
/* 文章副本图标 */
.el-icon-mywenzhang-copy:before {
content: '\e643';
}
/* 关于我图标 */
.el-icon-myguanyuwo:before {
content: '\e62b';
}
}

@ -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确保在其他元素上方 */
}
Loading…
Cancel
Save