diff --git a/package.json b/package.json index 7743c53..5f9bf61 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "jsonlint": "1.6.3", "jszip": "3.1.5", "mockjs": "1.0.1-beta3", - "moment": "^2.22.2", + "moment": "^2.27.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", "screenfull": "3.3.2", @@ -63,7 +63,7 @@ "vue-multiselect": "2.0.8", "vue-router": "3.0.1", "vue-splitpane": "1.0.2", - "vuedraggable": "^2.16.0", + "vuedraggable": "^2.24.1", "vuex": "3.0.1", "xlsx": "^0.11.16" }, diff --git a/src/assets/icon/demo.css b/src/assets/icon/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/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/icon/demo_index.html b/src/assets/icon/demo_index.html new file mode 100644 index 0000000..d0ef43f --- /dev/null +++ b/src/assets/icon/demo_index.html @@ -0,0 +1,538 @@ + + + + + IconFont Demo + + + + + + + + + + + +
+

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    signal-2
    +
    
    +
    • + +
  • + +
    signal-1
    +
    
    +
    • + +
  • + +
    signal-3
    +
    
    +
    • + +
  • + +
    signal-4
    +
    
    +
    • + +
  • + +
    mosquito.1
    +
    
    +
    • + +
  • + +
    mosquito
    +
    
    +
    • + +
  • + +
    power_0
    +
    
    +
    • + +
  • + +
    power_1
    +
    
    +
    • + +
  • + +
    power_2
    +
    
    +
    • + +
  • + +
    power_3
    +
    
    +
    • + +
  • + +
    power_4
    +
    
    +
    • + +
  • + +
    power_5
    +
    
    +
    • + +
  • + +
    power_6
    +
    
    +
    • + +
  • + +
    power_8
    +
    
    +
    • + +
  • + +
    power_7
    +
    
    +
    • + +
  • + +
    power_9
    +
    
    +
    • + +
+
+

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

+
+
+
+
+
    + +
  • + +
    + signal-2 +
    +
    .el-icon-alisignal-2 +
    +
    • + +
  • + +
    + signal-1 +
    +
    .el-icon-alisignal-1 +
    +
    • + +
  • + +
    + signal-3 +
    +
    .el-icon-alisignal-3 +
    +
    • + +
  • + +
    + signal-4 +
    +
    .el-icon-alisignal-4 +
    +
    • + +
  • + +
    + mosquito.1 +
    +
    .el-icon-alimosquito1 +
    +
    • + +
  • + +
    + mosquito +
    +
    .el-icon-alimosquito +
    +
    • + +
  • + +
    + power_0 +
    +
    .el-icon-alipower_ +
    +
    • + +
  • + +
    + power_1 +
    +
    .el-icon-alipower_1 +
    +
    • + +
  • + +
    + power_2 +
    +
    .el-icon-alipower_2 +
    +
    • + +
  • + +
    + power_3 +
    +
    .el-icon-alipower_3 +
    +
    • + +
  • + +
    + power_4 +
    +
    .el-icon-alipower_4 +
    +
    • + +
  • + +
    + power_5 +
    +
    .el-icon-alipower_5 +
    +
    • + +
  • + +
    + power_6 +
    +
    .el-icon-alipower_6 +
    +
    • + +
  • + +
    + power_8 +
    +
    .el-icon-alipower_8 +
    +
    • + +
  • + +
    + power_7 +
    +
    .el-icon-alipower_7 +
    +
    • + +
  • + +
    + power_9 +
    +
    .el-icon-alipower_9 +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

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

使用步骤如下：

+

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

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

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

+
<span class="iconfont el-icon-alixxx"></span>
+
+
+

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

