diff --git a/aurora-vue/aurora-admin/public/index.html b/aurora-vue/aurora-admin/public/index.html index b4f95dd..ad9d469 100644 --- a/aurora-vue/aurora-admin/public/index.html +++ b/aurora-vue/aurora-admin/public/index.html @@ -1,17 +1,34 @@ + - + + + + + + + - 后台管理系统 - - - - - -
- - + + + + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/aurora-vue/aurora-admin/src/assets/css/iconfont.css b/aurora-vue/aurora-admin/src/assets/css/iconfont.css index 07493ad..1b632a1 100644 --- a/aurora-vue/aurora-admin/src/assets/css/iconfont.css +++ b/aurora-vue/aurora-admin/src/assets/css/iconfont.css @@ -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'; -} +} \ No newline at end of file diff --git a/aurora-vue/aurora-admin/src/assets/css/index.css b/aurora-vue/aurora-admin/src/assets/css/index.css index 95c88e7..a00ce6c 100644 --- a/aurora-vue/aurora-admin/src/assets/css/index.css +++ b/aurora-vue/aurora-admin/src/assets/css/index.css @@ -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，确保在其他元素上方 */ +} \ No newline at end of file