diff --git a/src/app copy.tsx b/src/app copy.tsx new file mode 100644 index 0000000..563e573 --- /dev/null +++ b/src/app copy.tsx @@ -0,0 +1,32 @@ +import { Component } from 'react' +import ContextBlueTooth from "@/use/contextBlueTooth" +import { Provider } from 'react-redux' +import configStore from './store' + +import './app.scss' + +const store = configStore() +class App extends Component { + + componentDidMount () {} + + componentDidShow () {} + + componentDidHide () {} + + componentDidCatchError () {} + + // this.props.children 是将要会渲染的页面 + render () { + return ( + + + + {this.props.children} + + + ) + } +} + +export default App \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 563e573..c5cff86 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,4 +1,4 @@ -import { Component } from 'react' +import { FC } from 'react' import ContextBlueTooth from "@/use/contextBlueTooth" import { Provider } from 'react-redux' import configStore from './store' @@ -6,27 +6,14 @@ import configStore from './store' import './app.scss' const store = configStore() -class App extends Component { - - componentDidMount () {} - - componentDidShow () {} - - componentDidHide () {} - - componentDidCatchError () {} - - // this.props.children 是将要会渲染的页面 - render () { - return ( - +const App:FC = ({children}) => { + return ( - {this.props.children} + {children} - ) - } + ) } export default App \ No newline at end of file diff --git a/src/common/util.js b/src/common/util.js index 14921f7..9929638 100644 --- a/src/common/util.js +++ b/src/common/util.js @@ -42,7 +42,7 @@ export const throttle = (fn, delay) => { export const getFilterData = (val = {}, arr = []) => { let res = {} for(let key in val) { - if(val[key]!=undefined&&val[key]!=null&&(!arr.includes(key))){ + if(val[key]!=undefined&&val[key]!=null&&val[key]!=''&&(!arr.includes(key))){ if(val[key] instanceof Number){ if(!isNaN(val[key])) { res[key] = val[key] diff --git a/src/components/closeBtn/index.module.scss b/src/components/closeBtn/index.module.scss index 7c001f4..0c9a68a 100644 --- a/src/components/closeBtn/index.module.scss +++ b/src/components/closeBtn/index.module.scss @@ -9,4 +9,8 @@ display: flex; justify-content: center; align-items: center; + .icon_a_btn{ + font-size: 30px; + margin-top: 3px; + } } \ No newline at end of file diff --git a/src/components/closeBtn/index.tsx b/src/components/closeBtn/index.tsx index 90fdc42..396ab6d 100644 --- a/src/components/closeBtn/index.tsx +++ b/src/components/closeBtn/index.tsx @@ -1,4 +1,4 @@ -import { View } from "@tarojs/components" +import { View, Text } from "@tarojs/components" import { memo } from "react" import style from "./index.module.scss" @@ -11,8 +11,10 @@ export default memo(({onClose, styleObj = {}}:Params) => { return ( + > + + ) }) \ No newline at end of file diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 0138c7e..4ba8daa 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -3,7 +3,7 @@ import styles from "./index.module.scss" import CloseBtn from "@/components/closeBtn" import classnames from "classnames"; import { debounce } from "@/common/util"; -import { memo, useEffect, useRef, useState } from "react"; +import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react"; type Params = { clickOnSearch?: (val: string) => void @@ -19,7 +19,7 @@ type Params = { debounceTime?: number //防抖时间，不设默认为零 } -export default memo(({ +export default forwardRef(({ clickOnSearch, changeOnSearch, disabled = false, @@ -29,8 +29,8 @@ export default memo(({ btnStyle = {}, placeIcon = 'inner', btnTitle = '搜索', - debounceTime = 0 -}:Params) => { + debounceTime = 0, +}:Params, ref) => { const [inputCon , setInputCon] = useState('') const debounceTimeRef = useRef(0) @@ -43,6 +43,10 @@ export default memo(({ changeData(value) } + useImperativeHandle(ref, () => ({ + clearInput + })) + const clearInput = () => { setInputCon('') changeOnSearch?.('') diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index 9ebddbf..6ca9a5b 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -137,6 +137,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) getColorList() } + //清空搜索内容 + const searchRef = useRef(null) + const clearSearch = () => { + searchRef.current.clearInput() + setSearchShow(false) + } + return ( @@ -153,9 +160,9 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) {searchShow&& - searchInput(e)} debounceTime={400}/> + searchInput(e)} debounceTime={400}/> - setSearchShow(false)}>取消 + clearSearch()}>取消 } 颜色分类 (13) {list.length} diff --git a/src/pages/details/components/swiper/index.tsx b/src/pages/details/components/swiper/index.tsx index f0788dd..d937f8d 100644 --- a/src/pages/details/components/swiper/index.tsx +++ b/src/pages/details/components/swiper/index.tsx @@ -18,7 +18,6 @@ export default ({list = []}: params) => { const swiperChange = (e) => { setPageIndex(e.detail.current + 1) - pageRef.current.innerHTML = 2 } diff --git a/src/styles/bak/iconfont.scss b/src/styles/bak/iconfont.scss new file mode 100644 index 0000000..868bd5f --- /dev/null +++ b/src/styles/bak/iconfont.scss @@ -0,0 +1,89 @@ +@font-face { + font-family: "iconfont"; /* Project id 2987621 */ + src: + url('iconfont.ttf?t=1650013104232') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yifahuo:before { + content: "\e65b"; +} + +.icon-daipeibu:before { + content: "\e662"; +} + +.icon-yaoqingtuandui:before { + content: "\e65a"; +} + +.icon-a-tuikuanshouhou:before { + content: "\e65c"; +} + +.icon-daifukuan:before { + content: "\e65d"; +} + +.icon-shezhi:before { + content: "\e65e"; +} + +.icon-yanseduibi:before { + content: "\e65f"; +} + +.icon-daifahuo:before { + content: "\e660"; +} + +.icon-baoguo:before { + content: "\e661"; +} + +.icon-tick-pressed:before { + content: "\e652"; +} + +.icon-wode-pressed:before { + content: "\e655"; +} + +.icon-fenlei-pressed:before { + content: "\e656"; +} + +.icon-sousuo:before { + content: "\e647"; +} + +.icon-fenxiang:before { + content: "\e648"; +} + +.icon-shaixuan:before { + content: "\e649"; +} + +.icon-gouwuche:before { + content: "\e64a"; +} + +.icon-qingkong:before { + content: "\e64c"; +} + +.icon-jia:before { + content: "\e64d"; +} + +.icon-jian:before { + content: "\e64e"; +} \ No newline at end of file diff --git a/src/styles/bak/iconfont.ttf b/src/styles/bak/iconfont.ttf new file mode 100644 index 0000000..02f0408 Binary files /dev/null and b/src/styles/bak/iconfont.ttf differ diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/demo.css b/src/styles/download (2)/font_2987621_ti92prbgh6/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/styles/download (2)/font_2987621_ti92prbgh6/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/src/styles/download (2)/font_2987621_ti92prbgh6/demo_index.html b/src/styles/download (2)/font_2987621_ti92prbgh6/demo_index.html new file mode 100644 index 0000000..15451a7 --- /dev/null +++ b/src/styles/download (2)/font_2987621_ti92prbgh6/demo_index.html @@ -0,0 +1,855 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    已发货
    +
    
    +
    • + +
  • + +
    待配布
    +
    
    +
    • + +
  • + +
    邀请团队
    +
    
    +
    • + +
  • + +
    退款、售后
    +
    
    +
    • + +
  • + +
    待付款
    +
    
    +
    • + +
  • + +
    设置
    +
    
    +
    • + +
  • + +
    颜色对比
    +
    
    +
    • + +
  • + +
    待发货
    +
    
    +
    • + +
  • + +
    包裹
    +
    
    +
    • + +
  • + +
    tick-pressed
    +
    
    +
    • + +
  • + +
    我的-pressed
    +
    
    +
    • + +
  • + +
    分类-pressed
    +
    
    +
    • + +
  • + +
    搜索
    +
    
    +
    • + +
  • + +
    分享
    +
    
    +
    • + +
  • + +
    筛选
    +
    
    +
    • + +
  • + +
    购物车
    +
    
    +
    • + +
  • + +
    清空
    +
    
    +
    • + +
  • + +
    加
    +
    
    +
    • + +
  • + +
    减
    +
    
    +
    • + +
  • + +
    收藏-pressed
    +
    
    +
    • + +
  • + +
    收藏
    +
    
    +
    • + +
  • + +
    phone
    +
    
    +
    • + +
  • + +
    tick
    +
    
    +
    • + +
  • + +
    more,back
    +
    
    +
    • + +
  • + +
    分类
    +
    
    +
    • + +
  • + +
    编辑
    +
    
    +
    • + +
  • + +
    我的
    +
    
    +
    • + +
  • + +
    排序,升序
    +
    
    +
    • + +
  • + +
    排序,降序
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1652068398646') format('woff2'),
+       url('iconfont.woff?t=1652068398646') format('woff'),
+       url('iconfont.ttf?t=1652068398646') 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"。

+
+
+
+
+
    + +
  • + +
    + 已发货 +
    +
    .icon-yifahuo +
    +
    • + +
  • + +
    + 待配布 +
    +
    .icon-daipeibu +
    +
    • + +
  • + +
    + 邀请团队 +
    +
    .icon-yaoqingtuandui +
    +
    • + +
  • + +
    + 退款、售后 +
    +
    .icon-a-tuikuanshouhou +
    +
    • + +
  • + +
    + 待付款 +
    +
    .icon-daifukuan +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 颜色对比 +
    +
    .icon-yanseduibi +
    +
    • + +
  • + +
    + 待发货 +
    +
    .icon-daifahuo +
    +
    • + +
  • + +
    + 包裹 +
    +
    .icon-baoguo +
    +
    • + +
  • + +
    + tick-pressed +
    +
    .icon-tick-pressed +
    +
    • + +
  • + +
    + 我的-pressed +
    +
    .icon-wode-pressed +
    +
    • + +
  • + +
    + 分类-pressed +
    +
    .icon-fenlei-pressed +
    +
    • + +
  • + +
    + 搜索 +
    +
    .icon-sousuo +
    +
    • + +
  • + +
    + 分享 +
    +
    .icon-fenxiang +
    +
    • + +
  • + +
    + 筛选 +
    +
    .icon-shaixuan +
    +
    • + +
  • + +
    + 购物车 +
    +
    .icon-gouwuche +
    +
    • + +
  • + +
    + 清空 +
    +
    .icon-qingkong +
    +
    • + +
  • + +
    + 加 +
    +
    .icon-jia +
    +
    • + +
  • + +
    + 减 +
    +
    .icon-jian +
    +
    • + +
  • + +
    + 收藏-pressed +
    +
    .icon-shoucang-pressed +
    +
    • + +
  • + +
    + 收藏 +
    +
    .icon-shoucang +
    +
    • + +
  • + +
    + phone +
    +
    .icon-phone +
    +
    • + +
  • + +
    + tick +
    +
    .icon-tick +
    +
    • + +
  • + +
    + more,back +
    +
    .icon-a-moreback +
    +
    • + +
  • + +
    + 分类 +
    +
    .icon-fenlei +
    +
    • + +
  • + +
    + 编辑 +
    +
    .icon-bianji +
    +
    • + +
  • + +
    + 我的 +
    +
    .icon-wode +
    +
    • + +
  • + +
    + 排序,升序 +
    +
    .icon-sort-up-full +
    +
    • + +
  • + +
    + 排序,降序 +
    +
    .icon-sort-down-full +
    +
    • + +
+
+

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"。

+
+
+
+
+
    + +
  • + +
    已发货
    +
    #icon-yifahuo
    +
    • + +
  • + +
    待配布
    +
    #icon-daipeibu
    +
    • + +
  • + +
    邀请团队
    +
    #icon-yaoqingtuandui
    +
    • + +
  • + +
    退款、售后
    +
    #icon-a-tuikuanshouhou
    +
    • + +
  • + +
    待付款
    +
    #icon-daifukuan
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    颜色对比
    +
    #icon-yanseduibi
    +
    • + +
  • + +
    待发货
    +
    #icon-daifahuo
    +
    • + +
  • + +
    包裹
    +
    #icon-baoguo
    +
    • + +
  • + +
    tick-pressed
    +
    #icon-tick-pressed
    +
    • + +
  • + +
    我的-pressed
    +
    #icon-wode-pressed
    +
    • + +
  • + +
    分类-pressed
    +
    #icon-fenlei-pressed
    +
    • + +
  • + +
    搜索
    +
    #icon-sousuo
    +
    • + +
  • + +
    分享
    +
    #icon-fenxiang
    +
    • + +
  • + +
    筛选
    +
    #icon-shaixuan
    +
    • + +
  • + +
    购物车
    +
    #icon-gouwuche
    +
    • + +
  • + +
    清空
    +
    #icon-qingkong
    +
    • + +
  • + +
    加
    +
    #icon-jia
    +
    • + +
  • + +
    减
    +
    #icon-jian
    +
    • + +
  • + +
    收藏-pressed
    +
    #icon-shoucang-pressed
    +
    • + +
  • + +
    收藏
    +
    #icon-shoucang
    +
    • + +
  • + +
    phone
    +
    #icon-phone
    +
    • + +
  • + +
    tick
    +
    #icon-tick
    +
    • + +
  • + +
    more,back
    +
    #icon-a-moreback
    +
    • + +
  • + +
    分类
    +
    #icon-fenlei
    +
    • + +
  • + +
    编辑
    +
    #icon-bianji
    +
    • + +
  • + +
    我的
    +
    #icon-wode
    +
    • + +
  • + +
    排序,升序
    +
    #icon-sort-up-full
    +
    • + +
  • + +
    排序,降序
    +
    #icon-sort-down-full
    +
    • + +
+
+

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/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.css b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.css new file mode 100644 index 0000000..2af8fda --- /dev/null +++ b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.css @@ -0,0 +1,131 @@ +@font-face { + font-family: "iconfont"; /* Project id 2987621 */ + src: url('iconfont.woff2?t=1652068398646') format('woff2'), + url('iconfont.woff?t=1652068398646') format('woff'), + url('iconfont.ttf?t=1652068398646') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yifahuo:before { + content: "\e65b"; +} + +.icon-daipeibu:before { + content: "\e662"; +} + +.icon-yaoqingtuandui:before { + content: "\e65a"; +} + +.icon-a-tuikuanshouhou:before { + content: "\e65c"; +} + +.icon-daifukuan:before { + content: "\e65d"; +} + +.icon-shezhi:before { + content: "\e65e"; +} + +.icon-yanseduibi:before { + content: "\e65f"; +} + +.icon-daifahuo:before { + content: "\e660"; +} + +.icon-baoguo:before { + content: "\e661"; +} + +.icon-tick-pressed:before { + content: "\e652"; +} + +.icon-wode-pressed:before { + content: "\e655"; +} + +.icon-fenlei-pressed:before { + content: "\e656"; +} + +.icon-sousuo:before { + content: "\e647"; +} + +.icon-fenxiang:before { + content: "\e648"; +} + +.icon-shaixuan:before { + content: "\e649"; +} + +.icon-gouwuche:before { + content: "\e64a"; +} + +.icon-qingkong:before { + content: "\e64c"; +} + +.icon-jia:before { + content: "\e64d"; +} + +.icon-jian:before { + content: "\e64e"; +} + +.icon-shoucang-pressed:before { + content: "\e64f"; +} + +.icon-shoucang:before { + content: "\e650"; +} + +.icon-phone:before { + content: "\e651"; +} + +.icon-tick:before { + content: "\e653"; +} + +.icon-a-moreback:before { + content: "\e654"; +} + +.icon-fenlei:before { + content: "\e657"; +} + +.icon-bianji:before { + content: "\e658"; +} + +.icon-wode:before { + content: "\e659"; +} + +.icon-sort-up-full:before { + content: "\ea4c"; +} + +.icon-sort-down-full:before { + content: "\ea4d"; +} + diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.js b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.js new file mode 100644 index 0000000..573da06 --- /dev/null +++ b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.js @@ -0,0 +1 @@ +!function(a){var t,h,o,l,i,e='',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),p=function(a,t){t.parentNode.insertBefore(a,t)};if(d&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function n(){i||(i=!0,o())}function m(){try{l.documentElement.doScroll("left")}catch(a){return void setTimeout(m,50)}n()}t=function(){var a,t=document.createElement("div");t.innerHTML=e,e=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?p(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(o=t,l=a.document,i=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,n())})}(window); \ No newline at end of file diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.json b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.json new file mode 100644 index 0000000..d3e99a9 --- /dev/null +++ b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.json @@ -0,0 +1,212 @@ +{ + "id": "2987621", + "name": "电子商城", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "29349174", + "name": "已发货", + "font_class": "yifahuo", + "unicode": "e65b", + "unicode_decimal": 58971 + }, + { + "icon_id": "29349143", + "name": "待配布", + "font_class": "daipeibu", + "unicode": "e662", + "unicode_decimal": 58978 + }, + { + "icon_id": "29346808", + "name": "邀请团队", + "font_class": "yaoqingtuandui", + "unicode": "e65a", + "unicode_decimal": 58970 + }, + { + "icon_id": "29346810", + "name": "退款、售后", + "font_class": "a-tuikuanshouhou", + "unicode": "e65c", + "unicode_decimal": 58972 + }, + { + "icon_id": "29346811", + "name": "待付款", + "font_class": "daifukuan", + "unicode": "e65d", + "unicode_decimal": 58973 + }, + { + "icon_id": "29346812", + "name": "设置", + "font_class": "shezhi", + "unicode": "e65e", + "unicode_decimal": 58974 + }, + { + "icon_id": "29346813", + "name": "颜色对比", + "font_class": "yanseduibi", + "unicode": "e65f", + "unicode_decimal": 58975 + }, + { + "icon_id": "29346814", + "name": "待发货", + "font_class": "daifahuo", + "unicode": "e660", + "unicode_decimal": 58976 + }, + { + "icon_id": "29346815", + "name": "包裹", + "font_class": "baoguo", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "29240262", + "name": "tick-pressed", + "font_class": "tick-pressed", + "unicode": "e652", + "unicode_decimal": 58962 + }, + { + "icon_id": "29240263", + "name": "我的-pressed", + "font_class": "wode-pressed", + "unicode": "e655", + "unicode_decimal": 58965 + }, + { + "icon_id": "29240264", + "name": "分类-pressed", + "font_class": "fenlei-pressed", + "unicode": "e656", + "unicode_decimal": 58966 + }, + { + "icon_id": "29240057", + "name": "搜索", + "font_class": "sousuo", + "unicode": "e647", + "unicode_decimal": 58951 + }, + { + "icon_id": "29240058", + "name": "分享", + "font_class": "fenxiang", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "29240059", + "name": "筛选", + "font_class": "shaixuan", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "29240060", + "name": "购物车", + "font_class": "gouwuche", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "29240062", + "name": "清空", + "font_class": "qingkong", + "unicode": "e64c", + "unicode_decimal": 58956 + }, + { + "icon_id": "29240063", + "name": "加", + "font_class": "jia", + "unicode": "e64d", + "unicode_decimal": 58957 + }, + { + "icon_id": "29240064", + "name": "减", + "font_class": "jian", + "unicode": "e64e", + "unicode_decimal": 58958 + }, + { + "icon_id": "29240065", + "name": "收藏-pressed", + "font_class": "shoucang-pressed", + "unicode": "e64f", + "unicode_decimal": 58959 + }, + { + "icon_id": "29240066", + "name": "收藏", + "font_class": "shoucang", + "unicode": "e650", + "unicode_decimal": 58960 + }, + { + "icon_id": "29240067", + "name": "phone", + "font_class": "phone", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "29240069", + "name": "tick", + "font_class": "tick", + "unicode": "e653", + "unicode_decimal": 58963 + }, + { + "icon_id": "29240070", + "name": "more,back", + "font_class": "a-moreback", + "unicode": "e654", + "unicode_decimal": 58964 + }, + { + "icon_id": "29240073", + "name": "分类", + "font_class": "fenlei", + "unicode": "e657", + "unicode_decimal": 58967 + }, + { + "icon_id": "29240074", + "name": "编辑", + "font_class": "bianji", + "unicode": "e658", + "unicode_decimal": 58968 + }, + { + "icon_id": "29240075", + "name": "我的", + "font_class": "wode", + "unicode": "e659", + "unicode_decimal": 58969 + }, + { + "icon_id": "18174913", + "name": "排序,升序", + "font_class": "sort-up-full", + "unicode": "ea4c", + "unicode_decimal": 59980 + }, + { + "icon_id": "18174920", + "name": "排序,降序", + "font_class": "sort-down-full", + "unicode": "ea4d", + "unicode_decimal": 59981 + } + ] +} diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.ttf b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.ttf new file mode 100644 index 0000000..1b0a908 Binary files /dev/null and b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.ttf differ diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff new file mode 100644 index 0000000..4f85924 Binary files /dev/null and b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff differ diff --git a/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff2 b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff2 new file mode 100644 index 0000000..ad5776c Binary files /dev/null and b/src/styles/download (2)/font_2987621_ti92prbgh6/iconfont.woff2 differ diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index 868bd5f..8b91429 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -1,7 +1,6 @@ @font-face { font-family: "iconfont"; /* Project id 2987621 */ - src: - url('iconfont.ttf?t=1650013104232') format('truetype'); + src:url('iconfont.ttf?t=1652068398646') format('truetype'); } .iconfont { @@ -86,4 +85,45 @@ .icon-jian:before { content: "\e64e"; -} \ No newline at end of file +} + +.icon-shoucang-pressed:before { + content: "\e64f"; +} + +.icon-shoucang:before { + content: "\e650"; +} + +.icon-phone:before { + content: "\e651"; +} + +.icon-tick:before { + content: "\e653"; +} + +.icon-a-moreback:before { + content: "\e654"; +} + +.icon-fenlei:before { + content: "\e657"; +} + +.icon-bianji:before { + content: "\e658"; +} + +.icon-wode:before { + content: "\e659"; +} + +.icon-sort-up-full:before { + content: "\ea4c"; +} + +.icon-sort-down-full:before { + content: "\ea4d"; +} + diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf index 02f0408..1b0a908 100644 Binary files a/src/styles/iconfont.ttf and b/src/styles/iconfont.ttf differ