diff --git a/assets/css/base.css b/assets/css/base.css index a923d82..9798f47 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -1,6 +1,7 @@ /* 默认字体大小（桌面端） */ body { font-size: 16px; + color: var(--color-text); } h1 { diff --git a/assets/css/font.css b/assets/css/font.css index 4d37b99..9b89e04 100644 --- a/assets/css/font.css +++ b/assets/css/font.css @@ -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; + } +} \ No newline at end of file diff --git a/assets/css/iconfont.css b/assets/css/iconfont.css index 4acba42..c27f4c5 100644 --- a/assets/css/iconfont.css +++ b/assets/css/iconfont.css @@ -1,2 +1,3 @@ @import "../icon/cocoIconFont/iconfont.css"; @import "../icon/sxIconFont/iconfont.css"; +@import "../icon/starIconFont/iconfont.css"; diff --git a/assets/css/style.css b/assets/css/style.css index e6a7e1b..307e802 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,7 +6,3 @@ html, body { padding: 0; overflow: hidden; } - -:root { - font-family: 'LXGW WenKai', 'Huiwen-mincho', 'nice', 'TechnicLite', sans-serif; -} diff --git a/assets/css/value.css b/assets/css/value.css index a34a715..391c674 100644 --- a/assets/css/value.css +++ b/assets/css/value.css @@ -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; } diff --git a/assets/icon/starIconFont/demo.css b/assets/icon/starIconFont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/assets/icon/starIconFont/demo.css @@ -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; +} diff --git a/assets/icon/starIconFont/demo_index.html b/assets/icon/starIconFont/demo_index.html new file mode 100644 index 0000000..d87f13d --- /dev/null +++ b/assets/icon/starIconFont/demo_index.html @@ -0,0 +1,835 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + + 彩色字体 + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    纸飞机
    +
    
    +
    • + +
  • + +
    纸飞机-copy
    +
    
    +
    • + +
  • + +
    世界
    +
    
    +
    • + +
  • + +
    羽毛笔
    +
    
    +
    • + +
  • + +
    羽毛笔-copy
    +
    
    +
    • + +
  • + +
    张弦月
    +
    
    +
    • + +
  • + +
    扬沙
    +
    
    +
    • + +
  • + +
    我已阅读
    +
    
    +
    • + +
  • + +
    阅读
    +
    
    +
    • + +
  • + +
    月亮
    +
    
    +
    • + +
  • + +
    阅读
    +
    
    +
    • + +
  • + +
    叶子
    +
    
    +
    • + +
  • + +
    时间 开始时间
    +
    
    +
    • + +
  • + +
    云端,云,云服务
    +
    
    +
    • + +
  • + +
    已阅读
    +
    
    +
    • + +
  • + +
    执行书
    +
    
    +
    • + +
  • + +
    地球
    +
    
    +
    • + +
  • + +
    月球
    +
    
    +
    • + +
  • + +
    火箭
    +
    
    +
    • + +
  • + +
    卫星
    +
    
    +
    • + +
  • + +
    柴犬
    +
    
    +
    • + +
  • + +
    荷兰猪
    +
    
    +
    • + +
  • + +
    三花猫
    +
    
    +
    • + +
  • + +
    阅读-copy
    +
    
    +
    • + +
  • + +
    满月
    +
    
    +
    • + +
  • + +
    上弦月
    +
    
    +
    • + +
  • + +
    晚晴天
    +
    
    +
    • + +
  • + +
    下弦月
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@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');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.starIconFont {
+  font-family: "starIconFont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="starIconFont">&#x33;</span>
+
+
+

