Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
B
bill-manager-ui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
赵啸非
bill-manager-ui
Commits
023b07e1
Commit
023b07e1
authored
Jul 02, 2024
by
“yiyousong”
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
perf: 修改
parent
e890306c
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
11 additions
and
923 deletions
+11
-923
admin_2/package.json
admin_2/package.json
+1
-0
admin_2/src/assets/fonts/demo.css
admin_2/src/assets/fonts/demo.css
+0
-539
admin_2/src/assets/fonts/demo_index.html
admin_2/src/assets/fonts/demo_index.html
+0
-303
admin_2/src/assets/fonts/iconfont.css
admin_2/src/assets/fonts/iconfont.css
+0
-35
admin_2/src/assets/fonts/iconfont.js
admin_2/src/assets/fonts/iconfont.js
+0
-1
admin_2/src/assets/fonts/iconfont.json
admin_2/src/assets/fonts/iconfont.json
+0
-44
admin_2/src/assets/fonts/iconfont.ttf
admin_2/src/assets/fonts/iconfont.ttf
+0
-0
admin_2/src/assets/fonts/iconfont.woff
admin_2/src/assets/fonts/iconfont.woff
+0
-0
admin_2/src/assets/fonts/iconfont.woff2
admin_2/src/assets/fonts/iconfont.woff2
+0
-0
admin_2/src/main.js
admin_2/src/main.js
+5
-1
admin_2/yarn.lock
admin_2/yarn.lock
+5
-0
No files found.
admin_2/package.json
View file @
023b07e1
...
@@ -16,6 +16,7 @@
...
@@ -16,6 +16,7 @@
"echarts"
:
"^5.4.3"
,
"echarts"
:
"^5.4.3"
,
"element-ui"
:
"^2.15.14"
,
"element-ui"
:
"^2.15.14"
,
"js-export-excel"
:
"^1.1.4"
,
"js-export-excel"
:
"^1.1.4"
,
"lodash-es"
:
"^4.17.21"
,
"moment"
:
"^2.29.4"
,
"moment"
:
"^2.29.4"
,
"nprogress"
:
"^0.2.0"
,
"nprogress"
:
"^0.2.0"
,
"secure-ls"
:
"^1.2.6"
,
"secure-ls"
:
"^1.2.6"
,
...
...
admin_2/src/assets/fonts/demo.css
deleted
100644 → 0
View file @
e890306c
/* 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
;
}
admin_2/src/assets/fonts/demo_index.html
deleted
100644 → 0
View file @
e890306c
<!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=4222008"
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"
>
&
#xe608;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
不可见
</div>
<div
class=
"code-name"
>
&
#xe607;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
密码
</div>
<div
class=
"code-name"
>
&
#xe615;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
可见
</div>
<div
class=
"code-name"
>
&
#xe61c;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
用户
</div>
<div
class=
"code-name"
>
&
#xe649;
</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=1692777691620') format('woff2'),
url('iconfont.woff?t=1692777691620') format('woff'),
url('iconfont.ttf?t=1692777691620') 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-dot"
></span>
<div
class=
"name"
>
点
</div>
<div
class=
"code-name"
>
.icon-dot
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-hidden"
></span>
<div
class=
"name"
>
不可见
</div>
<div
class=
"code-name"
>
.icon-hidden
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-pwd"
></span>
<div
class=
"name"
>
密码
</div>
<div
class=
"code-name"
>
.icon-pwd
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-show"
></span>
<div
class=
"name"
>
可见
</div>
<div
class=
"code-name"
>
.icon-show
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-user"
></span>
<div
class=
"name"
>
用户
</div>
<div
class=
"code-name"
>
.icon-user
</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-dot"
></use>
</svg>
<div
class=
"name"
>
点
</div>
<div
class=
"code-name"
>
#icon-dot
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-hidden"
></use>
</svg>
<div
class=
"name"
>
不可见
</div>
<div
class=
"code-name"
>
#icon-hidden
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-pwd"
></use>
</svg>
<div
class=
"name"
>
密码
</div>
<div
class=
"code-name"
>
#icon-pwd
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-show"
></use>
</svg>
<div
class=
"name"
>
可见
</div>
<div
class=
"code-name"
>
#icon-show
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-user"
></use>
</svg>
<div
class=
"name"
>
用户
</div>
<div
class=
"code-name"
>
#icon-user
</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>
admin_2/src/assets/fonts/iconfont.css
deleted
100644 → 0
View file @
e890306c
@font-face
{
font-family
:
"iconfont"
;
/* Project id 4222008 */
src
:
url('iconfont.woff2?t=1692777691620')
format
(
'woff2'
),
url('iconfont.woff?t=1692777691620')
format
(
'woff'
),
url('iconfont.ttf?t=1692777691620')
format
(
'truetype'
);
}
.iconfont
{
font-family
:
"iconfont"
!important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
.icon-dot
:before
{
content
:
"\e608"
;
}
.icon-hidden
:before
{
content
:
"\e607"
;
}
.icon-pwd
:before
{
content
:
"\e615"
;
}
.icon-show
:before
{
content
:
"\e61c"
;
}
.icon-user
:before
{
content
:
"\e649"
;
}
admin_2/src/assets/fonts/iconfont.js
deleted
100644 → 0
View file @
e890306c
window
.
_iconfont_svg_string_4222008
=
'
<svg><symbol id="icon-dot" viewBox="0 0 1024 1024"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="" ></path></symbol><symbol id="icon-hidden" viewBox="0 0 1024 1024"><path d="M853.504 451.072c46.592-34.816 85.504-76.288 110.592-123.904 7.168-13.824 1.536-31.232-11.776-37.888-6.656-3.584-14.336-4.608-21.504-2.048-7.168 2.048-13.312 7.168-16.384 14.336-62.464 118.272-223.744 198.144-401.92 198.144S173.568 419.84 110.592 301.568c-3.584-6.656-9.216-11.776-16.384-13.824-7.168-2.048-14.848-1.536-21.504 2.048-14.336 6.656-19.456 24.576-11.776 37.888 25.088 47.616 63.488 90.112 110.592 123.904l-107.52 134.144c-6.656 8.704-8.192 20.48-3.584 30.208 4.608 9.728 14.848 16.384 25.6 16.384 8.704 0 16.384-3.584 22.016-10.752l111.616-138.752c49.664 27.648 106.496 48.128 167.936 60.416l-71.168 155.136c-6.656 14.336 0 31.232 14.336 37.376 4.096 1.536 8.192 3.072 11.776 3.072 10.752 0 20.992-6.144 26.112-16.384l76.8-170.496c21.504 2.048 44.032 4.096 66.56 4.096 18.432 0 35.84-1.536 53.248-3.072l77.312 168.96c3.072 6.656 8.704 12.288 15.872 14.848 7.168 2.56 14.848 2.048 21.504-1.024 14.336-6.144 20.48-23.552 14.336-37.376l-69.632-153.6c63.488-10.24 124.416-31.744 180.224-62.976l111.104 138.752c5.632 6.656 13.824 10.752 22.016 10.752 6.144 0 12.288-2.048 17.408-6.144 12.288-9.728 14.336-27.648 4.608-39.936l-106.496-134.144z m0 0" ></path></symbol><symbol id="icon-pwd" viewBox="0 0 1024 1024"><path d="M725.4 928.3H299.7c-88 0-159.6-71.6-159.6-159.6V555.8c0-88 71.6-159.6 159.6-159.6h425.7c88 0 159.6 71.6 159.6 159.6v212.8c0 88.1-71.6 159.7-159.6 159.7zM299.7 460c-52.8 0-95.8 43-95.8 95.8v212.8c0 52.8 43 95.8 95.8 95.8h425.7c52.8 0 95.8-43 95.8-95.8V555.8c0-52.8-43-95.8-95.8-95.8H299.7z" fill="#A1A0A5" ></path><path d="M778.6 406.8h-63.9c0-110.9-90.2-244.8-202.2-244.8S310.3 296 310.3 406.8h-63.9c0-142.7 116.2-308.6 266.1-308.6s266.1 165.9 266.1 308.6z" fill="#A1A0A5" ></path></symbol><symbol id="icon-show" viewBox="0 0 1024 1024"><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M512 266.112C229.248 266.112 0 586.24 0 586.24s229.248 320.128 512 320.128 512-320.128 512-320.128-229.248-320.128-512-320.128z m0 532.992c-117.568 0-212.864-95.296-212.864-212.864 0-117.568 95.296-212.864 212.864-212.864s212.864 95.296 212.864 212.864c0 117.568-95.296 212.864-212.864 212.864z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path><path d="M678.976 586.24c0 92.224-74.752 166.976-166.976 166.976S345.024 678.464 345.024 586.24 419.776 419.2 512 419.2s166.976 74.816 166.976 167.04z" fill="#666666" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M602.08 960.576H423.488c-169.408 0-303.2 0-303.2-87.872v-17.568c0-164.672 136.032-298.624 303.2-298.624H602.08c167.168 0 303.2 133.952 303.2 298.624v17.568c-0.032 87.872-140.544 87.872-303.2 87.872zM423.456 609.184c-138.112 0-250.496 110.304-250.496 245.92v17.568c0 35.168 144.768 35.168 250.496 35.168h178.592c87.52 0 250.496 0 250.496-35.168v-17.568c0-135.616-112.384-245.92-250.496-245.92H423.456z m80.384-70.304c-132.736 0-240.672-106.4-240.672-237.184S371.104 64.544 503.84 64.544s240.672 106.368 240.672 237.152S636.544 538.88 503.84 538.88zM315.872 301.696c0 101.696 84.32 184.48 187.968 184.48s187.968-82.752 187.968-184.48-84.32-184.448-187.968-184.448S315.872 200 315.872 301.696z" ></path></symbol></svg>
'
,
function
(
n
){
var
t
=
(
t
=
document
.
getElementsByTagName
(
"
script
"
))[
t
.
length
-
1
],
e
=
t
.
getAttribute
(
"
data-injectcss
"
),
t
=
t
.
getAttribute
(
"
data-disable-injectsvg
"
);
if
(
!
t
){
var
c
,
i
,
o
,
l
,
d
,
s
=
function
(
t
,
e
){
e
.
parentNode
.
insertBefore
(
t
,
e
)};
if
(
e
&&!
n
.
__iconfont__svg__cssinject__
){
n
.
__iconfont__svg__cssinject__
=!
0
;
try
{
document
.
write
(
"
<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>
"
)}
catch
(
t
){
console
&&
console
.
log
(
t
)}}
c
=
function
(){
var
t
,
e
=
document
.
createElement
(
"
div
"
);
e
.
innerHTML
=
n
.
_iconfont_svg_string_4222008
,(
e
=
e
.
getElementsByTagName
(
"
svg
"
)[
0
])
&&
(
e
.
setAttribute
(
"
aria-hidden
"
,
"
true
"
),
e
.
style
.
position
=
"
absolute
"
,
e
.
style
.
width
=
0
,
e
.
style
.
height
=
0
,
e
.
style
.
overflow
=
"
hidden
"
,
e
=
e
,(
t
=
document
.
body
).
firstChild
?
s
(
e
,
t
.
firstChild
):
t
.
appendChild
(
e
))},
document
.
addEventListener
?
~
[
"
complete
"
,
"
loaded
"
,
"
interactive
"
].
indexOf
(
document
.
readyState
)?
setTimeout
(
c
,
0
):(
i
=
function
(){
document
.
removeEventListener
(
"
DOMContentLoaded
"
,
i
,
!
1
),
c
()},
document
.
addEventListener
(
"
DOMContentLoaded
"
,
i
,
!
1
)):
document
.
attachEvent
&&
(
o
=
c
,
l
=
n
.
document
,
d
=!
1
,
h
(),
l
.
onreadystatechange
=
function
(){
"
complete
"
==
l
.
readyState
&&
(
l
.
onreadystatechange
=
null
,
a
())})}
function
a
(){
d
||
(
d
=!
0
,
o
())}
function
h
(){
try
{
l
.
documentElement
.
doScroll
(
"
left
"
)}
catch
(
t
){
return
void
setTimeout
(
h
,
50
)}
a
()}}(
window
);
\ No newline at end of file
admin_2/src/assets/fonts/iconfont.json
deleted
100644 → 0
View file @
e890306c
{
"id"
:
"4222008"
,
"name"
:
"门户"
,
"font_family"
:
"iconfont"
,
"css_prefix_text"
:
"icon-"
,
"description"
:
""
,
"glyphs"
:
[
{
"icon_id"
:
"1920286"
,
"name"
:
"点"
,
"font_class"
:
"dot"
,
"unicode"
:
"e608"
,
"unicode_decimal"
:
58888
},
{
"icon_id"
:
"12183287"
,
"name"
:
"不可见"
,
"font_class"
:
"hidden"
,
"unicode"
:
"e607"
,
"unicode_decimal"
:
58887
},
{
"icon_id"
:
"12387627"
,
"name"
:
"密码"
,
"font_class"
:
"pwd"
,
"unicode"
:
"e615"
,
"unicode_decimal"
:
58901
},
{
"icon_id"
:
"15391351"
,
"name"
:
"可见"
,
"font_class"
:
"show"
,
"unicode"
:
"e61c"
,
"unicode_decimal"
:
58908
},
{
"icon_id"
:
"29195000"
,
"name"
:
"用户"
,
"font_class"
:
"user"
,
"unicode"
:
"e649"
,
"unicode_decimal"
:
58953
}
]
}
admin_2/src/assets/fonts/iconfont.ttf
deleted
100644 → 0
View file @
e890306c
File deleted
admin_2/src/assets/fonts/iconfont.woff
deleted
100644 → 0
View file @
e890306c
File deleted
admin_2/src/assets/fonts/iconfont.woff2
deleted
100644 → 0
View file @
e890306c
File deleted
admin_2/src/main.js
View file @
023b07e1
...
@@ -13,7 +13,7 @@ import "@/assets/css/normalize.css";
...
@@ -13,7 +13,7 @@ import "@/assets/css/normalize.css";
import
"
@/assets/css/reset.css
"
;
import
"
@/assets/css/reset.css
"
;
import
"
@/assets/css/common.less
"
;
import
"
@/assets/css/common.less
"
;
import
"
@/assets/css/tailwindcss.css
"
;
import
"
@/assets/css/tailwindcss.css
"
;
import
"
@/assets/fonts/iconfont.css
"
;
// 事件总线
// 事件总线
Vue
.
prototype
.
$bus
=
new
Vue
();
Vue
.
prototype
.
$bus
=
new
Vue
();
...
@@ -43,6 +43,10 @@ import { resetForm, clearSelection } from "@/utils";
...
@@ -43,6 +43,10 @@ import { resetForm, clearSelection } from "@/utils";
Vue
.
prototype
.
$resetForm
=
resetForm
;
Vue
.
prototype
.
$resetForm
=
resetForm
;
Vue
.
prototype
.
$clearSelection
=
clearSelection
;
Vue
.
prototype
.
$clearSelection
=
clearSelection
;
// 深拷贝
import
{
cloneDeep
}
from
"
lodash-es
"
;
Vue
.
prototype
.
$cloneDeep
=
cloneDeep
;
Vue
.
config
.
productionTip
=
false
;
Vue
.
config
.
productionTip
=
false
;
new
Vue
({
new
Vue
({
router
,
router
,
...
...
admin_2/yarn.lock
View file @
023b07e1
...
@@ -4435,6 +4435,11 @@ locate-path@^5.0.0:
...
@@ -4435,6 +4435,11 @@ locate-path@^5.0.0:
dependencies:
dependencies:
p-locate "^4.1.0"
p-locate "^4.1.0"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.debounce@^4.0.8:
lodash.debounce@^4.0.8:
version "4.0.8"
version "4.0.8"
resolved "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
resolved "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment