diff --git a/.env.development b/.env.development index 6046e48..99f80fd 100644 --- a/.env.development +++ b/.env.development @@ -2,10 +2,12 @@ ENV = 'development' # 接口地址 # VUE_APP_BASE_API = 'http://8.129.208.109:8001' -VUE_APP_BASE_API = 'http://itxzz.51vip.biz/' +# VUE_APP_BASE_API = 'http://itxzz.51vip.biz/' # VUE_APP_BASE_API = http://shop.itxzz.top:35708/ +VUE_APP_BASE_API = http://localhost:8001/ + # VUE_APP_BASE_API = 'https://app2.yixiang.co' -VUE_APP_WS_API = 'ws://8.129.208.109:8001' +VUE_APP_WS_API = 'ws://8.129.208.109:8001/' # 是否启用 babel-plugin-dynamic-import-node插件 diff --git a/src/assets/font_icon/demo.css b/src/assets/font_icon/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/font_icon/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/assets/font_icon/demo_index.html b/src/assets/font_icon/demo_index.html new file mode 100644 index 0000000..cd03327 --- /dev/null +++ b/src/assets/font_icon/demo_index.html @@ -0,0 +1,1205 @@ + + + + + IconFont Demo + + + + + + + + + + + +
+

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    close
    +
    
    +
    • + +
  • + +
    替换图片
    +
    
    +
    • + +
  • + +
    选择
    +
    
    +
    • + +
  • + +
    选择
    +
    
    +
    • + +
  • + +
    选择
    +
    
    +
    • + +
  • + +
    警告
    +
    
    +
    • + +
  • + +
    删 除
    +
    
    +
    • + +
  • + +
    查看
    +
    
    +
    • + +
  • + +
    问号
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    优惠券
    +
    
    +
    • + +
  • + +
    方块
    +
    
    +
    • + +
  • + +
    手机
    +
    
    +
    • + +
  • + +
    电脑 (1)备份
    +
    
    +
    • + +
  • + +
    h5
    +
    
    +
    • + +
  • + +
    小程序
    +
    
    +
    • + +
  • + +
    删除
    +
    
    +
    • + +
  • + +
    图片
    +
    
    +
    • + +
  • + +
    图片
    +
    
    +
    • + +
  • + +
    拖动位置
    +
    
    +
    • + +
  • + +
    add
    +
    
    +
    • + +
  • + +
    文本
    +
    
    +
    • + +
  • + +
    A
    +
    
    +
    • + +
  • + +
    文本
    +
    
    +
    • + +
  • + +
    右对齐
    +
    
    +
    • + +
  • + +
    左对齐
    +
    
    +
    • + +
  • + +
    居中
    +
    
    +
    • + +
  • + +
    add
    +
    
    +
    • + +
  • + +
    搜索
    +
    
    +
    • + +
  • + +
    导航
    +
    
    +
    • + +
  • + +
    加上
    +
    
    +
    • + +
  • + +
    检查
    +
    
    +
    • + +
  • + +
    减去
    +
    
    +
    • + +
  • + +
    箭头
    +
    
    +
    • + +
  • + +
    箭头
    +
    
    +
    • + +
  • + +
    箭头
    +
    
    +
    • + +
  • + +
    列表
    +
    
    +
    • + +
  • + +
    user
    +
    
    +
    • + +
  • + +
    Shopping cart, finance, business
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

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

+
    +
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • +
+
+

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

+
+

