From 10e875eca77e4ea57ff2343e293e5b5212f7ac47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com> Date: Mon, 2 Sep 2024 14:27:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=98=BE?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/demo.css | 539 ---- src/assets/icons/demo_index.html | 2006 -------------- src/assets/search-icons/demo.css | 539 ---- src/assets/search-icons/demo_index.html | 2328 ----------------- src/components/model-shop-list/index.vue | 4 +- src/components/page-settings/index.vue | 8 +- src/components/page-settings/page-setting.vue | 3 +- 7 files changed, 9 insertions(+), 5418 deletions(-) delete mode 100644 src/assets/icons/demo.css delete mode 100644 src/assets/icons/demo_index.html delete mode 100644 src/assets/search-icons/demo.css delete mode 100644 src/assets/search-icons/demo_index.html diff --git a/src/assets/icons/demo.css b/src/assets/icons/demo.css deleted file mode 100644 index a67054a0..00000000 --- a/src/assets/icons/demo.css +++ /dev/null @@ -1,539 +0,0 @@ -/* 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/assets/icons/demo_index.html b/src/assets/icons/demo_index.html deleted file mode 100644 index ba7a4c44..00000000 --- a/src/assets/icons/demo_index.html +++ /dev/null @@ -1,2006 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
- - - 查看项目 - -
-
-
-
    - -
  • - -
    右箭头-2
    -
    &#xe6aa;
    -
    • - -
  • - -
    三点
    -
    &#xe635;
    -
    • - -
  • - -
    编辑 (2)
    -
    &#xe795;
    -
    • - -
  • - -
    问号
    -
    &#xe74a;
    -
    • - -
  • - -
    双箭头 右
    -
    &#xe7b6;
    -
    • - -
  • - -
    EXE
    -
    &#xe782;
    -
    • - -
  • - -
    TXT
    -
    &#xe786;
    -
    • - -
  • - -
    1个
    -
    &#xe794;
    -
    • - -
  • - -
    横2
    -
    &#xe789;
    -
    • - -
  • - -
    4x4
    -
    &#xe78a;
    -
    • - -
  • - -
    左1右2
    -
    &#xe78b;
    -
    • - -
  • - -
    竖3
    -
    &#xe78c;
    -
    • - -
  • - -
    上2下1
    -
    &#xe78d;
    -
    • - -
  • - -
    左1右上1右下2
    -
    &#xe78e;
    -
    • - -
  • - -
    上1下2
    -
    &#xe78f;
    -
    • - -
  • - -
    田字格
    -
    &#xe790;
    -
    • - -
  • - -
    上2下3
    -
    &#xe792;
    -
    • - -
  • - -
    左2右1
    -
    &#xe793;
    -
    • - -
  • - -
    竖2
    -
    &#xe77b;
    -
    • - -
  • - -
    上传
    -
    &#xe72b;
    -
    • - -
  • - -
    进销存对号
    -
    &#xe741;
    -
    • - -
  • - -
    购物车1
    -
    &#xe791;
    -
    • - -
  • - -
    PDF
    -
    &#xe787;
    -
    • - -
  • - -
    ppt
    -
    &#xe788;
    -
    • - -
  • - -
    word
    -
    &#xe785;
    -
    • - -
  • - -
    vsd
    -
    &#xe783;
    -
    • - -
  • - -
    APK
    -
    &#xe784;
    -
    • - -
  • - -
    音频
    -
    &#xe77d;
    -
    • - -
  • - -
    视频1
    -
    &#xe77e;
    -
    • - -
  • - -
    压缩包
    -
    &#xe77f;
    -
    • - -
  • - -
    IPA
    -
    &#xe780;
    -
    • - -
  • - -
    Excel
    -
    &#xe781;
    -
    • - -
  • - -
    文件1
    -
    &#xe77c;
    -
    • - -
  • - -
    图片
    -
    &#xe779;
    -
    • - -
  • - -
    文件
    -
    &#xe77a;
    -
    • - -
  • - -
    对号 线
    -
    &#xe777;
    -
    • - -
  • - -
    选中1
    -
    &#xe778;
    -
    • - -
  • - -
    眼睛关闭
    -
    &#xe775;
    -
    • - -
  • - -
    眼睛
    -
    &#xe776;
    -
    • - -
  • - -
    icon-index-zxmd-dress
    -
    &#xe6af;
    -
    • - -
  • - -
    加号
    -
    &#xe71b;
    -
    • - -
  • - -
    进销存左箭头
    -
    &#xe73f;
    -
    • - -
  • - -
    进销存右箭头
    -
    &#xe737;
    -
    • - -
  • - -
    进销存上箭头
    -
    &#xe738;
    -
    • - -
  • - -
    左下圆角
    -
    &#xe774;
    -
    • - -
  • - -
    右上圆角
    -
    &#xe773;
    -
    • - -
  • - -
    图片icon
    -
    &#xe768;
    -
    • - -
  • - -
    外左
    -
    &#xe769;
    -
    • - -
  • - -
    外下
    -
    &#xe76a;
    -
    • - -
  • - -
    删除3
    -
    &#xe76b;
    -
    • - -
  • - -
    拖动
    -
    &#xe76c;
    -
    • - -
  • - -
    外右
    -
    &#xe76d;
    -
    • - -
  • - -
    点线
    -
    &#xe76e;
    -
    • - -
  • - -
    删除2
    -
    &#xe76f;
    -
    • - -
  • - -
    复制
    -
    &#xe770;
    -
    • - -
  • - -
    实线
    -
    &#xe771;
    -
    • - -
  • - -
    关闭1
    -
    &#xe772;
    -
    • - -
  • - -
    文本
    -
    &#xe766;
    -
    • - -
  • - -
    线条
    -
    &#xe767;
    -
    • - -
  • - -
    关闭
    -
    &#xe764;
    -
    • - -
  • - -
    编辑
    -
    &#xe765;
    -
    • - -
  • - -
    右下圆角
    -
    &#xe758;
    -
    • - -
  • - -
    下箭头
    -
    &#xe759;
    -
    • - -
  • - -
    椭圆
    -
    &#xe75a;
    -
    • - -
  • - -
    外上
    -
    &#xe75b;
    -
    • - -
  • - -
    内右
    -
    &#xe75c;
    -
    • - -
  • - -
    单张
    -
    &#xe752;
    -
    • - -
  • - -
    铺满
    -
    &#xe753;
    -
    • - -
  • - -
    内左
    -
    &#xe75d;
    -
    • - -
  • - -
    圆点
    -
    &#xe75e;
    -
    • - -
  • - -
    内下
    -
    &#xe75f;
    -
    • - -
  • - -
    搜索
    -
    &#xe760;
    -
    • - -
  • - -
    平铺
    -
    &#xe761;
    -
    • - -
  • - -
    居中
    -
    &#xe762;
    -
    • - -
  • - -
    内上
    -
    &#xe763;
    -
    • - -
  • - -
    左对齐
    -
    &#xe755;
    -
    • - -
  • - -
    重置
    -
    &#xe756;
    -
    • - -
  • - -
    左上圆角
    -
    &#xe757;
    -
    • - -
  • - -
    右对齐
    -
    &#xe754;
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

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

第二步：定义使用 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"。

-
-
-
-
-
    - -
  • - -
    - 右箭头-2 -
    -
    .icon-arrow-right-o -
    -
    • - -
  • - -
    - 三点 -
    -
    .icon-ellipsis -
    -
    • - -
  • - -
    - 编辑 (2) -
    -
    .icon-commodity-edit -
    -
    • - -
  • - -
    - 问号 -
    -
    .icon-tips -
    -
    • - -
  • - -
    - 双箭头 右 -
    -
    .icon-arrow-right-dbl -
    -
    • - -
  • - -
    - EXE -
    -
    .icon-EXE -
    -
    • - -
  • - -
    - TXT -
    -
    .icon-txt -
    -
    • - -
  • - -
    - 1个 -
    -
    .icon-a-1ge -
    -
    • - -
  • - -
    - 横2 -
    -
    .icon-heng2 -
    -
    • - -
  • - -
    - 4x4 -
    -
    .icon-a-4x4 -
    -
    • - -
  • - -
    - 左1右2 -
    -
    .icon-zuo1you2 -
    -
    • - -
  • - -
    - 竖3 -
    -
    .icon-shu3 -
    -
    • - -
  • - -
    - 上2下1 -
    -
    .icon-shang2xia1 -
    -
    • - -
  • - -
    - 左1右上1右下2 -
    -
    .icon-zuo1youshang1youxia2 -
    -
    • - -
  • - -
    - 上1下2 -
    -
    .icon-shang1xia2 -
    -
    • - -
  • - -
    - 田字格 -
    -
    .icon-tianzige -
    -
    • - -
  • - -
    - 上2下3 -
    -
    .icon-shang2xia3 -
    -
    • - -
  • - -
    - 左2右1 -
    -
    .icon-zuo2you1 -
    -
    • - -
  • - -
    - 竖2 -
    -
    .icon-shu2 -
    -
    • - -
  • - -
    - 上传 -
    -
    .icon-upload -
    -
    • - -
  • - -
    - 进销存对号 -
    -
    .icon-true -
    -
    • - -
  • - -
    - 购物车1 -
    -
    .icon-cart -
    -
    • - -
  • - -
    - PDF -
    -
    .icon-pdf -
    -
    • - -
  • - -
    - ppt -
    -
    .icon-ppt -
    -
    • - -
  • - -
    - word -
    -
    .icon-word -
    -
    • - -
  • - -
    - vsd -
    -
    .icon-vsd -
    -
    • - -
  • - -
    - APK -
    -
    .icon-apk -
    -
    • - -
  • - -
    - 音频 -
    -
    .icon-vf -
    -
    • - -
  • - -
    - 视频1 -
    -
    .icon-video -
    -
    • - -
  • - -
    - 压缩包 -
    -
    .icon-zip -
    -
    • - -
  • - -
    - IPA -
    -
    .icon-ipa -
    -
    • - -
  • - -
    - Excel -
    -
    .icon-excel -
    -
    • - -
  • - -
    - 文件1 -
    -
    .icon-file -
    -
    • - -
  • - -
    - 图片 -
    -
    .icon-error-img -
    -
    • - -
  • - -
    - 文件 -
    -
    .icon-folder -
    -
    • - -
  • - -
    - 对号 线 -
    -
    .icon-true-o -
    -
    • - -
  • - -
    - 选中1 -
    -
    .icon-checked-1 -
    -
    • - -
  • - -
    - 眼睛关闭 -
    -
    .icon-eye-close -
    -
    • - -
  • - -
    - 眼睛 -
    -
    .icon-eye -
    -
    • - -
  • - -
    - icon-index-zxmd-dress -
    -
    .icon-position -
    -
    • - -
  • - -
    - 加号 -
    -
    .icon-add -
    -
    • - -
  • - -
    - 进销存左箭头 -
    -
    .icon-arrow-left -
    -
    • - -
  • - -
    - 进销存右箭头 -
    -
    .icon-arrow-right -
    -
    • - -
  • - -
    - 进销存上箭头 -
    -
    .icon-arrow-top -
    -
    • - -
  • - -
    - 左下圆角 -
    -
    .icon-radius-l-b -
    -
    • - -
  • - -
    - 右上圆角 -
    -
    .icon-radius-r-t -
    -
    • - -
  • - -
    - 图片icon -
    -
    .icon-img -
    -
    • - -
  • - -
    - 外左 -
    -
    .icon-out-l -
    -
    • - -
  • - -
    - 外下 -
    -
    .icon-out-b -
    -
    • - -
  • - -
    - 删除3 -
    -
    .icon-del -
    -
    • - -
  • - -
    - 拖动 -
    -
    .icon-drag -
    -
    • - -
  • - -
    - 外右 -
    -
    .icon-out-r -
    -
    • - -
  • - -
    - 点线 -
    -
    .icon-line-point -
    -
    • - -
  • - -
    - 删除2 -
    -
    .icon-del-o -
    -
    • - -
  • - -
    - 复制 -
    -
    .icon-copy -
    -
    • - -
  • - -
    - 实线 -
    -
    .icon-line -
    -
    • - -
  • - -
    - 关闭1 -
    -
    .icon-close-o -
    -
    • - -
  • - -
    - 文本 -
    -
    .icon-text -
    -
    • - -
  • - -
    - 线条 -
    -
    .icon-auxiliary-line -
    -
    • - -
  • - -
    - 关闭 -
    -
    .icon-close -
    -
    • - -
  • - -
    - 编辑 -
    -
    .icon-edit -
    -
    • - -
  • - -
    - 右下圆角 -
    -
    .icon-radius-r-b -
    -
    • - -
  • - -
    - 下箭头 -
    -
    .icon-arrow-bottom -
    -
    • - -
  • - -
    - 椭圆 -
    -
    .icon-elliptic -
    -
    • - -
  • - -
    - 外上 -
    -
    .icon-out-t -
    -
    • - -
  • - -
    - 内右 -
    -
    .icon-enter-r -
    -
    • - -
  • - -
    - 单张 -
    -
    .icon-single-sheet -
    -
    • - -
  • - -
    - 铺满 -
    -
    .icon-spread-over -
    -
    • - -
  • - -
    - 内左 -
    -
    .icon-enter-l -
    -
    • - -
  • - -
    - 圆点 -
    -
    .icon-round-dot -
    -
    • - -
  • - -
    - 内下 -
    -
    .icon-enter-b -
    -
    • - -
  • - -
    - 搜索 -
    -
    .icon-search -
    -
    • - -
  • - -
    - 平铺 -
    -
    .icon-tile -
    -
    • - -
  • - -
    - 居中 -
    -
    .icon-center -
    -
    • - -
  • - -
    - 内上 -
    -
    .icon-enter-t -
    -
    • - -
  • - -
    - 左对齐 -
    -
    .icon-left -
    -
    • - -
  • - -
    - 重置 -
    -
    .icon-reset -
    -
    • - -
  • - -
    - 左上圆角 -
    -
    .icon-radius-l-t -
    -
    • - -
  • - -
    - 右对齐 -
    -
    .icon-right -
    -
    • - -
-
-

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

-
-
-
-
-
    - -
  • - -
    右箭头-2
    -
    #icon-arrow-right-o
    -
    • - -
  • - -
    三点
    -
    #icon-ellipsis
    -
    • - -
  • - -
    编辑 (2)
    -
    #icon-commodity-edit
    -
    • - -
  • - -
    问号
    -
    #icon-tips
    -
    • - -
  • - -
    双箭头 右
    -
    #icon-arrow-right-dbl
    -
    • - -
  • - -
    EXE
    -
    #icon-EXE
    -
    • - -
  • - -
    TXT
    -
    #icon-txt
    -
    • - -
  • - -
    1个
    -
    #icon-a-1ge
    -
    • - -
  • - -
    横2
    -
    #icon-heng2
    -
    • - -
  • - -
    4x4
    -
    #icon-a-4x4
    -
    • - -
  • - -
    左1右2
    -
    #icon-zuo1you2
    -
    • - -
  • - -
    竖3
    -
    #icon-shu3
    -
    • - -
  • - -
    上2下1
    -
    #icon-shang2xia1
    -
    • - -
  • - -
    左1右上1右下2
    -
    #icon-zuo1youshang1youxia2
    -
    • - -
  • - -
    上1下2
    -
    #icon-shang1xia2
    -
    • - -
  • - -
    田字格
    -
    #icon-tianzige
    -
    • - -
  • - -
    上2下3
    -
    #icon-shang2xia3
    -
    • - -
  • - -
    左2右1
    -
    #icon-zuo2you1
    -
    • - -
  • - -
    竖2
    -
    #icon-shu2
    -
    • - -
  • - -
    上传
    -
    #icon-upload
    -
    • - -
  • - -
    进销存对号
    -
    #icon-true
    -
    • - -
  • - -
    购物车1
    -
    #icon-cart
    -
    • - -
  • - -
    PDF
    -
    #icon-pdf
    -
    • - -
  • - -
    ppt
    -
    #icon-ppt
    -
    • - -
  • - -
    word
    -
    #icon-word
    -
    • - -
  • - -
    vsd
    -
    #icon-vsd
    -
    • - -
  • - -
    APK
    -
    #icon-apk
    -
    • - -
  • - -
    音频
    -
    #icon-vf
    -
    • - -
  • - -
    视频1
    -
    #icon-video
    -
    • - -
  • - -
    压缩包
    -
    #icon-zip
    -
    • - -
  • - -
    IPA
    -
    #icon-ipa
    -
    • - -
  • - -
    Excel
    -
    #icon-excel
    -
    • - -
  • - -
    文件1
    -
    #icon-file
    -
    • - -
  • - -
    图片
    -
    #icon-error-img
    -
    • - -
  • - -
    文件
    -
    #icon-folder
    -
    • - -
  • - -
    对号 线
    -
    #icon-true-o
    -
    • - -
  • - -
    选中1
    -
    #icon-checked-1
    -
    • - -
  • - -
    眼睛关闭
    -
    #icon-eye-close
    -
    • - -
  • - -
    眼睛
    -
    #icon-eye
    -
    • - -
  • - -
    icon-index-zxmd-dress
    -
    #icon-position
    -
    • - -
  • - -
    加号
    -
    #icon-add
    -
    • - -
  • - -
    进销存左箭头
    -
    #icon-arrow-left
    -
    • - -
  • - -
    进销存右箭头
    -
    #icon-arrow-right
    -
    • - -
  • - -
    进销存上箭头
    -
    #icon-arrow-top
    -
    • - -
  • - -
    左下圆角
    -
    #icon-radius-l-b
    -
    • - -
  • - -
    右上圆角
    -
    #icon-radius-r-t
    -
    • - -
  • - -
    图片icon
    -
    #icon-img
    -
    • - -
  • - -
    外左
    -
    #icon-out-l
    -
    • - -
  • - -
    外下
    -
    #icon-out-b
    -
    • - -
  • - -
    删除3
    -
    #icon-del
    -
    • - -
  • - -
    拖动
    -
    #icon-drag
    -
    • - -
  • - -
    外右
    -
    #icon-out-r
    -
    • - -
  • - -
    点线
    -
    #icon-line-point
    -
    • - -
  • - -
    删除2
    -
    #icon-del-o
    -
    • - -
  • - -
    复制
    -
    #icon-copy
    -
    • - -
  • - -
    实线
    -
    #icon-line
    -
    • - -
  • - -
    关闭1
    -
    #icon-close-o
    -
    • - -
  • - -
    文本
    -
    #icon-text
    -
    • - -
  • - -
    线条
    -
    #icon-auxiliary-line
    -
    • - -
  • - -
    关闭
    -
    #icon-close
    -
    • - -
  • - -
    编辑
    -
    #icon-edit
    -
    • - -
  • - -
    右下圆角
    -
    #icon-radius-r-b
    -
    • - -
  • - -
    下箭头
    -
    #icon-arrow-bottom
    -
    • - -
  • - -
    椭圆
    -
    #icon-elliptic
    -
    • - -
  • - -
    外上
    -
    #icon-out-t
    -
    • - -
  • - -
    内右
    -
    #icon-enter-r
    -
    • - -
  • - -
    单张
    -
    #icon-single-sheet
    -
    • - -
  • - -
    铺满
    -
    #icon-spread-over
    -
    • - -
  • - -
    内左
    -
    #icon-enter-l
    -
    • - -
  • - -
    圆点
    -
    #icon-round-dot
    -
    • - -
  • - -
    内下
    -
    #icon-enter-b
    -
    • - -
  • - -
    搜索
    -
    #icon-search
    -
    • - -
  • - -
    平铺
    -
    #icon-tile
    -
    • - -
  • - -
    居中
    -
    #icon-center
    -
    • - -
  • - -
    内上
    -
    #icon-enter-t
    -
    • - -
  • - -
    左对齐
    -
    #icon-left
    -
    • - -
  • - -
    重置
    -
    #icon-reset
    -
    • - -
  • - -
    左上圆角
    -
    #icon-radius-l-t
    -
    • - -
  • - -
    右对齐
    -
    #icon-right
    -
    • - -
-
-

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/assets/search-icons/demo.css b/src/assets/search-icons/demo.css deleted file mode 100644 index a67054a0..00000000 --- a/src/assets/search-icons/demo.css +++ /dev/null @@ -1,539 +0,0 @@ -/* 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/assets/search-icons/demo_index.html b/src/assets/search-icons/demo_index.html deleted file mode 100644 index 6e190650..00000000 --- a/src/assets/search-icons/demo_index.html +++ /dev/null @@ -1,2328 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
- - - 查看项目 - -
-
-
-
    - -
  • - -
    礼物
    -
    &#xe771;
    -
    • - -
  • - -
    放大
    -
    &#xe60d;
    -
    • - -
  • - -
    放大-四角
    -
    &#xe602;
    -
    • - -
  • - -
    放大-边线
    -
    &#xe6f2;
    -
    • - -
  • - 𐆃 -
    地图导航
    -
    &#x10183;
    -
    • - -
  • - -
    选中下标
    -
    &#xe729;
    -
    • - -
  • - -
    感叹号
    -
    &#xe71f;
    -
    • - -
  • - -
    复制
    -
    &#xe71e;
    -
    • - -
  • - -
    转账
    -
    &#xe71b;
    -
    • - -
  • - -
    收款
    -
    &#xe71c;
    -
    • - -
  • - -
    转换2
    -
    &#xe71d;
    -
    • - -
  • - -
    提现
    -
    &#xe717;
    -
    • - -
  • - -
    充值
    -
    &#xe718;
    -
    • - -
  • - -
    转换
    -
    &#xe719;
    -
    • - -
  • - -
    明细
    -
    &#xe71a;
    -
    • - -
  • - -
    门店
    -
    &#xe6f3;
    -
    • - -
  • - -
    星星
    -
    &#xe6ef;
    -
    • - -
  • - -
    位置定位
    -
    &#xe6f0;
    -
    • - -
  • - -
    消息
    -
    &#xe6f1;
    -
    • - -
  • - -
    login-language
    -
    &#xe6ed;
    -
    • - -
  • - -
    login-down-arrow
    -
    &#xe6ee;
    -
    • - -
  • - -
    删除
    -
    &#xe6ec;
    -
    • - -
  • - -
    成功对号
    -
    &#xe6eb;
    -
    • - -
  • - -
    Shopping cart1107
    -
    &#xe6e7;
    -
    • - -
  • - -
    me1107
    -
    &#xe6e8;
    -
    • - -
  • - -
    classify1107
    -
    &#xe6e9;
    -
    • - -
  • - -
    index1107
    -
    &#xe6ea;
    -
    • - -
  • - -
    支付_支付失败
    -
    &#xe6e6;
    -
    • - -
  • - -
    jianpan-guanbi
    -
    &#xe6e5;
    -
    • - -
  • - -
    转账/转换
    -
    &#xe6e4;
    -
    • - -
  • - -
    wytw-sctp
    -
    &#xe6e3;
    -
    • - -
  • - -
    xzzx-shij
    -
    &#xe6e2;
    -
    • - -
  • - -
    xzzx-rhaz
    -
    &#xe6e0;
    -
    • - -
  • - -
    xzzx-kfwd
    -
    &#xe6e1;
    -
    • - -
  • - -
    wenda-wytw
    -
    &#xe6de;
    -
    • - -
  • - -
    wenda-wdtw
    -
    &#xe6df;
    -
    • - -
  • - -
    bowenxiangqing-dianzan-xuaz
    -
    &#xe6dd;
    -
    • - -
  • - -
    bowenxiangqing-fenxiang
    -
    &#xe6dc;
    -
    • - -
  • - -
    bowenxiangqing-huifu
    -
    &#xe6ce;
    -
    • - -
  • - -
    bowenxiangqing-dianzan
    -
    &#xe6da;
    -
    • - -
  • - -
    wodeqianbao-eyeclo2
    -
    &#xe6db;
    -
    • - -
  • - -
    zuhedap-shoping
    -
    &#xe6d9;
    -
    • - -
  • - -
    wdhy-gaoji
    -
    &#xe6d8;
    -
    • - -
  • - -
    二维码
    -
    &#xe6d7;
    -
    • - -
  • - -
    wdfx-ptfx
    -
    &#xe6c6;
    -
    • - -
  • - -
    wdfx-gjfx
    -
    &#xe6d5;
    -
    • - -
  • - -
    xzdz-tianjiabiaoq
    -
    &#xe6d6;
    -
    • - -
  • - -
    xzdz-dingwei
    -
    &#xe6d2;
    -
    • - -
  • - -
    wddz-bianji
    -
    &#xe6d3;
    -
    • - -
  • - -
    bjdz-guanbi
    -
    &#xe6d4;
    -
    • - -
  • - -
    箭头-向左
    -
    &#xe6d1;
    -
    • - -
  • - -
    扫一扫
    -
    &#xe6cf;
    -
    • - -
  • - -
    wodeqianbao-eye
    -
    &#xe6d0;
    -
    • - -
  • - -
    mendian-dingwei
    -
    &#xe6cd;
    -
    • - -
  • - -
    zhifu-yixuan
    -
    &#xe6ca;
    -
    • - -
  • - -
    zhifu-weixuan
    -
    &#xe6cb;
    -
    • - -
  • - -
    箭头-向下
    -
    &#xe6cc;
    -
    • - -
  • - -
    关闭-空心
    -
    &#xe6c9;
    -
    • - -
  • - -
    kaitonghuiy-dingdan
    -
    &#xe6c8;
    -
    • - -
  • - -
    miaosha-hdgz
    -
    &#xe6c7;
    -
    • - -
  • - -
    mendian-sc
    -
    &#xe6c4;
    -
    • - -
  • - -
    mendian-kefu
    -
    &#xe6c5;
    -
    • - -
  • - -
    qiandao-tancguanbi
    -
    &#xe6c3;
    -
    • - -
  • - -
    qiandao-dqxz
    -
    &#xe6bc;
    -
    • - -
  • - -
    分享-正方形
    -
    &#xe6bd;
    -
    • - -
  • - -
    qiandao-wdqd
    -
    &#xe6be;
    -
    • - -
  • - -
    qiandao-zudui
    -
    &#xe6bf;
    -
    • - -
  • - -
    圆角箭头-向右
    -
    &#xe6c0;
    -
    • - -
  • - -
    qiandao-yixuan
    -
    &#xe6c1;
    -
    • - -
  • - -
    箭头-向右
    -
    &#xe6c2;
    -
    • - -
  • - -
    zhibo-shixiao
    -
    &#xe6bb;
    -
    • - -
  • - -
    icon-cart-dec
    -
    &#xe6ba;
    -
    • - -
  • - -
    icon-cart-inc
    -
    &#xe6b9;
    -
    • - -
  • - -
    箭头-向上
    -
    &#xe6b8;
    -
    • - -
  • - -
    icon-fenlei-more
    -
    &#xe6b7;
    -
    • - -
  • - -
    icon-zhibo-time
    -
    &#xe6b3;
    -
    • - -
  • - -
    icon-pp-all
    -
    &#xe6b4;
    -
    • - -
  • - -
    icon-zhibo-zt
    -
    &#xe6b5;
    -
    • - -
  • - -
    icon-zhibo-jies
    -
    &#xe6b6;
    -
    • - -
  • - -
    icon-md-phone
    -
    &#xe6b1;
    -
    • - -
  • - -
    icon-md-dh
    -
    &#xe6b2;
    -
    • - -
  • - -
    icon-index-zxmd-phone
    -
    &#xe6ac;
    -
    • - -
  • - -
    icon-index-zxmd-dh
    -
    &#xe6ad;
    -
    • - -
  • - -
    icon-index-zxmd-time
    -
    &#xe6ae;
    -
    • - -
  • - -
    icon-index-zxmd-dress
    -
    &#xe6af;
    -
    • - -
  • - -
    icon-index-notice
    -
    &#xe6a8;
    -
    • - -
  • - -
    icon-index-search
    -
    &#xe6a9;
    -
    • - -
  • - -
    icon-applet-me-settings-acquiesce
    -
    &#xe6a6;
    -
    • - -
  • - -
    icon-applet-me-message-acquiesce
    -
    &#xe6a7;
    -
    • - -
  • - -
    icon-applet-me-acquiesce
    -
    &#xe6a2;
    -
    • - -
  • - -
    icon-applet-sort-acquiesce
    -
    &#xe6a5;
    -
    • - -
  • - -
    icon-applet-index-acquiesce
    -
    &#xe6a4;
    -
    • - -
  • - -
    icon-applet-shop-acquiesce
    -
    &#xe6a3;
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

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

第二步：定义使用 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-gift-fine -
    -
    • - -
  • - -
    - 放大 -
    -
    .icon-enlarge -
    -
    • - -
  • - -
    - 放大-四角 -
    -
    .icon-enlarge-four -
    -
    • - -
  • - -
    - 放大-边线 -
    -
    .icon-enlarge-border -
    -
    • - -
  • - -
    - 地图导航 -
    -
    .icon-map-navigator -
    -
    • - -
  • - -
    - 选中下标 -
    -
    .icon-down-mark -
    -
    • - -
  • - -
    - 感叹号 -
    -
    .icon-sigh-o -
    -
    • - -
  • - -
    - 复制 -
    -
    .icon-copy -
    -
    • - -
  • - -
    - 转账 -
    -
    .icon-transfer-count -
    -
    • - -
  • - -
    - 收款 -
    -
    .icon-collection -
    -
    • - -
  • - -
    - 转换2 -
    -
    .icon-convert2 -
    -
    • - -
  • - -
    - 提现 -
    -
    .icon-cash -
    -
    • - -
  • - -
    - 充值 -
    -
    .icon-recharge -
    -
    • - -
  • - -
    - 转换 -
    -
    .icon-convert -
    -
    • - -
  • - -
    - 明细 -
    -
    .icon-detail -
    -
    • - -
  • - -
    - 门店 -
    -
    .icon-store -
    -
    • - -
  • - -
    - 星星 -
    -
    .icon-star -
    -
    • - -
  • - -
    - 位置定位 -
    -
    .icon-location -
    -
    • - -
  • - -
    - 消息 -
    -
    .icon-message -
    -
    • - -
  • - -
    - login-language -
    -
    .icon-login-language -
    -
    • - -
  • - -
    - login-down-arrow -
    -
    .icon-login-down-arrow -
    -
    • - -
  • - -
    - 删除 -
    -
    .icon-delete -
    -
    • - -
  • - -
    - 成功对号 -
    -
    .icon-checked -
    -
    • - -
  • - -
    - Shopping cart1107 -
    -
    .icon-a-Shoppingcart1107 -
    -
    • - -
  • - -
    - me1107 -
    -
    .icon-me1107 -
    -
    • - -
  • - -
    - classify1107 -
    -
    .icon-classify1107 -
    -
    • - -
  • - -
    - index1107 -
    -
    .icon-index1107 -
    -
    • - -
  • - -
    - 支付_支付失败 -
    -
    .icon-payment-fail -
    -
    • - -
  • - -
    - jianpan-guanbi -
    -
    .icon-keyboard-backspace -
    -
    • - -
  • - -
    - 转账/转换 -
    -
    .icon-transfer -
    -
    • - -
  • - -
    - wytw-sctp -
    -
    .icon-wytw-sctp -
    -
    • - -
  • - -
    - xzzx-shij -
    -
    .icon-xzzx-shij -
    -
    • - -
  • - -
    - xzzx-rhaz -
    -
    .icon-xzzx-rhaz -
    -
    • - -
  • - -
    - xzzx-kfwd -
    -
    .icon-xzzx-kfwd -
    -
    • - -
  • - -
    - wenda-wytw -
    -
    .icon-wenda-wytw -
    -
    • - -
  • - -
    - wenda-wdtw -
    -
    .icon-wenda-wdtw -
    -
    • - -
  • - -
    - bowenxiangqing-dianzan-xuaz -
    -
    .icon-bowenxiangqing-dianzan-xuaz -
    -
    • - -
  • - -
    - bowenxiangqing-fenxiang -
    -
    .icon-bowenxiangqing-fenxiang -
    -
    • - -
  • - -
    - bowenxiangqing-huifu -
    -
    .icon-bowenxiangqing-huifu -
    -
    • - -
  • - -
    - bowenxiangqing-dianzan -
    -
    .icon-bowenxiangqing-dianzan -
    -
    • - -
  • - -
    - wodeqianbao-eyeclo2 -
    -
    .icon-wodeqianbao-eyeclo2 -
    -
    • - -
  • - -
    - zuhedap-shoping -
    -
    .icon-zuhedap-shoping -
    -
    • - -
  • - -
    - wdhy-gaoji -
    -
    .icon-wdhy-gaoji -
    -
    • - -
  • - -
    - 二维码 -
    -
    .icon-qrcode -
    -
    • - -
  • - -
    - wdfx-ptfx -
    -
    .icon-wdfx-ptfx -
    -
    • - -
  • - -
    - wdfx-gjfx -
    -
    .icon-wdfx-gjfx -
    -
    • - -
  • - -
    - xzdz-tianjiabiaoq -
    -
    .icon-xzdz-tianjiabiaoq -
    -
    • - -
  • - -
    - xzdz-dingwei -
    -
    .icon-xzdz-dingwei -
    -
    • - -
  • - -
    - wddz-bianji -
    -
    .icon-wddz-bianji -
    -
    • - -
  • - -
    - bjdz-guanbi -
    -
    .icon-bjdz-guanbi -
    -
    • - -
  • - -
    - 箭头-向左 -
    -
    .icon-arrow-left -
    -
    • - -
  • - -
    - 扫一扫 -
    -
    .icon-scan -
    -
    • - -
  • - -
    - wodeqianbao-eye -
    -
    .icon-wodeqianbao-eye -
    -
    • - -
  • - -
    - mendian-dingwei -
    -
    .icon-mendian-dingwei -
    -
    • - -
  • - -
    - zhifu-yixuan -
    -
    .icon-zhifu-yixuan -
    -
    • - -
  • - -
    - zhifu-weixuan -
    -
    .icon-zhifu-weixuan -
    -
    • - -
  • - -
    - 箭头-向下 -
    -
    .icon-arrow-bottom -
    -
    • - -
  • - -
    - 关闭-空心 -
    -
    .icon-close-o -
    -
    • - -
  • - -
    - kaitonghuiy-dingdan -
    -
    .icon-kaitonghuiy-dingdan -
    -
    • - -
  • - -
    - miaosha-hdgz -
    -
    .icon-miaosha-hdgz -
    -
    • - -
  • - -
    - mendian-sc -
    -
    .icon-mendian-sc -
    -
    • - -
  • - -
    - mendian-kefu -
    -
    .icon-mendian-kefu -
    -
    • - -
  • - -
    - qiandao-tancguanbi -
    -
    .icon-qiandao-tancguanbi -
    -
    • - -
  • - -
    - qiandao-dqxz -
    -
    .icon-qiandao-dqxz -
    -
    • - -
  • - -
    - 分享-正方形 -
    -
    .icon-share-square -
    -
    • - -
  • - -
    - qiandao-wdqd -
    -
    .icon-qiandao-wdqd -
    -
    • - -
  • - -
    - qiandao-zudui -
    -
    .icon-qiandao-zudui -
    -
    • - -
  • - -
    - 圆角箭头-向右 -
    -
    .icon-arrow-right-round -
    -
    • - -
  • - -
    - qiandao-yixuan -
    -
    .icon-qiandao-yixuan -
    -
    • - -
  • - -
    - 箭头-向右 -
    -
    .icon-arrow-right -
    -
    • - -
  • - -
    - zhibo-shixiao -
    -
    .icon-zhibo-shixiao -
    -
    • - -
  • - -
    - icon-cart-dec -
    -
    .icon-cart-dec -
    -
    • - -
  • - -
    - icon-cart-inc -
    -
    .icon-cart-inc -
    -
    • - -
  • - -
    - 箭头-向上 -
    -
    .icon-arrow-top -
    -
    • - -
  • - -
    - icon-fenlei-more -
    -
    .icon-fenlei-more -
    -
    • - -
  • - -
    - icon-zhibo-time -
    -
    .icon-zhibo-time -
    -
    • - -
  • - -
    - icon-pp-all -
    -
    .icon-pp-all -
    -
    • - -
  • - -
    - icon-zhibo-zt -
    -
    .icon-zhibo-zt -
    -
    • - -
  • - -
    - icon-zhibo-jies -
    -
    .icon-zhibo-jies -
    -
    • - -
  • - -
    - icon-md-phone -
    -
    .icon-md-phone -
    -
    • - -
  • - -
    - icon-md-dh -
    -
    .icon-md-dh -
    -
    • - -
  • - -
    - icon-index-zxmd-phone -
    -
    .icon-index-zxmd-phone -
    -
    • - -
  • - -
    - icon-index-zxmd-dh -
    -
    .icon-index-zxmd-dh -
    -
    • - -
  • - -
    - icon-index-zxmd-time -
    -
    .icon-index-zxmd-time -
    -
    • - -
  • - -
    - icon-index-zxmd-dress -
    -
    .icon-index-zxmd-dress -
    -
    • - -
  • - -
    - icon-index-notice -
    -
    .icon-index-notice -
    -
    • - -
  • - -
    - icon-index-search -
    -
    .icon-index-search -
    -
    • - -
  • - -
    - icon-applet-me-settings-acquiesce -
    -
    .icon-applet-me-settings-acquiesce -
    -
    • - -
  • - -
    - icon-applet-me-message-acquiesce -
    -
    .icon-applet-me-message-acquiesce -
    -
    • - -
  • - -
    - icon-applet-me-acquiesce -
    -
    .icon-applet-me-acquiesce -
    -
    • - -
  • - -
    - icon-applet-sort-acquiesce -
    -
    .icon-applet-sort-acquiesce -
    -
    • - -
  • - -
    - icon-applet-index-acquiesce -
    -
    .icon-applet-index-acquiesce -
    -
    • - -
  • - -
    - icon-applet-shop-acquiesce -
    -
    .icon-applet-shop-acquiesce -
    -
    • - -
-
-

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-gift-fine
    -
    • - -
  • - -
    放大
    -
    #icon-enlarge
    -
    • - -
  • - -
    放大-四角
    -
    #icon-enlarge-four
    -
    • - -
  • - -
    放大-边线
    -
    #icon-enlarge-border
    -
    • - -
  • - -
    地图导航
    -
    #icon-map-navigator
    -
    • - -
  • - -
    选中下标
    -
    #icon-down-mark
    -
    • - -
  • - -
    感叹号
    -
    #icon-sigh-o
    -
    • - -
  • - -
    复制
    -
    #icon-copy
    -
    • - -
  • - -
    转账
    -
    #icon-transfer-count
    -
    • - -
  • - -
    收款
    -
    #icon-collection
    -
    • - -
  • - -
    转换2
    -
    #icon-convert2
    -
    • - -
  • - -
    提现
    -
    #icon-cash
    -
    • - -
  • - -
    充值
    -
    #icon-recharge
    -
    • - -
  • - -
    转换
    -
    #icon-convert
    -
    • - -
  • - -
    明细
    -
    #icon-detail
    -
    • - -
  • - -
    门店
    -
    #icon-store
    -
    • - -
  • - -
    星星
    -
    #icon-star
    -
    • - -
  • - -
    位置定位
    -
    #icon-location
    -
    • - -
  • - -
    消息
    -
    #icon-message
    -
    • - -
  • - -
    login-language
    -
    #icon-login-language
    -
    • - -
  • - -
    login-down-arrow
    -
    #icon-login-down-arrow
    -
    • - -
  • - -
    删除
    -
    #icon-delete
    -
    • - -
  • - -
    成功对号
    -
    #icon-checked
    -
    • - -
  • - -
    Shopping cart1107
    -
    #icon-a-Shoppingcart1107
    -
    • - -
  • - -
    me1107
    -
    #icon-me1107
    -
    • - -
  • - -
    classify1107
    -
    #icon-classify1107
    -
    • - -
  • - -
    index1107
    -
    #icon-index1107
    -
    • - -
  • - -
    支付_支付失败
    -
    #icon-payment-fail
    -
    • - -
  • - -
    jianpan-guanbi
    -
    #icon-keyboard-backspace
    -
    • - -
  • - -
    转账/转换
    -
    #icon-transfer
    -
    • - -
  • - -
    wytw-sctp
    -
    #icon-wytw-sctp
    -
    • - -
  • - -
    xzzx-shij
    -
    #icon-xzzx-shij
    -
    • - -
  • - -
    xzzx-rhaz
    -
    #icon-xzzx-rhaz
    -
    • - -
  • - -
    xzzx-kfwd
    -
    #icon-xzzx-kfwd
    -
    • - -
  • - -
    wenda-wytw
    -
    #icon-wenda-wytw
    -
    • - -
  • - -
    wenda-wdtw
    -
    #icon-wenda-wdtw
    -
    • - -
  • - -
    bowenxiangqing-dianzan-xuaz
    -
    #icon-bowenxiangqing-dianzan-xuaz
    -
    • - -
  • - -
    bowenxiangqing-fenxiang
    -
    #icon-bowenxiangqing-fenxiang
    -
    • - -
  • - -
    bowenxiangqing-huifu
    -
    #icon-bowenxiangqing-huifu
    -
    • - -
  • - -
    bowenxiangqing-dianzan
    -
    #icon-bowenxiangqing-dianzan
    -
    • - -
  • - -
    wodeqianbao-eyeclo2
    -
    #icon-wodeqianbao-eyeclo2
    -
    • - -
  • - -
    zuhedap-shoping
    -
    #icon-zuhedap-shoping
    -
    • - -
  • - -
    wdhy-gaoji
    -
    #icon-wdhy-gaoji
    -
    • - -
  • - -
    二维码
    -
    #icon-qrcode
    -
    • - -
  • - -
    wdfx-ptfx
    -
    #icon-wdfx-ptfx
    -
    • - -
  • - -
    wdfx-gjfx
    -
    #icon-wdfx-gjfx
    -
    • - -
  • - -
    xzdz-tianjiabiaoq
    -
    #icon-xzdz-tianjiabiaoq
    -
    • - -
  • - -
    xzdz-dingwei
    -
    #icon-xzdz-dingwei
    -
    • - -
  • - -
    wddz-bianji
    -
    #icon-wddz-bianji
    -
    • - -
  • - -
    bjdz-guanbi
    -
    #icon-bjdz-guanbi
    -
    • - -
  • - -
    箭头-向左
    -
    #icon-arrow-left
    -
    • - -
  • - -
    扫一扫
    -
    #icon-scan
    -
    • - -
  • - -
    wodeqianbao-eye
    -
    #icon-wodeqianbao-eye
    -
    • - -
  • - -
    mendian-dingwei
    -
    #icon-mendian-dingwei
    -
    • - -
  • - -
    zhifu-yixuan
    -
    #icon-zhifu-yixuan
    -
    • - -
  • - -
    zhifu-weixuan
    -
    #icon-zhifu-weixuan
    -
    • - -
  • - -
    箭头-向下
    -
    #icon-arrow-bottom
    -
    • - -
  • - -
    关闭-空心
    -
    #icon-close-o
    -
    • - -
  • - -
    kaitonghuiy-dingdan
    -
    #icon-kaitonghuiy-dingdan
    -
    • - -
  • - -
    miaosha-hdgz
    -
    #icon-miaosha-hdgz
    -
    • - -
  • - -
    mendian-sc
    -
    #icon-mendian-sc
    -
    • - -
  • - -
    mendian-kefu
    -
    #icon-mendian-kefu
    -
    • - -
  • - -
    qiandao-tancguanbi
    -
    #icon-qiandao-tancguanbi
    -
    • - -
  • - -
    qiandao-dqxz
    -
    #icon-qiandao-dqxz
    -
    • - -
  • - -
    分享-正方形
    -
    #icon-share-square
    -
    • - -
  • - -
    qiandao-wdqd
    -
    #icon-qiandao-wdqd
    -
    • - -
  • - -
    qiandao-zudui
    -
    #icon-qiandao-zudui
    -
    • - -
  • - -
    圆角箭头-向右
    -
    #icon-arrow-right-round
    -
    • - -
  • - -
    qiandao-yixuan
    -
    #icon-qiandao-yixuan
    -
    • - -
  • - -
    箭头-向右
    -
    #icon-arrow-right
    -
    • - -
  • - -
    zhibo-shixiao
    -
    #icon-zhibo-shixiao
    -
    • - -
  • - -
    icon-cart-dec
    -
    #icon-cart-dec
    -
    • - -
  • - -
    icon-cart-inc
    -
    #icon-cart-inc
    -
    • - -
  • - -
    箭头-向上
    -
    #icon-arrow-top
    -
    • - -
  • - -
    icon-fenlei-more
    -
    #icon-fenlei-more
    -
    • - -
  • - -
    icon-zhibo-time
    -
    #icon-zhibo-time
    -
    • - -
  • - -
    icon-pp-all
    -
    #icon-pp-all
    -
    • - -
  • - -
    icon-zhibo-zt
    -
    #icon-zhibo-zt
    -
    • - -
  • - -
    icon-zhibo-jies
    -
    #icon-zhibo-jies
    -
    • - -
  • - -
    icon-md-phone
    -
    #icon-md-phone
    -
    • - -
  • - -
    icon-md-dh
    -
    #icon-md-dh
    -
    • - -
  • - -
    icon-index-zxmd-phone
    -
    #icon-index-zxmd-phone
    -
    • - -
  • - -
    icon-index-zxmd-dh
    -
    #icon-index-zxmd-dh
    -
    • - -
  • - -
    icon-index-zxmd-time
    -
    #icon-index-zxmd-time
    -
    • - -
  • - -
    icon-index-zxmd-dress
    -
    #icon-index-zxmd-dress
    -
    • - -
  • - -
    icon-index-notice
    -
    #icon-index-notice
    -
    • - -
  • - -
    icon-index-search
    -
    #icon-index-search
    -
    • - -
  • - -
    icon-applet-me-settings-acquiesce
    -
    #icon-applet-me-settings-acquiesce
    -
    • - -
  • - -
    icon-applet-me-message-acquiesce
    -
    #icon-applet-me-message-acquiesce
    -
    • - -
  • - -
    icon-applet-me-acquiesce
    -
    #icon-applet-me-acquiesce
    -
    • - -
  • - -
    icon-applet-sort-acquiesce
    -
    #icon-applet-sort-acquiesce
    -
    • - -
  • - -
    icon-applet-index-acquiesce
    -
    #icon-applet-index-acquiesce
    -
    • - -
  • - -
    icon-applet-shop-acquiesce
    -
    #icon-applet-shop-acquiesce
    -
    • - -
-
-

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/components/model-shop-list/index.vue b/src/components/model-shop-list/index.vue index 19242681..1de9f125 100644 --- a/src/components/model-shop-list/index.vue +++ b/src/components/model-shop-list/index.vue @@ -434,13 +434,15 @@ const carouselKey = ref('0'); // 内容参数的集合 watchEffect(() => { const time = (new_style.value.interval_time || 2) * 1000; - const display_is_roll = new_style.value.is_roll; + const display_is_roll = new_style.value.is_roll; // 判断长度是否相等 const notice_length = shop_content_list.value.length; // 判断跟历史的是否相等，不相等更新组件时间 if (interval_list.value.time != time || interval_list.value.is_roll != display_is_roll || notice_length != interval_list.value.notice_length) { // 滚动时间 interval_time.value = time; + // 是否滚动修改 + is_roll.value = display_is_roll; // 记录历史保存的时间 interval_list.value = { time: time, diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue index 356ee4d8..ca688fe8 100644 --- a/src/components/page-settings/index.vue +++ b/src/components/page-settings/index.vue @@ -1,7 +1,7 @@