完成导航，下一步，写blog目录新增!
This commit is contained in:
parent
fd5ad3ac6f
commit
59236fbbe9
@ -1,6 +1,7 @@
|
||||
/* 默认字体大小（桌面端） */
|
||||
body {
|
||||
font-size: 16px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
@ -38,3 +38,65 @@
|
||||
src: url('/assets/fonts/nice.ttf') format('woff2');
|
||||
unicode-range: U+4E00-9FFF, U+3400-4DBF; /* 基本汉字及扩展A区 */
|
||||
}
|
||||
|
||||
/*// LXGW WenKai 落霞孤鹜*/
|
||||
/*// Huiwen-mincho 汇文明朝体*/
|
||||
|
||||
/* 英文字体定义（覆盖英文、数字、常用符号） */
|
||||
@font-face {
|
||||
font-family: 'EnglishFont';
|
||||
src: local('nice'), local('TechnicLite');
|
||||
/*, local('Arial'), local('Helvetica Neue')*/
|
||||
unicode-range: U+0000-00FF, /* 基本拉丁字母、数字、标点 */
|
||||
U+0100-024F, /* 拉丁扩展 */
|
||||
U+0250-02AF, /* 国际音标扩展 */
|
||||
U+1E00-1EFF, /* 拉丁扩展附加 */
|
||||
U+2000-206F, /* 常用标点 */
|
||||
U+2070-209F, /* 上标下标 */
|
||||
U+20A0-20CF, /* 货币符号 */
|
||||
U+2100-214F, /* 字母类符号 */
|
||||
U+2150-218F, /* 数字形式 */
|
||||
U+2190-21FF, /* 箭头 */
|
||||
U+2200-22FF, /* 数学运算符 */
|
||||
U+2300-23FF, /* 杂项技术符号 */
|
||||
U+2460-24FF, /* 封闭字母数字 */
|
||||
U+2500-257F, /* 制表符 */
|
||||
U+2580-259F, /* 方块元素 */
|
||||
U+25A0-25FF, /* 几何图形 */
|
||||
U+2600-26FF, /* 杂项符号 */
|
||||
U+2700-27BF, /* 印刷符号 */
|
||||
U+2C60-2C7F, /* 拉丁扩展-C */
|
||||
U+2E00-2E7F, /* 补充标点 */
|
||||
U+FE00-FE0F, /* 变体选择符 */
|
||||
U+FF00-FFEF; /* 半角全角形式 */
|
||||
}
|
||||
|
||||
/* 中文字体定义 */
|
||||
@font-face {
|
||||
font-family: 'ChineseFont';
|
||||
src: local('LXGW WenKai'), local('Huiwen-mincho');
|
||||
/*, local('PingFang SC'), local('Microsoft YaHei')*/
|
||||
unicode-range: U+4E00-9FFF, /* 中日韩统一表意文字 */
|
||||
U+3400-4DBF, /* 扩展A */
|
||||
U+20000-2A6DF, /* 扩展B */
|
||||
U+2A700-2B73F,/* 扩展C */
|
||||
U+2B740-2B81F, /* 扩展D */
|
||||
U+2B820-2CEAF, /* 扩展E */
|
||||
U+2CEB0-2EBEF, /* 扩展F */
|
||||
U+3000-303F, /* 中日韩符号和标点 */
|
||||
U+3100-312F, /* 注音符号 */
|
||||
U+31A0-31BF, /* 注音扩展 */
|
||||
U+31C0-31EF, /* 中日韩笔画 */
|
||||
U+3200-32FF, /* 封闭式中日韩字母和月份 */
|
||||
U+3300-33FF, /* 中日韩兼容字符 */
|
||||
U+F900-FAFF, /* 中日韩兼容表意文字 */
|
||||
U+FE30-FE4F, /* 中日韩兼容形式 */
|
||||
U+FF00-FFEF; /* 半角全角形式 */
|
||||
}
|
||||
|
||||
:root{
|
||||
/* 应用字体 */
|
||||
html, body{
|
||||
font-family: 'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', 'ChineseFont','EnglishFont', sans-serif;
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,3 @@
|
||||
@import "../icon/cocoIconFont/iconfont.css";
|
||||
@import "../icon/sxIconFont/iconfont.css";
|
||||
@import "../icon/starIconFont/iconfont.css";
|
||||
|
||||
@ -6,7 +6,3 @@ html, body {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: 'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', sans-serif;
|
||||
}
|
||||
|
||||
@ -22,6 +22,13 @@
|
||||
--bg-color-bf: #fff;
|
||||
|
||||
/*字体颜色*/
|
||||
--color-text: #fefefe;
|
||||
--color-text: #333;
|
||||
--bg-opacity: 0.5;
|
||||
|
||||
/*主要着重颜色*/
|
||||
--main-strong-color: #333;
|
||||
/*菜单长度*/
|
||||
--nav-length: 5rem;
|
||||
/*圆角*/
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
539
assets/icon/starIconFont/demo.css
Normal file
539
assets/icon/starIconFont/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;
|
||||
}
|
||||
835
assets/icon/starIconFont/demo_index.html
Normal file
835
assets/icon/starIconFont/demo_index.html
Normal file
@ -0,0 +1,835 @@
|
||||
<!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">
|
||||
|
||||
<span class="sub-title">彩色字体</span>
|
||||
|
||||
</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=4902296" 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 starIconFont"></span>
|
||||
<div class="name">纸飞机</div>
|
||||
<div class="code-name">&#xe617;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">纸飞机-copy</div>
|
||||
<div class="code-name">&#xe9a0;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">世界</div>
|
||||
<div class="code-name">&#xe802;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">羽毛笔</div>
|
||||
<div class="code-name">&#xe606;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">羽毛笔-copy</div>
|
||||
<div class="code-name">&#xe9a1;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">张弦月</div>
|
||||
<div class="code-name">&#xe642;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">扬沙</div>
|
||||
<div class="code-name">&#xe643;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">我已阅读</div>
|
||||
<div class="code-name">&#xe77d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">阅读</div>
|
||||
<div class="code-name">&#xe763;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">月亮</div>
|
||||
<div class="code-name">&#xe6cc;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">阅读</div>
|
||||
<div class="code-name">&#xe6bc;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">叶子</div>
|
||||
<div class="code-name">&#xe760;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">时间 开始时间</div>
|
||||
<div class="code-name">&#xe6e9;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">云端,云,云服务</div>
|
||||
<div class="code-name">&#xe988;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">已阅读</div>
|
||||
<div class="code-name">&#xe68c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">执行书</div>
|
||||
<div class="code-name">&#xe761;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">地球</div>
|
||||
<div class="code-name">&#xe99a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">月球</div>
|
||||
<div class="code-name">&#xe99b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">火箭</div>
|
||||
<div class="code-name">&#xe99d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">卫星</div>
|
||||
<div class="code-name">&#xe99e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">柴犬</div>
|
||||
<div class="code-name">&#xe647;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">荷兰猪</div>
|
||||
<div class="code-name">&#xe648;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">三花猫</div>
|
||||
<div class="code-name">&#xe64b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">阅读-copy</div>
|
||||
<div class="code-name">&#xe99f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">满月</div>
|
||||
<div class="code-name">&#xe623;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">上弦月</div>
|
||||
<div class="code-name">&#xe632;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">晚晴天</div>
|
||||
<div class="code-name">&#xe634;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">下弦月</div>
|
||||
<div class="code-name">&#xe638;</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: 'starIconFont';
|
||||
src:
|
||||
url('iconfont.woff2?t=1745328881235') format('woff2'),
|
||||
url('iconfont.woff?t=1745328881235') format('woff'),
|
||||
url('iconfont.ttf?t=1745328881235') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.starIconFont {
|
||||
font-family: "starIconFont" !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="starIconFont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"starIconFont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-zhifeiji"></span>
|
||||
<div class="name">
|
||||
纸飞机
|
||||
</div>
|
||||
<div class="code-name">.star-zhifeiji
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-zhifeiji-copy"></span>
|
||||
<div class="name">
|
||||
纸飞机-copy
|
||||
</div>
|
||||
<div class="code-name">.star-zhifeiji-copy
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-shijie"></span>
|
||||
<div class="name">
|
||||
世界
|
||||
</div>
|
||||
<div class="code-name">.star-shijie
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yumaobi"></span>
|
||||
<div class="name">
|
||||
羽毛笔
|
||||
</div>
|
||||
<div class="code-name">.star-yumaobi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yumaobi-copy"></span>
|
||||
<div class="name">
|
||||
羽毛笔-copy
|
||||
</div>
|
||||
<div class="code-name">.star-yumaobi-copy
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-zhangxianyue"></span>
|
||||
<div class="name">
|
||||
张弦月
|
||||
</div>
|
||||
<div class="code-name">.star-zhangxianyue
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-Group1"></span>
|
||||
<div class="name">
|
||||
扬沙
|
||||
</div>
|
||||
<div class="code-name">.star-Group1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-woyiyuedu"></span>
|
||||
<div class="name">
|
||||
我已阅读
|
||||
</div>
|
||||
<div class="code-name">.star-woyiyuedu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yuedu"></span>
|
||||
<div class="name">
|
||||
阅读
|
||||
</div>
|
||||
<div class="code-name">.star-yuedu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yueliang"></span>
|
||||
<div class="name">
|
||||
月亮
|
||||
</div>
|
||||
<div class="code-name">.star-yueliang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yuedu1"></span>
|
||||
<div class="name">
|
||||
阅读
|
||||
</div>
|
||||
<div class="code-name">.star-yuedu1
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yezi"></span>
|
||||
<div class="name">
|
||||
叶子
|
||||
</div>
|
||||
<div class="code-name">.star-yezi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-shijiankaishishijian"></span>
|
||||
<div class="name">
|
||||
时间 开始时间
|
||||
</div>
|
||||
<div class="code-name">.star-shijiankaishishijian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-cloud-full"></span>
|
||||
<div class="name">
|
||||
云端,云,云服务
|
||||
</div>
|
||||
<div class="code-name">.star-cloud-full
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yiyuedu"></span>
|
||||
<div class="name">
|
||||
已阅读
|
||||
</div>
|
||||
<div class="code-name">.star-yiyuedu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-zhihangshu"></span>
|
||||
<div class="name">
|
||||
执行书
|
||||
</div>
|
||||
<div class="code-name">.star-zhihangshu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-earth"></span>
|
||||
<div class="name">
|
||||
地球
|
||||
</div>
|
||||
<div class="code-name">.star-earth
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-moon"></span>
|
||||
<div class="name">
|
||||
月球
|
||||
</div>
|
||||
<div class="code-name">.star-moon
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-rocket-3"></span>
|
||||
<div class="name">
|
||||
火箭
|
||||
</div>
|
||||
<div class="code-name">.star-rocket-3
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-satellite"></span>
|
||||
<div class="name">
|
||||
卫星
|
||||
</div>
|
||||
<div class="code-name">.star-satellite
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-chaiquan"></span>
|
||||
<div class="name">
|
||||
柴犬
|
||||
</div>
|
||||
<div class="code-name">.star-chaiquan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-helanzhu"></span>
|
||||
<div class="name">
|
||||
荷兰猪
|
||||
</div>
|
||||
<div class="code-name">.star-helanzhu
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-sanhuamao"></span>
|
||||
<div class="name">
|
||||
三花猫
|
||||
</div>
|
||||
<div class="code-name">.star-sanhuamao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-yuedu1-copy"></span>
|
||||
<div class="name">
|
||||
阅读-copy
|
||||
</div>
|
||||
<div class="code-name">.star-yuedu1-copy
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-manyue"></span>
|
||||
<div class="name">
|
||||
满月
|
||||
</div>
|
||||
<div class="code-name">.star-manyue
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-shangxianyue"></span>
|
||||
<div class="name">
|
||||
上弦月
|
||||
</div>
|
||||
<div class="code-name">.star-shangxianyue
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-wanqingtian"></span>
|
||||
<div class="name">
|
||||
晚晴天
|
||||
</div>
|
||||
<div class="code-name">.star-wanqingtian
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-xiaxianyue"></span>
|
||||
<div class="name">
|
||||
下弦月
|
||||
</div>
|
||||
<div class="code-name">.star-xiaxianyue
|
||||
</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="starIconFont star-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
starIconFont" 是你项目下的 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="#star-zhifeiji"></use>
|
||||
</svg>
|
||||
<div class="name">纸飞机</div>
|
||||
<div class="code-name">#star-zhifeiji</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-zhifeiji-copy"></use>
|
||||
</svg>
|
||||
<div class="name">纸飞机-copy</div>
|
||||
<div class="code-name">#star-zhifeiji-copy</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-shijie"></use>
|
||||
</svg>
|
||||
<div class="name">世界</div>
|
||||
<div class="code-name">#star-shijie</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yumaobi"></use>
|
||||
</svg>
|
||||
<div class="name">羽毛笔</div>
|
||||
<div class="code-name">#star-yumaobi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yumaobi-copy"></use>
|
||||
</svg>
|
||||
<div class="name">羽毛笔-copy</div>
|
||||
<div class="code-name">#star-yumaobi-copy</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-zhangxianyue"></use>
|
||||
</svg>
|
||||
<div class="name">张弦月</div>
|
||||
<div class="code-name">#star-zhangxianyue</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-Group1"></use>
|
||||
</svg>
|
||||
<div class="name">扬沙</div>
|
||||
<div class="code-name">#star-Group1</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-woyiyuedu"></use>
|
||||
</svg>
|
||||
<div class="name">我已阅读</div>
|
||||
<div class="code-name">#star-woyiyuedu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yuedu"></use>
|
||||
</svg>
|
||||
<div class="name">阅读</div>
|
||||
<div class="code-name">#star-yuedu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yueliang"></use>
|
||||
</svg>
|
||||
<div class="name">月亮</div>
|
||||
<div class="code-name">#star-yueliang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yuedu1"></use>
|
||||
</svg>
|
||||
<div class="name">阅读</div>
|
||||
<div class="code-name">#star-yuedu1</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yezi"></use>
|
||||
</svg>
|
||||
<div class="name">叶子</div>
|
||||
<div class="code-name">#star-yezi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-shijiankaishishijian"></use>
|
||||
</svg>
|
||||
<div class="name">时间 开始时间</div>
|
||||
<div class="code-name">#star-shijiankaishishijian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-cloud-full"></use>
|
||||
</svg>
|
||||
<div class="name">云端,云,云服务</div>
|
||||
<div class="code-name">#star-cloud-full</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yiyuedu"></use>
|
||||
</svg>
|
||||
<div class="name">已阅读</div>
|
||||
<div class="code-name">#star-yiyuedu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-zhihangshu"></use>
|
||||
</svg>
|
||||
<div class="name">执行书</div>
|
||||
<div class="code-name">#star-zhihangshu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-earth"></use>
|
||||
</svg>
|
||||
<div class="name">地球</div>
|
||||
<div class="code-name">#star-earth</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-moon"></use>
|
||||
</svg>
|
||||
<div class="name">月球</div>
|
||||
<div class="code-name">#star-moon</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-rocket-3"></use>
|
||||
</svg>
|
||||
<div class="name">火箭</div>
|
||||
<div class="code-name">#star-rocket-3</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-satellite"></use>
|
||||
</svg>
|
||||
<div class="name">卫星</div>
|
||||
<div class="code-name">#star-satellite</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-chaiquan"></use>
|
||||
</svg>
|
||||
<div class="name">柴犬</div>
|
||||
<div class="code-name">#star-chaiquan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-helanzhu"></use>
|
||||
</svg>
|
||||
<div class="name">荷兰猪</div>
|
||||
<div class="code-name">#star-helanzhu</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-sanhuamao"></use>
|
||||
</svg>
|
||||
<div class="name">三花猫</div>
|
||||
<div class="code-name">#star-sanhuamao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-yuedu1-copy"></use>
|
||||
</svg>
|
||||
<div class="name">阅读-copy</div>
|
||||
<div class="code-name">#star-yuedu1-copy</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-manyue"></use>
|
||||
</svg>
|
||||
<div class="name">满月</div>
|
||||
<div class="code-name">#star-manyue</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-shangxianyue"></use>
|
||||
</svg>
|
||||
<div class="name">上弦月</div>
|
||||
<div class="code-name">#star-shangxianyue</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-wanqingtian"></use>
|
||||
</svg>
|
||||
<div class="name">晚晴天</div>
|
||||
<div class="code-name">#star-wanqingtian</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-xiaxianyue"></use>
|
||||
</svg>
|
||||
<div class="name">下弦月</div>
|
||||
<div class="code-name">#star-xiaxianyue</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>
|
||||
129
assets/icon/starIconFont/iconfont.css
Normal file
129
assets/icon/starIconFont/iconfont.css
Normal file
@ -0,0 +1,129 @@
|
||||
@font-face {
|
||||
font-family: "starIconFont"; /* Project id 4902296 */
|
||||
/* Color fonts */
|
||||
src:
|
||||
url('iconfont.woff2?t=1745328881235') format('woff2'),
|
||||
url('iconfont.woff?t=1745328881235') format('woff'),
|
||||
url('iconfont.ttf?t=1745328881235') format('truetype');
|
||||
}
|
||||
|
||||
.starIconFont {
|
||||
font-family: "starIconFont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.star-zhifeiji:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.star-zhifeiji-copy:before {
|
||||
content: "\e9a0";
|
||||
}
|
||||
|
||||
.star-shijie:before {
|
||||
content: "\e802";
|
||||
}
|
||||
|
||||
.star-yumaobi:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.star-yumaobi-copy:before {
|
||||
content: "\e9a1";
|
||||
}
|
||||
|
||||
.star-zhangxianyue:before {
|
||||
content: "\e642";
|
||||
}
|
||||
|
||||
.star-Group1:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.star-woyiyuedu:before {
|
||||
content: "\e77d";
|
||||
}
|
||||
|
||||
.star-yuedu:before {
|
||||
content: "\e763";
|
||||
}
|
||||
|
||||
.star-yueliang:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.star-yuedu1:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.star-yezi:before {
|
||||
content: "\e760";
|
||||
}
|
||||
|
||||
.star-shijiankaishishijian:before {
|
||||
content: "\e6e9";
|
||||
}
|
||||
|
||||
.star-cloud-full:before {
|
||||
content: "\e988";
|
||||
}
|
||||
|
||||
.star-yiyuedu:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.star-zhihangshu:before {
|
||||
content: "\e761";
|
||||
}
|
||||
|
||||
.star-earth:before {
|
||||
content: "\e99a";
|
||||
}
|
||||
|
||||
.star-moon:before {
|
||||
content: "\e99b";
|
||||
}
|
||||
|
||||
.star-rocket-3:before {
|
||||
content: "\e99d";
|
||||
}
|
||||
|
||||
.star-satellite:before {
|
||||
content: "\e99e";
|
||||
}
|
||||
|
||||
.star-chaiquan:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.star-helanzhu:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.star-sanhuamao:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.star-yuedu1-copy:before {
|
||||
content: "\e99f";
|
||||
}
|
||||
|
||||
.star-manyue:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.star-shangxianyue:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.star-wanqingtian:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.star-xiaxianyue:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
1
assets/icon/starIconFont/iconfont.js
Normal file
1
assets/icon/starIconFont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
205
assets/icon/starIconFont/iconfont.json
Normal file
205
assets/icon/starIconFont/iconfont.json
Normal file
@ -0,0 +1,205 @@
|
||||
{
|
||||
"id": "4902296",
|
||||
"name": "star",
|
||||
"font_family": "starIconFont",
|
||||
"css_prefix_text": "star-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "20860668",
|
||||
"name": "纸飞机",
|
||||
"font_class": "zhifeiji",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "44119317",
|
||||
"name": "纸飞机-copy",
|
||||
"font_class": "zhifeiji-copy",
|
||||
"unicode": "e9a0",
|
||||
"unicode_decimal": 59808
|
||||
},
|
||||
{
|
||||
"icon_id": "3217063",
|
||||
"name": "世界",
|
||||
"font_class": "shijie",
|
||||
"unicode": "e802",
|
||||
"unicode_decimal": 59394
|
||||
},
|
||||
{
|
||||
"icon_id": "3362566",
|
||||
"name": "羽毛笔",
|
||||
"font_class": "yumaobi",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "44119318",
|
||||
"name": "羽毛笔-copy",
|
||||
"font_class": "yumaobi-copy",
|
||||
"unicode": "e9a1",
|
||||
"unicode_decimal": 59809
|
||||
},
|
||||
{
|
||||
"icon_id": "3758845",
|
||||
"name": "张弦月",
|
||||
"font_class": "zhangxianyue",
|
||||
"unicode": "e642",
|
||||
"unicode_decimal": 58946
|
||||
},
|
||||
{
|
||||
"icon_id": "3758920",
|
||||
"name": "扬沙",
|
||||
"font_class": "Group1",
|
||||
"unicode": "e643",
|
||||
"unicode_decimal": 58947
|
||||
},
|
||||
{
|
||||
"icon_id": "6068995",
|
||||
"name": "我已阅读",
|
||||
"font_class": "woyiyuedu",
|
||||
"unicode": "e77d",
|
||||
"unicode_decimal": 59261
|
||||
},
|
||||
{
|
||||
"icon_id": "9172638",
|
||||
"name": "阅读",
|
||||
"font_class": "yuedu",
|
||||
"unicode": "e763",
|
||||
"unicode_decimal": 59235
|
||||
},
|
||||
{
|
||||
"icon_id": "9594839",
|
||||
"name": "月亮",
|
||||
"font_class": "yueliang",
|
||||
"unicode": "e6cc",
|
||||
"unicode_decimal": 59084
|
||||
},
|
||||
{
|
||||
"icon_id": "11278216",
|
||||
"name": "阅读",
|
||||
"font_class": "yuedu1",
|
||||
"unicode": "e6bc",
|
||||
"unicode_decimal": 59068
|
||||
},
|
||||
{
|
||||
"icon_id": "14145811",
|
||||
"name": "叶子",
|
||||
"font_class": "yezi",
|
||||
"unicode": "e760",
|
||||
"unicode_decimal": 59232
|
||||
},
|
||||
{
|
||||
"icon_id": "16522431",
|
||||
"name": "时间 开始时间",
|
||||
"font_class": "shijiankaishishijian",
|
||||
"unicode": "e6e9",
|
||||
"unicode_decimal": 59113
|
||||
},
|
||||
{
|
||||
"icon_id": "18170210",
|
||||
"name": "云端,云,云服务",
|
||||
"font_class": "cloud-full",
|
||||
"unicode": "e988",
|
||||
"unicode_decimal": 59784
|
||||
},
|
||||
{
|
||||
"icon_id": "23408958",
|
||||
"name": "已阅读",
|
||||
"font_class": "yiyuedu",
|
||||
"unicode": "e68c",
|
||||
"unicode_decimal": 59020
|
||||
},
|
||||
{
|
||||
"icon_id": "29776115",
|
||||
"name": "执行书",
|
||||
"font_class": "zhihangshu",
|
||||
"unicode": "e761",
|
||||
"unicode_decimal": 59233
|
||||
},
|
||||
{
|
||||
"icon_id": "41507630",
|
||||
"name": "地球",
|
||||
"font_class": "earth",
|
||||
"unicode": "e99a",
|
||||
"unicode_decimal": 59802
|
||||
},
|
||||
{
|
||||
"icon_id": "41507635",
|
||||
"name": "月球",
|
||||
"font_class": "moon",
|
||||
"unicode": "e99b",
|
||||
"unicode_decimal": 59803
|
||||
},
|
||||
{
|
||||
"icon_id": "41507640",
|
||||
"name": "火箭",
|
||||
"font_class": "rocket-3",
|
||||
"unicode": "e99d",
|
||||
"unicode_decimal": 59805
|
||||
},
|
||||
{
|
||||
"icon_id": "41507643",
|
||||
"name": "卫星",
|
||||
"font_class": "satellite",
|
||||
"unicode": "e99e",
|
||||
"unicode_decimal": 59806
|
||||
},
|
||||
{
|
||||
"icon_id": "42905920",
|
||||
"name": "柴犬",
|
||||
"font_class": "chaiquan",
|
||||
"unicode": "e647",
|
||||
"unicode_decimal": 58951
|
||||
},
|
||||
{
|
||||
"icon_id": "42905927",
|
||||
"name": "荷兰猪",
|
||||
"font_class": "helanzhu",
|
||||
"unicode": "e648",
|
||||
"unicode_decimal": 58952
|
||||
},
|
||||
{
|
||||
"icon_id": "43415566",
|
||||
"name": "三花猫",
|
||||
"font_class": "sanhuamao",
|
||||
"unicode": "e64b",
|
||||
"unicode_decimal": 58955
|
||||
},
|
||||
{
|
||||
"icon_id": "44119316",
|
||||
"name": "阅读-copy",
|
||||
"font_class": "yuedu1-copy",
|
||||
"unicode": "e99f",
|
||||
"unicode_decimal": 59807
|
||||
},
|
||||
{
|
||||
"icon_id": "3758264",
|
||||
"name": "满月",
|
||||
"font_class": "manyue",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "3758796",
|
||||
"name": "上弦月",
|
||||
"font_class": "shangxianyue",
|
||||
"unicode": "e632",
|
||||
"unicode_decimal": 58930
|
||||
},
|
||||
{
|
||||
"icon_id": "3758799",
|
||||
"name": "晚晴天",
|
||||
"font_class": "wanqingtian",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
},
|
||||
{
|
||||
"icon_id": "3758803",
|
||||
"name": "下弦月",
|
||||
"font_class": "xiaxianyue",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
assets/icon/starIconFont/iconfont.ttf
Normal file
BIN
assets/icon/starIconFont/iconfont.ttf
Normal file
Binary file not shown.
BIN
assets/icon/starIconFont/iconfont.woff
Normal file
BIN
assets/icon/starIconFont/iconfont.woff
Normal file
Binary file not shown.
BIN
assets/icon/starIconFont/iconfont.woff2
Normal file
BIN
assets/icon/starIconFont/iconfont.woff2
Normal file
Binary file not shown.
@ -1,23 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
// 移动端菜单展开状态
|
||||
import MobileMenu from "~/components/Home/MobileMenu.vue";
|
||||
import Menu from "~/components/Home/Menu.vue";
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const {$isMobile} = useNuxtApp()
|
||||
|
||||
const menuMobileExpandStatus = ref(false)
|
||||
const routeData = computed(() => {
|
||||
return {
|
||||
path: route.path,
|
||||
query: route.query,
|
||||
queryParams: {},
|
||||
hash: route.hash,
|
||||
}
|
||||
})
|
||||
const menuExpandStatus = ref(false)
|
||||
const handleMenuExpandCilck = () => {
|
||||
if(!menuExpandStatus.value) {
|
||||
router.push({hash: '#menuOpen'})
|
||||
}else{
|
||||
router.push({hash: ''})
|
||||
}
|
||||
}
|
||||
const handleMenuExpandStatusChange = () => {
|
||||
nextTick(() => {
|
||||
if(routeData.value.hash == '#menuOpen'){
|
||||
menuExpandStatus.value = true
|
||||
}
|
||||
if(routeData.value.hash !== '#menuOpen'){
|
||||
menuExpandStatus.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
watch(routeData, () => {
|
||||
handleMenuExpandStatusChange()
|
||||
})
|
||||
onMounted(() => {
|
||||
handleMenuExpandStatusChange()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="homeHeader relative flex">
|
||||
<div class="logoContainer">
|
||||
<Logo/>
|
||||
<nuxt-link to="/home" class="cursor-pointer">
|
||||
<Logo/>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="mobileIcon" @click="menuMobileExpandStatus = !menuMobileExpandStatus">
|
||||
</div>
|
||||
<MobileMenu :menuMobileExpandStatus/>
|
||||
<slot name="navBar"></slot>
|
||||
<div class="menuBarIcon" @click="handleMenuExpandCilck"/>
|
||||
<Menu @click="handleMenuExpandCilck" :menuExpandStatus/>
|
||||
</nav>
|
||||
<div class="infoContainer">
|
||||
<div class="mobileIcon"></div>
|
||||
<div class="menuBarIcon"></div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@ -40,7 +74,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
background: var(--bg-color-bd);
|
||||
}
|
||||
|
||||
nav > div.mobileIcon{
|
||||
nav > div.menuBarIcon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -58,7 +92,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
}
|
||||
}
|
||||
|
||||
div.infoContainer > div.mobileIcon{
|
||||
div.infoContainer > div.menuBarIcon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@ -96,7 +130,6 @@ const menuMobileExpandStatus = ref(false)
|
||||
nav{
|
||||
flex-shrink: 0;
|
||||
width: var(--main-width-auto);
|
||||
background-color: var(--bg-color-b1);
|
||||
}
|
||||
|
||||
div.infoContainer{
|
||||
|
||||
196
components/Home/Menu.vue
Normal file
196
components/Home/Menu.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<script setup lang="ts">
|
||||
const {menuExpandStatus} = defineProps({
|
||||
menuExpandStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const route = useRoute()
|
||||
const menuList = ref([
|
||||
{
|
||||
name: '首页',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
name: 'BLOG',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'blog'
|
||||
},
|
||||
{
|
||||
name: '读书',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'book'
|
||||
},
|
||||
{
|
||||
name: '乐趣',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'fun'
|
||||
},
|
||||
{
|
||||
name: '看看',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'hello'
|
||||
},
|
||||
])
|
||||
const activeMenu = computed(() => {
|
||||
return route.path.split('/')[2] || ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="menu" id="menuOpen" :class="menuExpandStatus ? 'menuExpand' : ''">
|
||||
<div @click.stop class="menuContent">
|
||||
<nuxt-link class="menuItemContainer" :class="activeMenu == menuItem.path && 'active' " v-for="(menuItem) in menuList" :key="menuItem.name" :to="'/home/'+menuItem.path">
|
||||
<div class="menuItemContent">
|
||||
<div class="starIconFont icon" v-html="menuItem.icon"/>
|
||||
<div class="menuName">{{menuItem.name}}</div>
|
||||
<div class="menuMessage">{{}}</div>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* 手机端 */
|
||||
@media (max-width: 767px){
|
||||
.menu{
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
backdrop-filter: blur(10px);
|
||||
background: #dddddd99;
|
||||
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.menuContent{
|
||||
position: relative;
|
||||
width: min(60vw, 12rem);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 3rem;
|
||||
width: 3px;
|
||||
background: var(--main-strong-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 选中固定效果 */
|
||||
&:has(a:nth-child(1).active)::after { transform: translateY(0); }
|
||||
&:has(a:nth-child(2).active)::after { transform: translateY(calc(100% + 0.6rem *1)); }
|
||||
&:has(a:nth-child(3).active)::after { transform: translateY(calc(200% + 0.6rem *2)); }
|
||||
&:has(a:nth-child(4).active)::after { transform: translateY(calc(300% + 0.6rem *3)); }
|
||||
&:has(a:nth-child(5).active)::after { transform: translateY(calc(400% + 0.6rem *4)); }
|
||||
|
||||
&>.menuItemContainer{
|
||||
display: block;
|
||||
position: relative;
|
||||
&>.menuItemContent{
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #33333310;
|
||||
height: 3rem;
|
||||
margin-bottom: 0.6rem;
|
||||
|
||||
|
||||
|
||||
& > div.icon{
|
||||
position: relative;
|
||||
left: -0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
& > div.menuName{
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuExpand{
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
/* 平板及以上 */
|
||||
@media (min-width: 768px){
|
||||
.menu{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
& > div.menuContent{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 3px;
|
||||
width: var(--nav-length);
|
||||
background: var(--main-strong-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
/* 悬停效果 */
|
||||
&:has(a:nth-child(1):hover)::after { transform: translateX(0); }
|
||||
&:has(a:nth-child(2):hover)::after { transform: translateX(100%); }
|
||||
&:has(a:nth-child(3):hover)::after { transform: translateX(200%); }
|
||||
&:has(a:nth-child(4):hover)::after { transform: translateX(300%); }
|
||||
&:has(a:nth-child(5):hover)::after { transform: translateX(400%); }
|
||||
|
||||
/* 选中固定效果 */
|
||||
&:has(a:nth-child(1).active)::after { transform: translateX(0); }
|
||||
&:has(a:nth-child(2).active)::after { transform: translateX(100%); }
|
||||
&:has(a:nth-child(3).active)::after { transform: translateX(200%); }
|
||||
&:has(a:nth-child(4).active)::after { transform: translateX(300%); }
|
||||
&:has(a:nth-child(5).active)::after { transform: translateX(400%); }
|
||||
|
||||
.menuItemContainer{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--nav-length);
|
||||
|
||||
& > div.menuItemContent{
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text);
|
||||
& > div.icon{
|
||||
font-size: inherit;
|
||||
padding: 0 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
& > div.menuName{
|
||||
position: relative;
|
||||
}
|
||||
& > div.menuMessage{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,40 +0,0 @@
|
||||
<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>
|
||||
@ -5,13 +5,17 @@
|
||||
<div class="homeLayout">
|
||||
<HomeHeader class="homeHeader"/>
|
||||
<div class="homeMain">
|
||||
<slot class="homeMainContent"/>
|
||||
<div class="homeMainLeft" name="left"></div>
|
||||
<main class="homeMainContent">
|
||||
<slot class="homeMainContent"/>
|
||||
</main>
|
||||
<div class="homeMainRight" name="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.homeLayout{
|
||||
.homeLayout {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
@ -19,17 +23,35 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.homeHeader{
|
||||
.homeHeader {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.homeMain{
|
||||
flex: 10;
|
||||
|
||||
.homeMain {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
& > .homeMainContent{
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
& > div.homeMainLeft {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
& > main.homeMainContent {
|
||||
flex-shrink: 0;
|
||||
width: var(--main-width-auto);
|
||||
background-color: var(--bg-color-be);
|
||||
}
|
||||
|
||||
& > div.homeMainRight {
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -96,4 +96,4 @@ async function startBroswer(address: AddressInfo | string | null) {
|
||||
process.env.START = String(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
pages/home/blog/index.vue
Normal file
13
pages/home/blog/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>Blog</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
pages/home/book/index.vue
Normal file
13
pages/home/book/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>book</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
pages/home/fun/index.vue
Normal file
13
pages/home/fun/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>fun</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
pages/home/hello/index.vue
Normal file
13
pages/home/hello/index.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>看看</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -5,10 +5,46 @@ definePageMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="homeIndex">HOME你好</div>
|
||||
<div class="homeIndex">
|
||||
<div class="f1">汇文明朝体 ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
<div class="f2">落霞孤鹜 ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
<div class="f3">nice ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
<div class="f4">TechnicLite ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
<div class="f5">星撰</div>
|
||||
<div class="f6">6sans-serif ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
<div class="f7">default ""“”| 星撰你好啊，你叫什么名字,ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.homeIndex{
|
||||
/* 定义英文字体 */
|
||||
@font-face {
|
||||
font-family: 'MyEnglishFont';
|
||||
src: local('nice'), local('Helvetica Neue');
|
||||
unicode-range: U+0000-00FF; /* 基本拉丁字符 */
|
||||
}
|
||||
|
||||
/* 定义中文字体 */
|
||||
@font-face {
|
||||
font-family: AA;
|
||||
src: local('LXGW WenKai');
|
||||
unicode-range: U+201c, U+201d; /* 中文范围 */
|
||||
}
|
||||
div.f1{
|
||||
font-family: AA !important;
|
||||
}
|
||||
div.f2{
|
||||
font-family: 'LXGW WenKai';
|
||||
}
|
||||
div.f3{
|
||||
font-family: 'nice';
|
||||
}
|
||||
div.f4{
|
||||
font-family: 'TechnicLite';
|
||||
}
|
||||
div.f5{
|
||||
font-family: 'KingHwa_OldSong' !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
10
plugins/device.client.ts
Normal file
10
plugins/device.client.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export default defineNuxtPlugin(nuxtApp => {
|
||||
const userAgent = navigator.userAgent.toLowerCase()
|
||||
const isMobile = /mobile|android|iphone|ipad|ipod/i.test(userAgent)
|
||||
return {
|
||||
provide: {
|
||||
isMobile,
|
||||
userAgent
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user