Merge branch 'master' of https://github.com/zouzhibin/vue-admin-perfect into vue-i18n
This commit is contained in:
zouzhibing
commit
b8aaa067d0
|
|
@ -1,3 +1,4 @@
|
||||||
|
// 文档参考：https://cz-git.qbb.sh/zh/config/
|
||||||
// cz.config.js kk
|
// cz.config.js kk
|
||||||
/** @type {import('cz-git').CommitizenGitOptions} */
|
/** @type {import('cz-git').CommitizenGitOptions} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
@ -7,7 +8,7 @@ module.exports = {
|
||||||
// messages: {
|
// messages: {
|
||||||
// type: 'Select the type of change that you\'re committing:',
|
// type: 'Select the type of change that you\'re committing:',
|
||||||
// scope: 'Denote the SCOPE of this change (optional):',
|
// scope: 'Denote the SCOPE of this change (optional):',
|
||||||
// customScope: 'Denote the SCOPE of this change:',
|
// customScope: 'Denote the SCOPE of this chang e:',
|
||||||
// subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
|
// subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
|
||||||
// body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
|
// body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
|
||||||
// breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
|
// breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
|
||||||
|
|
@ -20,72 +21,29 @@ module.exports = {
|
||||||
// 中英文对照版
|
// 中英文对照版
|
||||||
messages: {
|
messages: {
|
||||||
type: '选择你要提交的类型 :',
|
type: '选择你要提交的类型 :',
|
||||||
scope: '选择一个提交范围 (可选):',
|
scope: '选择一个提交范围（可选）:',
|
||||||
customScope: '请输入自定义的提交范围 :',
|
customScope: '请输入自定义的提交范围 :',
|
||||||
subject: '填写简短精炼的变更描述 :\n',
|
subject: '填写简短精炼的变更描述 :\n',
|
||||||
body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
|
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
|
||||||
breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
|
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
|
||||||
footerPrefixsSelect: '选择关联issue前缀 (可选):',
|
footerPrefixesSelect: '选择关联issue前缀（可选）:',
|
||||||
customFooterPrefixs: '输入自定义issue前缀 :',
|
customFooterPrefix: '输入自定义issue前缀 :',
|
||||||
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
|
footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
|
||||||
confirmCommit: '是否提交或修改commit ?',
|
confirmCommit: '是否提交或修改commit ?'
|
||||||
},
|
},
|
||||||
|
|
||||||
// types: [
|
|
||||||
// { value: 'feat', name: 'feat: A new feature', emoji: ':sparkles:' },
|
|
||||||
// { value: 'fix', name: 'fix: A bug fix', emoji: ':bug:' },
|
|
||||||
// { value: 'docs', name: 'docs: Documentation only changes', emoji: ':memo:' },
|
|
||||||
// { value: 'style', name: 'style: Changes that do not affect the meaning of the code', emoji: ':lipstick:' },
|
|
||||||
// { value: 'refactor', name: 'refactor: A code change that neither fixes a bug nor adds a feature', emoji: ':recycle:' },
|
|
||||||
// { value: 'perf', name: 'perf: A code change that improves performance', emoji: ':zap:' },
|
|
||||||
// { value: 'test', name: 'test: Adding missing tests or correcting existing tests', emoji: ':white_check_mark:' },
|
|
||||||
// { value: 'build', name: 'build: Changes that affect the build system or external dependencies', emoji: ':package:' },
|
|
||||||
// { value: 'ci', name: 'ci: Changes to our CI configuration files and scripts', emoji: ':ferris_wheel:' },
|
|
||||||
// { value: 'chore', name: 'chore: Other changes that don\'t modify src or test files', emoji: ':hammer:' },
|
|
||||||
// { value: 'revert', name: 'revert: Reverts a previous commit', emoji: ':rewind:' }
|
|
||||||
// ],
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
types: [
|
types: [
|
||||||
{ value: 'feat',
|
{ value: '特性', name: '特性: 新增功能' },
|
||||||
name: 'feat: 新增功能',
|
{ value: '修复', name: '修复: 修复缺陷' },
|
||||||
emoji: "💥"
|
{ value: '文档', name: '文档: 文档变更' },
|
||||||
},
|
{ value: '格式', name: '格式: 代码格式（不影响功能，例如空格、分号等格式修正）' },
|
||||||
{ value: 'fix',
|
{ value: '重构', name: '重构: 代码重构（不包括 bug 修复、功能新增）' },
|
||||||
name: 'fix: 修复缺陷',
|
{ value: '性能', name: '性能: 性能优化' },
|
||||||
emoji: "📌"
|
{ value: '测试', name: '测试: 添加疏漏测试或已有测试改动' },
|
||||||
},
|
{ value: '构建', name: '构建: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
|
||||||
{ value: 'docs',
|
{ value: '集成', name: '集成: 修改 CI 配置、脚本' },
|
||||||
name: 'docs: 文档变更',
|
{ value: '回退', name: '回退: 回滚 commit' },
|
||||||
emoji: "📝"
|
{ value: '其他', name: '其他: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
|
||||||
},
|
|
||||||
{ value: 'style',
|
|
||||||
name: 'style: 代码格式',
|
|
||||||
emoji: "🔨"
|
|
||||||
},
|
|
||||||
{ value: 'refactor',
|
|
||||||
name: 'refactor: 代码重构',
|
|
||||||
emoji: "⚡"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'perf',
|
|
||||||
name: 'perf: 性能优化',
|
|
||||||
emoji: "🔥"
|
|
||||||
},
|
|
||||||
{ value: 'test', name: 'test: 添加疏漏测试或已有测试改动',
|
|
||||||
emoji: "🔐"
|
|
||||||
},
|
|
||||||
{ value: 'build', name: 'build: 构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
|
|
||||||
{ value: 'ci',
|
|
||||||
name: 'ci: 修改 CI 配置、脚本',
|
|
||||||
emoji: "🔖"
|
|
||||||
},
|
|
||||||
{ value: 'revert', name: 'revert: 回滚 commit' },
|
|
||||||
{ value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
|
|
||||||
{ value: 'wip', name: 'wip: 正在开发中' },
|
|
||||||
{ value: 'workflow', name: 'workflow: 工作流程改进' },
|
|
||||||
{ value: 'types', name: 'types: 类型定义文件修改' },
|
|
||||||
],
|
],
|
||||||
// emptyScopesAlias: 'empty: 不填写',
|
// emptyScopesAlias: 'empty: 不填写',
|
||||||
// customScopesAlias: 'custom: 自定义',
|
// customScopesAlias: 'custom: 自定义',
|
||||||
|
|
|
||||||
|
|
@ -1,539 +0,0 @@
|
||||||
/* Logo 字体 */
|
|
||||||
@font-face {
|
|
||||||
font-family: "iconfont logo";
|
|
||||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
|
||||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-family: "iconfont logo";
|
|
||||||
font-size: 160px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tabs */
|
|
||||||
.nav-tabs {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-tabs .nav-more {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs {
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs li {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#tabs .active {
|
|
||||||
border-bottom-color: #f00;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-container .content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页面布局 */
|
|
||||||
.main {
|
|
||||||
padding: 30px 100px;
|
|
||||||
width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo {
|
|
||||||
color: #333;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
line-height: 1;
|
|
||||||
height: 110px;
|
|
||||||
margin-top: -50px;
|
|
||||||
overflow: hidden;
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo a {
|
|
||||||
font-size: 160px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.helps {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.helps pre {
|
|
||||||
padding: 20px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: solid 1px #e7e1cd;
|
|
||||||
background-color: #fffdef;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists {
|
|
||||||
width: 100% !important;
|
|
||||||
overflow: hidden;
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li {
|
|
||||||
width: 100px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-right: 20px;
|
|
||||||
text-align: center;
|
|
||||||
list-style: none !important;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li .code-name {
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .icon {
|
|
||||||
display: block;
|
|
||||||
height: 100px;
|
|
||||||
line-height: 100px;
|
|
||||||
font-size: 42px;
|
|
||||||
margin: 10px auto;
|
|
||||||
color: #333;
|
|
||||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .icon:hover {
|
|
||||||
font-size: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .svg-icon {
|
|
||||||
/* 通过设置 font-size 来改变图标大小 */
|
|
||||||
width: 1em;
|
|
||||||
/* 图标和文字相邻时，垂直对齐 */
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
|
||||||
fill: currentColor;
|
|
||||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
|
||||||
normalize.css 中也包含这行 */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li .name,
|
|
||||||
.icon_lists li .code-name {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* markdown 样式 */
|
|
||||||
.markdown {
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown img {
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1 {
|
|
||||||
color: #404040;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h2,
|
|
||||||
.markdown h3,
|
|
||||||
.markdown h4,
|
|
||||||
.markdown h5,
|
|
||||||
.markdown h6 {
|
|
||||||
color: #404040;
|
|
||||||
margin: 1.6em 0 0.6em 0;
|
|
||||||
font-weight: 500;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h3 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h5 {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h6 {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown hr {
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
background: #e9e9e9;
|
|
||||||
margin: 16px 0;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown p {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>p,
|
|
||||||
.markdown>blockquote,
|
|
||||||
.markdown>.highlight,
|
|
||||||
.markdown>ol,
|
|
||||||
.markdown>ul {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ul>li {
|
|
||||||
list-style: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ul li,
|
|
||||||
.markdown blockquote ul>li {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ul li p,
|
|
||||||
.markdown>ol li p {
|
|
||||||
margin: 0.6em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ol>li {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ol li,
|
|
||||||
.markdown blockquote ol>li {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown code {
|
|
||||||
margin: 0 3px;
|
|
||||||
padding: 0 5px;
|
|
||||||
background: #eee;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown strong,
|
|
||||||
.markdown b {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0px;
|
|
||||||
empty-cells: show;
|
|
||||||
border: 1px solid #e9e9e9;
|
|
||||||
width: 95%;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th {
|
|
||||||
white-space: nowrap;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th,
|
|
||||||
.markdown>table td {
|
|
||||||
border: 1px solid #e9e9e9;
|
|
||||||
padding: 8px 16px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th {
|
|
||||||
background: #F7F7F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown blockquote {
|
|
||||||
font-size: 90%;
|
|
||||||
color: #999;
|
|
||||||
border-left: 4px solid #e9e9e9;
|
|
||||||
padding-left: 0.8em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown blockquote p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown .anchor {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown .waiting {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1:hover .anchor,
|
|
||||||
.markdown h2:hover .anchor,
|
|
||||||
.markdown h3:hover .anchor,
|
|
||||||
.markdown h4:hover .anchor,
|
|
||||||
.markdown h5:hover .anchor,
|
|
||||||
.markdown h6:hover .anchor {
|
|
||||||
opacity: 1;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>br,
|
|
||||||
.markdown>p>br {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
background: white;
|
|
||||||
padding: 0.5em;
|
|
||||||
color: #333333;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment,
|
|
||||||
.hljs-meta {
|
|
||||||
color: #969896;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-strong,
|
|
||||||
.hljs-emphasis,
|
|
||||||
.hljs-quote {
|
|
||||||
color: #df5000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-selector-tag,
|
|
||||||
.hljs-type {
|
|
||||||
color: #a71d5d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-attribute {
|
|
||||||
color: #0086b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-section,
|
|
||||||
.hljs-name {
|
|
||||||
color: #63a35c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-tag {
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-attr,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-selector-class,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-selector-pseudo {
|
|
||||||
color: #795da3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #55a532;
|
|
||||||
background-color: #eaffea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #bd2c00;
|
|
||||||
background-color: #ffecec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-link {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 代码高亮 */
|
|
||||||
/* PrismJS 1.15.0
|
|
||||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
|
||||||
/**
|
|
||||||
* prism.js default theme for JavaScript, CSS and HTML
|
|
||||||
* Based on dabblet (http://dabblet.com)
|
|
||||||
* @author Lea Verou
|
|
||||||
*/
|
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
color: black;
|
|
||||||
background: none;
|
|
||||||
text-shadow: 0 1px white;
|
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]::-moz-selection,
|
|
||||||
pre[class*="language-"] ::-moz-selection,
|
|
||||||
code[class*="language-"]::-moz-selection,
|
|
||||||
code[class*="language-"] ::-moz-selection {
|
|
||||||
text-shadow: none;
|
|
||||||
background: #b3d4fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]::selection,
|
|
||||||
pre[class*="language-"] ::selection,
|
|
||||||
code[class*="language-"]::selection,
|
|
||||||
code[class*="language-"] ::selection {
|
|
||||||
text-shadow: none;
|
|
||||||
background: #b3d4fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
|
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre[class*="language-"] {
|
|
||||||
padding: 1em;
|
|
||||||
margin: .5em 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre)>code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
background: #f5f2f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre)>code[class*="language-"] {
|
|
||||||
padding: .1em;
|
|
||||||
border-radius: .3em;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: slategray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted {
|
|
||||||
color: #905;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted {
|
|
||||||
color: #690;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string {
|
|
||||||
color: #9a6e3a;
|
|
||||||
background: hsla(0, 0%, 100%, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword {
|
|
||||||
color: #07a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.function,
|
|
||||||
.token.class-name {
|
|
||||||
color: #DD4A68;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important,
|
|
||||||
.token.variable {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important,
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
@ -1,763 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<title>iconfont Demo</title>
|
|
||||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
|
|
||||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
|
||||||
<link rel="stylesheet" href="demo.css">
|
|
||||||
<link rel="stylesheet" href="iconfont.css">
|
|
||||||
<script src="iconfont.js"></script>
|
|
||||||
<!-- jQuery -->
|
|
||||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
|
||||||
<!-- 代码高亮 -->
|
|
||||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
|
||||||
<style>
|
|
||||||
.main .logo {
|
|
||||||
margin-top: 0;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo .sub-title {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: 22px;
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="main">
|
|
||||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
|
||||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
|
||||||
|
|
||||||
</a></h1>
|
|
||||||
<div class="nav-tabs">
|
|
||||||
<ul id="tabs" class="dib-box">
|
|
||||||
<li class="dib active"><span>Unicode</span></li>
|
|
||||||
<li class="dib"><span>Font class</span></li>
|
|
||||||
<li class="dib"><span>Symbol</span></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3641732" target="_blank" class="nav-more">查看项目</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="tab-container">
|
|
||||||
<div class="content unicode" style="display: block;">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">阴</div>
|
|
||||||
<div class="code-name">&#xe6a0;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">大暴雨</div>
|
|
||||||
<div class="code-name">&#xe6a7;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">刷新</div>
|
|
||||||
<div class="code-name">&#xe627;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">刷新</div>
|
|
||||||
<div class="code-name">&#xe629;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">多云-2-copy</div>
|
|
||||||
<div class="code-name">&#xe68d;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">多云-1</div>
|
|
||||||
<div class="code-name">&#xe679;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">大雪</div>
|
|
||||||
<div class="code-name">&#xe67a;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">大雨</div>
|
|
||||||
<div class="code-name">&#xe67b;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">风</div>
|
|
||||||
<div class="code-name">&#xe67c;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">多云-3</div>
|
|
||||||
<div class="code-name">&#xe67d;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">多云-2</div>
|
|
||||||
<div class="code-name">&#xe67e;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">雷雨交加</div>
|
|
||||||
<div class="code-name">&#xe67f;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">多云</div>
|
|
||||||
<div class="code-name">&#xe680;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">中雨</div>
|
|
||||||
<div class="code-name">&#xe681;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">雾</div>
|
|
||||||
<div class="code-name">&#xe682;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">小雨</div>
|
|
||||||
<div class="code-name">&#xe683;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">小雪</div>
|
|
||||||
<div class="code-name">&#xe684;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">闪电</div>
|
|
||||||
<div class="code-name">&#xe685;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">雪</div>
|
|
||||||
<div class="code-name">&#xe686;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">中雪</div>
|
|
||||||
<div class="code-name">&#xe687;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">扬尘</div>
|
|
||||||
<div class="code-name">&#xe688;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">月亮</div>
|
|
||||||
<div class="code-name">&#xe689;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">雨夹雪</div>
|
|
||||||
<div class="code-name">&#xe68a;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">晴</div>
|
|
||||||
<div class="code-name">&#xe68b;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">霾</div>
|
|
||||||
<div class="code-name">&#xe68c;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="unicode-">Unicode 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
|
||||||
<ul>
|
|
||||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
||||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
|
||||||
</ul>
|
|
||||||
<blockquote>
|
|
||||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>Unicode 使用步骤如下：</p>
|
|
||||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
||||||
<pre><code class="language-css"
|
|
||||||
>@font-face {
|
|
||||||
font-family: 'iconfont';
|
|
||||||
src: url('iconfont.woff2?t=1663216428515') format('woff2'),
|
|
||||||
url('iconfont.woff?t=1663216428515') format('woff'),
|
|
||||||
url('iconfont.ttf?t=1663216428515') format('truetype');
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|
||||||
<pre><code class="language-css"
|
|
||||||
>.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
||||||
<pre>
|
|
||||||
<code class="language-html"
|
|
||||||
><span class="iconfont">&#x33;</span>
|
|
||||||
</code></pre>
|
|
||||||
<blockquote>
|
|
||||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content font-class">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-yin"></span>
|
|
||||||
<div class="name">
|
|
||||||
阴
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-yin
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-dabaoyu"></span>
|
|
||||||
<div class="name">
|
|
||||||
大暴雨
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-dabaoyu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-shuaxin1"></span>
|
|
||||||
<div class="name">
|
|
||||||
刷新
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-shuaxin1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-shuaxin"></span>
|
|
||||||
<div class="name">
|
|
||||||
刷新
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-shuaxin
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-duoyun-2-copy"></span>
|
|
||||||
<div class="name">
|
|
||||||
多云-2-copy
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-duoyun-2-copy
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-duoyun-1"></span>
|
|
||||||
<div class="name">
|
|
||||||
多云-1
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-duoyun-1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-daxue"></span>
|
|
||||||
<div class="name">
|
|
||||||
大雪
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-daxue
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-dayu"></span>
|
|
||||||
<div class="name">
|
|
||||||
大雨
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-dayu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-feng"></span>
|
|
||||||
<div class="name">
|
|
||||||
风
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-feng
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-duoyun-3"></span>
|
|
||||||
<div class="name">
|
|
||||||
多云-3
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-duoyun-3
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-duoyun-2"></span>
|
|
||||||
<div class="name">
|
|
||||||
多云-2
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-duoyun-2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-leiyujiaojia"></span>
|
|
||||||
<div class="name">
|
|
||||||
雷雨交加
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-leiyujiaojia
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-duoyun"></span>
|
|
||||||
<div class="name">
|
|
||||||
多云
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-duoyun
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-zhongyu"></span>
|
|
||||||
<div class="name">
|
|
||||||
中雨
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-zhongyu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-wu"></span>
|
|
||||||
<div class="name">
|
|
||||||
雾
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-wu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-xiaoyu"></span>
|
|
||||||
<div class="name">
|
|
||||||
小雨
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-xiaoyu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-xiaoxue"></span>
|
|
||||||
<div class="name">
|
|
||||||
小雪
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-xiaoxue
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-shandian"></span>
|
|
||||||
<div class="name">
|
|
||||||
闪电
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-shandian
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-xue"></span>
|
|
||||||
<div class="name">
|
|
||||||
雪
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-xue
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-zhongxue"></span>
|
|
||||||
<div class="name">
|
|
||||||
中雪
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-zhongxue
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-yangchen"></span>
|
|
||||||
<div class="name">
|
|
||||||
扬尘
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-yangchen
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-yueliang"></span>
|
|
||||||
<div class="name">
|
|
||||||
月亮
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-yueliang
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-yujiaxue"></span>
|
|
||||||
<div class="name">
|
|
||||||
雨夹雪
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-yujiaxue
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-qing"></span>
|
|
||||||
<div class="name">
|
|
||||||
晴
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-qing
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-mai"></span>
|
|
||||||
<div class="name">
|
|
||||||
霾
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-mai
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="font-class-">font-class 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|
||||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|
||||||
<ul>
|
|
||||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
||||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|
||||||
</ul>
|
|
||||||
<p>使用步骤如下：</p>
|
|
||||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|
||||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
||||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
||||||
</code></pre>
|
|
||||||
<blockquote>
|
|
||||||
<p>"
|
|
||||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content symbol">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-yin"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">阴</div>
|
|
||||||
<div class="code-name">#icon-yin</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-dabaoyu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">大暴雨</div>
|
|
||||||
<div class="code-name">#icon-dabaoyu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-shuaxin1"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">刷新</div>
|
|
||||||
<div class="code-name">#icon-shuaxin1</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-shuaxin"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">刷新</div>
|
|
||||||
<div class="code-name">#icon-shuaxin</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-duoyun-2-copy"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">多云-2-copy</div>
|
|
||||||
<div class="code-name">#icon-duoyun-2-copy</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-duoyun-1"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">多云-1</div>
|
|
||||||
<div class="code-name">#icon-duoyun-1</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-daxue"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">大雪</div>
|
|
||||||
<div class="code-name">#icon-daxue</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-dayu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">大雨</div>
|
|
||||||
<div class="code-name">#icon-dayu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-feng"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">风</div>
|
|
||||||
<div class="code-name">#icon-feng</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-duoyun-3"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">多云-3</div>
|
|
||||||
<div class="code-name">#icon-duoyun-3</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-duoyun-2"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">多云-2</div>
|
|
||||||
<div class="code-name">#icon-duoyun-2</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-leiyujiaojia"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">雷雨交加</div>
|
|
||||||
<div class="code-name">#icon-leiyujiaojia</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-duoyun"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">多云</div>
|
|
||||||
<div class="code-name">#icon-duoyun</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-zhongyu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">中雨</div>
|
|
||||||
<div class="code-name">#icon-zhongyu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-wu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">雾</div>
|
|
||||||
<div class="code-name">#icon-wu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-xiaoyu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">小雨</div>
|
|
||||||
<div class="code-name">#icon-xiaoyu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-xiaoxue"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">小雪</div>
|
|
||||||
<div class="code-name">#icon-xiaoxue</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-shandian"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">闪电</div>
|
|
||||||
<div class="code-name">#icon-shandian</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-xue"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">雪</div>
|
|
||||||
<div class="code-name">#icon-xue</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-zhongxue"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">中雪</div>
|
|
||||||
<div class="code-name">#icon-zhongxue</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-yangchen"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">扬尘</div>
|
|
||||||
<div class="code-name">#icon-yangchen</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-yueliang"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">月亮</div>
|
|
||||||
<div class="code-name">#icon-yueliang</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-yujiaxue"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">雨夹雪</div>
|
|
||||||
<div class="code-name">#icon-yujiaxue</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-qing"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">晴</div>
|
|
||||||
<div class="code-name">#icon-qing</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-mai"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">霾</div>
|
|
||||||
<div class="code-name">#icon-mai</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="symbol-">Symbol 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
||||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|
||||||
<ul>
|
|
||||||
<li>支持多色图标了，不再受单色限制。</li>
|
|
||||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
||||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|
||||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|
||||||
</ul>
|
|
||||||
<p>使用步骤如下：</p>
|
|
||||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|
||||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
||||||
<pre><code class="language-html"><style>
|
|
||||||
.icon {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
fill: currentColor;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
||||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-xxx"></use>
|
|
||||||
</svg>
|
|
||||||
</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
$('.tab-container .content:first').show()
|
|
||||||
|
|
||||||
$('#tabs li').click(function (e) {
|
|
||||||
var tabContent = $('.tab-container .content')
|
|
||||||
var index = $(this).index()
|
|
||||||
|
|
||||||
if ($(this).hasClass('active')) {
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
$('#tabs li').removeClass('active')
|
|
||||||
$(this).addClass('active')
|
|
||||||
|
|
||||||
tabContent.hide().eq(index).fadeIn()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 653 B |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 496 B |
Binary file not shown.
|
Before Width: | Height: | Size: 208 KiB |
|
|
@ -69,7 +69,6 @@
|
||||||
import SwitchDark from '@/components/SwitchDark/index.vue'
|
import SwitchDark from '@/components/SwitchDark/index.vue'
|
||||||
import {PRIMARY_COLOR} from "@/config/index";
|
import {PRIMARY_COLOR} from "@/config/index";
|
||||||
import {useSettingStore} from "@/store/modules/setting"
|
import {useSettingStore} from "@/store/modules/setting"
|
||||||
import {getDarkColor,getLightColor} from '@/utils/index'
|
|
||||||
|
|
||||||
const SettingStore = useSettingStore()
|
const SettingStore = useSettingStore()
|
||||||
const layout = ref(SettingStore.themeConfig.mode)
|
const layout = ref(SettingStore.themeConfig.mode)
|
||||||
|
|
@ -86,9 +85,7 @@
|
||||||
return SettingStore.themeConfig.showSetting;
|
return SettingStore.themeConfig.showSetting;
|
||||||
},
|
},
|
||||||
set() {
|
set() {
|
||||||
|
|
||||||
changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
|
changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -135,16 +132,7 @@
|
||||||
primary.value = val = PRIMARY_COLOR;
|
primary.value = val = PRIMARY_COLOR;
|
||||||
ElMessage({ type: "success", message: `主题颜色已重置为 ${PRIMARY_COLOR}` });
|
ElMessage({ type: "success", message: `主题颜色已重置为 ${PRIMARY_COLOR}` });
|
||||||
}
|
}
|
||||||
// 颜色加深
|
|
||||||
document.documentElement.style.setProperty("--el-color-primary-dark-2", `${getDarkColor(val, 0.1)}`);
|
|
||||||
document.documentElement.style.setProperty("--el-color-primary", val);
|
document.documentElement.style.setProperty("--el-color-primary", val);
|
||||||
// 颜色变浅
|
|
||||||
for (let i = 1; i <= 9; i++) {
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
`--el-color-primary-light-${i}`,
|
|
||||||
`${getLightColor(val, i / 10)}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
changeSwitch('primary',val)
|
changeSwitch('primary',val)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||||
<transition-group name="breadcrumb" mode="out-in">
|
<transition-group name="breadcrumb" mode="out-in">
|
||||||
<!-- 首页面包屑不要可以直接删除 🙅♀️ -->
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
|
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
|
||||||
<div class="breadcrumb-item">
|
<div class="breadcrumb-item">
|
||||||
<span class="breadcrumb-title">首页</span>
|
<span class="breadcrumb-title">首页</span>
|
||||||
|
|
@ -16,7 +15,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { useRoute ,useRouter} from 'vue-router'
|
import { useRoute ,useRouter} from 'vue-router'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
@ -28,8 +27,6 @@ const handleLink = (item)=>{
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
|
const matched = computed(() => route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false));
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@
|
||||||
<div class="sidebar-logo-container">
|
<div class="sidebar-logo-container">
|
||||||
<transition name="sidebarLogoFadeCl">
|
<transition name="sidebarLogoFadeCl">
|
||||||
<router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
|
<router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||||
<img src="@/assets/logo.png" class="sidebar-logo">
|
<img src="@/assets/image/logo.png" class="sidebar-logo">
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||||
<img src="@/assets/logo.png" class="sidebar-logo">
|
<img src="@/assets/image/logo.png" class="sidebar-logo">
|
||||||
<h1 class="sidebar-title">Vue Admin Perfect</h1>
|
<h1 class="sidebar-title">Vue Admin Perfect</h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</transition>
|
</transition>
|
||||||
|
|
|
||||||
|
|
@ -48,8 +48,6 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,7 @@
|
||||||
// 暗黑模式自定义样式
|
// 暗黑模式自定义样式
|
||||||
html.dark {
|
html.dark {
|
||||||
/* 自定义深色背景颜色 */
|
/* 自定义深色背景颜色 */
|
||||||
//--el-bg-color: #141414;
|
|
||||||
//--el-color-primary: #409eff;
|
|
||||||
//--el-color-primary-light-3: #3375b9;
|
|
||||||
//--el-color-primary-light-5: #2a598a;
|
|
||||||
//--el-color-primary-light-7: #213d5b;
|
|
||||||
//--el-color-primary-light-8: #1d3043;
|
|
||||||
//--el-color-primary-light-9: #18222c;
|
|
||||||
//--el-color-primary-dark-2: #66b1ff;
|
|
||||||
//--el-color-success: #67c23a;
|
|
||||||
//--el-color-success-light-3: #4e8e2f;
|
|
||||||
//--el-color-success-light-5: #3e6b27;
|
|
||||||
//--el-color-success-light-7: #2d481f;
|
|
||||||
//--el-color-success-light-8: #25371c;
|
|
||||||
//--el-color-success-light-9: #1c2518;
|
|
||||||
//--el-color-success-dark-2: #85ce61;
|
|
||||||
//--el-color-warning: #e6a23c;
|
|
||||||
//--el-color-warning-light-3: #a77730;
|
|
||||||
//--el-color-warning-light-5: #7d5b28;
|
|
||||||
//--el-color-warning-light-7: #533f20;
|
|
||||||
//--el-color-warning-light-8: #3e301c;
|
|
||||||
//--el-color-warning-light-9: #292218;
|
|
||||||
//--el-color-warning-dark-2: #ebb563;
|
|
||||||
//--el-color-danger: #f56c6c;
|
|
||||||
//--el-color-danger-light-3: #b25252;
|
|
||||||
//--el-color-danger-light-5: #854040;
|
|
||||||
//--el-color-danger-light-7: #582e2e;
|
|
||||||
//--el-color-danger-light-8: #412626;
|
|
||||||
//--el-color-danger-light-9: #2b1d1d;
|
|
||||||
//--el-color-danger-dark-2: #f78989;
|
|
||||||
//--el-color-error: #f56c6c;
|
|
||||||
//--el-color-error-light-3: #b25252;
|
|
||||||
//--el-color-error-light-5: #854040;
|
|
||||||
//--el-color-error-light-7: #582e2e;
|
|
||||||
//--el-color-error-light-8: #412626;
|
|
||||||
//--el-color-error-light-9: #2b1d1d;
|
|
||||||
//--el-color-error-dark-2: #f78989;
|
|
||||||
//--el-color-info: #909399;
|
|
||||||
//--el-color-info-light-3: #6b6d71;
|
|
||||||
//--el-color-info-light-5: #525457;
|
|
||||||
//--el-color-info-light-7: #393a3c;
|
|
||||||
//--el-color-info-light-8: #2d2d2f;
|
|
||||||
//--el-color-info-light-9: #202121;
|
|
||||||
//--el-color-info-dark-2: #a6a9ad;
|
|
||||||
//--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36),0px 8px 20px rgba(0, 0, 0, 0.72);
|
|
||||||
//--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
|
|
||||||
//--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
|
|
||||||
//--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;
|
|
||||||
//--el-bg-color-page: #0a0a0a;
|
|
||||||
//--el-bg-color: #141414;
|
//--el-bg-color: #141414;
|
||||||
//--el-bg-color-overlay: #1d1e1f;
|
//--el-bg-color-overlay: #1d1e1f;
|
||||||
|
|
||||||
|
|
@ -204,17 +157,19 @@ html.dark {
|
||||||
|
|
||||||
// 登录
|
// 登录
|
||||||
.login-container {
|
.login-container {
|
||||||
background-color: var(--el-fill-color-extra-light) !important;
|
background-color: #191919 !important;
|
||||||
.login-box {
|
.login-box {
|
||||||
background-color: var(--el-mask-color) !important;
|
background-color: #000000cc !important;
|
||||||
.login-form {
|
.login-form {
|
||||||
background-color: var(--el-bg-color) !important;
|
background-color: #141414 !important;
|
||||||
box-shadow: var(--geeker-login-shadow-light) !important;
|
|
||||||
.title {
|
.title {
|
||||||
color: var(--el-text-color-primary) !important;
|
color: var(--el-text-color-primary) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.info-qrcode{
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar{
|
.el-scrollbar{
|
||||||
|
|
|
||||||
|
|
@ -359,14 +359,15 @@ export function getColor() {
|
||||||
export const isArray = function (value) {
|
export const isArray = function (value) {
|
||||||
return objToString.call(value) === '[object Array]'
|
return objToString.call(value) === '[object Array]'
|
||||||
}
|
}
|
||||||
var funProto = Function.prototype
|
|
||||||
var objProto = Object.prototype
|
|
||||||
|
|
||||||
var getPrototypeOf = Object.getPrototypeOf
|
let funProto = Function.prototype
|
||||||
|
let objProto = Object.prototype
|
||||||
|
|
||||||
var objToString = objProto.toString
|
let getPrototypeOf = Object.getPrototypeOf
|
||||||
var hasOwnProperty = objProto.hasOwnProperty
|
|
||||||
var funToString = funProto.toString
|
let objToString = objProto.toString
|
||||||
|
let hasOwnProperty = objProto.hasOwnProperty
|
||||||
|
let funToString = funProto.toString
|
||||||
// 检查给定的值是否是字符串
|
// 检查给定的值是否是字符串
|
||||||
export const isString = function (value) {
|
export const isString = function (value) {
|
||||||
return objToString.call(value) === '[object String]'
|
return objToString.call(value) === '[object String]'
|
||||||
|
|
@ -377,13 +378,13 @@ export const isPlainObject = function (value) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
var prototype = getPrototypeOf(value)
|
let prototype = getPrototypeOf(value)
|
||||||
|
|
||||||
if (prototype === null) {
|
if (prototype === null) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
var constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
|
let constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
|
||||||
|
|
||||||
return (
|
return (
|
||||||
typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
|
typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
|
||||||
|
|
@ -408,11 +409,11 @@ export const deepObjClone = function (obj) {
|
||||||
if (weakMap.get(obj)) {
|
if (weakMap.get(obj)) {
|
||||||
return weakMap.get(obj)
|
return weakMap.get(obj)
|
||||||
}
|
}
|
||||||
var copy = new obj.constructor()
|
let copy = new obj.constructor()
|
||||||
weakMap.set(obj, copy)
|
weakMap.set(obj, copy)
|
||||||
for (var key in obj) {
|
for (let key in obj) {
|
||||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||||
var value = obj[key]
|
let value = obj[key]
|
||||||
copy[key] = clone(value)
|
copy[key] = clone(value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -420,75 +421,14 @@ export const deepObjClone = function (obj) {
|
||||||
}
|
}
|
||||||
return clone(obj)
|
return clone(obj)
|
||||||
}
|
}
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* hex颜色转rgb颜色
|
|
||||||
* @param str 颜色值字符串
|
|
||||||
* @returns 返回处理后的颜色值
|
|
||||||
*/
|
|
||||||
export function hexToRgb(str: any) {
|
|
||||||
let hexs: any = "";
|
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
|
||||||
if (!reg.test(str)) return ElMessage.warning("输入错误的hex");
|
|
||||||
str = str.replace("#", "");
|
|
||||||
hexs = str.match(/../g);
|
|
||||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
|
||||||
return hexs;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
export function getTimeStateStr() {
|
||||||
* rgb颜色转Hex颜色
|
|
||||||
* @param r 代表红色
|
|
||||||
* @param g 代表绿色
|
|
||||||
* @param b 代表蓝色
|
|
||||||
* @returns 返回处理后的颜色值
|
|
||||||
*/
|
|
||||||
export function rgbToHex(r: any, g: any, b: any) {
|
|
||||||
let reg = /^\d{1,3}$/;
|
|
||||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning("输入错误的rgb颜色值");
|
|
||||||
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
|
||||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
|
||||||
return `#${hexs.join("")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 加深颜色值
|
|
||||||
* @param color 颜色值字符串
|
|
||||||
* @param level 加深的程度，限0-1之间
|
|
||||||
* @returns 返回处理后的颜色值
|
|
||||||
*/
|
|
||||||
export function getDarkColor(color: string, level: number) {
|
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
|
||||||
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
|
|
||||||
let rgb = hexToRgb(color);
|
|
||||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
|
||||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 变浅颜色值
|
|
||||||
* @param color 颜色值字符串
|
|
||||||
* @param level 加深的程度，限0-1之间
|
|
||||||
* @returns 返回处理后的颜色值
|
|
||||||
*/
|
|
||||||
export function getLightColor(color: string, level: number) {
|
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
|
||||||
if (!reg.test(color)) return ElMessage.warning("输入错误的hex颜色值");
|
|
||||||
let rgb = hexToRgb(color);
|
|
||||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
|
||||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getTimeState() {
|
|
||||||
// 获取当前时间
|
|
||||||
let timeNow = new Date();
|
let timeNow = new Date();
|
||||||
// 获取当前小时
|
|
||||||
let hours = timeNow.getHours();
|
let hours = timeNow.getHours();
|
||||||
// 判断当前时间段
|
if (hours >= 6 && hours <= 10) return `早上好`;
|
||||||
if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
|
if (hours >= 10 && hours <= 14) return `中午好`;
|
||||||
if (hours >= 10 && hours <= 14) return `中午好 🌞`;
|
if (hours >= 14 && hours <= 18) return `下午好`;
|
||||||
if (hours >= 14 && hours <= 18) return `下午好 🌞`;
|
if (hours >= 18 && hours <= 24) return `晚上好`;
|
||||||
if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
|
if (hours >= 0 && hours <= 6) return `凌晨好`;
|
||||||
if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,6 @@ export function hasPermission(roles, route) {
|
||||||
* @return void
|
* @return void
|
||||||
* */
|
* */
|
||||||
|
|
||||||
|
|
||||||
export function filterKeepAlive(routers){
|
export function filterKeepAlive(routers){
|
||||||
let cacheRouter: any[] = [];
|
let cacheRouter: any[] = [];
|
||||||
let deep = (routers)=>{
|
let deep = (routers)=>{
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="login-title">
|
||||||
|
<img class="icon" src="@/assets/image/logo.png" alt="logo" />
|
||||||
|
<h2 class="title">Vue-Admin-Perfect</h2>
|
||||||
|
</div>
|
||||||
<el-form
|
<el-form
|
||||||
ref="ruleFormRef"
|
ref="ruleFormRef"
|
||||||
:model="ruleForm"
|
:model="ruleForm"
|
||||||
|
|
@ -54,7 +58,7 @@ import type { FormInstance } from 'element-plus'
|
||||||
import { ElNotification } from "element-plus";
|
import { ElNotification } from "element-plus";
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import {useUserStore} from "@/store/modules/user"
|
import {useUserStore} from "@/store/modules/user"
|
||||||
import {getTimeState} from '@/utils/index'
|
import {getTimeStateStr} from '@/utils/index'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const UserStore = useUserStore()
|
const UserStore = useUserStore()
|
||||||
|
|
@ -90,7 +94,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
|
||||||
path: '/',
|
path: '/',
|
||||||
})
|
})
|
||||||
ElNotification({
|
ElNotification({
|
||||||
title: getTimeState(),
|
title: getTimeStateStr(),
|
||||||
message: "欢迎登录 Vue Admin Perfect",
|
message: "欢迎登录 Vue Admin Perfect",
|
||||||
type: "success",
|
type: "success",
|
||||||
duration: 3000
|
duration: 3000
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<div class="login-qrcode">
|
||||||
|
<h2 class="title">Vue-Admin-Perfect</h2>
|
||||||
|
<vue-qr text="https://github.com/zouzhibin/vue-admin-perfect" ></vue-qr>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../index";
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -22,6 +22,36 @@ $dark_gray: #889aa4;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.info-qrcode{
|
||||||
|
width: 150px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
position: absolute;
|
||||||
|
top: -60px;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #1492ff;
|
||||||
|
font-size: 16px;
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 10px;
|
||||||
|
height: 26px;
|
||||||
|
border-top: 13px solid #fff;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-bottom: 13px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.login-title{
|
.login-title{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -74,6 +104,26 @@ $dark_gray: #889aa4;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qrcode{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
.login-qrcode{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
img{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 850px){
|
@media (max-width: 850px){
|
||||||
.login-container{
|
.login-container{
|
||||||
|
|
|
||||||
|
|
@ -6,19 +6,28 @@
|
||||||
<img src="@/assets/image/login/side-logo.png" >
|
<img src="@/assets/image/login/side-logo.png" >
|
||||||
</div>
|
</div>
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<div class="login-title">
|
<div class="info-qrcode" >{{ accountLogin?'扫码登录':'账号登录' }}</div>
|
||||||
<img class="icon" src="@/assets/logo.png" alt="logo" />
|
<img src="@/assets/image/login/qrcode-icon.png" class="qrcode" @click="handleClick">
|
||||||
<h2 class="title">Vue-Admin-Perfect</h2>
|
|
||||||
</div>
|
<LoginForm v-if="accountLogin"/>
|
||||||
<LoginForm/>
|
<LoginQrcode v-else/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import {ref} from 'vue'
|
||||||
import LoginForm from './components/LoginForm.vue'
|
import LoginForm from './components/LoginForm.vue'
|
||||||
import SwitchDark from '@/components/SwitchDark/index.vue'
|
import SwitchDark from '@/components/SwitchDark/index.vue'
|
||||||
|
import LoginQrcode from './components/LoginQrcode.vue'
|
||||||
|
|
||||||
|
const accountLogin = ref<boolean>(true)
|
||||||
|
|
||||||
|
const handleClick = ()=>{
|
||||||
|
console.log('=======',accountLogin)
|
||||||
|
accountLogin.value=!accountLogin.value
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "./index";
|
@import "./index";
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import printJS from 'print-js'
|
import printJS from 'print-js'
|
||||||
import '@/utils/Print'
|
import '@/utils/Print'
|
||||||
import logo from '@/assets/logo.png'
|
import logo from '@/assets/image/logo.png'
|
||||||
|
|
||||||
const tableData = [
|
const tableData = [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
|
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
|
||||||
import three from '@/assets/logo.png'
|
import three from '@/assets/image/logo.png'
|
||||||
import { getColor } from '@/utils/index'
|
import { getColor } from '@/utils/index'
|
||||||
const logoSrc = ref(null)
|
const logoSrc = ref(null)
|
||||||
const qrcodeUrl = ref(null)
|
const qrcodeUrl = ref(null)
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Upload from '@/components/Upload/index.vue'
|
import Upload from '@/components/Upload/index.vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import logo from '@/assets/logo.png'
|
import logo from '@/assets/image/logo.png'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
const imgs = ref([
|
const imgs = ref([
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue