feat:重构按钮和icon组件

This commit is contained in:
R524809
2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
+242 -245
View File
@@ -1,176 +1,171 @@
/* Logo 字体 */
@font-face {
font-family: 'iconfont logo';
/* src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
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'); */
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;
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
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;
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;
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
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;
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;
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
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;
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;
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;
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;
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
@@ -178,139 +173,139 @@
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
margin: 1em 0;
}
.markdown > p,
.markdown > blockquote,
.markdown > .highlight,
.markdown > ol,
.markdown > ul {
width: 80%;
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul > li {
list-style: circle;
.markdown ul>li {
list-style: circle;
}
.markdown > ul li,
.markdown blockquote ul > li {
margin-left: 20px;
padding-left: 4px;
.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>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol > li {
list-style: decimal;
.markdown ol>li {
list-style: decimal;
}
.markdown > ol li,
.markdown blockquote ol > li {
margin-left: 20px;
padding-left: 4px;
.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;
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
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 {
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 {
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,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown > table th {
background: #f7f7f7;
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
color: #ccc;
}
.markdown h1:hover .anchor,
@@ -319,26 +314,27 @@
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
opacity: 1;
display: inline-block;
}
.markdown > br,
.markdown > p > br {
clear: both;
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
color: #969896;
}
.hljs-string,
@@ -347,29 +343,29 @@
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
color: #63a35c;
}
.hljs-tag {
color: #333333;
color: #333333;
}
.hljs-title,
@@ -378,21 +374,21 @@
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
text-decoration: underline;
}
/* 代码高亮 */
@@ -403,84 +399,85 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
* 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;
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;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
-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-"]::-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;
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[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f2f0;
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
color: slategray;
}
.token.punctuation {
color: #999;
color: #999;
}
.namespace {
opacity: 0.7;
opacity: .7;
}
.token.property,
@@ -490,7 +487,7 @@ pre[class*='language-'] {
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
color: #905;
}
.token.selector,
@@ -499,7 +496,7 @@ pre[class*='language-'] {
.token.char,
.token.builtin,
.token.inserted {
color: #690;
color: #690;
}
.token.operator,
@@ -507,36 +504,36 @@ pre[class*='language-'] {
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+182
View File
@@ -5,6 +5,188 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "47282109",
"name": "setting",
"font_class": "setting",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "47282098",
"name": "round-star-o",
"font_class": "round-star-o",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "47281642",
"name": "plus",
"font_class": "plus",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "47281605",
"name": "star",
"font_class": "star",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "47281606",
"name": "minus",
"font_class": "minus",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "47281607",
"name": "round-star",
"font_class": "round-star",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "47281608",
"name": "star-o",
"font_class": "star-o",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "47281609",
"name": "about-o",
"font_class": "about-o",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "47281610",
"name": "feedback-o",
"font_class": "feedback-o",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "47281611",
"name": "feedback",
"font_class": "feedback",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "47281612",
"name": "about",
"font_class": "about",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "47281613",
"name": "heart-o",
"font_class": "heart-o",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "47281614",
"name": "heart",
"font_class": "heart",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "47281615",
"name": "print",
"font_class": "print",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "47281616",
"name": "family",
"font_class": "family",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "47281617",
"name": "search-plus",
"font_class": "search-plus",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "47281618",
"name": "search",
"font_class": "search",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "47281619",
"name": "clock-o",
"font_class": "clock-o",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "47281620",
"name": "clock",
"font_class": "clock",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "47281621",
"name": "search-minus",
"font_class": "search-minus",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "47279508",
"name": "setting-o",
"font_class": "setting-o",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "47278437",
"name": "line-share",
"font_class": "line-share",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "39768497",
"name": "arrow-up",
"font_class": "arrow-up",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "39768498",
"name": "arrow-right",
"font_class": "arrow-right",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "39768499",
"name": "arrow-down",
"font_class": "arrow-down",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "39768501",
"name": "arrow-left",
"font_class": "arrow-left",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "782338",
"name": "success",
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long