diff --git a/miniprogram/app.less b/miniprogram/app.less index 6164d4b..f2467bc 100644 --- a/miniprogram/app.less +++ b/miniprogram/app.less @@ -1,27 +1,253 @@ -/**app.wxss**/ -// .container { -// height: 100%; -// display: flex; -// flex-direction: column; -// align-items: center; -// justify-content: space-between; -// padding: 200rpx 0; -// box-sizing: border-box; -// } - -.border-1px { - position: relative; +@font-face { + font-family: "j-icon"; + /* Project id 4489595 */ + src: url('./assets/font/iconfont.ttf?t=1715597123285') format('truetype'); } -.border-1px::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 200%; - height: 200%; - border: 1px solid #141414; - transform: scale(0.5); - transform-origin: 0 0; - box-sizing: border-box; +.j-icon { + font-family: 'j-icon' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +.j-icon-error:before { + content: '\e73b'; +} + +.j-icon-more:before { + content: '\e73a'; +} + +.j-icon-scan:before { + content: '\e738'; +} + +.j-icon-fire:before { + content: '\e739'; +} + +.j-icon-arrow-down-circle:before { + content: '\e731'; +} + +.j-icon-map:before { + content: '\e732'; +} + +.j-icon-map-fill:before { + content: '\e733'; +} + +.j-icon-help-circle:before { + content: '\e72f'; +} + +.j-icon-warn-circle:before { + content: '\e730'; +} + +.j-icon-backspace:before { + content: '\e72d'; +} + +.j-icon-backspace-fill:before { + content: '\e72c'; +} + +.j-icon-eye-close:before { + content: '\e72e'; +} + +.j-icon-upload:before { + content: '\e722'; +} + +.j-icon-eye-disable:before { + content: '\e726'; +} + +.j-icon-record:before { + content: '\e725'; +} + +.j-icon-icon-test3:before { + content: '\e724'; +} + +.j-icon-icon-test5:before { + content: '\e723'; +} + +.j-icon-icon-test9:before { + content: '\e721'; +} + +.j-icon-editor-fill:before { + content: '\e72b'; +} + +.j-icon-share:before { + content: '\e729'; +} + +.j-icon-share-fill:before { + content: '\e728'; +} + +.j-icon-editor:before { + content: '\e72a'; +} + +.j-icon-wechat:before { + content: '\e727'; +} + +.j-icon-telephone:before { + content: '\e71c'; +} + +.j-icon-user:before { + content: '\e71a'; +} + +.j-icon-add:before { + content: '\e700'; +} + +.j-icon-add-circle:before { + content: '\e710'; +} + +.j-icon-arrow-up-circle:before { + content: '\e720'; +} + +.j-icon-arrow-right-circle:before { + content: '\e71f'; +} + +.j-icon-arrow-down:before { + content: '\e702'; +} + +.j-icon-ashbin:before { + content: '\e71d'; +} + +.j-icon-arrow-right:before { + content: '\e703'; +} + +.j-icon-eye:before { + content: '\e719'; +} + +.j-icon-bottom:before { + content: '\e707'; +} + +.j-icon-arrow-left-circle:before { + content: '\e71e'; +} + +.j-icon-attachment:before { + content: '\e714'; +} + +.j-icon-code:before { + content: '\e717'; +} + +.j-icon-close:before { + content: '\e704'; +} + +.j-icon-complete:before { + content: '\e718'; +} + +.j-icon-download:before { + content: '\e716'; +} + +.j-icon-minus:before { + content: '\e701'; +} + +.j-icon-picture:before { + content: '\e712'; +} + +.j-icon-search:before { + content: '\e711'; +} + +.j-icon-select:before { + content: '\e705'; +} + +.j-icon-success:before { + content: '\e706'; +} + +.j-icon-add-bold:before { + content: '\e708'; +} + +.j-icon-arrow-left-bold:before { + content: '\e70f'; +} + +.j-icon-arrow-up-bold:before { + content: '\e70e'; +} + +.j-icon-close-bold:before { + content: '\e70d'; +} + +.j-icon-arrow-down-bold:before { + content: '\e70c'; +} + +.j-icon-minus-bold:before { + content: '\e709'; +} + +.j-icon-arrow-right-bold:before { + content: '\e70b'; +} + +.j-icon-select-bold:before { + content: '\e70a'; +} + +.j-icon-arrow-up-fill:before { + content: '\e737'; +} + +.j-icon-arrow-down-fill:before { + content: '\e736'; +} + +.j-icon-arrow-left-fill:before { + content: '\e735'; +} + +.j-icon-arrow-right-fill:before { + content: '\e734'; +} + +.j-icon-user-fill:before { + content: '\e71b'; +} + +.j-icon-success-filling:before { + content: '\e713'; +} + +.j-icon-top-filling:before { + content: '\e715'; +} \ No newline at end of file diff --git a/miniprogram/assets/font/demo.css b/miniprogram/assets/font/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/miniprogram/assets/font/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/miniprogram/assets/font/demo_index.html b/miniprogram/assets/font/demo_index.html new file mode 100644 index 0000000..f484757 --- /dev/null +++ b/miniprogram/assets/font/demo_index.html @@ -0,0 +1,1568 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    error
    +
    
    +
    • + +
  • + +
    more
    +
    
    +
    • + +
  • + +
    scan
    +
    
    +
    • + +
  • + +
    fire
    +
    
    +
    • + +
  • + +
    arrow-down-circle
    +
    
    +
    • + +
  • + +
    map
    +
    
    +
    • + +
  • + +
    map-fill
    +
    
    +
    • + +
  • + +
    help-circle
    +
    
    +
    • + +
  • + +
    warn-circle
    +
    
    +
    • + +
  • + +
    backspace
    +
    
    +
    • + +
  • + +
    backspace-fill
    +
    
    +
    • + +
  • + +
    eye-close
    +
    
    +
    • + +
  • + +
    upload
    +
    
    +
    • + +
  • + +
    eye-disable
    +
    
    +
    • + +
  • + +
    record
    +
    
    +
    • + +
  • + +
    time
    +
    
    +
    • + +
  • + +
    setting
    +
    
    +
    • + +
  • + +
    email
    +
    
    +
    • + +
  • + +
    editor-fill
    +
    
    +
    • + +
  • + +
    share
    +
    
    +
    • + +
  • + +
    share-fill
    +
    
    +
    • + +
  • + +
    editor
    +
    
    +
    • + +
  • + +
    wechat
    +
    
    +
    • + +
  • + +
    telephone
    +
    
    +
    • + +
  • + +
    user
    +
    
    +
    • + +
  • + +
    add
    +
    
    +
    • + +
  • + +
    add-circle
    +
    
    +
    • + +
  • + +
    arrow-up-circle
    +
    
    +
    • + +
  • + +
    arrow-right-circle
    +
    
    +
    • + +
  • + +
    arrow-down
    +
    
    +
    • + +
  • + +
    dustbin
    +
    
    +
    • + +
  • + +
    arrow-right
    +
    
    +
    • + +
  • + +
    eye
    +
    
    +
    • + +
  • + +
    bottom
    +
    
    +
    • + +
  • + +
    arrow-left-circle
    +
    
    +
    • + +
  • + +
    attachment
    +
    
    +
    • + +
  • + +
    code
    +
    
    +
    • + +
  • + +
    close
    +
    
    +
    • + +
  • + +
    complete
    +
    
    +
    • + +
  • + +
    download
    +
    
    +
    • + +
  • + +
    minus
    +
    
    +
    • + +
  • + +
    picture
    +
    
    +
    • + +
  • + +
    search
    +
    
    +
    • + +
  • + +
    select
    +
    
    +
    • + +
  • + +
    success
    +
    
    +
    • + +
  • + +
    add-bold
    +
    
    +
    • + +
  • + +
    arrow-left-bold
    +
    
    +
    • + +
  • + +
    arrow-up-bold
    +
    
    +
    • + +
  • + +
    close-bold
    +
    
    +
    • + +
  • + +
    arrow-down-bold
    +
    
    +
    • + +
  • + +
    minus-bold
    +
    
    +
    • + +
  • + +
    arrow-right-bold
    +
    
    +
    • + +
  • + +
    select-bold
    +
    
    +
    • + +
  • + +
    arrow-up-fill
    +
    
    +
    • + +
  • + +
    arrow-down-fill
    +
    
    +
    • + +
  • + +
    arrow-left-fill
    +
    
    +
    • + +
  • + +
    arrow-right-fill
    +
    
    +
    • + +
  • + +
    user-fill
    +
    
    +
    • + +
  • + +
    success-fill
    +
    
    +
    • + +
  • + +
    top-filling
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1715597123285') format('woff2'),
+       url('iconfont.woff?t=1715597123285') format('woff'),
+       url('iconfont.ttf?t=1715597123285') format('truetype');
+}
+
+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    + error +
    +
    .icon-error +
    +
    • + +
  • + +
    + more +
    +
    .icon-more +
    +
    • + +
  • + +
    + scan +
    +
    .icon-scan +
    +
    • + +
  • + +
    + fire +
    +
    .icon-fire +
    +
    • + +
  • + +
    + arrow-down-circle +
    +
    .icon-arrow-down-circle +
    +
    • + +
  • + +
    + map +
    +
    .icon-map +
    +
    • + +
  • + +
    + map-fill +
    +
    .icon-map-fill +
    +
    • + +
  • + +
    + help-circle +
    +
    .icon-help-circle +
    +
    • + +
  • + +
    + warn-circle +
    +
    .icon-warn-circle +
    +
    • + +
  • + +
    + backspace +
    +
    .icon-backspace +
    +
    • + +
  • + +
    + backspace-fill +
    +
    .icon-backspace-fill +
    +
    • + +
  • + +
    + eye-close +
    +
    .icon-eye-close +
    +
    • + +
  • + +
    + upload +
    +
    .icon-upload +
    +
    • + +
  • + +
    + eye-disable +
    +
    .icon-eye-disable +
    +
    • + +
  • + +
    + record +
    +
    .icon-record +
    +
    • + +
  • + +
    + time +
    +
    .icon-icon-test3 +
    +
    • + +
  • + +
    + setting +
    +
    .icon-icon-test5 +
    +
    • + +
  • + +
    + email +
    +
    .icon-icon-test9 +
    +
    • + +
  • + +
    + editor-fill +
    +
    .icon-editor-fill +
    +
    • + +
  • + +
    + share +
    +
    .icon-share +
    +
    • + +
  • + +
    + share-fill +
    +
    .icon-share-fill +
    +
    • + +
  • + +
    + editor +
    +
    .icon-editor +
    +
    • + +
  • + +
    + wechat +
    +
    .icon-wechat +
    +
    • + +
  • + +
    + telephone +
    +
    .icon-telephone +
    +
    • + +
  • + +
    + user +
    +
    .icon-user +
    +
    • + +
  • + +
    + add +
    +
    .icon-add +
    +
    • + +
  • + +
    + add-circle +
    +
    .icon-add-circle +
    +
    • + +
  • + +
    + arrow-up-circle +
    +
    .icon-arrow-up-circle +
    +
    • + +
  • + +
    + arrow-right-circle +
    +
    .icon-arrow-right-circle +
    +
    • + +
  • + +
    + arrow-down +
    +
    .icon-arrow-down +
    +
    • + +
  • + +
    + dustbin +
    +
    .icon-ashbin +
    +
    • + +
  • + +
    + arrow-right +
    +
    .icon-arrow-right +
    +
    • + +
  • + +
    + eye +
    +
    .icon-eye +
    +
    • + +
  • + +
    + bottom +
    +
    .icon-bottom +
    +
    • + +
  • + +
    + arrow-left-circle +
    +
    .icon-arrow-left-circle +
    +
    • + +
  • + +
    + attachment +
    +
    .icon-attachment +
    +
    • + +
  • + +
    + code +
    +
    .icon-code +
    +
    • + +
  • + +
    + close +
    +
    .icon-close +
    +
    • + +
  • + +
    + complete +
    +
    .icon-complete +
    +
    • + +
  • + +
    + download +
    +
    .icon-download +
    +
    • + +
  • + +
    + minus +
    +
    .icon-minus +
    +
    • + +
  • + +
    + picture +
    +
    .icon-picture +
    +
    • + +
  • + +
    + search +
    +
    .icon-search +
    +
    • + +
  • + +
    + select +
    +
    .icon-select +
    +
    • + +
  • + +
    + success +
    +
    .icon-success +
    +
    • + +
  • + +
    + add-bold +
    +
    .icon-add-bold +
    +
    • + +
  • + +
    + arrow-left-bold +
    +
    .icon-arrow-left-bold +
    +
    • + +
  • + +
    + arrow-up-bold +
    +
    .icon-arrow-up-bold +
    +
    • + +
  • + +
    + close-bold +
    +
    .icon-close-bold +
    +
    • + +
  • + +
    + arrow-down-bold +
    +
    .icon-arrow-down-bold +
    +
    • + +
  • + +
    + minus-bold +
    +
    .icon-minus-bold +
    +
    • + +
  • + +
    + arrow-right-bold +
    +
    .icon-arrow-right-bold +
    +
    • + +
  • + +
    + select-bold +
    +
    .icon-select-bold +
    +
    • + +
  • + +
    + arrow-up-fill +
    +
    .icon-arrow-up-fill +
    +
    • + +
  • + +
    + arrow-down-fill +
    +
    .icon-arrow-down-fill +
    +
    • + +
  • + +
    + arrow-left-fill +
    +
    .icon-arrow-left-fill +
    +
    • + +
  • + +
    + arrow-right-fill +
    +
    .icon-arrow-right-fill +
    +
    • + +
  • + +
    + user-fill +
    +
    .icon-user-fill +
    +
    • + +
  • + +
    + success-fill +
    +
    .icon-success-filling +
    +
    • + +
  • + +
    + top-filling +
    +
    .icon-top-filling +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

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