+
+
+
+
+
    + +
  • + +
    signal-2
    +
    #el-icon-alisignal-2
    +
    • + +
  • + +
    signal-1
    +
    #el-icon-alisignal-1
    +
    • + +
  • + +
    signal-3
    +
    #el-icon-alisignal-3
    +
    • + +
  • + +
    signal-4
    +
    #el-icon-alisignal-4
    +
    • + +
  • + +
    mosquito.1
    +
    #el-icon-alimosquito1
    +
    • + +
  • + +
    mosquito
    +
    #el-icon-alimosquito
    +
    • + +
  • + +
    power_0
    +
    #el-icon-alipower_
    +
    • + +
  • + +
    power_1
    +
    #el-icon-alipower_1
    +
    • + +
  • + +
    power_2
    +
    #el-icon-alipower_2
    +
    • + +
  • + +
    power_3
    +
    #el-icon-alipower_3
    +
    • + +
  • + +
    power_4
    +
    #el-icon-alipower_4
    +
    • + +
  • + +
    power_5
    +
    #el-icon-alipower_5
    +
    • + +
  • + +
    power_6
    +
    #el-icon-alipower_6
    +
    • + +
  • + +
    power_8
    +
    #el-icon-alipower_8
    +
    • + +
  • + +
    power_7
    +
    #el-icon-alipower_7
    +
    • + +
  • + +
    power_9
    +
    #el-icon-alipower_9
    +
    • + +