"starIconFont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 纸飞机 +
    +
    .star-zhifeiji +
    +
    • + +
  • + +
    + 纸飞机-copy +
    +
    .star-zhifeiji-copy +
    +
    • + +
  • + +
    + 世界 +
    +
    .star-shijie +
    +
    • + +
  • + +
    + 羽毛笔 +
    +
    .star-yumaobi +
    +
    • + +
  • + +
    + 羽毛笔-copy +
    +
    .star-yumaobi-copy +
    +
    • + +
  • + +
    + 张弦月 +
    +
    .star-zhangxianyue +
    +
    • + +
  • + +
    + 扬沙 +
    +
    .star-Group1 +
    +
    • + +
  • + +
    + 我已阅读 +
    +
    .star-woyiyuedu +
    +
    • + +
  • + +
    + 阅读 +
    +
    .star-yuedu +
    +
    • + +
  • + +
    + 月亮 +
    +
    .star-yueliang +
    +
    • + +
  • + +
    + 阅读 +
    +
    .star-yuedu1 +
    +
    • + +
  • + +
    + 叶子 +
    +
    .star-yezi +
    +
    • + +
  • + +
    + 时间 开始时间 +
    +
    .star-shijiankaishishijian +
    +
    • + +
  • + +
    + 云端,云,云服务 +
    +
    .star-cloud-full +
    +
    • + +
  • + +
    + 已阅读 +
    +
    .star-yiyuedu +
    +
    • + +
  • + +
    + 执行书 +
    +
    .star-zhihangshu +
    +
    • + +
  • + +
    + 地球 +
    +
    .star-earth +
    +
    • + +
  • + +
    + 月球 +
    +
    .star-moon +
    +
    • + +
  • + +
    + 火箭 +
    +
    .star-rocket-3 +
    +
    • + +
  • + +
    + 卫星 +
    +
    .star-satellite +
    +
    • + +
  • + +
    + 柴犬 +
    +
    .star-chaiquan +
    +
    • + +
  • + +
    + 荷兰猪 +
    +
    .star-helanzhu +
    +
    • + +
  • + +
    + 三花猫 +
    +
    .star-sanhuamao +
    +
    • + +
  • + +
    + 阅读-copy +
    +
    .star-yuedu1-copy +
    +
    • + +
  • + +
    + 满月 +
    +
    .star-manyue +
    +
    • + +
  • + +
    + 上弦月 +
    +
    .star-shangxianyue +
    +
    • + +
  • + +
    + 晚晴天 +
    +
    .star-wanqingtian +
    +
    • + +
  • + +
    + 下弦月 +
    +
    .star-xiaxianyue +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="starIconFont star-xxx"></span>
+
+
+