使用步骤如下：

+

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

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

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

+
<span class="iconfont icon-xxx"></span>
+
+
+

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

+
+
+
+
+
    + +
  • + +
    error
    +
    #icon-error
    +
    • + +
  • + +
    more
    +
    #icon-more
    +
    • + +
  • + +
    scan
    +
    #icon-scan
    +
    • + +
  • + +
    fire
    +
    #icon-fire
    +
    • + +
  • + +
    arrow-down-circle
    +
    #icon-arrow-down-circle
    +
    • + +
  • + +
    map
    +
    #icon-map
    +
    • + +
  • + +
    map-fill
    +
    #icon-map-fill
    +
    • + +
  • + +
    help-circle
    +
    #icon-help-circle
    +
    • + +
  • + +
    warn-circle
    +
    #icon-warn-circle
    +
    • + +
  • + +
    backspace
    +
    #icon-backspace
    +
    • + +
  • + +
    backspace-fill
    +
    #icon-backspace-fill
    +
    • + +
  • + +
    eye-close
    +
    #icon-eye-close
    +
    • + +
  • + +
    upload
    +
    #icon-upload
    +
    • + +
  • + +
    eye-disable
    +
    #icon-eye-disable
    +
    • + +
  • + +
    record
    +
    #icon-record
    +
    • + +
  • + +
    time
    +
    #icon-icon-test3
    +
    • + +
  • + +
    setting
    +
    #icon-icon-test5
    +
    • + +
  • + +
    email
    +
    #icon-icon-test9
    +
    • + +
  • + +
    editor-fill
    +
    #icon-editor-fill
    +
    • + +
  • + +
    share
    +
    #icon-share
    +
    • + +
  • + +
    share-fill
    +
    #icon-share-fill
    +
    • + +
  • + +
    editor
    +
    #icon-editor
    +
    • + +
  • + +
    wechat
    +
    #icon-wechat
    +
    • + +
  • + +
    telephone
    +
    #icon-telephone
    +
    • + +
  • + +
    user
    +
    #icon-user
    +
    • + +
  • + +
    add
    +
    #icon-add
    +
    • + +
  • + +
    add-circle
    +
    #icon-add-circle
    +
    • + +
  • + +
    arrow-up-circle
    +
    #icon-arrow-up-circle
    +
    • + +
  • + +
    arrow-right-circle
    +
    #icon-arrow-right-circle
    +
    • + +
  • + +
    arrow-down
    +
    #icon-arrow-down
    +
    • + +
  • + +
    dustbin
    +
    #icon-ashbin
    +
    • + +
  • + +
    arrow-right
    +
    #icon-arrow-right
    +
    • + +
  • + +
    eye
    +
    #icon-eye
    +
    • + +
  • + +
    bottom
    +
    #icon-bottom
    +
    • + +
  • + +
    arrow-left-circle
    +
    #icon-arrow-left-circle
    +
    • + +
  • + +
    attachment
    +
    #icon-attachment
    +
    • + +
  • + +
    code
    +
    #icon-code
    +
    • + +
  • + +
    close
    +
    #icon-close
    +
    • + +
  • + +
    complete
    +
    #icon-complete
    +
    • + +
  • + +
    download
    +
    #icon-download
    +
    • + +
  • + +
    minus
    +
    #icon-minus
    +
    • + +
  • + +
    picture
    +
    #icon-picture
    +
    • + +
  • + +
    search
    +
    #icon-search
    +
    • + +
  • + +
    select
    +
    #icon-select
    +
    • + +
  • + +
    success
    +
    #icon-success
    +
    • + +
  • + +
    add-bold
    +
    #icon-add-bold
    +
    • + +
  • + +
    arrow-left-bold
    +
    #icon-arrow-left-bold
    +
    • + +
  • + +
    arrow-up-bold
    +
    #icon-arrow-up-bold
    +
    • + +
  • + +
    close-bold
    +
    #icon-close-bold
    +
    • + +
  • + +
    arrow-down-bold
    +
    #icon-arrow-down-bold
    +
    • + +
  • + +
    minus-bold
    +
    #icon-minus-bold
    +
    • + +
  • + +
    arrow-right-bold
    +
    #icon-arrow-right-bold
    +
    • + +
  • + +
    select-bold
    +
    #icon-select-bold
    +
    • + +
  • + +
    arrow-up-fill
    +
    #icon-arrow-up-fill
    +
    • + +
  • + +
    arrow-down-fill
    +
    #icon-arrow-down-fill
    +
    • + +
  • + +
    arrow-left-fill
    +
    #icon-arrow-left-fill
    +
    • + +
  • + +
    arrow-right-fill
    +
    #icon-arrow-right-fill
    +
    • + +
  • + +
    user-fill
    +
    #icon-user-fill
    +
    • + +
  • + +
    success-fill
    +
    #icon-success-filling
    +
    • + +
  • + +
    top-filling
    +
    #icon-top-filling
    +
    • + +
