Compare commits
2 Commits
fd5ad3ac6f
...
bed2d0c643
| Author | SHA1 | Date | |
|---|---|---|---|
| bed2d0c643 | |||
| 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,14 @@
|
||||
--bg-color-bf: #fff;
|
||||
|
||||
/*字体颜色*/
|
||||
--color-text: #fefefe;
|
||||
--color-text: #333;
|
||||
--bg-opacity: 0.5;
|
||||
--header-bg-color: #dddddd99;
|
||||
|
||||
/*主要着重颜色*/
|
||||
--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;
|
||||
}
|
||||
812
assets/icon/starIconFont/demo_index.html
Normal file
812
assets/icon/starIconFont/demo_index.html
Normal file
@ -0,0 +1,812 @@
|
||||
<!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">tools</div>
|
||||
<div class="code-name">&#xe69f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont"></span>
|
||||
<div class="name">rcd-home-f-copy</div>
|
||||
<div class="code-name">&#xe9a2;</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">羽毛笔-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">&#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=1745398567721') format('woff2'),
|
||||
url('iconfont.woff?t=1745398567721') format('woff'),
|
||||
url('iconfont.ttf?t=1745398567721') 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-tools"></span>
|
||||
<div class="name">
|
||||
tools
|
||||
</div>
|
||||
<div class="code-name">.star-tools
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon starIconFont star-rcd-home-f-copy"></span>
|
||||
<div class="name">
|
||||
rcd-home-f-copy
|
||||
</div>
|
||||
<div class="code-name">.star-rcd-home-f-copy
|
||||
</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-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-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-tools"></use>
|
||||
</svg>
|
||||
<div class="name">tools</div>
|
||||
<div class="code-name">#star-tools</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#star-rcd-home-f-copy"></use>
|
||||
</svg>
|
||||
<div class="name">rcd-home-f-copy</div>
|
||||
<div class="code-name">#star-rcd-home-f-copy</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-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-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>
|
||||
125
assets/icon/starIconFont/iconfont.css
Normal file
125
assets/icon/starIconFont/iconfont.css
Normal file
@ -0,0 +1,125 @@
|
||||
@font-face {
|
||||
font-family: "starIconFont"; /* Project id 4902296 */
|
||||
/* Color fonts */
|
||||
src:
|
||||
url('iconfont.woff2?t=1745398567721') format('woff2'),
|
||||
url('iconfont.woff?t=1745398567721') format('woff'),
|
||||
url('iconfont.ttf?t=1745398567721') format('truetype');
|
||||
}
|
||||
|
||||
.starIconFont {
|
||||
font-family: "starIconFont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.star-tools:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.star-rcd-home-f-copy:before {
|
||||
content: "\e9a2";
|
||||
}
|
||||
|
||||
.star-zhifeiji-copy:before {
|
||||
content: "\e9a0";
|
||||
}
|
||||
|
||||
.star-shijie:before {
|
||||
content: "\e802";
|
||||
}
|
||||
|
||||
.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-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
198
assets/icon/starIconFont/iconfont.json
Normal file
198
assets/icon/starIconFont/iconfont.json
Normal file
@ -0,0 +1,198 @@
|
||||
{
|
||||
"id": "4902296",
|
||||
"name": "star",
|
||||
"font_family": "starIconFont",
|
||||
"css_prefix_text": "star-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "36208720",
|
||||
"name": "tools",
|
||||
"font_class": "tools",
|
||||
"unicode": "e69f",
|
||||
"unicode_decimal": 59039
|
||||
},
|
||||
{
|
||||
"icon_id": "44129255",
|
||||
"name": "rcd-home-f-copy",
|
||||
"font_class": "rcd-home-f-copy",
|
||||
"unicode": "e9a2",
|
||||
"unicode_decimal": 59810
|
||||
},
|
||||
{
|
||||
"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": "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": "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">
|
||||
<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>
|
||||
@ -30,6 +64,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
.homeHeader {
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
background: var(--header-bg-color);
|
||||
|
||||
div.logoContainer{
|
||||
position: relative;
|
||||
@ -40,7 +75,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
background: var(--bg-color-bd);
|
||||
}
|
||||
|
||||
nav > div.mobileIcon{
|
||||
nav > div.menuBarIcon{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -58,7 +93,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
}
|
||||
}
|
||||
|
||||
div.infoContainer > div.mobileIcon{
|
||||
div.infoContainer > div.menuBarIcon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@ -83,6 +118,7 @@ const menuMobileExpandStatus = ref(false)
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
background: var(--header-bg-color);
|
||||
& > * {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
@ -96,7 +132,6 @@ const menuMobileExpandStatus = ref(false)
|
||||
nav{
|
||||
flex-shrink: 0;
|
||||
width: var(--main-width-auto);
|
||||
background-color: var(--bg-color-b1);
|
||||
}
|
||||
|
||||
div.infoContainer{
|
||||
|
||||
204
components/Home/Menu.vue
Normal file
204
components/Home/Menu.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
const {menuExpandStatus} = defineProps({
|
||||
menuExpandStatus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const route = useRoute()
|
||||
const menuList = ref([
|
||||
{
|
||||
name: '首页',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: ''
|
||||
},
|
||||
{
|
||||
name: '博客',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'blog'
|
||||
},
|
||||
{
|
||||
name: '读书',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'book'
|
||||
},
|
||||
{
|
||||
name: '乐趣',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'fun'
|
||||
},
|
||||
{
|
||||
name: '看看',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'hello'
|
||||
},
|
||||
{
|
||||
name: '工具',
|
||||
icon: '',
|
||||
message: '',
|
||||
path: 'tools'
|
||||
},
|
||||
])
|
||||
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);
|
||||
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)); }
|
||||
&:has(a:nth-child(6).active)::after { transform: translateY(calc(500% + 0.6rem *5)); }
|
||||
|
||||
&>.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) !important; }
|
||||
&:has(a:nth-child(2):hover)::after { transform: translateX(100%) !important; }
|
||||
&:has(a:nth-child(3):hover)::after { transform: translateX(200%) !important; }
|
||||
&:has(a:nth-child(4):hover)::after { transform: translateX(300%) !important; }
|
||||
&:has(a:nth-child(5):hover)::after { transform: translateX(400%) !important; }
|
||||
&:has(a:nth-child(6):hover)::after { transform: translateX(500%) !important; }
|
||||
|
||||
/* 选中固定效果 */
|
||||
&: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%); }
|
||||
&:has(a:nth-child(6).active)::after { transform: translateX(500%); }
|
||||
|
||||
.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,7 +5,11 @@
|
||||
<div class="homeLayout">
|
||||
<HomeHeader class="homeHeader"/>
|
||||
<div class="homeMain">
|
||||
<div class="homeMainLeft" name="left"></div>
|
||||
<main class="homeMainContent">
|
||||
<slot class="homeMainContent"/>
|
||||
</main>
|
||||
<div class="homeMainRight" name="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,14 +26,32 @@
|
||||
.homeHeader {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.homeMain {
|
||||
flex: 10;
|
||||
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>
|
||||
|
||||
@ -47,13 +47,39 @@ export default defineNuxtConfig({
|
||||
leave: 500
|
||||
},
|
||||
appear: true
|
||||
}
|
||||
},
|
||||
},
|
||||
hooks: {
|
||||
'listen': (server) => {
|
||||
startBroswer(server.address())
|
||||
},
|
||||
},
|
||||
runtimeConfig: {
|
||||
server: {
|
||||
redis: {
|
||||
host: process.env.REDIS_HOST || '127.0.0.1',
|
||||
port: Number(process.env.REDIS_PORT) || 6379,
|
||||
connectName: 'star-writ',
|
||||
database: Number(process.env.REDIS_DB) || 9,
|
||||
username: 'default',
|
||||
password: process.env.REDIS_PASSWORD || 'Hxl1314521',
|
||||
},
|
||||
mysql:{
|
||||
host: process.env.DB_HOST || '127.0.0.1',
|
||||
port: process.env.DB_PORT || 3306,
|
||||
user: process.env.DB_USER || 'root',
|
||||
password: process.env.DB_PASSWORD,
|
||||
database: process.env.DB_NAME || 'yuheng',
|
||||
ssl:
|
||||
process.env.NODE_ENV === 'production'
|
||||
? {
|
||||
rejectUnauthorized: false,
|
||||
servername: '', // 明确置空servername参数
|
||||
}
|
||||
: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 首次启动浏览器
|
||||
|
||||
334
package-lock.json
generated
334
package-lock.json
generated
@ -8,8 +8,12 @@
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "^1.3.0",
|
||||
"consola": "^3.4.2",
|
||||
"drizzle-orm": "^0.42.0",
|
||||
"eslint": "^9.25.0",
|
||||
"mysql2": "^3.14.0",
|
||||
"nuxt": "^3.16.2",
|
||||
"redis": "^4.7.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
@ -3464,6 +3468,71 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/bloom": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/bloom/-/bloom-1.2.0.tgz",
|
||||
"integrity": "sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@redis/client": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/client": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/client/-/client-1.6.0.tgz",
|
||||
"integrity": "sha512-aR0uffYI700OEEH4gYnitAnv3vzVGXCFvYfdpu/CJKvk4pHfLPEy/JSZyrpQ+15WhXe1yJRXLtfQ84s4mEXnPg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cluster-key-slot": "1.1.2",
|
||||
"generic-pool": "3.9.0",
|
||||
"yallist": "4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/client/node_modules/yallist": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/@redis/graph": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/graph/-/graph-1.1.1.tgz",
|
||||
"integrity": "sha512-FEMTcTHZozZciLRl6GiiIB4zGm5z5F3F6a6FZCyrfxdKOhFlGkiAqlexWMBzCi4DcRoyiOsuLfW+cjlGWyExOw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@redis/client": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/json": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/json/-/json-1.0.7.tgz",
|
||||
"integrity": "sha512-6UyXfjVaTBTJtKNG4/9Z8PSpKE6XgSyEb8iwaqDcy+uKrd/DGYHTWkUdnQDyzm727V7p21WUMhsqz5oy65kPcQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@redis/client": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/search": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/search/-/search-1.2.0.tgz",
|
||||
"integrity": "sha512-tYoDBbtqOVigEDMAcTGsRlMycIIjwMCgD8eR2t0NANeQmgK/lvxNAvYyb6bZDD4frHRhIHkJu2TBRvB0ERkOmw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@redis/client": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@redis/time-series": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@redis/time-series/-/time-series-1.1.0.tgz",
|
||||
"integrity": "sha512-c1Q99M5ljsIuc4YdaCwfUEXsofakb9c8+Zse2qxTadu8TalLXuAESzLvFAvNVbkmSlvlzIQOLpBCmWI9wTOt+g==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@redis/client": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-alias": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
|
||||
@ -5627,6 +5696,15 @@
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/aws-ssl-profiles": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/aws-ssl-profiles/-/aws-ssl-profiles-1.1.2.tgz",
|
||||
"integrity": "sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/b4a": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmmirror.com/b4a/-/b4a-1.6.7.tgz",
|
||||
@ -7145,6 +7223,127 @@
|
||||
"url": "https://dotenvx.com"
|
||||
}
|
||||
},
|
||||
"node_modules/drizzle-orm": {
|
||||
"version": "0.42.0",
|
||||
"resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.42.0.tgz",
|
||||
"integrity": "sha512-pS8nNJm2kBNZwrOjTHJfdKkaU+KuUQmV/vk5D57NojDq4FG+0uAYGMulXtYT///HfgsMF0hnFFvu1ezI3OwOkg==",
|
||||
"license": "Apache-2.0",
|
||||
"peerDependencies": {
|
||||
"@aws-sdk/client-rds-data": ">=3",
|
||||
"@cloudflare/workers-types": ">=4",
|
||||
"@electric-sql/pglite": ">=0.2.0",
|
||||
"@libsql/client": ">=0.10.0",
|
||||
"@libsql/client-wasm": ">=0.10.0",
|
||||
"@neondatabase/serverless": ">=0.10.0",
|
||||
"@op-engineering/op-sqlite": ">=2",
|
||||
"@opentelemetry/api": "^1.4.1",
|
||||
"@planetscale/database": ">=1.13",
|
||||
"@prisma/client": "*",
|
||||
"@tidbcloud/serverless": "*",
|
||||
"@types/better-sqlite3": "*",
|
||||
"@types/pg": "*",
|
||||
"@types/sql.js": "*",
|
||||
"@vercel/postgres": ">=0.8.0",
|
||||
"@xata.io/client": "*",
|
||||
"better-sqlite3": ">=7",
|
||||
"bun-types": "*",
|
||||
"expo-sqlite": ">=14.0.0",
|
||||
"gel": ">=2",
|
||||
"knex": "*",
|
||||
"kysely": "*",
|
||||
"mysql2": ">=2",
|
||||
"pg": ">=8",
|
||||
"postgres": ">=3",
|
||||
"sql.js": ">=1",
|
||||
"sqlite3": ">=5"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@aws-sdk/client-rds-data": {
|
||||
"optional": true
|
||||
},
|
||||
"@cloudflare/workers-types": {
|
||||
"optional": true
|
||||
},
|
||||
"@electric-sql/pglite": {
|
||||
"optional": true
|
||||
},
|
||||
"@libsql/client": {
|
||||
"optional": true
|
||||
},
|
||||
"@libsql/client-wasm": {
|
||||
"optional": true
|
||||
},
|
||||
"@neondatabase/serverless": {
|
||||
"optional": true
|
||||
},
|
||||
"@op-engineering/op-sqlite": {
|
||||
"optional": true
|
||||
},
|
||||
"@opentelemetry/api": {
|
||||
"optional": true
|
||||
},
|
||||
"@planetscale/database": {
|
||||
"optional": true
|
||||
},
|
||||
"@prisma/client": {
|
||||
"optional": true
|
||||
},
|
||||
"@tidbcloud/serverless": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/better-sqlite3": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/pg": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/sql.js": {
|
||||
"optional": true
|
||||
},
|
||||
"@vercel/postgres": {
|
||||
"optional": true
|
||||
},
|
||||
"@xata.io/client": {
|
||||
"optional": true
|
||||
},
|
||||
"better-sqlite3": {
|
||||
"optional": true
|
||||
},
|
||||
"bun-types": {
|
||||
"optional": true
|
||||
},
|
||||
"expo-sqlite": {
|
||||
"optional": true
|
||||
},
|
||||
"gel": {
|
||||
"optional": true
|
||||
},
|
||||
"knex": {
|
||||
"optional": true
|
||||
},
|
||||
"kysely": {
|
||||
"optional": true
|
||||
},
|
||||
"mysql2": {
|
||||
"optional": true
|
||||
},
|
||||
"pg": {
|
||||
"optional": true
|
||||
},
|
||||
"postgres": {
|
||||
"optional": true
|
||||
},
|
||||
"prisma": {
|
||||
"optional": true
|
||||
},
|
||||
"sql.js": {
|
||||
"optional": true
|
||||
},
|
||||
"sqlite3": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/dunder-proto": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
|
||||
@ -8551,6 +8750,24 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/generate-function": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/generate-function/-/generate-function-2.3.1.tgz",
|
||||
"integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-property": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/generic-pool": {
|
||||
"version": "3.9.0",
|
||||
"resolved": "https://registry.npmmirror.com/generic-pool/-/generic-pool-3.9.0.tgz",
|
||||
"integrity": "sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/gensync": {
|
||||
"version": "1.0.0-beta.2",
|
||||
"resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||
@ -9034,6 +9251,18 @@
|
||||
"node": ">=16.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ieee754": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
|
||||
@ -9389,6 +9618,12 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-property": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/is-property/-/is-property-1.0.2.tgz",
|
||||
"integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-reference/-/is-reference-1.2.1.tgz",
|
||||
@ -10134,6 +10369,12 @@
|
||||
"node": ">= 12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/long": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/long/-/long-5.3.2.tgz",
|
||||
"integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
@ -10143,6 +10384,21 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lru.min": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/lru.min/-/lru.min-1.1.2.tgz",
|
||||
"integrity": "sha512-Nv9KddBcQSlQopmBHXSsZVY5xsdlZkdH/Iey0BlcBYggMd4two7cZnKOK9vmy3nY0O5RGH99z1PCeTpPqszUYg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"bun": ">=1.0.0",
|
||||
"deno": ">=1.30.0",
|
||||
"node": ">=8.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/wellwelwel"
|
||||
}
|
||||
},
|
||||
"node_modules/luxon": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/luxon/-/luxon-3.6.1.tgz",
|
||||
@ -10493,6 +10749,26 @@
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mysql2": {
|
||||
"version": "3.14.0",
|
||||
"resolved": "https://registry.npmmirror.com/mysql2/-/mysql2-3.14.0.tgz",
|
||||
"integrity": "sha512-8eMhmG6gt/hRkU1G+8KlGOdQi2w+CgtNoD1ksXZq9gQfkfDsX4LHaBwTe1SY0Imx//t2iZA03DFnyYKPinxSRw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"aws-ssl-profiles": "^1.1.1",
|
||||
"denque": "^2.1.0",
|
||||
"generate-function": "^2.3.1",
|
||||
"iconv-lite": "^0.6.3",
|
||||
"long": "^5.2.1",
|
||||
"lru.min": "^1.0.0",
|
||||
"named-placeholders": "^1.1.3",
|
||||
"seq-queue": "^0.0.5",
|
||||
"sqlstring": "^2.3.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
|
||||
@ -10505,6 +10781,27 @@
|
||||
"thenify-all": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/named-placeholders": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/named-placeholders/-/named-placeholders-1.1.3.tgz",
|
||||
"integrity": "sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lru-cache": "^7.14.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/named-placeholders/node_modules/lru-cache": {
|
||||
"version": "7.18.3",
|
||||
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-7.18.3.tgz",
|
||||
"integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.5.tgz",
|
||||
@ -12570,6 +12867,23 @@
|
||||
"url": "https://paulmillr.com/funding/"
|
||||
}
|
||||
},
|
||||
"node_modules/redis": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/redis/-/redis-4.7.0.tgz",
|
||||
"integrity": "sha512-zvmkHEAdGMn+hMRXuMBtu4Vo5P6rHQjLoHftu+lBqq8ZTA3RCVC/WzD790bkKKiNFp7d5/9PcSD19fJyyRvOdQ==",
|
||||
"license": "MIT",
|
||||
"workspaces": [
|
||||
"./packages/*"
|
||||
],
|
||||
"dependencies": {
|
||||
"@redis/bloom": "1.2.0",
|
||||
"@redis/client": "1.6.0",
|
||||
"@redis/graph": "1.1.1",
|
||||
"@redis/json": "1.0.7",
|
||||
"@redis/search": "1.2.0",
|
||||
"@redis/time-series": "1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/redis-errors": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/redis-errors/-/redis-errors-1.2.0.tgz",
|
||||
@ -13112,6 +13426,12 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.86.3",
|
||||
"resolved": "https://registry.npmmirror.com/sass/-/sass-1.86.3.tgz",
|
||||
@ -13187,6 +13507,11 @@
|
||||
"node": ">= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/seq-queue": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/seq-queue/-/seq-queue-0.0.5.tgz",
|
||||
"integrity": "sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q=="
|
||||
},
|
||||
"node_modules/serialize-javascript": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
|
||||
@ -13495,6 +13820,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sqlstring": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/sqlstring/-/sqlstring-2.3.3.tgz",
|
||||
"integrity": "sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/stable-hash": {
|
||||
"version": "0.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/stable-hash/-/stable-hash-0.0.5.tgz",
|
||||
|
||||
@ -6,13 +6,17 @@
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"preview": "nuxt preview --port 4000",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/eslint": "^1.3.0",
|
||||
"consola": "^3.4.2",
|
||||
"drizzle-orm": "^0.42.0",
|
||||
"eslint": "^9.25.0",
|
||||
"mysql2": "^3.14.0",
|
||||
"nuxt": "^3.16.2",
|
||||
"redis": "^4.7.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
|
||||
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>
|
||||
@ -1,14 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import consola from "consola";
|
||||
definePageMeta({
|
||||
layout: 'home',
|
||||
})
|
||||
const {data} = await useFetch('/api/hello')
|
||||
consola.info(toValue(data))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="homeIndex">HOME你好</div>
|
||||
<div class="homeIndex">
|
||||
<div>redisData: {{data}}</div>
|
||||
<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
|
||||
}
|
||||
}
|
||||
})
|
||||
6
server/api/hello.ts
Normal file
6
server/api/hello.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export default defineEventHandler(async event => {
|
||||
// console.log(await event.context.redis.get('SI HI'))
|
||||
return {
|
||||
'SI HI': await event.context.redis.get('SI HI')
|
||||
}
|
||||
})
|
||||
4
server/middleware/01-logger.ts
Normal file
4
server/middleware/01-logger.ts
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
export default defineEventHandler(event => {
|
||||
|
||||
})
|
||||
61
server/plugins/mysql.ts
Normal file
61
server/plugins/mysql.ts
Normal file
@ -0,0 +1,61 @@
|
||||
import { drizzle } from 'drizzle-orm/mysql2';
|
||||
import { sql } from 'drizzle-orm';
|
||||
import {createPool } from 'mysql2/promise';
|
||||
import type { PoolOptions, Pool} from 'mysql2/promise';
|
||||
import consola from "consola";
|
||||
export default defineNitroPlugin(async nitroApp => {
|
||||
|
||||
const {server: {mysql: config}} = useRuntimeConfig()
|
||||
consola.info('MySQL ...');
|
||||
// 配置数据库
|
||||
const poolOptions: PoolOptions = {
|
||||
host: config.host,
|
||||
port: config.port,
|
||||
user: config.user,
|
||||
password: config.password,
|
||||
database: config.database,
|
||||
// ssl: config.db.ssl,
|
||||
waitForConnections: true,
|
||||
connectionLimit: 10,
|
||||
queueLimit: 0,
|
||||
// 启用此选项后，MySQL驱动程序将支持大数字（big numbers），这对于存储和处理 bigint 类型的数据尤为重要。
|
||||
// 如果不启用此选项，MySQL驱动程序可能无法正确处理超过 JavaScript 数字精度范围的大数值，导致数据精度丢失。
|
||||
supportBigNumbers: true,
|
||||
|
||||
// 启用此选项后，MySQL驱动程序将在接收 bigint 或其他大数值时，将其作为字符串返回，而不是作为JavaScript数字。
|
||||
// 这种处理方式可以避免JavaScript本身的数值精度限制问题，确保大数值在应用程序中保持精确。
|
||||
bigNumberStrings: true,
|
||||
|
||||
// typeCast: function (field, next) {
|
||||
// if (field.type === 'LONGLONG') { // 处理 BIGINT 类型
|
||||
// return field.string(); // 强制转换为字符串
|
||||
// }
|
||||
// return next();
|
||||
// }
|
||||
}
|
||||
let pool: Pool;
|
||||
try{
|
||||
pool = await createPool(poolOptions)
|
||||
}catch (e) {
|
||||
consola.error('MySQL onnection Error: ', e);
|
||||
throw e;
|
||||
}
|
||||
// 暴露数据库
|
||||
const db = drizzle(pool,{
|
||||
logger: {
|
||||
logQuery: (query, params) => {
|
||||
consola.debug(`SQL: ${query} - Params: ${JSON.stringify(params)}`); // 打印日志，包括查询和参数
|
||||
}
|
||||
}
|
||||
});
|
||||
const [result] = await db.execute(sql`SHOW TABLES`);
|
||||
const tableList = result.map(row => Object.values(row)[0]);
|
||||
consola.info('TableList', tableList)
|
||||
// 将连接池添加到 Nitro 应用上下文
|
||||
nitroApp.hooks.hook('request', async (event) => {
|
||||
event.context.mysql = db
|
||||
})
|
||||
nitroApp.hooks.hook('error', async () => {
|
||||
db.close();
|
||||
})
|
||||
})
|
||||
33
server/plugins/redis.ts
Normal file
33
server/plugins/redis.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { createClient } from 'redis';
|
||||
import consola from 'consola'
|
||||
|
||||
export default defineNitroPlugin(async (nitroApp) => {
|
||||
const {server: {redis: config}} = useRuntimeConfig()
|
||||
consola.info('Redis ...');
|
||||
const redisConnect = createClient({
|
||||
name: config.connectName,
|
||||
username: config.username,
|
||||
password: config.password,
|
||||
database: Number(config.database),
|
||||
url: `redis://${config.username}:${config.password}@${config.host}:${config.port}/${config.database}`,
|
||||
});
|
||||
redisConnect.on('connect', async () => {
|
||||
consola.info(`redis://${config.username}:${config.password}@${config.host}:${config.port}/${config.database}`)
|
||||
consola.info(await redisConnect.set('SI HI', 'Star Writ'));
|
||||
});
|
||||
|
||||
redisConnect.on('error', (err) => {
|
||||
console.log(err)
|
||||
consola.error('Redis error: ', err);
|
||||
});
|
||||
|
||||
// 连接到 Redis
|
||||
await redisConnect.connect();
|
||||
// 将连接池添加到 Nitro 应用上下文
|
||||
nitroApp.hooks.hook('request', async (event) => {
|
||||
event.context.redis = redisConnect
|
||||
})
|
||||
nitroApp.hooks.hook('error', async () => {
|
||||
redisConnect.disconnect()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user