" + starIconFont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    纸飞机
    +
    #star-zhifeiji
    +
    • + +
  • + +
    纸飞机-copy
    +
    #star-zhifeiji-copy
    +
    • + +
  • + +
    世界
    +
    #star-shijie
    +
    • + +
  • + +
    羽毛笔
    +
    #star-yumaobi
    +
    • + +
  • + +
    羽毛笔-copy
    +
    #star-yumaobi-copy
    +
    • + +
  • + +
    张弦月
    +
    #star-zhangxianyue
    +
    • + +
  • + +
    扬沙
    +
    #star-Group1
    +
    • + +
  • + +
    我已阅读
    +
    #star-woyiyuedu
    +
    • + +
  • + +
    阅读
    +
    #star-yuedu
    +
    • + +
  • + +
    月亮
    +
    #star-yueliang
    +
    • + +
  • + +
    阅读
    +
    #star-yuedu1
    +
    • + +
  • + +
    叶子
    +
    #star-yezi
    +
    • + +
  • + +
    时间 开始时间
    +
    #star-shijiankaishishijian
    +
    • + +
  • + +
    云端,云,云服务
    +
    #star-cloud-full
    +
    • + +
  • + +
    已阅读
    +
    #star-yiyuedu
    +
    • + +
  • + +
    执行书
    +
    #star-zhihangshu
    +
    • + +
  • + +
    地球
    +
    #star-earth
    +
    • + +
  • + +
    月球
    +
    #star-moon
    +
    • + +
  • + +
    火箭
    +
    #star-rocket-3
    +
    • + +
  • + +
    卫星
    +
    #star-satellite
    +
    • + +
  • + +
    柴犬
    +
    #star-chaiquan
    +
    • + +
  • + +
    荷兰猪
    +
    #star-helanzhu
    +
    • + +
  • + +
    三花猫
    +
    #star-sanhuamao
    +
    • + +
  • + +
    阅读-copy
    +
    #star-yuedu1-copy
    +
    • + +
  • + +
    满月
    +
    #star-manyue
    +
    • + +
  • + +
    上弦月
    +
    #star-shangxianyue
    +
    • + +
  • + +
    晚晴天
    +
    #star-wanqingtian
    +
    • + +
  • + +
    下弦月
    +
    #star-xiaxianyue
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/assets/icon/starIconFont/iconfont.css b/assets/icon/starIconFont/iconfont.css new file mode 100644 index 0000000..d2ba7bc --- /dev/null +++ b/assets/icon/starIconFont/iconfont.css @@ -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"; +} + diff --git a/assets/icon/starIconFont/iconfont.js b/assets/icon/starIconFont/iconfont.js new file mode 100644 index 0000000..dc368fb --- /dev/null +++ b/assets/icon/starIconFont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4902296='',(t=>{var a=(l=(l=document.getElementsByTagName("script"))[l.length-1]).getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var c,h,i,p,s,d=function(a,l){l.parentNode.insertBefore(a,l)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}c=function(){var a,l=document.createElement("div");l.innerHTML=t._iconfont_svg_string_4902296,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(a=document.body).firstChild?d(l,a.firstChild):a.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),c()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(i=c,p=t.document,s=!1,o(),p.onreadystatechange=function(){"complete"==p.readyState&&(p.onreadystatechange=null,z())})}function z(){s||(s=!0,i())}function o(){try{p.documentElement.doScroll("left")}catch(a){return void setTimeout(o,50)}z()}})(window); \ No newline at end of file diff --git a/assets/icon/starIconFont/iconfont.json b/assets/icon/starIconFont/iconfont.json new file mode 100644 index 0000000..10117a8 --- /dev/null +++ b/assets/icon/starIconFont/iconfont.json @@ -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 + } + ] +} diff --git a/assets/icon/starIconFont/iconfont.ttf b/assets/icon/starIconFont/iconfont.ttf new file mode 100644 index 0000000..1fb366c Binary files /dev/null and b/assets/icon/starIconFont/iconfont.ttf differ diff --git a/assets/icon/starIconFont/iconfont.woff b/assets/icon/starIconFont/iconfont.woff new file mode 100644 index 0000000..70702c5 Binary files /dev/null and b/assets/icon/starIconFont/iconfont.woff differ diff --git a/assets/icon/starIconFont/iconfont.woff2 b/assets/icon/starIconFont/iconfont.woff2 new file mode 100644 index 0000000..5addf3a Binary files /dev/null and b/assets/icon/starIconFont/iconfont.woff2 differ diff --git a/components/Home/Header.vue b/components/Home/Header.vue index d2dfa6f..5f1abee 100644 --- a/components/Home/Header.vue +++ b/components/Home/Header.vue @@ -1,23 +1,57 @@ @@ -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{ diff --git a/components/Home/Menu.vue b/components/Home/Menu.vue new file mode 100644 index 0000000..d9d5149 --- /dev/null +++ b/components/Home/Menu.vue @@ -0,0 +1,196 @@ + + + + + diff --git a/components/Home/MobileMenu.vue b/components/Home/MobileMenu.vue deleted file mode 100644 index ef0f3df..0000000 --- a/components/Home/MobileMenu.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/layouts/home.vue b/layouts/home.vue index ad7d80b..33054a0 100644 --- a/layouts/home.vue +++ b/layouts/home.vue @@ -5,13 +5,17 @@
- +
+
+ +
+
diff --git a/nuxt.config.ts b/nuxt.config.ts index 3e8cba6..b1e6804 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -96,4 +96,4 @@ async function startBroswer(address: AddressInfo | string | null) { process.env.START = String(true) } } -} +} \ No newline at end of file diff --git a/pages/home/blog/index.vue b/pages/home/blog/index.vue new file mode 100644 index 0000000..3780e72 --- /dev/null +++ b/pages/home/blog/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/pages/home/book/index.vue b/pages/home/book/index.vue new file mode 100644 index 0000000..4974a96 --- /dev/null +++ b/pages/home/book/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/pages/home/fun/index.vue b/pages/home/fun/index.vue new file mode 100644 index 0000000..d5fc4cb --- /dev/null +++ b/pages/home/fun/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/pages/home/hello/index.vue b/pages/home/hello/index.vue new file mode 100644 index 0000000..bcc1ff9 --- /dev/null +++ b/pages/home/hello/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/pages/home/index.vue b/pages/home/index.vue index 2500db1..bd53547 100644 --- a/pages/home/index.vue +++ b/pages/home/index.vue @@ -5,10 +5,46 @@ definePageMeta({ diff --git a/plugins/device.client.ts b/plugins/device.client.ts new file mode 100644 index 0000000..96c29eb --- /dev/null +++ b/plugins/device.client.ts @@ -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 + } + } +})