+
+

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/miniprogram/assets/font/iconfont.css b/miniprogram/assets/font/iconfont.css new file mode 100644 index 0000000..85e5a6c --- /dev/null +++ b/miniprogram/assets/font/iconfont.css @@ -0,0 +1,255 @@ +@font-face { + font-family: "iconfont"; /* Project id 4489595 */ + src: url('iconfont.woff2?t=1715597123285') format('woff2'), + url('iconfont.woff?t=1715597123285') format('woff'), + url('iconfont.ttf?t=1715597123285') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-error:before { + content: "\e73b"; +} + +.icon-more:before { + content: "\e73a"; +} + +.icon-scan:before { + content: "\e738"; +} + +.icon-fire:before { + content: "\e739"; +} + +.icon-arrow-down-circle:before { + content: "\e731"; +} + +.icon-map:before { + content: "\e732"; +} + +.icon-map-fill:before { + content: "\e733"; +} + +.icon-help-circle:before { + content: "\e72f"; +} + +.icon-warn-circle:before { + content: "\e730"; +} + +.icon-backspace:before { + content: "\e72d"; +} + +.icon-backspace-fill:before { + content: "\e72c"; +} + +.icon-eye-close:before { + content: "\e72e"; +} + +.icon-upload:before { + content: "\e722"; +} + +.icon-eye-disable:before { + content: "\e726"; +} + +.icon-record:before { + content: "\e725"; +} + +.icon-icon-test3:before { + content: "\e724"; +} + +.icon-icon-test5:before { + content: "\e723"; +} + +.icon-icon-test9:before { + content: "\e721"; +} + +.icon-editor-fill:before { + content: "\e72b"; +} + +.icon-share:before { + content: "\e729"; +} + +.icon-share-fill:before { + content: "\e728"; +} + +.icon-editor:before { + content: "\e72a"; +} + +.icon-wechat:before { + content: "\e727"; +} + +.icon-telephone:before { + content: "\e71c"; +} + +.icon-user:before { + content: "\e71a"; +} + +.icon-add:before { + content: "\e700"; +} + +.icon-add-circle:before { + content: "\e710"; +} + +.icon-arrow-up-circle:before { + content: "\e720"; +} + +.icon-arrow-right-circle:before { + content: "\e71f"; +} + +.icon-arrow-down:before { + content: "\e702"; +} + +.icon-ashbin:before { + content: "\e71d"; +} + +.icon-arrow-right:before { + content: "\e703"; +} + +.icon-eye:before { + content: "\e719"; +} + +.icon-bottom:before { + content: "\e707"; +} + +.icon-arrow-left-circle:before { + content: "\e71e"; +} + +.icon-attachment:before { + content: "\e714"; +} + +.icon-code:before { + content: "\e717"; +} + +.icon-close:before { + content: "\e704"; +} + +.icon-complete:before { + content: "\e718"; +} + +.icon-download:before { + content: "\e716"; +} + +.icon-minus:before { + content: "\e701"; +} + +.icon-picture:before { + content: "\e712"; +} + +.icon-search:before { + content: "\e711"; +} + +.icon-select:before { + content: "\e705"; +} + +.icon-success:before { + content: "\e706"; +} + +.icon-add-bold:before { + content: "\e708"; +} + +.icon-arrow-left-bold:before { + content: "\e70f"; +} + +.icon-arrow-up-bold:before { + content: "\e70e"; +} + +.icon-close-bold:before { + content: "\e70d"; +} + +.icon-arrow-down-bold:before { + content: "\e70c"; +} + +.icon-minus-bold:before { + content: "\e709"; +} + +.icon-arrow-right-bold:before { + content: "\e70b"; +} + +.icon-select-bold:before { + content: "\e70a"; +} + +.icon-arrow-up-fill:before { + content: "\e737"; +} + +.icon-arrow-down-fill:before { + content: "\e736"; +} + +.icon-arrow-left-fill:before { + content: "\e735"; +} + +.icon-arrow-right-fill:before { + content: "\e734"; +} + +.icon-user-fill:before { + content: "\e71b"; +} + +.icon-success-filling:before { + content: "\e713"; +} + +.icon-top-filling:before { + content: "\e715"; +} + diff --git a/miniprogram/assets/font/iconfont.js b/miniprogram/assets/font/iconfont.js new file mode 100644 index 0000000..8ca1e13 --- /dev/null +++ b/miniprogram/assets/font/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4489595='',function(a){var c=(c=document.getElementsByTagName("script"))[c.length-1],l=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var o,t,i,s,h,e=function(c,l){l.parentNode.insertBefore(c,l)};if(l&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}o=function(){var c,l=document.createElement("div");l.innerHTML=a._iconfont_svg_string_4489595,(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,(c=document.body).firstChild?e(l,c.firstChild):c.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(i=o,s=a.document,h=!1,m(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,d())})}function d(){h||(h=!0,i())}function m(){try{s.documentElement.doScroll("left")}catch(c){return void setTimeout(m,50)}d()}}(window); \ No newline at end of file diff --git a/miniprogram/assets/font/iconfont.json b/miniprogram/assets/font/iconfont.json new file mode 100644 index 0000000..ee07ba5 --- /dev/null +++ b/miniprogram/assets/font/iconfont.json @@ -0,0 +1,429 @@ +{ + "id": "4489595", + "name": "SVG2字体", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "15838473", + "name": "error", + "font_class": "error", + "unicode": "e73b", + "unicode_decimal": 59195 + }, + { + "icon_id": "15838508", + "name": "more", + "font_class": "more", + "unicode": "e73a", + "unicode_decimal": 59194 + }, + { + "icon_id": "11372685", + "name": "scan", + "font_class": "scan", + "unicode": "e738", + "unicode_decimal": 59192 + }, + { + "icon_id": "11372790", + "name": "fire", + "font_class": "fire", + "unicode": "e739", + "unicode_decimal": 59193 + }, + { + "icon_id": "15838459", + "name": "arrow-down-circle", + "font_class": "arrow-down-circle", + "unicode": "e731", + "unicode_decimal": 59185 + }, + { + "icon_id": "15838499", + "name": "map", + "font_class": "map", + "unicode": "e732", + "unicode_decimal": 59186 + }, + { + "icon_id": "15838614", + "name": "map-fill", + "font_class": "map-fill", + "unicode": "e733", + "unicode_decimal": 59187 + }, + { + "icon_id": "39727400", + "name": "help-circle", + "font_class": "help-circle", + "unicode": "e72f", + "unicode_decimal": 59183 + }, + { + "icon_id": "39727412", + "name": "warn-circle", + "font_class": "warn-circle", + "unicode": "e730", + "unicode_decimal": 59184 + }, + { + "icon_id": "39768554", + "name": "backspace", + "font_class": "backspace", + "unicode": "e72d", + "unicode_decimal": 59181 + }, + { + "icon_id": "39768569", + "name": "backspace-fill", + "font_class": "backspace-fill", + "unicode": "e72c", + "unicode_decimal": 59180 + }, + { + "icon_id": "29306576", + "name": "eye-close", + "font_class": "eye-close", + "unicode": "e72e", + "unicode_decimal": 59182 + }, + { + "icon_id": "15838548", + "name": "upload", + "font_class": "upload", + "unicode": "e722", + "unicode_decimal": 59170 + }, + { + "icon_id": "8776676", + "name": "eye-disable", + "font_class": "eye-disable", + "unicode": "e726", + "unicode_decimal": 59174 + }, + { + "icon_id": "8776711", + "name": "record", + "font_class": "record", + "unicode": "e725", + "unicode_decimal": 59173 + }, + { + "icon_id": "8776715", + "name": "time", + "font_class": "icon-test3", + "unicode": "e724", + "unicode_decimal": 59172 + }, + { + "icon_id": "8776873", + "name": "setting", + "font_class": "icon-test5", + "unicode": "e723", + "unicode_decimal": 59171 + }, + { + "icon_id": "8777166", + "name": "email", + "font_class": "icon-test9", + "unicode": "e721", + "unicode_decimal": 59169 + }, + { + "icon_id": "11372791", + "name": "editor-fill", + "font_class": "editor-fill", + "unicode": "e72b", + "unicode_decimal": 59179 + }, + { + "icon_id": "39768492", + "name": "share", + "font_class": "share", + "unicode": "e729", + "unicode_decimal": 59177 + }, + { + "icon_id": "39768493", + "name": "share-fill", + "font_class": "share-fill", + "unicode": "e728", + "unicode_decimal": 59176 + }, + { + "icon_id": "11372647", + "name": "editor", + "font_class": "editor", + "unicode": "e72a", + "unicode_decimal": 59178 + }, + { + "icon_id": "39768549", + "name": "wechat", + "font_class": "wechat", + "unicode": "e727", + "unicode_decimal": 59175 + }, + { + "icon_id": "15838544", + "name": "telephone", + "font_class": "telephone", + "unicode": "e71c", + "unicode_decimal": 59164 + }, + { + "icon_id": "15838547", + "name": "user", + "font_class": "user", + "unicode": "e71a", + "unicode_decimal": 59162 + }, + { + "icon_id": "15838424", + "name": "add", + "font_class": "add", + "unicode": "e700", + "unicode_decimal": 59136 + }, + { + "icon_id": "15838425", + "name": "add-circle", + "font_class": "add-circle", + "unicode": "e710", + "unicode_decimal": 59152 + }, + { + "icon_id": "15838427", + "name": "arrow-up-circle", + "font_class": "arrow-up-circle", + "unicode": "e720", + "unicode_decimal": 59168 + }, + { + "icon_id": "15838428", + "name": "arrow-right-circle", + "font_class": "arrow-right-circle", + "unicode": "e71f", + "unicode_decimal": 59167 + }, + { + "icon_id": "15838429", + "name": "arrow-down", + "font_class": "arrow-down", + "unicode": "e702", + "unicode_decimal": 59138 + }, + { + "icon_id": "15838430", + "name": "dustbin", + "font_class": "ashbin", + "unicode": "e71d", + "unicode_decimal": 59165 + }, + { + "icon_id": "15838431", + "name": "arrow-right", + "font_class": "arrow-right", + "unicode": "e703", + "unicode_decimal": 59139 + }, + { + "icon_id": "15838432", + "name": "eye", + "font_class": "eye", + "unicode": "e719", + "unicode_decimal": 59161 + }, + { + "icon_id": "15838433", + "name": "bottom", + "font_class": "bottom", + "unicode": "e707", + "unicode_decimal": 59143 + }, + { + "icon_id": "15838437", + "name": "arrow-left-circle", + "font_class": "arrow-left-circle", + "unicode": "e71e", + "unicode_decimal": 59166 + }, + { + "icon_id": "15838442", + "name": "attachment", + "font_class": "attachment", + "unicode": "e714", + "unicode_decimal": 59156 + }, + { + "icon_id": "15838443", + "name": "code", + "font_class": "code", + "unicode": "e717", + "unicode_decimal": 59159 + }, + { + "icon_id": "15838444", + "name": "close", + "font_class": "close", + "unicode": "e704", + "unicode_decimal": 59140 + }, + { + "icon_id": "15838450", + "name": "complete", + "font_class": "complete", + "unicode": "e718", + "unicode_decimal": 59160 + }, + { + "icon_id": "15838464", + "name": "download", + "font_class": "download", + "unicode": "e716", + "unicode_decimal": 59158 + }, + { + "icon_id": "15838514", + "name": "minus", + "font_class": "minus", + "unicode": "e701", + "unicode_decimal": 59137 + }, + { + "icon_id": "15838521", + "name": "picture", + "font_class": "picture", + "unicode": "e712", + "unicode_decimal": 59154 + }, + { + "icon_id": "15838525", + "name": "search", + "font_class": "search", + "unicode": "e711", + "unicode_decimal": 59153 + }, + { + "icon_id": "15838530", + "name": "select", + "font_class": "select", + "unicode": "e705", + "unicode_decimal": 59141 + }, + { + "icon_id": "15838532", + "name": "success", + "font_class": "success", + "unicode": "e706", + "unicode_decimal": 59142 + }, + { + "icon_id": "15838560", + "name": "add-bold", + "font_class": "add-bold", + "unicode": "e708", + "unicode_decimal": 59144 + }, + { + "icon_id": "15838561", + "name": "arrow-left-bold", + "font_class": "arrow-left-bold", + "unicode": "e70f", + "unicode_decimal": 59151 + }, + { + "icon_id": "15838562", + "name": "arrow-up-bold", + "font_class": "arrow-up-bold", + "unicode": "e70e", + "unicode_decimal": 59150 + }, + { + "icon_id": "15838563", + "name": "close-bold", + "font_class": "close-bold", + "unicode": "e70d", + "unicode_decimal": 59149 + }, + { + "icon_id": "15838564", + "name": "arrow-down-bold", + "font_class": "arrow-down-bold", + "unicode": "e70c", + "unicode_decimal": 59148 + }, + { + "icon_id": "15838565", + "name": "minus-bold", + "font_class": "minus-bold", + "unicode": "e709", + "unicode_decimal": 59145 + }, + { + "icon_id": "15838566", + "name": "arrow-right-bold", + "font_class": "arrow-right-bold", + "unicode": "e70b", + "unicode_decimal": 59147 + }, + { + "icon_id": "15838567", + "name": "select-bold", + "font_class": "select-bold", + "unicode": "e70a", + "unicode_decimal": 59146 + }, + { + "icon_id": "15838581", + "name": "arrow-up-fill", + "font_class": "arrow-up-fill", + "unicode": "e737", + "unicode_decimal": 59191 + }, + { + "icon_id": "15838582", + "name": "arrow-down-fill", + "font_class": "arrow-down-fill", + "unicode": "e736", + "unicode_decimal": 59190 + }, + { + "icon_id": "15838583", + "name": "arrow-left-fill", + "font_class": "arrow-left-fill", + "unicode": "e735", + "unicode_decimal": 59189 + }, + { + "icon_id": "15838584", + "name": "arrow-right-fill", + "font_class": "arrow-right-fill", + "unicode": "e734", + "unicode_decimal": 59188 + }, + { + "icon_id": "15838606", + "name": "user-fill", + "font_class": "user-fill", + "unicode": "e71b", + "unicode_decimal": 59163 + }, + { + "icon_id": "15838611", + "name": "success-fill", + "font_class": "success-filling", + "unicode": "e713", + "unicode_decimal": 59155 + }, + { + "icon_id": "15838618", + "name": "top-filling", + "font_class": "top-filling", + "unicode": "e715", + "unicode_decimal": 59157 + } + ] +} diff --git a/miniprogram/assets/font/iconfont.less b/miniprogram/assets/font/iconfont.less new file mode 100644 index 0000000..1dd341c --- /dev/null +++ b/miniprogram/assets/font/iconfont.less @@ -0,0 +1,257 @@ +/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ +/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */ +@font-face { + font-family: "j-icon"; + /* Project id 4489595 */ + src: url('iconfont.woff2?t=1715597123285') format('woff2'), + url('iconfont.woff?t=1715597123285') format('woff'), + url('iconfont.ttf?t=1715597123285') format('truetype'); +} + +.j-icon { + font-family: 'j-icon' !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.j-icon-error:before { + content: '\e73b'; +} + +.j-icon-more:before { + content: '\e73a'; +} + +.j-icon-scan:before { + content: '\e738'; +} + +.j-icon-fire:before { + content: '\e739'; +} + +.j-icon-arrow-down-circle:before { + content: '\e731'; +} + +.j-icon-map:before { + content: '\e732'; +} + +.j-icon-map-fill:before { + content: '\e733'; +} + +.j-icon-help-circle:before { + content: '\e72f'; +} + +.j-icon-warn-circle:before { + content: '\e730'; +} + +.j-icon-backspace:before { + content: '\e72d'; +} + +.j-icon-backspace-fill:before { + content: '\e72c'; +} + +.j-icon-eye-close:before { + content: '\e72e'; +} + +.j-icon-upload:before { + content: '\e722'; +} + +.j-icon-eye-disable:before { + content: '\e726'; +} + +.j-icon-record:before { + content: '\e725'; +} + +.j-icon-icon-test3:before { + content: '\e724'; +} + +.j-icon-icon-test5:before { + content: '\e723'; +} + +.j-icon-icon-test9:before { + content: '\e721'; +} + +.j-icon-editor-fill:before { + content: '\e72b'; +} + +.j-icon-share:before { + content: '\e729'; +} + +.j-icon-share-fill:before { + content: '\e728'; +} + +.j-icon-editor:before { + content: '\e72a'; +} + +.j-icon-wechat:before { + content: '\e727'; +} + +.j-icon-telephone:before { + content: '\e71c'; +} + +.j-icon-user:before { + content: '\e71a'; +} + +.j-icon-add:before { + content: '\e700'; +} + +.j-icon-add-circle:before { + content: '\e710'; +} + +.j-icon-arrow-up-circle:before { + content: '\e720'; +} + +.j-icon-arrow-right-circle:before { + content: '\e71f'; +} + +.j-icon-arrow-down:before { + content: '\e702'; +} + +.j-icon-ashbin:before { + content: '\e71d'; +} + +.j-icon-arrow-right:before { + content: '\e703'; +} + +.j-icon-eye:before { + content: '\e719'; +} + +.j-icon-bottom:before { + content: '\e707'; +} + +.j-icon-arrow-left-circle:before { + content: '\e71e'; +} + +.j-icon-attachment:before { + content: '\e714'; +} + +.j-icon-code:before { + content: '\e717'; +} + +.j-icon-close:before { + content: '\e704'; +} + +.j-icon-complete:before { + content: '\e718'; +} + +.j-icon-download:before { + content: '\e716'; +} + +.j-icon-minus:before { + content: '\e701'; +} + +.j-icon-picture:before { + content: '\e712'; +} + +.j-icon-search:before { + content: '\e711'; +} + +.j-icon-select:before { + content: '\e705'; +} + +.j-icon-success:before { + content: '\e706'; +} + +.j-icon-add-bold:before { + content: '\e708'; +} + +.j-icon-arrow-left-bold:before { + content: '\e70f'; +} + +.j-icon-arrow-up-bold:before { + content: '\e70e'; +} + +.j-icon-close-bold:before { + content: '\e70d'; +} + +.j-icon-arrow-down-bold:before { + content: '\e70c'; +} + +.j-icon-minus-bold:before { + content: '\e709'; +} + +.j-icon-arrow-right-bold:before { + content: '\e70b'; +} + +.j-icon-select-bold:before { + content: '\e70a'; +} + +.j-icon-arrow-up-fill:before { + content: '\e737'; +} + +.j-icon-arrow-down-fill:before { + content: '\e736'; +} + +.j-icon-arrow-left-fill:before { + content: '\e735'; +} + +.j-icon-arrow-right-fill:before { + content: '\e734'; +} + +.j-icon-user-fill:before { + content: '\e71b'; +} + +.j-icon-success-filling:before { + content: '\e713'; +} + +.j-icon-top-filling:before { + content: '\e715'; +} \ No newline at end of file diff --git a/miniprogram/assets/font/iconfont.ttf b/miniprogram/assets/font/iconfont.ttf new file mode 100644 index 0000000..ec3b6de Binary files /dev/null and b/miniprogram/assets/font/iconfont.ttf differ diff --git a/miniprogram/assets/font/iconfont.woff b/miniprogram/assets/font/iconfont.woff new file mode 100644 index 0000000..fbd56fc Binary files /dev/null and b/miniprogram/assets/font/iconfont.woff differ diff --git a/miniprogram/assets/font/iconfont.woff2 b/miniprogram/assets/font/iconfont.woff2 new file mode 100644 index 0000000..add8128 Binary files /dev/null and b/miniprogram/assets/font/iconfont.woff2 differ diff --git a/miniprogram/components/word-card/word-card.less b/miniprogram/components/word-card/word-card.less index a24bc11..4a2816b 100644 --- a/miniprogram/components/word-card/word-card.less +++ b/miniprogram/components/word-card/word-card.less @@ -17,6 +17,7 @@ border: 1rpx solid #141414; position: relative; + &::after { content: ''; position: absolute; @@ -54,4 +55,4 @@ margin-right: 8rpx; color: #141414; } -} +} \ No newline at end of file diff --git a/miniprogram/components/word-card/word-card.wxml b/miniprogram/components/word-card/word-card.wxml index 33a570f..1bea49f 100644 --- a/miniprogram/components/word-card/word-card.wxml +++ b/miniprogram/components/word-card/word-card.wxml @@ -4,6 +4,10 @@ {{word}} - + - \ No newline at end of file + diff --git a/miniprogram/components/word-input/word-input.wxml b/miniprogram/components/word-input/word-input.wxml index 9442357..ee0f9cf 100644 --- a/miniprogram/components/word-input/word-input.wxml +++ b/miniprogram/components/word-input/word-input.wxml @@ -1,5 +1,9 @@ - + - + + + 打印 + diff --git a/miniprogram/ui/button/button.ts b/miniprogram/ui/button/button.ts index 0dfbf9e..25b9380 100644 --- a/miniprogram/ui/button/button.ts +++ b/miniprogram/ui/button/button.ts @@ -6,36 +6,40 @@ Component({ * 组件的属性列表 */ properties: { - key: { - type: Number, - value: 0, - }, - word: { + type: { type: String, - value: '', + value: 'default', // default, green, white }, - color: { + size: { type: String, - value: '', + value: 'normal', // large, normal, small, mini + }, + icon: { + type: String, + value: '', // 图标名称 + }, + disabled: { + type: Boolean, + value: false, // 是否禁用 + }, + flat: { + type: Boolean, + value: false, // 是否扁平化 + }, + loading: { + type: Boolean, + value: false, // 是否加载中 }, }, /** * 组件的初始数据 */ - data: { - word: '', - color: '', - }, + data: {}, lifetimes: { attached() {}, }, /** * 组件的方法列表 */ - methods: { - onDelete() { - const { key, word } = this.data; - this.triggerEvent('onDelete', { key, word }); - }, - }, + methods: {}, }); diff --git a/miniprogram/ui/icon/icon.json b/miniprogram/ui/icon/icon.json new file mode 100644 index 0000000..4575d1b --- /dev/null +++ b/miniprogram/ui/icon/icon.json @@ -0,0 +1,4 @@ +{ + "usingComponents": {}, + "component": true +} \ No newline at end of file diff --git a/miniprogram/ui/icon/icon.less b/miniprogram/ui/icon/icon.less new file mode 100644 index 0000000..5f607cc --- /dev/null +++ b/miniprogram/ui/icon/icon.less @@ -0,0 +1,21 @@ +@import '../../style/theme.less'; +@import '../../assets/font/iconfont.less'; + +.icon { + margin: 0; + padding: 0; + display: inline-block; + vertical-align: middle; + font-size: inherit; + color: inherit; + + &.icon_image { + width: @font-size-icon; + height: @font-size-icon; + } + + &__image { + width: 100%; + height: 100%; + } +} diff --git a/miniprogram/ui/icon/icon.ts b/miniprogram/ui/icon/icon.ts new file mode 100644 index 0000000..5c90f75 --- /dev/null +++ b/miniprogram/ui/icon/icon.ts @@ -0,0 +1,35 @@ +Component({ + options: { + //@ts-ignore + styleIsolation: 'apply-shared', + }, + properties: { + // icon name + name: { + type: String, + value: '', + optionalTypes: [String], + }, + // icon color + color: { + type: String, + value: '', + optionalTypes: [String], + }, + // icon size + size: { + type: String, + value: '', + optionalTypes: [String], + }, + // icon classPrefix + classPrefix: { + type: String, + value: 'icon', + optionalTypes: [String], + }, + }, + externalClasses: ['ext-class'], + data: {}, + methods: {}, +}); diff --git a/miniprogram/ui/icon/icon.wxml b/miniprogram/ui/icon/icon.wxml new file mode 100644 index 0000000..15b179c --- /dev/null +++ b/miniprogram/ui/icon/icon.wxml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/miniprogram/ui/wxs/base.wxs b/miniprogram/ui/wxs/base.wxs new file mode 100644 index 0000000..62dded1 --- /dev/null +++ b/miniprogram/ui/wxs/base.wxs @@ -0,0 +1,60 @@ +/* eslint-disable */ + +// key加引号会报错 如：{ "a": 1, "b": 0}, 仅支持： { a: 1, b: 0} +function classNames() { + var classes = [], + hasOwn = {}; + + for (var i = 0; i < arguments.length; i++) { + var arg = arguments[i]; + if (!arg) continue; + + var argType = typeof arg; + + if (argType === 'string' || argType === 'number') { + classes.push(arg); + } else if ('Array' === arg.constructor && arg.length) { + var inner = classNames.apply(null, arg); + if (inner) { + classes.push(inner); + } + } else if (argType === 'object') { + var objStr = JSON.stringify(arg); + var dotReg = getRegExp('"', 'g'); + objStr = objStr.replace('{', '').replace('}', '').split(','); + + for (var i = 0; i < objStr.length; i++) { + var key = objStr[i].split(':')[0], + _key = key.replace(dotReg, ''); + + if (!hasOwn[_key] && arg[_key]) { + classes.push(_key); + hasOwn[_key] = true; + } + } + } + } + + return classes.join(' '); +} + +function isUrl(url) { + var expression = + 'https?://(www.)?[-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)', + regex = getRegExp(expression, 'g'); + + return url.match(regex); +} + +/** + * 禁止事件冒泡 + */ +function stopPropagation() { + return false; +} + +module.exports = { + classNames: classNames, + isUrl: isUrl, + stopPropagation: stopPropagation, +};