Unicode 使用步骤如下：

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.eot');
+  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
+      url('iconfont.woff2') format('woff2'),
+      url('iconfont.woff') format('woff'),
+      url('iconfont.ttf') format('truetype'),
+      url('iconfont.svg#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"。

+
+
+
+
+
    + +
  • + +
    + close +
    +
    .icon-close +
    +
    • + +
  • + +
    + 替换图片 +
    +
    .icon-tihuantupian +
    +
    • + +
  • + +
    + 选择 +
    +
    .icon-xuanze +
    +
    • + +
  • + +
    + 选择 +
    +
    .icon-xuanze-danxuan +
    +
    • + +
  • + +
    + 选择 +
    +
    .icon-xuanze1 +
    +
    • + +
  • + +
    + 警告 +
    +
    .icon-jinggao +
    +
    • + +
  • + +
    + 删 除 +
    +
    .icon-shanchu1 +
    +
    • + +
  • + +
    + 查看 +
    +
    .icon-chakan +
    +
    • + +
  • + +
    + 问号 +
    +
    .icon-iconfontquestion +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-weibiaoti2fuzhi02 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan1 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan2 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan3 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-9 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan4 +
    +
    • + +
  • + +
    + 优惠券 +
    +
    .icon-youhuiquan5 +
    +
    • + +
  • + +
    + 方块 +
    +
    .icon-fangkuai +
    +
    • + +
  • + +
    + 手机 +
    +
    .icon-phone +
    +
    • + +
  • + +
    + 电脑 (1)备份 +
    +
    .icon-pc +
    +
    • + +
  • + +
    + h5 +
    +
    .icon-h5 +
    +
    • + +
  • + +
    + 小程序 +
    +
    .icon-xiaochengxu +
    +
    • + +
  • + +
    + 删除 +
    +
    .icon-shanchu +
    +
    • + +
  • + +
    + 图片 +
    +
    .icon-tupian +
    +
    • + +
  • + +
    + 图片 +
    +
    .icon-tupian1 +
    +
    • + +
  • + +
    + 拖动位置 +
    +
    .icon-tuodongweizhi +
    +
    • + +
  • + +
    + add +
    +
    .icon-add2 +
    +
    • + +
  • + +
    + 文本 +
    +
    .icon-wenben +
    +
    • + +
  • + +
    + A +
    +
    .icon-A +
    +
    • + +
  • + +
    + 文本 +
    +
    .icon-wenben1 +
    +
    • + +
  • + +
    + 右对齐 +
    +
    .icon-youduiqi +
    +
    • + +
  • + +
    + 左对齐 +
    +
    .icon-zuoduiqi +
    +
    • + +
  • + +
    + 居中 +
    +
    .icon-juzhong +
    +
    • + +
  • + +
    + add +
    +
    .icon-add1 +
    +
    • + +
  • + +
    + 搜索 +
    +
    .icon-sousuo +
    +
    • + +
  • + +
    + 导航 +
    +
    .icon-arrow-up +
    +
    • + +
  • + +
    + 加上 +
    +
    .icon-add +
    +
    • + +
  • + +
    + 检查 +
    +
    .icon-success +
    +
    • + +
  • + +
    + 减去 +
    +
    .icon-subtract +
    +
    • + +
  • + +
    + 箭头 +
    +
    .icon-arrow-down +
    +
    • + +
  • + +
    + 箭头 +
    +
    .icon-arrow-right +
    +
    • + +
  • + +
    + 箭头 +
    +
    .icon-arrow-left +
    +
    • + +
  • + +
    + 列表 +
    +
    .icon-phone-menu +
    +
    • + +
  • + +
    + user +
    +
    .icon-user +
    +
    • + +
  • + +
    + Shopping cart, finance, business +
    +
    .icon-shoppingCart +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

+
    +
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • +
+

使用步骤如下：

+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    close
    +
    #icon-close
    +
    • + +
  • + +
    替换图片
    +
    #icon-tihuantupian
    +
    • + +
  • + +
    选择
    +
    #icon-xuanze
    +
    • + +
  • + +
    选择
    +
    #icon-xuanze-danxuan
    +
    • + +
  • + +
    选择
    +
    #icon-xuanze1
    +
    • + +
  • + +
    警告
    +
    #icon-jinggao
    +
    • + +
  • + +
    删 除
    +
    #icon-shanchu1
    +
    • + +
  • + +
    查看
    +
    #icon-chakan
    +
    • + +
  • + +
    问号
    +
    #icon-iconfontquestion
    +
    • + +
  • + +
    优惠券
    +
    #icon-weibiaoti2fuzhi02
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan1
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan2
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan3
    +
    • + +
  • + +
    优惠券
    +
    #icon-9
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan4
    +
    • + +
  • + +
    优惠券
    +
    #icon-youhuiquan5
    +
    • + +
  • + +
    方块
    +
    #icon-fangkuai
    +
    • + +
  • + +
    手机
    +
    #icon-phone
    +
    • + +
  • + +
    电脑 (1)备份
    +
    #icon-pc
    +
    • + +
  • + +
    h5
    +
    #icon-h5
    +
    • + +
  • + +
    小程序
    +
    #icon-xiaochengxu
    +
    • + +
  • + +
    删除
    +
    #icon-shanchu
    +
    • + +
  • + +
    图片
    +
    #icon-tupian
    +
    • + +
  • + +
    图片
    +
    #icon-tupian1
    +
    • + +
  • + +
    拖动位置
    +
    #icon-tuodongweizhi
    +
    • + +
  • + +
    add
    +
    #icon-add2
    +
    • + +
  • + +
    文本
    +
    #icon-wenben
    +
    • + +
  • + +
    A
    +
    #icon-A
    +
    • + +
  • + +
    文本
    +
    #icon-wenben1
    +
    • + +
  • + +
    右对齐
    +
    #icon-youduiqi
    +
    • + +
  • + +
    左对齐
    +
    #icon-zuoduiqi
    +
    • + +
  • + +
    居中
    +
    #icon-juzhong
    +
    • + +
  • + +
    add
    +
    #icon-add1
    +
    • + +
  • + +
    搜索
    +
    #icon-sousuo
    +
    • + +
  • + +
    导航
    +
    #icon-arrow-up
    +
    • + +
  • + +
    加上
    +
    #icon-add
    +
    • + +
  • + +
    检查
    +
    #icon-success
    +
    • + +
  • + +
    减去
    +
    #icon-subtract
    +
    • + +
  • + +
    箭头
    +
    #icon-arrow-down
    +
    • + +
  • + +
    箭头
    +
    #icon-arrow-right
    +
    • + +
  • + +
    箭头
    +
    #icon-arrow-left
    +
    • + +
  • + +
    列表
    +
    #icon-phone-menu
    +
    • + +
  • + +
    user
    +
    #icon-user
    +
    • + +
  • + +
    Shopping cart, finance, business
    +
    #icon-shoppingCart
    +
    • + +
+
+

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/font_icon/iconfont.css b/src/assets/font_icon/iconfont.css new file mode 100644 index 0000000..4683485 --- /dev/null +++ b/src/assets/font_icon/iconfont.css @@ -0,0 +1,197 @@ +@font-face {font-family: "iconfont"; + src: url('iconfont.eot?t=1606977506452'); /* IE9 */ + src: url('iconfont.eot?t=1606977506452#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), + url('iconfont.woff?t=1606977506452') format('woff'), + url('iconfont.ttf?t=1606977506452') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ + url('iconfont.svg?t=1606977506452#iconfont') format('svg'); /* iOS 4.1- */ +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-close:before { + content: "\e602"; +} + +.icon-tihuantupian:before { + content: "\e66c"; +} + +.icon-xuanze:before { + content: "\e62d"; +} + +.icon-xuanze-danxuan:before { + content: "\e661"; +} + +.icon-xuanze1:before { + content: "\e618"; +} + +.icon-jinggao:before { + content: "\e608"; +} + +.icon-shanchu1:before { + content: "\e651"; +} + +.icon-chakan:before { + content: "\e622"; +} + +.icon-iconfontquestion:before { + content: "\e60a"; +} + +.icon-weibiaoti2fuzhi02:before { + content: "\e61f"; +} + +.icon-youhuiquan:before { + content: "\e645"; +} + +.icon-youhuiquan1:before { + content: "\e66d"; +} + +.icon-youhuiquan2:before { + content: "\e692"; +} + +.icon-youhuiquan3:before { + content: "\e6cf"; +} + +.icon-9:before { + content: "\e624"; +} + +.icon-youhuiquan4:before { + content: "\e60b"; +} + +.icon-youhuiquan5:before { + content: "\e625"; +} + +.icon-fangkuai:before { + content: "\e73f"; +} + +.icon-phone:before { + content: "\e604"; +} + +.icon-pc:before { + content: "\e601"; +} + +.icon-h5:before { + content: "\e713"; +} + +.icon-xiaochengxu:before { + content: "\e81e"; +} + +.icon-shanchu:before { + content: "\e633"; +} + +.icon-tupian:before { + content: "\e64a"; +} + +.icon-tupian1:before { + content: "\e61e"; +} + +.icon-tuodongweizhi:before { + content: "\e703"; +} + +.icon-add2:before { + content: "\e603"; +} + +.icon-wenben:before { + content: "\e649"; +} + +.icon-A:before { + content: "\e600"; +} + +.icon-wenben1:before { + content: "\e8c2"; +} + +.icon-youduiqi:before { + content: "\ec82"; +} + +.icon-zuoduiqi:before { + content: "\ec86"; +} + +.icon-juzhong:before { + content: "\e619"; +} + +.icon-add1:before { + content: "\e664"; +} + +.icon-sousuo:before { + content: "\e63f"; +} + +.icon-arrow-up:before { + content: "\e660"; +} + +.icon-add:before { + content: "\e685"; +} + +.icon-success:before { + content: "\e687"; +} + +.icon-subtract:before { + content: "\e68a"; +} + +.icon-arrow-down:before { + content: "\e695"; +} + +.icon-arrow-right:before { + content: "\e6ab"; +} + +.icon-arrow-left:before { + content: "\e6bc"; +} + +.icon-phone-menu:before { + content: "\e771"; +} + +.icon-user:before { + content: "\e67d"; +} + +.icon-shoppingCart:before { + content: "\e623"; +} + diff --git a/src/assets/font_icon/iconfont.eot b/src/assets/font_icon/iconfont.eot new file mode 100644 index 0000000..336b9ab Binary files /dev/null and b/src/assets/font_icon/iconfont.eot differ diff --git a/src/assets/font_icon/iconfont.js b/src/assets/font_icon/iconfont.js new file mode 100644 index 0000000..25cf1ed --- /dev/null +++ b/src/assets/font_icon/iconfont.js @@ -0,0 +1 @@ +!function(c){var l,h,a,o,t,i,s='',e=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(e&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function d(){t||(t=!0,a())}l=function(){var c,l,h,a;(a=document.createElement("div")).innerHTML=s,s=null,(h=a.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",c=h,(l=document.body).firstChild?(a=c,(h=l.firstChild).parentNode.insertBefore(a,h)):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),l()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(a=l,o=c.document,t=!1,(i=function(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(i,50)}d()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}(window); \ No newline at end of file diff --git a/src/assets/font_icon/iconfont.json b/src/assets/font_icon/iconfont.json new file mode 100644 index 0000000..9126b2e --- /dev/null +++ b/src/assets/font_icon/iconfont.json @@ -0,0 +1,324 @@ +{ + "id": "2224733", + "name": "cereshop", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "16963297", + "name": "close", + "font_class": "close", + "unicode": "e602", + "unicode_decimal": 58882 + }, + { + "icon_id": "1630982", + "name": "替换图片", + "font_class": "tihuantupian", + "unicode": "e66c", + "unicode_decimal": 58988 + }, + { + "icon_id": "1472518", + "name": "选择", + "font_class": "xuanze", + "unicode": "e62d", + "unicode_decimal": 58925 + }, + { + "icon_id": "2570139", + "name": "选择", + "font_class": "xuanze-danxuan", + "unicode": "e661", + "unicode_decimal": 58977 + }, + { + "icon_id": "16391281", + "name": "选择", + "font_class": "xuanze1", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "15076931", + "name": "警告", + "font_class": "jinggao", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "14404139", + "name": "删 除", + "font_class": "shanchu1", + "unicode": "e651", + "unicode_decimal": 58961 + }, + { + "icon_id": "8649511", + "name": "查看", + "font_class": "chakan", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "584016", + "name": "问号", + "font_class": "iconfontquestion", + "unicode": "e60a", + "unicode_decimal": 58890 + }, + { + "icon_id": "1068808", + "name": "优惠券", + "font_class": "weibiaoti2fuzhi02", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "1069397", + "name": "优惠券", + "font_class": "youhuiquan", + "unicode": "e645", + "unicode_decimal": 58949 + }, + { + "icon_id": "5727587", + "name": "优惠券", + "font_class": "youhuiquan1", + "unicode": "e66d", + "unicode_decimal": 58989 + }, + { + "icon_id": "7550240", + "name": "优惠券", + "font_class": "youhuiquan2", + "unicode": "e692", + "unicode_decimal": 59026 + }, + { + "icon_id": "8361845", + "name": "优惠券", + "font_class": "youhuiquan3", + "unicode": "e6cf", + "unicode_decimal": 59087 + }, + { + "icon_id": "11125631", + "name": "优惠券", + "font_class": "9", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "12476913", + "name": "优惠券", + "font_class": "youhuiquan4", + "unicode": "e60b", + "unicode_decimal": 58891 + }, + { + "icon_id": "12504404", + "name": "优惠券", + "font_class": "youhuiquan5", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "14384498", + "name": "方块", + "font_class": "fangkuai", + "unicode": "e73f", + "unicode_decimal": 59199 + }, + { + "icon_id": "5045075", + "name": "手机", + "font_class": "phone", + "unicode": "e604", + "unicode_decimal": 58884 + }, + { + "icon_id": "12353088", + "name": "电脑 (1)备份", + "font_class": "pc", + "unicode": "e601", + "unicode_decimal": 58881 + }, + { + "icon_id": "12534140", + "name": "h5", + "font_class": "h5", + "unicode": "e713", + "unicode_decimal": 59155 + }, + { + "icon_id": "17711613", + "name": "小程序", + "font_class": "xiaochengxu", + "unicode": "e81e", + "unicode_decimal": 59422 + }, + { + "icon_id": "690725", + "name": "删除", + "font_class": "shanchu", + "unicode": "e633", + "unicode_decimal": 58931 + }, + { + "icon_id": "1172721", + "name": "图片", + "font_class": "tupian", + "unicode": "e64a", + "unicode_decimal": 58954 + }, + { + "icon_id": "6049692", + "name": "图片", + "font_class": "tupian1", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "15994506", + "name": "拖动位置", + "font_class": "tuodongweizhi", + "unicode": "e703", + "unicode_decimal": 59139 + }, + { + "icon_id": "12609224", + "name": "add", + "font_class": "add2", + "unicode": "e603", + "unicode_decimal": 58883 + }, + { + "icon_id": "2404491", + "name": "文本", + "font_class": "wenben", + "unicode": "e649", + "unicode_decimal": 58953 + }, + { + "icon_id": "9567573", + "name": "A", + "font_class": "A", + "unicode": "e600", + "unicode_decimal": 58880 + }, + { + "icon_id": "10885439", + "name": "文本", + "font_class": "wenben1", + "unicode": "e8c2", + "unicode_decimal": 59586 + }, + { + "icon_id": "6337463", + "name": "右对齐", + "font_class": "youduiqi", + "unicode": "ec82", + "unicode_decimal": 60546 + }, + { + "icon_id": "6337473", + "name": "左对齐", + "font_class": "zuoduiqi", + "unicode": "ec86", + "unicode_decimal": 60550 + }, + { + "icon_id": "11976280", + "name": "居中", + "font_class": "juzhong", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "15838424", + "name": "add", + "font_class": "add1", + "unicode": "e664", + "unicode_decimal": 58980 + }, + { + "icon_id": "695192", + "name": "搜索", + "font_class": "sousuo", + "unicode": "e63f", + "unicode_decimal": 58943 + }, + { + "icon_id": "608218", + "name": "导航", + "font_class": "arrow-up", + "unicode": "e660", + "unicode_decimal": 58976 + }, + { + "icon_id": "608288", + "name": "加上", + "font_class": "add", + "unicode": "e685", + "unicode_decimal": 59013 + }, + { + "icon_id": "608290", + "name": "检查", + "font_class": "success", + "unicode": "e687", + "unicode_decimal": 59015 + }, + { + "icon_id": "608293", + "name": "减去", + "font_class": "subtract", + "unicode": "e68a", + "unicode_decimal": 59018 + }, + { + "icon_id": "608317", + "name": "箭头", + "font_class": "arrow-down", + "unicode": "e695", + "unicode_decimal": 59029 + }, + { + "icon_id": "608352", + "name": "箭头", + "font_class": "arrow-right", + "unicode": "e6ab", + "unicode_decimal": 59051 + }, + { + "icon_id": "609192", + "name": "箭头", + "font_class": "arrow-left", + "unicode": "e6bc", + "unicode_decimal": 59068 + }, + { + "icon_id": "609891", + "name": "列表", + "font_class": "phone-menu", + "unicode": "e771", + "unicode_decimal": 59249 + }, + { + "icon_id": "380396", + "name": "user", + "font_class": "user", + "unicode": "e67d", + "unicode_decimal": 59005 + }, + { + "icon_id": "10554762", + "name": "Shopping cart, finance, business", + "font_class": "shoppingCart", + "unicode": "e623", + "unicode_decimal": 58915 + } + ] +} diff --git a/src/assets/font_icon/iconfont.svg b/src/assets/font_icon/iconfont.svg new file mode 100644 index 0000000..6f71d85 --- /dev/null +++ b/src/assets/font_icon/iconfont.svg @@ -0,0 +1,161 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/font_icon/iconfont.ttf b/src/assets/font_icon/iconfont.ttf new file mode 100644 index 0000000..8ff05cc Binary files /dev/null and b/src/assets/font_icon/iconfont.ttf differ diff --git a/src/assets/font_icon/iconfont.woff b/src/assets/font_icon/iconfont.woff new file mode 100644 index 0000000..65d459e Binary files /dev/null and b/src/assets/font_icon/iconfont.woff differ diff --git a/src/assets/font_icon/iconfont.woff2 b/src/assets/font_icon/iconfont.woff2 new file mode 100644 index 0000000..5078cad Binary files /dev/null and b/src/assets/font_icon/iconfont.woff2 differ diff --git a/src/main.js b/src/main.js index dbf83e9..21bc0fe 100644 --- a/src/main.js +++ b/src/main.js @@ -28,6 +28,8 @@ import 'quill/dist/quill.bubble.css' import VueHighlightJS from 'vue-highlightjs' import 'highlight.js/styles/atom-one-dark.css' +import '@/assets/font_icon/iconfont.css' + import App from './App' import store from './store' import router from './router/routers' diff --git a/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue b/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue index 1d0f25c..09282a3 100644 --- a/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue +++ b/src/views/theme/components/rootcompToolbar/toolModule/tool-single-img.vue @@ -15,8 +15,8 @@
- - +
@@ -26,51 +26,48 @@