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
|
||||
/** @type {import('cz-git').CommitizenGitOptions} */
|
||||
module.exports = {
|
||||
|
|
@ -20,72 +21,29 @@ module.exports = {
|
|||
// 中英文对照版
|
||||
messages: {
|
||||
type: '选择你要提交的类型 :',
|
||||
scope: '选择一个提交范围 (可选):',
|
||||
scope: '选择一个提交范围（可选）:',
|
||||
customScope: '请输入自定义的提交范围 :',
|
||||
subject: '填写简短精炼的变更描述 :\n',
|
||||
body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
|
||||
breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
|
||||
footerPrefixsSelect: '选择关联issue前缀 (可选):',
|
||||
customFooterPrefixs: '输入自定义issue前缀 :',
|
||||
body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
|
||||
breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
|
||||
footerPrefixesSelect: '选择关联issue前缀（可选）:',
|
||||
customFooterPrefix: '输入自定义issue前缀 :',
|
||||
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: [
|
||||
{ value: 'feat',
|
||||
name: 'feat: 新增功能',
|
||||
emoji: "💥"
|
||||
},
|
||||
{ value: 'fix',
|
||||
name: 'fix: 修复缺陷',
|
||||
emoji: "📌"
|
||||
},
|
||||
{ value: 'docs',
|
||||
name: 'docs: 文档变更',
|
||||
emoji: "📝"
|
||||
},
|
||||
{ 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: 类型定义文件修改' },
|
||||
{ value: '特性', name: '特性: 新增功能' },
|
||||
{ value: '修复', name: '修复: 修复缺陷' },
|
||||
{ value: '文档', name: '文档: 文档变更' },
|
||||
{ value: '格式', name: '格式: 代码格式（不影响功能，例如空格、分号等格式修正）' },
|
||||
{ value: '重构', name: '重构: 代码重构（不包括 bug 修复、功能新增）' },
|
||||
{ value: '性能', name: '性能: 性能优化' },
|
||||
{ value: '测试', name: '测试: 添加疏漏测试或已有测试改动' },
|
||||
{ value: '构建', name: '构建: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
|
||||
{ value: '集成', name: '集成: 修改 CI 配置、脚本' },
|
||||
{ value: '回退', name: '回退: 回滚 commit' },
|
||||
{ value: '其他', name: '其他: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
|
||||
|
||||
],
|
||||
// emptyScopesAlias: 'empty: 不填写',
|
||||
// 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 {PRIMARY_COLOR} from "@/config/index";
|
||||
import {useSettingStore} from "@/store/modules/setting"
|
||||
import {getDarkColor,getLightColor} from '@/utils/index'
|
||||
|
||||
const SettingStore = useSettingStore()
|
||||
const layout = ref(SettingStore.themeConfig.mode)
|
||||
|
|
@ -86,9 +85,7 @@
|
|||
return SettingStore.themeConfig.showSetting;
|
||||
},
|
||||
set() {
|
||||
|
||||
changeSwitch('showSetting',!SettingStore.themeConfig.showSetting)
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -135,16 +132,7 @@
|
|||
primary.value = val = 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);
|
||||
// 颜色变浅
|
||||
for (let i = 1; i <= 9; i++) {
|
||||
document.documentElement.style.setProperty(
|
||||
`--el-color-primary-light-${i}`,
|
||||
`${getLightColor(val, i / 10)}`
|
||||
);
|
||||
}
|
||||
changeSwitch('primary',val)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb" mode="out-in">
|
||||
<!-- 首页面包屑不要可以直接删除 🙅♀️ -->
|
||||
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
|
||||
<div class="breadcrumb-item">
|
||||
<span class="breadcrumb-title">首页</span>
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute ,useRouter} from 'vue-router'
|
||||
|
||||
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));
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<div class="sidebar-logo-container">
|
||||
<transition name="sidebarLogoFadeCl">
|
||||
<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 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>
|
||||
</router-link>
|
||||
</transition>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,6 @@
|
|||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,7 @@
|
|||
// 暗黑模式自定义样式
|
||||
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-overlay: #1d1e1f;
|
||||
|
||||
|
|
@ -204,17 +157,19 @@ html.dark {
|
|||
|
||||
// 登录
|
||||
.login-container {
|
||||
background-color: var(--el-fill-color-extra-light) !important;
|
||||
background-color: #191919 !important;
|
||||
.login-box {
|
||||
background-color: var(--el-mask-color) !important;
|
||||
background-color: #000000cc !important;
|
||||
.login-form {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
box-shadow: var(--geeker-login-shadow-light) !important;
|
||||
background-color: #141414 !important;
|
||||
.title {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-qrcode{
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar{
|
||||
|
|
|
|||
|
|
@ -359,14 +359,15 @@ export function getColor() {
|
|||
export const isArray = function (value) {
|
||||
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
|
||||
var hasOwnProperty = objProto.hasOwnProperty
|
||||
var funToString = funProto.toString
|
||||
let getPrototypeOf = Object.getPrototypeOf
|
||||
|
||||
let objToString = objProto.toString
|
||||
let hasOwnProperty = objProto.hasOwnProperty
|
||||
let funToString = funProto.toString
|
||||
// 检查给定的值是否是字符串
|
||||
export const isString = function (value) {
|
||||
return objToString.call(value) === '[object String]'
|
||||
|
|
@ -377,13 +378,13 @@ export const isPlainObject = function (value) {
|
|||
return false
|
||||
}
|
||||
|
||||
var prototype = getPrototypeOf(value)
|
||||
let prototype = getPrototypeOf(value)
|
||||
|
||||
if (prototype === null) {
|
||||
return true
|
||||
}
|
||||
|
||||
var constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
|
||||
let constructor = hasOwnProperty.call(prototype, 'constructor') && prototype.constructor
|
||||
|
||||
return (
|
||||
typeof constructor === 'function' && funToString.call(constructor) === funToString.call(Object)
|
||||
|
|
@ -408,11 +409,11 @@ export const deepObjClone = function (obj) {
|
|||
if (weakMap.get(obj)) {
|
||||
return weakMap.get(obj)
|
||||
}
|
||||
var copy = new obj.constructor()
|
||||
let copy = new obj.constructor()
|
||||
weakMap.set(obj, copy)
|
||||
for (var key in obj) {
|
||||
for (let key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
var value = obj[key]
|
||||
let value = obj[key]
|
||||
copy[key] = clone(value)
|
||||
}
|
||||
}
|
||||
|
|
@ -420,75 +421,14 @@ export const deepObjClone = function (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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
// 获取当前时间
|
||||
export function getTimeStateStr() {
|
||||
let timeNow = new Date();
|
||||
// 获取当前小时
|
||||
let hours = timeNow.getHours();
|
||||
// 判断当前时间段
|
||||
if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
|
||||
if (hours >= 10 && hours <= 14) return `中午好 🌞`;
|
||||
if (hours >= 14 && hours <= 18) return `下午好 🌞`;
|
||||
if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
|
||||
if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
|
||||
if (hours >= 6 && hours <= 10) return `早上好`;
|
||||
if (hours >= 10 && hours <= 14) return `中午好`;
|
||||
if (hours >= 14 && hours <= 18) return `下午好`;
|
||||
if (hours >= 18 && hours <= 24) return `晚上好`;
|
||||
if (hours >= 0 && hours <= 6) return `凌晨好`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@ export function hasPermission(roles, route) {
|
|||
* @return void
|
||||
* */
|
||||
|
||||
|
||||
export function filterKeepAlive(routers){
|
||||
let cacheRouter: any[] = [];
|
||||
let deep = (routers)=>{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<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
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
|
|
@ -54,7 +58,7 @@ import type { FormInstance } from 'element-plus'
|
|||
import { ElNotification } from "element-plus";
|
||||
import { useRouter } from 'vue-router'
|
||||
import {useUserStore} from "@/store/modules/user"
|
||||
import {getTimeState} from '@/utils/index'
|
||||
import {getTimeStateStr} from '@/utils/index'
|
||||
|
||||
const router = useRouter()
|
||||
const UserStore = useUserStore()
|
||||
|
|
@ -90,7 +94,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
|
|||
path: '/',
|
||||
})
|
||||
ElNotification({
|
||||
title: getTimeState(),
|
||||
title: getTimeStateStr(),
|
||||
message: "欢迎登录 Vue Admin Perfect",
|
||||
type: "success",
|
||||
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;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
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{
|
||||
display: flex;
|
||||
|
|
@ -74,6 +104,26 @@ $dark_gray: #889aa4;
|
|||
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){
|
||||
.login-container{
|
||||
|
|
|
|||
|
|
@ -6,19 +6,28 @@
|
|||
<img src="@/assets/image/login/side-logo.png" >
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div class="login-title">
|
||||
<img class="icon" src="@/assets/logo.png" alt="logo" />
|
||||
<h2 class="title">Vue-Admin-Perfect</h2>
|
||||
</div>
|
||||
<LoginForm/>
|
||||
<div class="info-qrcode" >{{ accountLogin?'扫码登录':'账号登录' }}</div>
|
||||
<img src="@/assets/image/login/qrcode-icon.png" class="qrcode" @click="handleClick">
|
||||
|
||||
<LoginForm v-if="accountLogin"/>
|
||||
<LoginQrcode v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import LoginForm from './components/LoginForm.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>
|
||||
<style lang="scss" scoped>
|
||||
@import "./index";
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<script lang="ts" setup>
|
||||
import printJS from 'print-js'
|
||||
import '@/utils/Print'
|
||||
import logo from '@/assets/logo.png'
|
||||
import logo from '@/assets/image/logo.png'
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from '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'
|
||||
const logoSrc = ref(null)
|
||||
const qrcodeUrl = ref(null)
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
<script setup lang="ts">
|
||||
import Upload from '@/components/Upload/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import logo from '@/assets/logo.png'
|
||||
import logo from '@/assets/image/logo.png'
|
||||
import { ref } from 'vue'
|
||||
const imgs = ref([
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue