媒体查询，切换动画
This commit is contained in:
parent
d73ff964db
commit
fd5ad3ac6f
98
assets/css/base.css
Normal file
98
assets/css/base.css
Normal file
@ -0,0 +1,98 @@
|
||||
/* 默认字体大小（桌面端） */
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* * 手机端-手机端-手机端-手机端-手机端-手机端-手机端-手机端-手机端 * */
|
||||
|
||||
/* 手机端 */
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端（竖屏） */
|
||||
@media (max-width: 767px) and (orientation: portrait) {
|
||||
.container {
|
||||
background-color: lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端（横屏） */
|
||||
@media (max-width: 767px) and (orientation: landscape) {
|
||||
.container {
|
||||
background-color: lightcyan;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端 */
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* * 平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端-平板端 * */
|
||||
|
||||
/* 平板端（竖屏） */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
.container {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板端（横屏） */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
|
||||
.container {
|
||||
background-color: lightgoldenrodyellow;
|
||||
}
|
||||
}
|
||||
40
assets/css/font.css
Normal file
40
assets/css/font.css
Normal file
@ -0,0 +1,40 @@
|
||||
/*@font-face {*/
|
||||
/* font-family: 'HYY';*/
|
||||
/* src: url('/assets/fonts/HYYiSongW.otf') format('woff2');*/
|
||||
/* unicode-range: U+4E00-9FFF; !* 中文字符范围 *!*/
|
||||
/* font-weight: normal;*/
|
||||
/* font-style: normal;*/
|
||||
/*}*/
|
||||
@font-face {
|
||||
font-family: "KingHwa_OldSong";
|
||||
src: url("/assets/fonts/KingHwa_OldSong/KingHwa_OldSong.eot"); /* IE9 */
|
||||
src: url("/assets/fonts/KingHwa_OldSong/KingHwa_OldSong.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
||||
|
||||
url("/assets/fonts/KingHwa_OldSong/KingHwa_OldSong.woff") format("woff"), /* chrome、firefox */
|
||||
url("/assets/fonts/KingHwa_OldSong/KingHwa_OldSong.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||
|
||||
url("/assets/fonts/KingHwa_OldSong/KingHwa_OldSong.svg#KingHwa_OldSong") format("svg"); /* iOS 4.1- */
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
/* nice*/
|
||||
@font-face {
|
||||
font-family: 'nice';
|
||||
src: url('/assets/fonts/nice.ttf') format('woff2');
|
||||
unicode-range: U+0000-007F; /* 基本拉丁字母 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/*TechnicLite*/
|
||||
@font-face {
|
||||
font-family: 'TechnicLite';
|
||||
src: url('/assets/fonts/TechnicLite.ttf') format('woff2');
|
||||
unicode-range: U+0000-007F; /* 基本拉丁字母 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MyFont';
|
||||
src: url('/assets/fonts/nice.ttf') format('woff2');
|
||||
unicode-range: U+4E00-9FFF, U+3400-4DBF; /* 基本汉字及扩展A区 */
|
||||
}
|
||||
2
assets/css/iconfont.css
Normal file
2
assets/css/iconfont.css
Normal file
@ -0,0 +1,2 @@
|
||||
@import "../icon/cocoIconFont/iconfont.css";
|
||||
@import "../icon/sxIconFont/iconfont.css";
|
||||
12
assets/css/style.css
Normal file
12
assets/css/style.css
Normal file
@ -0,0 +1,12 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: 'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', sans-serif;
|
||||
}
|
||||
10
assets/css/transitions.css
Normal file
10
assets/css/transitions.css
Normal file
@ -0,0 +1,10 @@
|
||||
/* 淡入淡出动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
27
assets/css/value.css
Normal file
27
assets/css/value.css
Normal file
@ -0,0 +1,27 @@
|
||||
:root {
|
||||
/*主体内容最大宽度*/
|
||||
--main-max-width: 1200px;
|
||||
/*主体内容自适应宽度*/
|
||||
--main-width-auto: min(1200px, 70%);
|
||||
|
||||
/*背景颜色*/
|
||||
--bg-color-b1: #000;
|
||||
--bg-color-b2: #111;
|
||||
--bg-color-b3: #222;
|
||||
--bg-color-b4: #333;
|
||||
--bg-color-b5: #444;
|
||||
--bg-color-b6: #666;
|
||||
--bg-color-b7: #777;
|
||||
--bg-color-b8: #888;
|
||||
--bg-color-b9: #999;
|
||||
--bg-color-ba: #aaa;
|
||||
--bg-color-bb: #bbb;
|
||||
--bg-color-bc: #ccc;
|
||||
--bg-color-bd: #ddd;
|
||||
--bg-color-be: #eee;
|
||||
--bg-color-bf: #fff;
|
||||
|
||||
/*字体颜色*/
|
||||
--color-text: #fefefe;
|
||||
--bg-opacity: 0.5;
|
||||
}
|
||||
13
assets/fonts/KingHwa_OldSong/KingHwa_OldSong-embed.css
Normal file
13
assets/fonts/KingHwa_OldSong/KingHwa_OldSong-embed.css
Normal file
File diff suppressed because one or more lines are too long
14
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.css
Normal file
14
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.css
Normal file
@ -0,0 +1,14 @@
|
||||
@font-face {
|
||||
font-family: "KingHwa_OldSong";
|
||||
src: url("KingHwa_OldSong.eot"); /* IE9 */
|
||||
src: url("KingHwa_OldSong.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
|
||||
|
||||
url("KingHwa_OldSong.woff") format("woff"), /* chrome、firefox */
|
||||
url("KingHwa_OldSong.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
|
||||
|
||||
url("KingHwa_OldSong.svg#KingHwa_OldSong") format("svg"); /* iOS 4.1- */
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.eot
Normal file
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.eot
Normal file
Binary file not shown.
1
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.svg
Normal file
1
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 22 KiB |
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.ttf
Normal file
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.woff
Normal file
BIN
assets/fonts/KingHwa_OldSong/KingHwa_OldSong.woff
Normal file
Binary file not shown.
BIN
assets/fonts/TechnicLite.ttf
Normal file
BIN
assets/fonts/TechnicLite.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/nice.ttf
Normal file
BIN
assets/fonts/nice.ttf
Normal file
Binary file not shown.
539
assets/icon/cocoIconFont/demo.css
Normal file
539
assets/icon/cocoIconFont/demo.css
Normal file
@ -0,0 +1,539 @@
|
||||
/* 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;
|
||||
}
|
||||
878
assets/icon/cocoIconFont/demo_index.html
Normal file
878
assets/icon/cocoIconFont/demo_index.html
Normal file
@ -0,0 +1,878 @@
|
||||
<!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=4902183" 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">&#xe661;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">订单或日志</div>
|
||||
<div class="code-name">&#xe662;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">答题系统管理</div>
|
||||
<div class="code-name">&#xe663;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">产品介绍</div>
|
||||
<div class="code-name">&#xe664;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">服务管理</div>
|
||||
<div class="code-name">&#xe665;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">服务注册中心</div>
|
||||
<div class="code-name">&#xe666;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">规则管理</div>
|
||||
<div class="code-name">&#xe667;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">广播信息</div>
|
||||
<div class="code-name">&#xe668;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">家长试题</div>
|
||||
<div class="code-name">&#xe669;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">服务链路</div>
|
||||
<div class="code-name">&#xe66a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">服务权限管理</div>
|
||||
<div class="code-name">&#xe66b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">客服</div>
|
||||
<div class="code-name">&#xe66c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">家政系统管理</div>
|
||||
<div class="code-name">&#xe66d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">监控模块管理</div>
|
||||
<div class="code-name">&#xe66e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">角色管理</div>
|
||||
<div class="code-name">&#xe66f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">基础配置管理</div>
|
||||
<div class="code-name">&#xe670;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">留言管理</div>
|
||||
<div class="code-name">&#xe671;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">孩子试题</div>
|
||||
<div class="code-name">&#xe672;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">图片</div>
|
||||
<div class="code-name">&#xe673;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">角色权限</div>
|
||||
<div class="code-name">&#xe674;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">角色类型</div>
|
||||
<div class="code-name">&#xe675;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">用户管理（2）</div>
|
||||
<div class="code-name">&#xe676;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">系统管理（填充）</div>
|
||||
<div class="code-name">&#xe677;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">用户</div>
|
||||
<div class="code-name">&#xe678;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">系统设置（线性）</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">字典管理</div>
|
||||
<div class="code-name">&#xe67d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">用户管理</div>
|
||||
<div class="code-name">&#xe67e;</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=1745318587973') format('woff2'),
|
||||
url('iconfont.woff?t=1745318587973') format('woff'),
|
||||
url('iconfont.ttf?t=1745318587973') 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-caidanguanli"></span>
|
||||
<div class="name">
|
||||
菜单管理
|
||||
</div>
|
||||
<div class="code-name">.icon-caidanguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-dingdanhuorizhi"></span>
|
||||
<div class="name">
|
||||
订单或日志
|
||||
</div>
|
||||
<div class="code-name">.icon-dingdanhuorizhi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-datixitongguanli"></span>
|
||||
<div class="name">
|
||||
答题系统管理
|
||||
</div>
|
||||
<div class="code-name">.icon-datixitongguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-chanpinjieshao"></span>
|
||||
<div class="name">
|
||||
产品介绍
|
||||
</div>
|
||||
<div class="code-name">.icon-chanpinjieshao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fuwuguanli"></span>
|
||||
<div class="name">
|
||||
服务管理
|
||||
</div>
|
||||
<div class="code-name">.icon-fuwuguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fuwuzhucezhongxin"></span>
|
||||
<div class="name">
|
||||
服务注册中心
|
||||
</div>
|
||||
<div class="code-name">.icon-fuwuzhucezhongxin
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-guizeguanli"></span>
|
||||
<div class="name">
|
||||
规则管理
|
||||
</div>
|
||||
<div class="code-name">.icon-guizeguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-guangboxinxi"></span>
|
||||
<div class="name">
|
||||
广播信息
|
||||
</div>
|
||||
<div class="code-name">.icon-guangboxinxi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiachangshiti"></span>
|
||||
<div class="name">
|
||||
家长试题
|
||||
</div>
|
||||
<div class="code-name">.icon-jiachangshiti
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fuwulianlu"></span>
|
||||
<div class="name">
|
||||
服务链路
|
||||
</div>
|
||||
<div class="code-name">.icon-fuwulianlu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-fuwuquanxianguanli"></span>
|
||||
<div class="name">
|
||||
服务权限管理
|
||||
</div>
|
||||
<div class="code-name">.icon-fuwuquanxianguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-kefu"></span>
|
||||
<div class="name">
|
||||
客服
|
||||
</div>
|
||||
<div class="code-name">.icon-kefu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiazhengxitongguanli"></span>
|
||||
<div class="name">
|
||||
家政系统管理
|
||||
</div>
|
||||
<div class="code-name">.icon-jiazhengxitongguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiankongmokuaiguanli"></span>
|
||||
<div class="name">
|
||||
监控模块管理
|
||||
</div>
|
||||
<div class="code-name">.icon-jiankongmokuaiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiaoseguanli"></span>
|
||||
<div class="name">
|
||||
角色管理
|
||||
</div>
|
||||
<div class="code-name">.icon-jiaoseguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jichupeizhiguanli"></span>
|
||||
<div class="name">
|
||||
基础配置管理
|
||||
</div>
|
||||
<div class="code-name">.icon-jichupeizhiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-liuyanguanli"></span>
|
||||
<div class="name">
|
||||
留言管理
|
||||
</div>
|
||||
<div class="code-name">.icon-liuyanguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-haizishiti"></span>
|
||||
<div class="name">
|
||||
孩子试题
|
||||
</div>
|
||||
<div class="code-name">.icon-haizishiti
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-tupian"></span>
|
||||
<div class="name">
|
||||
图片
|
||||
</div>
|
||||
<div class="code-name">.icon-tupian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiaosequanxian"></span>
|
||||
<div class="name">
|
||||
角色权限
|
||||
</div>
|
||||
<div class="code-name">.icon-jiaosequanxian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-jiaoseleixing"></span>
|
||||
<div class="name">
|
||||
角色类型
|
||||
</div>
|
||||
<div class="code-name">.icon-jiaoseleixing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yonghuguanli"></span>
|
||||
<div class="name">
|
||||
用户管理（2）
|
||||
</div>
|
||||
<div class="code-name">.icon-yonghuguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xitongguanlitianchong"></span>
|
||||
<div class="name">
|
||||
系统管理（填充）
|
||||
</div>
|
||||
<div class="code-name">.icon-xitongguanlitianchong
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yonghu"></span>
|
||||
<div class="name">
|
||||
用户
|
||||
</div>
|
||||
<div class="code-name">.icon-yonghu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-xitongshezhixianxing"></span>
|
||||
<div class="name">
|
||||
系统设置（线性）
|
||||
</div>
|
||||
<div class="code-name">.icon-xitongshezhixianxing
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhinan"></span>
|
||||
<div class="name">
|
||||
指南
|
||||
</div>
|
||||
<div class="code-name">.icon-zhinan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shitiguanli"></span>
|
||||
<div class="name">
|
||||
试题管理
|
||||
</div>
|
||||
<div class="code-name">.icon-shitiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zhuangtaihuoshenhe"></span>
|
||||
<div class="name">
|
||||
状态或审核
|
||||
</div>
|
||||
<div class="code-name">.icon-zhuangtaihuoshenhe
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-zidianguanli"></span>
|
||||
<div class="name">
|
||||
字典管理
|
||||
</div>
|
||||
<div class="code-name">.icon-zidianguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yonghuguanli1"></span>
|
||||
<div class="name">
|
||||
用户管理
|
||||
</div>
|
||||
<div class="code-name">.icon-yonghuguanli1
|
||||
</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-caidanguanli"></use>
|
||||
</svg>
|
||||
<div class="name">菜单管理</div>
|
||||
<div class="code-name">#icon-caidanguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-dingdanhuorizhi"></use>
|
||||
</svg>
|
||||
<div class="name">订单或日志</div>
|
||||
<div class="code-name">#icon-dingdanhuorizhi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-datixitongguanli"></use>
|
||||
</svg>
|
||||
<div class="name">答题系统管理</div>
|
||||
<div class="code-name">#icon-datixitongguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-chanpinjieshao"></use>
|
||||
</svg>
|
||||
<div class="name">产品介绍</div>
|
||||
<div class="code-name">#icon-chanpinjieshao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fuwuguanli"></use>
|
||||
</svg>
|
||||
<div class="name">服务管理</div>
|
||||
<div class="code-name">#icon-fuwuguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fuwuzhucezhongxin"></use>
|
||||
</svg>
|
||||
<div class="name">服务注册中心</div>
|
||||
<div class="code-name">#icon-fuwuzhucezhongxin</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-guizeguanli"></use>
|
||||
</svg>
|
||||
<div class="name">规则管理</div>
|
||||
<div class="code-name">#icon-guizeguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-guangboxinxi"></use>
|
||||
</svg>
|
||||
<div class="name">广播信息</div>
|
||||
<div class="code-name">#icon-guangboxinxi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiachangshiti"></use>
|
||||
</svg>
|
||||
<div class="name">家长试题</div>
|
||||
<div class="code-name">#icon-jiachangshiti</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fuwulianlu"></use>
|
||||
</svg>
|
||||
<div class="name">服务链路</div>
|
||||
<div class="code-name">#icon-fuwulianlu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-fuwuquanxianguanli"></use>
|
||||
</svg>
|
||||
<div class="name">服务权限管理</div>
|
||||
<div class="code-name">#icon-fuwuquanxianguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-kefu"></use>
|
||||
</svg>
|
||||
<div class="name">客服</div>
|
||||
<div class="code-name">#icon-kefu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiazhengxitongguanli"></use>
|
||||
</svg>
|
||||
<div class="name">家政系统管理</div>
|
||||
<div class="code-name">#icon-jiazhengxitongguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiankongmokuaiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">监控模块管理</div>
|
||||
<div class="code-name">#icon-jiankongmokuaiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiaoseguanli"></use>
|
||||
</svg>
|
||||
<div class="name">角色管理</div>
|
||||
<div class="code-name">#icon-jiaoseguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jichupeizhiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">基础配置管理</div>
|
||||
<div class="code-name">#icon-jichupeizhiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-liuyanguanli"></use>
|
||||
</svg>
|
||||
<div class="name">留言管理</div>
|
||||
<div class="code-name">#icon-liuyanguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-haizishiti"></use>
|
||||
</svg>
|
||||
<div class="name">孩子试题</div>
|
||||
<div class="code-name">#icon-haizishiti</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-tupian"></use>
|
||||
</svg>
|
||||
<div class="name">图片</div>
|
||||
<div class="code-name">#icon-tupian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiaosequanxian"></use>
|
||||
</svg>
|
||||
<div class="name">角色权限</div>
|
||||
<div class="code-name">#icon-jiaosequanxian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-jiaoseleixing"></use>
|
||||
</svg>
|
||||
<div class="name">角色类型</div>
|
||||
<div class="code-name">#icon-jiaoseleixing</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yonghuguanli"></use>
|
||||
</svg>
|
||||
<div class="name">用户管理（2）</div>
|
||||
<div class="code-name">#icon-yonghuguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xitongguanlitianchong"></use>
|
||||
</svg>
|
||||
<div class="name">系统管理（填充）</div>
|
||||
<div class="code-name">#icon-xitongguanlitianchong</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yonghu"></use>
|
||||
</svg>
|
||||
<div class="name">用户</div>
|
||||
<div class="code-name">#icon-yonghu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xitongshezhixianxing"></use>
|
||||
</svg>
|
||||
<div class="name">系统设置（线性）</div>
|
||||
<div class="code-name">#icon-xitongshezhixianxing</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhinan"></use>
|
||||
</svg>
|
||||
<div class="name">指南</div>
|
||||
<div class="code-name">#icon-zhinan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shitiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">试题管理</div>
|
||||
<div class="code-name">#icon-shitiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zhuangtaihuoshenhe"></use>
|
||||
</svg>
|
||||
<div class="name">状态或审核</div>
|
||||
<div class="code-name">#icon-zhuangtaihuoshenhe</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-zidianguanli"></use>
|
||||
</svg>
|
||||
<div class="name">字典管理</div>
|
||||
<div class="code-name">#icon-zidianguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yonghuguanli1"></use>
|
||||
</svg>
|
||||
<div class="name">用户管理</div>
|
||||
<div class="code-name">#icon-yonghuguanli1</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>
|
||||
135
assets/icon/cocoIconFont/iconfont.css
Normal file
135
assets/icon/cocoIconFont/iconfont.css
Normal file
@ -0,0 +1,135 @@
|
||||
@font-face {
|
||||
font-family: "cocoIconFont"; /* Project id 4902183 */
|
||||
src: url('iconfont.woff2?t=1745318587973') format('woff2'),
|
||||
url('iconfont.woff?t=1745318587973') format('woff'),
|
||||
url('iconfont.ttf?t=1745318587973') format('truetype');
|
||||
}
|
||||
|
||||
.cocoIconFont {
|
||||
font-family: "cocoIconFont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-caidanguanli:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.icon-dingdanhuorizhi:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.icon-datixitongguanli:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.icon-chanpinjieshao:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.icon-fuwuguanli:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.icon-fuwuzhucezhongxin:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.icon-guizeguanli:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.icon-guangboxinxi:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.icon-jiachangshiti:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.icon-fuwulianlu:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.icon-fuwuquanxianguanli:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.icon-kefu:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.icon-jiazhengxitongguanli:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.icon-jiankongmokuaiguanli:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.icon-jiaoseguanli:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.icon-jichupeizhiguanli:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.icon-liuyanguanli:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.icon-haizishiti:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.icon-tupian:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.icon-jiaosequanxian:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.icon-jiaoseleixing:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.icon-yonghuguanli:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.icon-xitongguanlitianchong:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.icon-yonghu:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.icon-xitongshezhixianxing:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.icon-zhinan:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.icon-shitiguanli:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.icon-zhuangtaihuoshenhe:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.icon-zidianguanli:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.icon-yonghuguanli1:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
1
assets/icon/cocoIconFont/iconfont.js
Normal file
1
assets/icon/cocoIconFont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
219
assets/icon/cocoIconFont/iconfont.json
Normal file
219
assets/icon/cocoIconFont/iconfont.json
Normal file
@ -0,0 +1,219 @@
|
||||
{
|
||||
"id": "4902183",
|
||||
"name": "start2-coco",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8605710",
|
||||
"name": "菜单管理",
|
||||
"font_class": "caidanguanli",
|
||||
"unicode": "e661",
|
||||
"unicode_decimal": 58977
|
||||
},
|
||||
{
|
||||
"icon_id": "8605712",
|
||||
"name": "订单或日志",
|
||||
"font_class": "dingdanhuorizhi",
|
||||
"unicode": "e662",
|
||||
"unicode_decimal": 58978
|
||||
},
|
||||
{
|
||||
"icon_id": "8605713",
|
||||
"name": "答题系统管理",
|
||||
"font_class": "datixitongguanli",
|
||||
"unicode": "e663",
|
||||
"unicode_decimal": 58979
|
||||
},
|
||||
{
|
||||
"icon_id": "8605714",
|
||||
"name": "产品介绍",
|
||||
"font_class": "chanpinjieshao",
|
||||
"unicode": "e664",
|
||||
"unicode_decimal": 58980
|
||||
},
|
||||
{
|
||||
"icon_id": "8605716",
|
||||
"name": "服务管理",
|
||||
"font_class": "fuwuguanli",
|
||||
"unicode": "e665",
|
||||
"unicode_decimal": 58981
|
||||
},
|
||||
{
|
||||
"icon_id": "8605718",
|
||||
"name": "服务注册中心",
|
||||
"font_class": "fuwuzhucezhongxin",
|
||||
"unicode": "e666",
|
||||
"unicode_decimal": 58982
|
||||
},
|
||||
{
|
||||
"icon_id": "8605719",
|
||||
"name": "规则管理",
|
||||
"font_class": "guizeguanli",
|
||||
"unicode": "e667",
|
||||
"unicode_decimal": 58983
|
||||
},
|
||||
{
|
||||
"icon_id": "8605720",
|
||||
"name": "广播信息",
|
||||
"font_class": "guangboxinxi",
|
||||
"unicode": "e668",
|
||||
"unicode_decimal": 58984
|
||||
},
|
||||
{
|
||||
"icon_id": "8605724",
|
||||
"name": "家长试题",
|
||||
"font_class": "jiachangshiti",
|
||||
"unicode": "e669",
|
||||
"unicode_decimal": 58985
|
||||
},
|
||||
{
|
||||
"icon_id": "8605725",
|
||||
"name": "服务链路",
|
||||
"font_class": "fuwulianlu",
|
||||
"unicode": "e66a",
|
||||
"unicode_decimal": 58986
|
||||
},
|
||||
{
|
||||
"icon_id": "8605726",
|
||||
"name": "服务权限管理",
|
||||
"font_class": "fuwuquanxianguanli",
|
||||
"unicode": "e66b",
|
||||
"unicode_decimal": 58987
|
||||
},
|
||||
{
|
||||
"icon_id": "8605730",
|
||||
"name": "客服",
|
||||
"font_class": "kefu",
|
||||
"unicode": "e66c",
|
||||
"unicode_decimal": 58988
|
||||
},
|
||||
{
|
||||
"icon_id": "8605731",
|
||||
"name": "家政系统管理",
|
||||
"font_class": "jiazhengxitongguanli",
|
||||
"unicode": "e66d",
|
||||
"unicode_decimal": 58989
|
||||
},
|
||||
{
|
||||
"icon_id": "8605732",
|
||||
"name": "监控模块管理",
|
||||
"font_class": "jiankongmokuaiguanli",
|
||||
"unicode": "e66e",
|
||||
"unicode_decimal": 58990
|
||||
},
|
||||
{
|
||||
"icon_id": "8605733",
|
||||
"name": "角色管理",
|
||||
"font_class": "jiaoseguanli",
|
||||
"unicode": "e66f",
|
||||
"unicode_decimal": 58991
|
||||
},
|
||||
{
|
||||
"icon_id": "8605734",
|
||||
"name": "基础配置管理",
|
||||
"font_class": "jichupeizhiguanli",
|
||||
"unicode": "e670",
|
||||
"unicode_decimal": 58992
|
||||
},
|
||||
{
|
||||
"icon_id": "8605736",
|
||||
"name": "留言管理",
|
||||
"font_class": "liuyanguanli",
|
||||
"unicode": "e671",
|
||||
"unicode_decimal": 58993
|
||||
},
|
||||
{
|
||||
"icon_id": "8605738",
|
||||
"name": "孩子试题",
|
||||
"font_class": "haizishiti",
|
||||
"unicode": "e672",
|
||||
"unicode_decimal": 58994
|
||||
},
|
||||
{
|
||||
"icon_id": "8605739",
|
||||
"name": "图片",
|
||||
"font_class": "tupian",
|
||||
"unicode": "e673",
|
||||
"unicode_decimal": 58995
|
||||
},
|
||||
{
|
||||
"icon_id": "8605740",
|
||||
"name": "角色权限",
|
||||
"font_class": "jiaosequanxian",
|
||||
"unicode": "e674",
|
||||
"unicode_decimal": 58996
|
||||
},
|
||||
{
|
||||
"icon_id": "8605742",
|
||||
"name": "角色类型",
|
||||
"font_class": "jiaoseleixing",
|
||||
"unicode": "e675",
|
||||
"unicode_decimal": 58997
|
||||
},
|
||||
{
|
||||
"icon_id": "8605743",
|
||||
"name": "用户管理（2）",
|
||||
"font_class": "yonghuguanli",
|
||||
"unicode": "e676",
|
||||
"unicode_decimal": 58998
|
||||
},
|
||||
{
|
||||
"icon_id": "8605744",
|
||||
"name": "系统管理（填充）",
|
||||
"font_class": "xitongguanlitianchong",
|
||||
"unicode": "e677",
|
||||
"unicode_decimal": 58999
|
||||
},
|
||||
{
|
||||
"icon_id": "8605745",
|
||||
"name": "用户",
|
||||
"font_class": "yonghu",
|
||||
"unicode": "e678",
|
||||
"unicode_decimal": 59000
|
||||
},
|
||||
{
|
||||
"icon_id": "8605746",
|
||||
"name": "系统设置（线性）",
|
||||
"font_class": "xitongshezhixianxing",
|
||||
"unicode": "e679",
|
||||
"unicode_decimal": 59001
|
||||
},
|
||||
{
|
||||
"icon_id": "8605747",
|
||||
"name": "指南",
|
||||
"font_class": "zhinan",
|
||||
"unicode": "e67a",
|
||||
"unicode_decimal": 59002
|
||||
},
|
||||
{
|
||||
"icon_id": "8605748",
|
||||
"name": "试题管理",
|
||||
"font_class": "shitiguanli",
|
||||
"unicode": "e67b",
|
||||
"unicode_decimal": 59003
|
||||
},
|
||||
{
|
||||
"icon_id": "8605753",
|
||||
"name": "状态或审核",
|
||||
"font_class": "zhuangtaihuoshenhe",
|
||||
"unicode": "e67c",
|
||||
"unicode_decimal": 59004
|
||||
},
|
||||
{
|
||||
"icon_id": "8605754",
|
||||
"name": "字典管理",
|
||||
"font_class": "zidianguanli",
|
||||
"unicode": "e67d",
|
||||
"unicode_decimal": 59005
|
||||
},
|
||||
{
|
||||
"icon_id": "8605760",
|
||||
"name": "用户管理",
|
||||
"font_class": "yonghuguanli1",
|
||||
"unicode": "e67e",
|
||||
"unicode_decimal": 59006
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
assets/icon/cocoIconFont/iconfont.ttf
Normal file
BIN
assets/icon/cocoIconFont/iconfont.ttf
Normal file
Binary file not shown.
BIN
assets/icon/cocoIconFont/iconfont.woff
Normal file
BIN
assets/icon/cocoIconFont/iconfont.woff
Normal file
Binary file not shown.
BIN
assets/icon/cocoIconFont/iconfont.woff2
Normal file
BIN
assets/icon/cocoIconFont/iconfont.woff2
Normal file
Binary file not shown.
539
assets/icon/sxIconFont/demo.css
Normal file
539
assets/icon/sxIconFont/demo.css
Normal file
@ -0,0 +1,539 @@
|
||||
/* 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;
|
||||
}
|
||||
2764
assets/icon/sxIconFont/demo_index.html
Normal file
2764
assets/icon/sxIconFont/demo_index.html
Normal file
File diff suppressed because it is too large
Load Diff
463
assets/icon/sxIconFont/iconfont.css
Normal file
463
assets/icon/sxIconFont/iconfont.css
Normal file
@ -0,0 +1,463 @@
|
||||
@font-face {
|
||||
font-family: "sxIconFont"; /* Project id 4902171 */
|
||||
src: url('iconfont.woff2?t=1745318762007') format('woff2'),
|
||||
url('iconfont.woff?t=1745318762007') format('woff'),
|
||||
url('iconfont.ttf?t=1745318762007') format('truetype');
|
||||
}
|
||||
|
||||
.sxIconFont {
|
||||
font-family: "sxIconFont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.sxIconFont-caidan1:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.sxIconFont-baocun1:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.sxIconFont-bukejian:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.sxIconFont-bianji1:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.sxIconFont-dingwei:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.sxIconFont-dayin:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.sxIconFont-fabu1:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.sxIconFont-fenxiang:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.sxIconFont-gengduo:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.sxIconFont-jiahao:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.sxIconFont-guanbi:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.sxIconFont-fuzhi:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.sxIconFont-dianhua1:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.sxIconFont-chexiao1:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.sxIconFont-jianhao:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.sxIconFont-fangda1:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.sxIconFont-kejian:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.sxIconFont-jinggao:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.sxIconFont-jianshao1:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.sxIconFont-gerenzhongxin:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.sxIconFont-paizhao1:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.sxIconFont-pinglun:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.sxIconFont-liebiao:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.sxIconFont-mendian1:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.sxIconFont-rili1:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.sxIconFont-lianjie:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.sxIconFont-shanchu1:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.sxIconFont-saoyisao:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.sxIconFont-shangchuan:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.sxIconFont-shuaxin:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.sxIconFont-qingchu:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.sxIconFont-shoucang1:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.sxIconFont-suoxiao1:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.sxIconFont-tongzhi1:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.sxIconFont-sousuo:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.sxIconFont-tupian1:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.sxIconFont-tuichu:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.sxIconFont-wenjianjia1:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangshang1:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.sxIconFont-wancheng:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.sxIconFont-shaixuan:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.sxIconFont-wenjian1:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.sxIconFont-xiazai:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangzuo1:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.sxIconFont-xinxi1:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangyou1:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangxia1:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.sxIconFont-xinzeng:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.sxIconFont-zhuanti:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.sxIconFont-zixun:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.sxIconFont-xiaoxi:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.sxIconFont-shuju2:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.sxIconFont-jishufuwu1:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.sxIconFont-jiagou1:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.sxIconFont-piaoju1:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.sxIconFont-shujuku:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.sxIconFont-APIguanli:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.sxIconFont-xingneng:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.sxIconFont-tixing:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.sxIconFont-weizhi:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.sxIconFont-tongzhi:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.sxIconFont-wenjian:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangyou:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangshang:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangzuo:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangxia:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.sxIconFont-xinxi:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.sxIconFont-ren:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.sxIconFont-caidan:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.sxIconFont-piaowu:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.sxIconFont-kefang:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.sxIconFont-shujupingtai:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.sxIconFont-xiangmu:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.sxIconFont-xunwen:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.sxIconFont-shouye:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.sxIconFont-jishufuwu:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.sxIconFont-shujuyuan:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.sxIconFont-guanlipingtai:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.sxIconFont-piaoju:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.sxIconFont-jiagou:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.sxIconFont-ziduan:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.sxIconFont-biaoge:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.sxIconFont-chaxunbeifen:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.sxIconFont-chaxun:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.sxIconFont-guocheng:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.sxIconFont-shuchu:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.sxIconFont-xieyuan:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.sxIconFont-shuru:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.sxIconFont-lujing:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.sxIconFont-shujuyuan1:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.sxIconFont-shuju1:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.sxIconFont-jituanqiye:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.sxIconFont-shujupingtai1:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.sxIconFont-guanlipingtai1:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.sxIconFont-biaoqian:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.sxIconFont-baocun:before {
|
||||
content: "\e635";
|
||||
}
|
||||
|
||||
.sxIconFont-bianji:before {
|
||||
content: "\e636";
|
||||
}
|
||||
|
||||
.sxIconFont-chexiao:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.sxIconFont-fabu:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.sxIconFont-paizhao:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.sxIconFont-fangda:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.sxIconFont-mendian:before {
|
||||
content: "\e63b";
|
||||
}
|
||||
|
||||
.sxIconFont-dianhua:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.sxIconFont-jianshao:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.sxIconFont-rili:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.sxIconFont-shuju:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.sxIconFont-shoucang:before {
|
||||
content: "\e640";
|
||||
}
|
||||
|
||||
.sxIconFont-shezhi:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.sxIconFont-shanchu:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.sxIconFont-wenjianjia:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.sxIconFont-suoxiao:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.sxIconFont-tupian:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
1
assets/icon/sxIconFont/iconfont.js
Normal file
1
assets/icon/sxIconFont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
793
assets/icon/sxIconFont/iconfont.json
Normal file
793
assets/icon/sxIconFont/iconfont.json
Normal file
@ -0,0 +1,793 @@
|
||||
{
|
||||
"id": "4902171",
|
||||
"name": "star-sx",
|
||||
"font_family": "sxIconFont",
|
||||
"css_prefix_text": "sxIconFont-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "18863151",
|
||||
"name": "菜单",
|
||||
"font_class": "caidan1",
|
||||
"unicode": "e66a",
|
||||
"unicode_decimal": 58986
|
||||
},
|
||||
{
|
||||
"icon_id": "18863152",
|
||||
"name": "保存",
|
||||
"font_class": "baocun1",
|
||||
"unicode": "e66b",
|
||||
"unicode_decimal": 58987
|
||||
},
|
||||
{
|
||||
"icon_id": "18863153",
|
||||
"name": "不可见",
|
||||
"font_class": "bukejian",
|
||||
"unicode": "e66c",
|
||||
"unicode_decimal": 58988
|
||||
},
|
||||
{
|
||||
"icon_id": "18863154",
|
||||
"name": "编辑",
|
||||
"font_class": "bianji1",
|
||||
"unicode": "e66d",
|
||||
"unicode_decimal": 58989
|
||||
},
|
||||
{
|
||||
"icon_id": "18863156",
|
||||
"name": "定位",
|
||||
"font_class": "dingwei",
|
||||
"unicode": "e66e",
|
||||
"unicode_decimal": 58990
|
||||
},
|
||||
{
|
||||
"icon_id": "18863157",
|
||||
"name": "打印",
|
||||
"font_class": "dayin",
|
||||
"unicode": "e66f",
|
||||
"unicode_decimal": 58991
|
||||
},
|
||||
{
|
||||
"icon_id": "18863158",
|
||||
"name": "发布",
|
||||
"font_class": "fabu1",
|
||||
"unicode": "e670",
|
||||
"unicode_decimal": 58992
|
||||
},
|
||||
{
|
||||
"icon_id": "18863159",
|
||||
"name": "分享",
|
||||
"font_class": "fenxiang",
|
||||
"unicode": "e671",
|
||||
"unicode_decimal": 58993
|
||||
},
|
||||
{
|
||||
"icon_id": "18863160",
|
||||
"name": "更多",
|
||||
"font_class": "gengduo",
|
||||
"unicode": "e672",
|
||||
"unicode_decimal": 58994
|
||||
},
|
||||
{
|
||||
"icon_id": "18863161",
|
||||
"name": "加号",
|
||||
"font_class": "jiahao",
|
||||
"unicode": "e673",
|
||||
"unicode_decimal": 58995
|
||||
},
|
||||
{
|
||||
"icon_id": "18863162",
|
||||
"name": "关闭",
|
||||
"font_class": "guanbi",
|
||||
"unicode": "e674",
|
||||
"unicode_decimal": 58996
|
||||
},
|
||||
{
|
||||
"icon_id": "18863163",
|
||||
"name": "复制",
|
||||
"font_class": "fuzhi",
|
||||
"unicode": "e675",
|
||||
"unicode_decimal": 58997
|
||||
},
|
||||
{
|
||||
"icon_id": "18863164",
|
||||
"name": "电话",
|
||||
"font_class": "dianhua1",
|
||||
"unicode": "e676",
|
||||
"unicode_decimal": 58998
|
||||
},
|
||||
{
|
||||
"icon_id": "18863165",
|
||||
"name": "撤销",
|
||||
"font_class": "chexiao1",
|
||||
"unicode": "e677",
|
||||
"unicode_decimal": 58999
|
||||
},
|
||||
{
|
||||
"icon_id": "18863166",
|
||||
"name": "减号",
|
||||
"font_class": "jianhao",
|
||||
"unicode": "e678",
|
||||
"unicode_decimal": 59000
|
||||
},
|
||||
{
|
||||
"icon_id": "18863167",
|
||||
"name": "放大",
|
||||
"font_class": "fangda1",
|
||||
"unicode": "e679",
|
||||
"unicode_decimal": 59001
|
||||
},
|
||||
{
|
||||
"icon_id": "18863168",
|
||||
"name": "可见",
|
||||
"font_class": "kejian",
|
||||
"unicode": "e67a",
|
||||
"unicode_decimal": 59002
|
||||
},
|
||||
{
|
||||
"icon_id": "18863169",
|
||||
"name": "警告",
|
||||
"font_class": "jinggao",
|
||||
"unicode": "e67b",
|
||||
"unicode_decimal": 59003
|
||||
},
|
||||
{
|
||||
"icon_id": "18863170",
|
||||
"name": "减少",
|
||||
"font_class": "jianshao1",
|
||||
"unicode": "e67c",
|
||||
"unicode_decimal": 59004
|
||||
},
|
||||
{
|
||||
"icon_id": "18863171",
|
||||
"name": "个人中心",
|
||||
"font_class": "gerenzhongxin",
|
||||
"unicode": "e67d",
|
||||
"unicode_decimal": 59005
|
||||
},
|
||||
{
|
||||
"icon_id": "18863172",
|
||||
"name": "拍照",
|
||||
"font_class": "paizhao1",
|
||||
"unicode": "e67e",
|
||||
"unicode_decimal": 59006
|
||||
},
|
||||
{
|
||||
"icon_id": "18863173",
|
||||
"name": "评论",
|
||||
"font_class": "pinglun",
|
||||
"unicode": "e67f",
|
||||
"unicode_decimal": 59007
|
||||
},
|
||||
{
|
||||
"icon_id": "18863174",
|
||||
"name": "列表",
|
||||
"font_class": "liebiao",
|
||||
"unicode": "e680",
|
||||
"unicode_decimal": 59008
|
||||
},
|
||||
{
|
||||
"icon_id": "18863175",
|
||||
"name": "门店",
|
||||
"font_class": "mendian1",
|
||||
"unicode": "e681",
|
||||
"unicode_decimal": 59009
|
||||
},
|
||||
{
|
||||
"icon_id": "18863176",
|
||||
"name": "日历",
|
||||
"font_class": "rili1",
|
||||
"unicode": "e682",
|
||||
"unicode_decimal": 59010
|
||||
},
|
||||
{
|
||||
"icon_id": "18863177",
|
||||
"name": "链接",
|
||||
"font_class": "lianjie",
|
||||
"unicode": "e683",
|
||||
"unicode_decimal": 59011
|
||||
},
|
||||
{
|
||||
"icon_id": "18863178",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu1",
|
||||
"unicode": "e684",
|
||||
"unicode_decimal": 59012
|
||||
},
|
||||
{
|
||||
"icon_id": "18863179",
|
||||
"name": "扫一扫",
|
||||
"font_class": "saoyisao",
|
||||
"unicode": "e685",
|
||||
"unicode_decimal": 59013
|
||||
},
|
||||
{
|
||||
"icon_id": "18863180",
|
||||
"name": "上传",
|
||||
"font_class": "shangchuan",
|
||||
"unicode": "e686",
|
||||
"unicode_decimal": 59014
|
||||
},
|
||||
{
|
||||
"icon_id": "18863181",
|
||||
"name": "刷新",
|
||||
"font_class": "shuaxin",
|
||||
"unicode": "e687",
|
||||
"unicode_decimal": 59015
|
||||
},
|
||||
{
|
||||
"icon_id": "18863182",
|
||||
"name": "清除",
|
||||
"font_class": "qingchu",
|
||||
"unicode": "e688",
|
||||
"unicode_decimal": 59016
|
||||
},
|
||||
{
|
||||
"icon_id": "18863183",
|
||||
"name": "收藏",
|
||||
"font_class": "shoucang1",
|
||||
"unicode": "e689",
|
||||
"unicode_decimal": 59017
|
||||
},
|
||||
{
|
||||
"icon_id": "18863184",
|
||||
"name": "缩小",
|
||||
"font_class": "suoxiao1",
|
||||
"unicode": "e68a",
|
||||
"unicode_decimal": 59018
|
||||
},
|
||||
{
|
||||
"icon_id": "18863185",
|
||||
"name": "通知",
|
||||
"font_class": "tongzhi1",
|
||||
"unicode": "e68b",
|
||||
"unicode_decimal": 59019
|
||||
},
|
||||
{
|
||||
"icon_id": "18863186",
|
||||
"name": "搜索",
|
||||
"font_class": "sousuo",
|
||||
"unicode": "e68c",
|
||||
"unicode_decimal": 59020
|
||||
},
|
||||
{
|
||||
"icon_id": "18863187",
|
||||
"name": "图片",
|
||||
"font_class": "tupian1",
|
||||
"unicode": "e68d",
|
||||
"unicode_decimal": 59021
|
||||
},
|
||||
{
|
||||
"icon_id": "18863188",
|
||||
"name": "退出",
|
||||
"font_class": "tuichu",
|
||||
"unicode": "e68e",
|
||||
"unicode_decimal": 59022
|
||||
},
|
||||
{
|
||||
"icon_id": "18863189",
|
||||
"name": "文件夹",
|
||||
"font_class": "wenjianjia1",
|
||||
"unicode": "e68f",
|
||||
"unicode_decimal": 59023
|
||||
},
|
||||
{
|
||||
"icon_id": "18863190",
|
||||
"name": "向上",
|
||||
"font_class": "xiangshang1",
|
||||
"unicode": "e690",
|
||||
"unicode_decimal": 59024
|
||||
},
|
||||
{
|
||||
"icon_id": "18863191",
|
||||
"name": "完成",
|
||||
"font_class": "wancheng",
|
||||
"unicode": "e691",
|
||||
"unicode_decimal": 59025
|
||||
},
|
||||
{
|
||||
"icon_id": "18863192",
|
||||
"name": "筛选",
|
||||
"font_class": "shaixuan",
|
||||
"unicode": "e692",
|
||||
"unicode_decimal": 59026
|
||||
},
|
||||
{
|
||||
"icon_id": "18863193",
|
||||
"name": "文件",
|
||||
"font_class": "wenjian1",
|
||||
"unicode": "e693",
|
||||
"unicode_decimal": 59027
|
||||
},
|
||||
{
|
||||
"icon_id": "18863194",
|
||||
"name": "下载",
|
||||
"font_class": "xiazai",
|
||||
"unicode": "e694",
|
||||
"unicode_decimal": 59028
|
||||
},
|
||||
{
|
||||
"icon_id": "18863195",
|
||||
"name": "向左",
|
||||
"font_class": "xiangzuo1",
|
||||
"unicode": "e695",
|
||||
"unicode_decimal": 59029
|
||||
},
|
||||
{
|
||||
"icon_id": "18863196",
|
||||
"name": "信息",
|
||||
"font_class": "xinxi1",
|
||||
"unicode": "e696",
|
||||
"unicode_decimal": 59030
|
||||
},
|
||||
{
|
||||
"icon_id": "18863197",
|
||||
"name": "向右",
|
||||
"font_class": "xiangyou1",
|
||||
"unicode": "e697",
|
||||
"unicode_decimal": 59031
|
||||
},
|
||||
{
|
||||
"icon_id": "18863198",
|
||||
"name": "向下",
|
||||
"font_class": "xiangxia1",
|
||||
"unicode": "e698",
|
||||
"unicode_decimal": 59032
|
||||
},
|
||||
{
|
||||
"icon_id": "18863199",
|
||||
"name": "新增",
|
||||
"font_class": "xinzeng",
|
||||
"unicode": "e699",
|
||||
"unicode_decimal": 59033
|
||||
},
|
||||
{
|
||||
"icon_id": "18863200",
|
||||
"name": "专题",
|
||||
"font_class": "zhuanti",
|
||||
"unicode": "e69a",
|
||||
"unicode_decimal": 59034
|
||||
},
|
||||
{
|
||||
"icon_id": "18863201",
|
||||
"name": "咨询",
|
||||
"font_class": "zixun",
|
||||
"unicode": "e69b",
|
||||
"unicode_decimal": 59035
|
||||
},
|
||||
{
|
||||
"icon_id": "18863202",
|
||||
"name": "消息",
|
||||
"font_class": "xiaoxi",
|
||||
"unicode": "e69c",
|
||||
"unicode_decimal": 59036
|
||||
},
|
||||
{
|
||||
"icon_id": "18863203",
|
||||
"name": "数据",
|
||||
"font_class": "shuju2",
|
||||
"unicode": "e69d",
|
||||
"unicode_decimal": 59037
|
||||
},
|
||||
{
|
||||
"icon_id": "18890518",
|
||||
"name": "技术服务",
|
||||
"font_class": "jishufuwu1",
|
||||
"unicode": "e69e",
|
||||
"unicode_decimal": 59038
|
||||
},
|
||||
{
|
||||
"icon_id": "18890519",
|
||||
"name": "架构",
|
||||
"font_class": "jiagou1",
|
||||
"unicode": "e69f",
|
||||
"unicode_decimal": 59039
|
||||
},
|
||||
{
|
||||
"icon_id": "18890522",
|
||||
"name": "票据",
|
||||
"font_class": "piaoju1",
|
||||
"unicode": "e6a0",
|
||||
"unicode_decimal": 59040
|
||||
},
|
||||
{
|
||||
"icon_id": "18890523",
|
||||
"name": "数据库",
|
||||
"font_class": "shujuku",
|
||||
"unicode": "e6a1",
|
||||
"unicode_decimal": 59041
|
||||
},
|
||||
{
|
||||
"icon_id": "19651515",
|
||||
"name": "API管理",
|
||||
"font_class": "APIguanli",
|
||||
"unicode": "e6a2",
|
||||
"unicode_decimal": 59042
|
||||
},
|
||||
{
|
||||
"icon_id": "19651516",
|
||||
"name": "性能",
|
||||
"font_class": "xingneng",
|
||||
"unicode": "e6a3",
|
||||
"unicode_decimal": 59043
|
||||
},
|
||||
{
|
||||
"icon_id": "17124319",
|
||||
"name": "提醒",
|
||||
"font_class": "tixing",
|
||||
"unicode": "e646",
|
||||
"unicode_decimal": 58950
|
||||
},
|
||||
{
|
||||
"icon_id": "17124320",
|
||||
"name": "位置",
|
||||
"font_class": "weizhi",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "17124321",
|
||||
"name": "通知",
|
||||
"font_class": "tongzhi",
|
||||
"unicode": "e648",
|
||||
"unicode_decimal": 58952
|
||||
},
|
||||
{
|
||||
"icon_id": "17124322",
|
||||
"name": "文件",
|
||||
"font_class": "wenjian",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "17124323",
|
||||
"name": "向右",
|
||||
"font_class": "xiangyou",
|
||||
"unicode": "e64a",
|
||||
"unicode_decimal": 58954
|
||||
},
|
||||
{
|
||||
"icon_id": "17124324",
|
||||
"name": "向上",
|
||||
"font_class": "xiangshang",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "17124325",
|
||||
"name": "向左",
|
||||
"font_class": "xiangzuo",
|
||||
"unicode": "e64c",
|
||||
"unicode_decimal": 58956
|
||||
},
|
||||
{
|
||||
"icon_id": "17124326",
|
||||
"name": "向下",
|
||||
"font_class": "xiangxia",
|
||||
"unicode": "e64d",
|
||||
"unicode_decimal": 58957
|
||||
},
|
||||
{
|
||||
"icon_id": "17124327",
|
||||
"name": "信息",
|
||||
"font_class": "xinxi",
|
||||
"unicode": "e64e",
|
||||
"unicode_decimal": 58958
|
||||
},
|
||||
{
|
||||
"icon_id": "18863066",
|
||||
"name": "人",
|
||||
"font_class": "ren",
|
||||
"unicode": "e64f",
|
||||
"unicode_decimal": 58959
|
||||
},
|
||||
{
|
||||
"icon_id": "18863067",
|
||||
"name": "菜单",
|
||||
"font_class": "caidan",
|
||||
"unicode": "e650",
|
||||
"unicode_decimal": 58960
|
||||
},
|
||||
{
|
||||
"icon_id": "18863068",
|
||||
"name": "票务",
|
||||
"font_class": "piaowu",
|
||||
"unicode": "e651",
|
||||
"unicode_decimal": 58961
|
||||
},
|
||||
{
|
||||
"icon_id": "18863069",
|
||||
"name": "客房",
|
||||
"font_class": "kefang",
|
||||
"unicode": "e652",
|
||||
"unicode_decimal": 58962
|
||||
},
|
||||
{
|
||||
"icon_id": "18863072",
|
||||
"name": "数据平台",
|
||||
"font_class": "shujupingtai",
|
||||
"unicode": "e653",
|
||||
"unicode_decimal": 58963
|
||||
},
|
||||
{
|
||||
"icon_id": "18863074",
|
||||
"name": "项目",
|
||||
"font_class": "xiangmu",
|
||||
"unicode": "e654",
|
||||
"unicode_decimal": 58964
|
||||
},
|
||||
{
|
||||
"icon_id": "18863075",
|
||||
"name": "询问",
|
||||
"font_class": "xunwen",
|
||||
"unicode": "e655",
|
||||
"unicode_decimal": 58965
|
||||
},
|
||||
{
|
||||
"icon_id": "18863076",
|
||||
"name": "首页",
|
||||
"font_class": "shouye",
|
||||
"unicode": "e656",
|
||||
"unicode_decimal": 58966
|
||||
},
|
||||
{
|
||||
"icon_id": "18890504",
|
||||
"name": "技术服务",
|
||||
"font_class": "jishufuwu",
|
||||
"unicode": "e657",
|
||||
"unicode_decimal": 58967
|
||||
},
|
||||
{
|
||||
"icon_id": "18890505",
|
||||
"name": "数据源",
|
||||
"font_class": "shujuyuan",
|
||||
"unicode": "e658",
|
||||
"unicode_decimal": 58968
|
||||
},
|
||||
{
|
||||
"icon_id": "18890506",
|
||||
"name": "管理平台",
|
||||
"font_class": "guanlipingtai",
|
||||
"unicode": "e659",
|
||||
"unicode_decimal": 58969
|
||||
},
|
||||
{
|
||||
"icon_id": "18890507",
|
||||
"name": "票据",
|
||||
"font_class": "piaoju",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "18890508",
|
||||
"name": "架构",
|
||||
"font_class": "jiagou",
|
||||
"unicode": "e65b",
|
||||
"unicode_decimal": 58971
|
||||
},
|
||||
{
|
||||
"icon_id": "19592907",
|
||||
"name": "字段",
|
||||
"font_class": "ziduan",
|
||||
"unicode": "e65c",
|
||||
"unicode_decimal": 58972
|
||||
},
|
||||
{
|
||||
"icon_id": "19648531",
|
||||
"name": "表格",
|
||||
"font_class": "biaoge",
|
||||
"unicode": "e65d",
|
||||
"unicode_decimal": 58973
|
||||
},
|
||||
{
|
||||
"icon_id": "19648532",
|
||||
"name": "查询备份",
|
||||
"font_class": "chaxunbeifen",
|
||||
"unicode": "e65e",
|
||||
"unicode_decimal": 58974
|
||||
},
|
||||
{
|
||||
"icon_id": "19648533",
|
||||
"name": "查询",
|
||||
"font_class": "chaxun",
|
||||
"unicode": "e65f",
|
||||
"unicode_decimal": 58975
|
||||
},
|
||||
{
|
||||
"icon_id": "19648534",
|
||||
"name": "过程",
|
||||
"font_class": "guocheng",
|
||||
"unicode": "e660",
|
||||
"unicode_decimal": 58976
|
||||
},
|
||||
{
|
||||
"icon_id": "19648535",
|
||||
"name": "输出",
|
||||
"font_class": "shuchu",
|
||||
"unicode": "e661",
|
||||
"unicode_decimal": 58977
|
||||
},
|
||||
{
|
||||
"icon_id": "19648536",
|
||||
"name": "血缘",
|
||||
"font_class": "xieyuan",
|
||||
"unicode": "e662",
|
||||
"unicode_decimal": 58978
|
||||
},
|
||||
{
|
||||
"icon_id": "19648537",
|
||||
"name": "输入",
|
||||
"font_class": "shuru",
|
||||
"unicode": "e663",
|
||||
"unicode_decimal": 58979
|
||||
},
|
||||
{
|
||||
"icon_id": "19648538",
|
||||
"name": "路径",
|
||||
"font_class": "lujing",
|
||||
"unicode": "e664",
|
||||
"unicode_decimal": 58980
|
||||
},
|
||||
{
|
||||
"icon_id": "19651506",
|
||||
"name": "数据源",
|
||||
"font_class": "shujuyuan1",
|
||||
"unicode": "e665",
|
||||
"unicode_decimal": 58981
|
||||
},
|
||||
{
|
||||
"icon_id": "19651507",
|
||||
"name": "数据",
|
||||
"font_class": "shuju1",
|
||||
"unicode": "e666",
|
||||
"unicode_decimal": 58982
|
||||
},
|
||||
{
|
||||
"icon_id": "19651508",
|
||||
"name": "集团企业",
|
||||
"font_class": "jituanqiye",
|
||||
"unicode": "e667",
|
||||
"unicode_decimal": 58983
|
||||
},
|
||||
{
|
||||
"icon_id": "19651509",
|
||||
"name": "数据平台",
|
||||
"font_class": "shujupingtai1",
|
||||
"unicode": "e668",
|
||||
"unicode_decimal": 58984
|
||||
},
|
||||
{
|
||||
"icon_id": "19651510",
|
||||
"name": "管理平台",
|
||||
"font_class": "guanlipingtai1",
|
||||
"unicode": "e669",
|
||||
"unicode_decimal": 58985
|
||||
},
|
||||
{
|
||||
"icon_id": "17124299",
|
||||
"name": "标签",
|
||||
"font_class": "biaoqian",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
},
|
||||
{
|
||||
"icon_id": "17124300",
|
||||
"name": "保存",
|
||||
"font_class": "baocun",
|
||||
"unicode": "e635",
|
||||
"unicode_decimal": 58933
|
||||
},
|
||||
{
|
||||
"icon_id": "17124301",
|
||||
"name": "编辑",
|
||||
"font_class": "bianji",
|
||||
"unicode": "e636",
|
||||
"unicode_decimal": 58934
|
||||
},
|
||||
{
|
||||
"icon_id": "17124302",
|
||||
"name": "撤销",
|
||||
"font_class": "chexiao",
|
||||
"unicode": "e637",
|
||||
"unicode_decimal": 58935
|
||||
},
|
||||
{
|
||||
"icon_id": "17124303",
|
||||
"name": "发布",
|
||||
"font_class": "fabu",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
},
|
||||
{
|
||||
"icon_id": "17124304",
|
||||
"name": "拍照",
|
||||
"font_class": "paizhao",
|
||||
"unicode": "e639",
|
||||
"unicode_decimal": 58937
|
||||
},
|
||||
{
|
||||
"icon_id": "17124305",
|
||||
"name": "放大",
|
||||
"font_class": "fangda",
|
||||
"unicode": "e63a",
|
||||
"unicode_decimal": 58938
|
||||
},
|
||||
{
|
||||
"icon_id": "17124308",
|
||||
"name": "门店",
|
||||
"font_class": "mendian",
|
||||
"unicode": "e63b",
|
||||
"unicode_decimal": 58939
|
||||
},
|
||||
{
|
||||
"icon_id": "17124309",
|
||||
"name": "电话",
|
||||
"font_class": "dianhua",
|
||||
"unicode": "e63c",
|
||||
"unicode_decimal": 58940
|
||||
},
|
||||
{
|
||||
"icon_id": "17124310",
|
||||
"name": "减少",
|
||||
"font_class": "jianshao",
|
||||
"unicode": "e63d",
|
||||
"unicode_decimal": 58941
|
||||
},
|
||||
{
|
||||
"icon_id": "17124311",
|
||||
"name": "日历",
|
||||
"font_class": "rili",
|
||||
"unicode": "e63e",
|
||||
"unicode_decimal": 58942
|
||||
},
|
||||
{
|
||||
"icon_id": "17124312",
|
||||
"name": "数据",
|
||||
"font_class": "shuju",
|
||||
"unicode": "e63f",
|
||||
"unicode_decimal": 58943
|
||||
},
|
||||
{
|
||||
"icon_id": "17124313",
|
||||
"name": "收藏",
|
||||
"font_class": "shoucang",
|
||||
"unicode": "e640",
|
||||
"unicode_decimal": 58944
|
||||
},
|
||||
{
|
||||
"icon_id": "17124314",
|
||||
"name": "设置",
|
||||
"font_class": "shezhi",
|
||||
"unicode": "e641",
|
||||
"unicode_decimal": 58945
|
||||
},
|
||||
{
|
||||
"icon_id": "17124315",
|
||||
"name": "删除",
|
||||
"font_class": "shanchu",
|
||||
"unicode": "e642",
|
||||
"unicode_decimal": 58946
|
||||
},
|
||||
{
|
||||
"icon_id": "17124316",
|
||||
"name": "文件夹",
|
||||
"font_class": "wenjianjia",
|
||||
"unicode": "e643",
|
||||
"unicode_decimal": 58947
|
||||
},
|
||||
{
|
||||
"icon_id": "17124317",
|
||||
"name": "缩小",
|
||||
"font_class": "suoxiao",
|
||||
"unicode": "e644",
|
||||
"unicode_decimal": 58948
|
||||
},
|
||||
{
|
||||
"icon_id": "17124318",
|
||||
"name": "图片",
|
||||
"font_class": "tupian",
|
||||
"unicode": "e645",
|
||||
"unicode_decimal": 58949
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
assets/icon/sxIconFont/iconfont.ttf
Normal file
BIN
assets/icon/sxIconFont/iconfont.ttf
Normal file
Binary file not shown.
BIN
assets/icon/sxIconFont/iconfont.woff
Normal file
BIN
assets/icon/sxIconFont/iconfont.woff
Normal file
Binary file not shown.
BIN
assets/icon/sxIconFont/iconfont.woff2
Normal file
BIN
assets/icon/sxIconFont/iconfont.woff2
Normal file
Binary file not shown.
107
components/Home/Header.vue
Normal file
107
components/Home/Header.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
// 移动端菜单展开状态
|
||||
import MobileMenu from "~/components/Home/MobileMenu.vue";
|
||||
|
||||
const menuMobileExpandStatus = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="homeHeader relative flex">
|
||||
<div class="logoContainer">
|
||||
<Logo/>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="mobileIcon" @click="menuMobileExpandStatus = !menuMobileExpandStatus">
|
||||
</div>
|
||||
<MobileMenu :menuMobileExpandStatus/>
|
||||
<slot name="navBar"></slot>
|
||||
</nav>
|
||||
<div class="infoContainer">
|
||||
<div class="mobileIcon"></div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
/* 手机端 */
|
||||
@media (max-width: 767px) {
|
||||
.homeHeader {
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
|
||||
div.logoContainer{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-color-bd);
|
||||
}
|
||||
|
||||
nav > div.mobileIcon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
&::before{
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
font-family: "cocoIconFont" !important;
|
||||
content: "\e661";
|
||||
color: var(--color-text);
|
||||
font-size: 1.6rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.infoContainer > div.mobileIcon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
&::before{
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
font-family: "cocoIconFont" !important;
|
||||
content: "\e678";
|
||||
color: var(--color-text);
|
||||
font-size: 1.6rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 平板及以上 */
|
||||
@media (min-width: 768px) {
|
||||
.homeHeader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
& > * {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div.logoContainer{
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
|
||||
nav{
|
||||
flex-shrink: 0;
|
||||
width: var(--main-width-auto);
|
||||
background-color: var(--bg-color-b1);
|
||||
}
|
||||
|
||||
div.infoContainer{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
40
components/Home/MobileMenu.vue
Normal file
40
components/Home/MobileMenu.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
const {menuMobileExpandStatus} = defineProps({
|
||||
menuMobileExpandStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobileMenu" :class="menuMobileExpandStatus ? 'mobileMenuActive' : ''">
|
||||
<div class="mobileMenuContent">
|
||||
菜单
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobileMenu{
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
z-index: 99;
|
||||
.mobileMenuContent{
|
||||
position: relative;
|
||||
top: 2.5rem;
|
||||
width: 100vw;
|
||||
height: calc(100% - 2.5rem);
|
||||
backdrop-filter: blur(10px);
|
||||
background: #dddddd99;
|
||||
}
|
||||
}
|
||||
.mobileMenuActive{
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
94
components/Logo.vue
Normal file
94
components/Logo.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="logoContainer">
|
||||
<div class="logoContent">
|
||||
<div class="logoLine1">
|
||||
<span>星</span><span>撰 <div class="myMask"></div></span>
|
||||
</div>
|
||||
<div class="logoLine2">star writ</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@media (max-width: 767px) {
|
||||
.logoContainer {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.logoContainer{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.logoContent{
|
||||
position: relative;
|
||||
padding: 5px 20px;
|
||||
& > div{
|
||||
position: relative;
|
||||
}
|
||||
& > div.logoLine1{
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
font-family: KingHwa_OldSong, sans-serif;
|
||||
& > span{
|
||||
position: relative;
|
||||
padding: 0.2em;
|
||||
}
|
||||
& > span:last-child{
|
||||
& > div.myMask {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: inherit;
|
||||
background: #000;
|
||||
animation: ChangeWidth 500ms ease-in-out 300ms forwards;
|
||||
|
||||
&:last-child::after {
|
||||
content: '撰';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 0.2em;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
font-size: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div.logoLine2{
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1em;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: center; /* 两端对齐 */
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
font-family: "LXGW WenKai", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes ChangeWidth {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
58
docs/03-关于Nuxt的一些API.md
Normal file
58
docs/03-关于Nuxt的一些API.md
Normal file
@ -0,0 +1,58 @@
|
||||
# 关于Nuxt的一些API
|
||||
|
||||
## Components 组件
|
||||
|
||||
|
||||
## Composables 复合函数
|
||||
|
||||
|
||||
## Utils 工具
|
||||
|
||||
### `definePageMeta(meta: PageMeta): void`
|
||||
|
||||
|
||||
> 定义页面属性
|
||||
|
||||
```typescript
|
||||
interface PageMeta {
|
||||
validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
|
||||
redirect?: RouteRecordRedirectOption
|
||||
name?: string
|
||||
path?: string
|
||||
props?: RouteRecordRaw['props']
|
||||
alias?: string | string[]
|
||||
pageTransition?: boolean | TransitionProps
|
||||
layoutTransition?: boolean | TransitionProps
|
||||
viewTransition?: boolean | 'always'
|
||||
key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
|
||||
keepalive?: boolean | KeepAliveProps
|
||||
layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
|
||||
middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
|
||||
scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
|
||||
[key: string]: unknown
|
||||
}
|
||||
```
|
||||
|
||||
- layoutTransition
|
||||
|
||||
> 设置要应用于当前布局的过渡的名称。您还可以将此值设置为 false 以禁用布局过渡。
|
||||
>
|
||||
> Type: boolean | TransitionProps
|
||||
|
||||
- pageTransition
|
||||
|
||||
> 设置要应用于当前页面的过渡的名称。您还可以将此值设置为 false 以禁用布局过渡。
|
||||
>
|
||||
> Type: boolean | TransitionProps
|
||||
|
||||
|
||||
### `onBeforeRouteLeave(leaveGuard): void`
|
||||
|
||||
eg: '/pages/index.vue'
|
||||
|
||||
> 当前路由离开前的拦截
|
||||
>
|
||||
> leaveGuard: Navigation Guard. 导航护卫。
|
||||
>
|
||||
> (to, from, next)
|
||||
|
||||
1
docs/04-关于Nuxt.config的内容
Normal file
1
docs/04-关于Nuxt.config的内容
Normal file
@ -0,0 +1 @@
|
||||
1. 全局过渡效果，需要在nuxt.config.ts中设置
|
||||
14
docs/05-关于字体提纯.md
Normal file
14
docs/05-关于字体提纯.md
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
- 安装
|
||||
|
||||
```bash
|
||||
npm install fontmin -g
|
||||
```
|
||||
|
||||
- 创建一个文本文件（如 text.txt），包含项目中实际使用的字符。
|
||||
|
||||
- 运行
|
||||
|
||||
```bash
|
||||
fontmin path/to/source-font.ttf --text-file=path/to/text.txt --output-file=path/to/output-font.ttf
|
||||
```
|
||||
@ -1,11 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot/>
|
||||
<div class="homeLayout">
|
||||
<HomeHeader class="homeHeader"/>
|
||||
<div class="homeMain">
|
||||
<slot class="homeMainContent"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.homeLayout{
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.homeHeader{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.homeMain{
|
||||
flex: 10;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
& > .homeMainContent{
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="startLayout">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -12,6 +12,43 @@ export default defineNuxtConfig({
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
css: [
|
||||
'~/assets/css/style.css',
|
||||
'~/assets/css/font.css',
|
||||
'~/assets/css/value.css',
|
||||
'~/assets/css/iconfont.css',
|
||||
'~/assets/css/transitions.css',
|
||||
],
|
||||
app:{
|
||||
head:{
|
||||
link: [
|
||||
{
|
||||
// LXGW WenKai 落霞孤鹜
|
||||
rel: "stylesheet",
|
||||
href: 'https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css'
|
||||
},
|
||||
{
|
||||
// Huiwen-mincho 汇文明朝体
|
||||
rel: "stylesheet",
|
||||
href: 'https://chinese-fonts-cdn.deno.dev/packages/hwmct/dist/%E6%B1%87%E6%96%87%E6%98%8E%E6%9C%9D%E4%BD%93/result.css'
|
||||
// article {
|
||||
// font-family:'Huiwen-mincho';
|
||||
// font-weight:'400'
|
||||
// };
|
||||
},
|
||||
]
|
||||
},
|
||||
layoutTransition:{
|
||||
name: 'fade',
|
||||
mode: 'out-in',
|
||||
type: 'transition', // 明确指定动画类型
|
||||
duration: {
|
||||
enter: 200,
|
||||
leave: 500
|
||||
},
|
||||
appear: true
|
||||
}
|
||||
},
|
||||
hooks: {
|
||||
'listen': (server) => {
|
||||
startBroswer(server.address())
|
||||
|
||||
@ -5,9 +5,10 @@ definePageMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>HOME</div>
|
||||
<div class="homeIndex">HOME你好</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.homeIndex{
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
definePageMeta({
|
||||
// 使用自定义模板
|
||||
layout: 'start',
|
||||
@ -11,7 +10,7 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
leaveTime.value = true
|
||||
setTimeout(() => {
|
||||
next(true)
|
||||
}, 1100)
|
||||
}, 1300)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -21,12 +20,13 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
<div class="myFace bottom-0" :class="leaveTime ? 'myFaceLeave' : ''"></div>
|
||||
<div class="myContainer text-center font-bold">
|
||||
<div class="content">
|
||||
<span>STAR</span><span>WAIT<div class="myMask"></div></span>
|
||||
<span :class="leaveTime ? 'leaveBack' : ''">星</span><span>撰<div class="myMask"></div></span>
|
||||
</div>
|
||||
<div class="enContent">
|
||||
<span :class="leaveTime ? 'leaveBack' : ''">star writ</span>
|
||||
</div>
|
||||
<div class="entry" :class="leaveTime ? 'entryGo' : ''">
|
||||
<div class="cursor-pointer">
|
||||
<nuxt-link to="/home">Entry</nuxt-link>
|
||||
</div>
|
||||
<nuxt-link to="/home" class="cursor-pointer">Entry</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -40,6 +40,7 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
background: #000;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.myFaceLeave {
|
||||
animation: LeaveHalfScreen 1s ease-in-out forwards !important;
|
||||
}
|
||||
@ -48,15 +49,32 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
position: relative;
|
||||
width: 360px;
|
||||
color: #000;
|
||||
font-size: 32px;
|
||||
font-size: 3rem;
|
||||
letter-spacing: 4px;
|
||||
|
||||
& > div.content > span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
animation: ChangeColor 1s ease-in-out 0.65s forwards;
|
||||
font-family: KingHwa_OldSong, sans-serif;
|
||||
font-weight: bold;
|
||||
|
||||
&.leaveBack {
|
||||
animation: LeaveChangeColor 300ms ease-in-out forwards;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
height: 100%;
|
||||
width: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
z-index: -1;
|
||||
animation: ChangeWidth 1s ease-in-out 0.1s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.myMask {
|
||||
position: absolute;
|
||||
@ -72,13 +90,13 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
animation: ChangeWidth 1s ease-in-out 1.2s forwards;
|
||||
|
||||
&:last-child::after {
|
||||
content: 'WAIT';
|
||||
content: '撰';
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
font-size: inherit;
|
||||
@ -88,6 +106,19 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
}
|
||||
}
|
||||
|
||||
& > div.enContent{
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
animation: ChangeColor 1s ease-in-out 0.65s forwards;
|
||||
font-family: "LXGW WenKai", sans-serif;
|
||||
line-height: 1em;
|
||||
& > span.leaveBack {
|
||||
color: #000;
|
||||
transition: color 0.5s ease-in-out;
|
||||
//animation: LeaveChangeColor 300ms ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.entry {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -103,10 +134,12 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
animation: ShowEntry 1s ease-in-out 1s forwards, gradient 3s ease 1s infinite;
|
||||
background: linear-gradient(45deg, #00dc82, #36e4da, #ff7e5f);
|
||||
background-size: 600% 600%; /* 设置背景大小 */
|
||||
font-family: nice, sans-serif;
|
||||
&.entryGo {
|
||||
animation: HideEntry 300ms ease-in-out forwards !important;
|
||||
}
|
||||
& > div {
|
||||
|
||||
& > a {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
@ -121,13 +154,13 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -143,6 +176,7 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes HideEntry {
|
||||
from {
|
||||
opacity: 1;
|
||||
@ -161,6 +195,15 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LeaveChangeWidth {
|
||||
from {
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ChangeColor {
|
||||
from {
|
||||
color: #000;
|
||||
@ -170,6 +213,19 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LeaveChangeColor {
|
||||
0% {
|
||||
color: #fff;
|
||||
}
|
||||
30% {
|
||||
color: #000;
|
||||
}
|
||||
100% {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes HalfScreen {
|
||||
from {
|
||||
height: 0;
|
||||
@ -178,6 +234,7 @@ onBeforeRouteLeave((to, from, next) => {
|
||||
height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes LeaveHalfScreen {
|
||||
from {
|
||||
height: 50%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user