+
+

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/icon/iconfont.css b/src/assets/icon/iconfont.css new file mode 100644 index 0000000..fcbf048 --- /dev/null +++ b/src/assets/icon/iconfont.css @@ -0,0 +1,91 @@ +@font-face {font-family: "iconfont"; + src: url('iconfont.eot?t=1599730308106'); /* IE9 */ + src: url('iconfont.eot?t=1599730308106#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=1599730308106') format('woff'), + url('iconfont.ttf?t=1599730308106') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ + url('iconfont.svg?t=1599730308106#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; +} + +[class^="el-icon-ali"], +[class*=" el-icon-ali"]/*这里有空格*/ +{ + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.el-icon-alisignal-2:before { + content: "\e857"; +} + +.el-icon-alisignal-1:before { + content: "\e818"; +} + +.el-icon-alisignal-3:before { + content: "\e81a"; +} + +.el-icon-alisignal-4:before { + content: "\f60e"; +} + +.el-icon-alimosquito1:before { + content: "\ebf6"; +} + +.el-icon-alimosquito:before { + content: "\ebf5"; +} + +.el-icon-alipower_:before { + content: "\e617"; +} + +.el-icon-alipower_1:before { + content: "\e618"; +} + +.el-icon-alipower_2:before { + content: "\e619"; +} + +.el-icon-alipower_3:before { + content: "\e61a"; +} + +.el-icon-alipower_4:before { + content: "\e61b"; +} + +.el-icon-alipower_5:before { + content: "\e61c"; +} + +.el-icon-alipower_6:before { + content: "\e61d"; +} + +.el-icon-alipower_8:before { + content: "\e61e"; +} + +.el-icon-alipower_7:before { + content: "\e61f"; +} + +.el-icon-alipower_9:before { + content: "\e625"; +} + diff --git a/src/assets/icon/iconfont.eot b/src/assets/icon/iconfont.eot new file mode 100644 index 0000000..61ba8f2 Binary files /dev/null and b/src/assets/icon/iconfont.eot differ diff --git a/src/assets/icon/iconfont.js b/src/assets/icon/iconfont.js new file mode 100644 index 0000000..fda6bed --- /dev/null +++ b/src/assets/icon/iconfont.js @@ -0,0 +1 @@ +!function(c){var e,o,t,l,i,a,h,n='',v=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){a||(a=!0,l())}o=function(){var c,e,o,t,l,i=document.createElement("div");i.innerHTML=n,n=null,(c=i.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",e=c,(o=document.body).firstChild?(t=e,(l=o.firstChild).parentNode.insertBefore(t,l)):o.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),o()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(l=o,i=c.document,a=!1,(h=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(h,50)}s()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window); \ No newline at end of file diff --git a/src/assets/icon/iconfont.json b/src/assets/icon/iconfont.json new file mode 100644 index 0000000..4ed4290 --- /dev/null +++ b/src/assets/icon/iconfont.json @@ -0,0 +1,121 @@ +{ + "id": "2058344", + "name": "eleThirdIcon", + "font_family": "iconfont", + "css_prefix_text": "el-icon-ali", + "description": "", + "glyphs": [ + { + "icon_id": "10023646", + "name": "signal-2", + "font_class": "signal-2", + "unicode": "e857", + "unicode_decimal": 59479 + }, + { + "icon_id": "10248563", + "name": "signal-1", + "font_class": "signal-1", + "unicode": "e818", + "unicode_decimal": 59416 + }, + { + "icon_id": "10248566", + "name": "signal-3", + "font_class": "signal-3", + "unicode": "e81a", + "unicode_decimal": 59418 + }, + { + "icon_id": "14536693", + "name": "signal-4", + "font_class": "signal-4", + "unicode": "f60e", + "unicode_decimal": 62990 + }, + { + "icon_id": "7757423", + "name": "mosquito.1", + "font_class": "mosquito1", + "unicode": "ebf6", + "unicode_decimal": 60406 + }, + { + "icon_id": "7757432", + "name": "mosquito", + "font_class": "mosquito", + "unicode": "ebf5", + "unicode_decimal": 60405 + }, + { + "icon_id": "6697986", + "name": "power_0", + "font_class": "power_", + "unicode": "e617", + "unicode_decimal": 58903 + }, + { + "icon_id": "6697988", + "name": "power_1", + "font_class": "power_1", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "6697989", + "name": "power_2", + "font_class": "power_2", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "6697991", + "name": "power_3", + "font_class": "power_3", + "unicode": "e61a", + "unicode_decimal": 58906 + }, + { + "icon_id": "6697992", + "name": "power_4", + "font_class": "power_4", + "unicode": "e61b", + "unicode_decimal": 58907 + }, + { + "icon_id": "6697993", + "name": "power_5", + "font_class": "power_5", + "unicode": "e61c", + "unicode_decimal": 58908 + }, + { + "icon_id": "6697994", + "name": "power_6", + "font_class": "power_6", + "unicode": "e61d", + "unicode_decimal": 58909 + }, + { + "icon_id": "6697995", + "name": "power_8", + "font_class": "power_8", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "6697996", + "name": "power_7", + "font_class": "power_7", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "6697997", + "name": "power_9", + "font_class": "power_9", + "unicode": "e625", + "unicode_decimal": 58917 + } + ] +} diff --git a/src/assets/icon/iconfont.svg b/src/assets/icon/iconfont.svg new file mode 100644 index 0000000..465ecd1 --- /dev/null +++ b/src/assets/icon/iconfont.svg @@ -0,0 +1,74 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icon/iconfont.ttf b/src/assets/icon/iconfont.ttf new file mode 100644 index 0000000..cb1b0d6 Binary files /dev/null and b/src/assets/icon/iconfont.ttf differ diff --git a/src/assets/icon/iconfont.woff b/src/assets/icon/iconfont.woff new file mode 100644 index 0000000..a0ce090 Binary files /dev/null and b/src/assets/icon/iconfont.woff differ diff --git a/src/assets/icon/iconfont.woff2 b/src/assets/icon/iconfont.woff2 new file mode 100644 index 0000000..2c002f2 Binary files /dev/null and b/src/assets/icon/iconfont.woff2 differ diff --git a/src/main.js b/src/main.js index 9098f67..d36ffa8 100644 --- a/src/main.js +++ b/src/main.js @@ -13,6 +13,7 @@ import store from './store' import i18n from './lang' // Internationalization import './icons' // icon +import './assets/icon/iconfont.css' // ali icon import './errorLog'// error log import './permission' // permission control // import './mock' // simulation data diff --git a/src/views/counter/device.vue b/src/views/counter/device.vue index d461143..56d04aa 100644 --- a/src/views/counter/device.vue +++ b/src/views/counter/device.vue @@ -55,24 +55,46 @@ :label="$t('counter.status')" min-width="80"> + + + +