From 006e1cffc7650c25f085aa50f3fc6c3dfa745f07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com> Date: Mon, 25 Mar 2024 13:59:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E9=98=BF=E9=87=8C=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/static/icon/demo.css | 539 +++++++++++++++++++++++++ src/assets/static/icon/demo_index.html | 349 ++++++++++++++++ src/assets/static/icon/iconfont.css | 53 +++ src/assets/static/icon/iconfont.js | 1 + src/assets/static/icon/iconfont.json | 58 +++ src/assets/static/icon/iconfont.ttf | Bin 0 -> 3160 bytes src/assets/static/icon/iconfont.woff | Bin 0 -> 2132 bytes src/assets/static/icon/iconfont.woff2 | Bin 0 -> 1720 bytes src/assets/styles/element-ui.scss | 8 +- src/main.js | 106 ++--- src/views/dataCloudMap/index.vue | 5 +- 11 files changed, 1067 insertions(+), 52 deletions(-) create mode 100644 src/assets/static/icon/demo.css create mode 100644 src/assets/static/icon/demo_index.html create mode 100644 src/assets/static/icon/iconfont.css create mode 100644 src/assets/static/icon/iconfont.js create mode 100644 src/assets/static/icon/iconfont.json create mode 100644 src/assets/static/icon/iconfont.ttf create mode 100644 src/assets/static/icon/iconfont.woff create mode 100644 src/assets/static/icon/iconfont.woff2 diff --git a/src/assets/static/icon/demo.css b/src/assets/static/icon/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/static/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/static/icon/demo_index.html b/src/assets/static/icon/demo_index.html new file mode 100644 index 0000000..060da7d --- /dev/null +++ b/src/assets/static/icon/demo_index.html @@ -0,0 +1,349 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    安全保障
    +
    &#xe61e;
    +
    • + +
  • + +
    消息-置灰
    +
    &#xe61f;
    +
    • + +
  • + +
    喜欢
    +
    &#xe620;
    +
    • + +
  • + +
    更多
    +
    &#xe621;
    +
    • + +
  • + +
    首页-置灰
    +
    &#xe622;
    +
    • + +
  • + +
    个人中心-置灰
    +
    &#xe623;
    +
    • + +
  • + +
    看点-置灰
    +
    &#xe624;
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

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

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    + 安全保障 +
    +
    .icon-jc-anquanbaozhang +
    +
    • + +
  • + +
    + 消息-置灰 +
    +
    .icon-jc-xiaoxi-zhihui +
    +
    • + +
  • + +
    + 喜欢 +
    +
    .icon-jc-xihuan +
    +
    • + +
  • + +
    + 更多 +
    +
    .icon-jc-gengduo +
    +
    • + +
  • + +
    + 首页-置灰 +
    +
    .icon-jc-shouye-zhihui +
    +
    • + +
  • + +
    + 个人中心-置灰 +
    +
    .icon-jc-gerenzhongxin-zhihui +
    +
    • + +
  • + +
    + 看点-置灰 +
    +
    .icon-jc-kandian-zhihui +
    +
    • + +
+
+

font-class 引用

+
+ +

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

+

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

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

使用步骤如下：

+

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

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

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

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

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

+
+
+
+
+
    + +
  • + +
    安全保障
    +
    #icon-jc-anquanbaozhang
    +
    • + +
  • + +
    消息-置灰
    +
    #icon-jc-xiaoxi-zhihui
    +
    • + +
  • + +
    喜欢
    +
    #icon-jc-xihuan
    +
    • + +
  • + +
    更多
    +
    #icon-jc-gengduo
    +
    • + +
  • + +
    首页-置灰
    +
    #icon-jc-shouye-zhihui
    +
    • + +
  • + +
    个人中心-置灰
    +
    #icon-jc-gerenzhongxin-zhihui
    +
    • + +
  • + +
    看点-置灰
    +
    #icon-jc-kandian-zhihui
    +
    • + +
+
+

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/static/icon/iconfont.css b/src/assets/static/icon/iconfont.css new file mode 100644 index 0000000..74a5a76 --- /dev/null +++ b/src/assets/static/icon/iconfont.css @@ -0,0 +1,53 @@ +@font-face { + font-family: "iconfont"; /* Project id 4480457 */ + src: url('iconfont.woff2?t=1711346025444') format('woff2'), + url('iconfont.woff?t=1711346025444') format('woff'), + url('iconfont.ttf?t=1711346025444') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 14px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="icon-jc"], +[class*="icon-jc"] + { + font-family: "iconfont" !important; + font-size: 14px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-jc-anquanbaozhang:before { + content: "\e61e"; +} + +.icon-jc-xiaoxi-zhihui:before { + content: "\e61f"; +} + +.icon-jc-xihuan:before { + content: "\e620"; +} + +.icon-jc-gengduo:before { + content: "\e621"; +} + +.icon-jc-shouye-zhihui:before { + content: "\e622"; +} + +.icon-jc-gerenzhongxin-zhihui:before { + content: "\e623"; +} + +.icon-jc-kandian-zhihui:before { + content: "\e624"; +} + diff --git a/src/assets/static/icon/iconfont.js b/src/assets/static/icon/iconfont.js new file mode 100644 index 0000000..4962414 --- /dev/null +++ b/src/assets/static/icon/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4480457='',function(a){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var i,n,o,l,c,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=a._iconfont_svg_string_4480457,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),i()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(o=i,l=a.document,c=!1,m(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,s())})}function s(){c||(c=!0,o())}function m(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}}(window); \ No newline at end of file diff --git a/src/assets/static/icon/iconfont.json b/src/assets/static/icon/iconfont.json new file mode 100644 index 0000000..e4879c2 --- /dev/null +++ b/src/assets/static/icon/iconfont.json @@ -0,0 +1,58 @@ +{ + "id": "4480457", + "name": "no name", + "font_family": "iconfont", + "css_prefix_text": "icon-jc-", + "description": "", + "glyphs": [ + { + "icon_id": "33986995", + "name": "安全保障", + "font_class": "anquanbaozhang", + "unicode": "e61e", + "unicode_decimal": 58910 + }, + { + "icon_id": "33986996", + "name": "消息-置灰", + "font_class": "xiaoxi-zhihui", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "33986997", + "name": "喜欢", + "font_class": "xihuan", + "unicode": "e620", + "unicode_decimal": 58912 + }, + { + "icon_id": "33986998", + "name": "更多", + "font_class": "gengduo", + "unicode": "e621", + "unicode_decimal": 58913 + }, + { + "icon_id": "33986999", + "name": "首页-置灰", + "font_class": "shouye-zhihui", + "unicode": "e622", + "unicode_decimal": 58914 + }, + { + "icon_id": "33987000", + "name": "个人中心-置灰", + "font_class": "gerenzhongxin-zhihui", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "33987001", + "name": "看点-置灰", + "font_class": "kandian-zhihui", + "unicode": "e624", + "unicode_decimal": 58916 + } + ] +} diff --git a/src/assets/static/icon/iconfont.ttf b/src/assets/static/icon/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..a2d9695991714e20829b6417f97c6c3b874a7f3f GIT binary patch literal 3160 zcmd^B?N3|h6+h>``2}qJa&rru zYX86<^PKxTug^KpbDnzv1b`;k1s?jRX67c9n_brc@EMZMet)J<9Zf&?cjA9a{L*qc zxAFDT?nwZynPeXoN;|7>zEC{@z&`*Gx7YHym3ZmnKalNLG_z|YuzbniAp9Q9&b4xF zTOmNce<7ljD$62gTb5o zlrZ_g&w+C1clUQ;Q6Lt8D68i1uo@DQE+t!TUTzuv2Q)Qo{}lV(pP6CfxqnLlex6t> zaHczpWQ7@!44z5t^aG&PjluMG=!Y@jo;`DJ7M!JAO@jbS;=lUC7)!-Mjv_X4M6zRA zBncX8uy}$1_y&kn>kaPr#Q&`E#BV@F^5j6|N%|e*{Oaiy_^=+TcN+Tv{2yVL%vj9F zgJTQ+uSsfJn>qm?*)YW=GsX`{%AzIdNxMLD0aAtyr3_H-+^2o1hZrTkQ5i?J0!5U- zLc+#AlKTI6(5<1dV(tL#N9bw{fL+h>TRu^O}E|d+fALV_%N6hk94g> zqesvx>1|f=w$*xDu;D|=iodj?x83%h&*}2b+X7y+&AZUWYNQ?5f0zG)?}ZQyQccgp zG}Wd0eXKO9Oo~P*cPTcGv3P7ClO3d=KVl(8tLzJ-WzbJ0k}MM^J*qxgio`P6^izOq z&R?7!A3eEKSl=BlW-lfNgiy4#V{&ACdSRusxRA+qM*UsY_DlB`7Y1l7Eb8}s;c!w> zKBdR8aQIW7q9ns%zBd+~7=8QP&fSr*Ku~oY>$=*jp1*wV?a_&7Y$C1B&94rX`$9jO zaH?r__QKx$oSN1@WS$i25M{MfhwOjF@9}YZ-=wMPF=SO!(R4~wH60VxOTsXUDRy>o zq82C0K0i{?WS)s}(lggzRlAePZvDQiC)MN9?=wby_4=R%pHFBTy*^*>hL%tw5e4JU zZYRdW(J1##x13OWO11SK{d1ScXir&mM*(V6t5~ zD$`#$nG8Qh#F4hq`?vV}^mY%zFno_z%&LBBVd{h^y8+RTNDAZbC=u2r7_*=x`$niE zTHPT`cTj3{If&23;-Zh*Cqlb9#`%o)@!>shzZc)|OCG0R7)c6`ei2l|97m_&Y{ol+ zpufcNyvO0iqcV5N+wO6CcmX;6-&W2(^4h2*@l7tbrDq{w5AbJNTJ-ll!+x)%zm=R6 zf@%mWVrQG+3fj@l^ZNUoD0m%uO>W1a7hiXH1(ExkJz!H+$>nxPycCVv=%UkGV*eBV zw|o|4=z%PpGH-=XX1yO_-JW@T7i79Ghwg!2_4!+6y6S8%Iu0`&yt2AHJTfx8y!zJz z@Jjx|-0^h!_}qn04nVBg!+GeMdh~xeJm?O1IWIr(Ehoc!;#*FJ_bqp`=J0TChvx7e zf<`^}_+QgKZ-ox}=8Uj<=xmH~=Ei$R0f@FW(@r#Z!}pZ zh5S!k{zT8|sTrL&0Y1==o-9vt_<&LU&7q~Cp`|J#L*1w1@l)p+;d}iqou8RH-IMUU z@R0!~#!Dx49}#@PbRe$@(}BEL*L&bg<6FpmxsH$e=SPgV1|T7E^jvZEB2E81#Bs~tS2^M$Qau6n>8Jm>S(&0DB|)u6Sf_-V2(z!sFqv-*_wN$+{GuEHkSv6u=RrzY%w z%4>?OG{f@AY&PL#T1}-KYm|{fvr3W5gwB}x8?_oWwK7en&GuUFRniN z9n^DRpEBw!8{Y$?uh{>m-!-hrA&&xzD4_+dXai?Xduc1DUCC9ht>v_WW4oBEY!{DR zTPv<@6{T&WIn7eYYlW4qieq!FvbB>pm2x3p&1=`zDq3N?sF_0NdQMv@<_=iO;XhDs B{PO?+ literal 0 HcmV?d00001 diff --git a/src/assets/static/icon/iconfont.woff b/src/assets/static/icon/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..1d766fd04408a9fdee91c4eb8584a229d0acfc41 GIT binary patch literal 2132 zcmY*Zc{J4h7yizeu}*j?sR%!72iYlGC=5enh)T?un#dZ1QDkc{6l0lQTPFLA3sc6DJ!>YB3@Pu|`7P)C?m5rr-sd^bz4!CijdZfH0U!Vvg06tbUPgHQoA1^C zAGT;WD*%89f~pA!SNSyMn@(sgT~Ip%@;zWo^^o6jf!GjGO96Q>nA_$tahBHtqVQnN z0|1yT0KkdVbD?IwSFu+BfL|K)X@M|Q4e03e1w~Lpf?NiKlE640**B0t1U1kLh=P!p z2cLjo+@6mBmJ)m5_ky(rVu|2h{=L0&Amky^fOil!@G7X$!QB=B0KFz&YRU`=4g>oH z7C_H+5ZTQ}X}iQi9OeoJGwGv^Vd5~MH`ax)lU;Tioj8gQ1{()ZOmz!%RQ1d<b2MYLYB1(vbE14+aI19vSy|dvKrir`dM0xk)rnmmm zsd(JMT!jjir|q{8kipv3`Vwve)2C*ulPPa65>vLa=LhBwQq7e zy2b++A9(`)WuLLY50T4If43pl@3Kp*+rzPOYf#ubsSWVYSJ9||BX0X+BFCcxRA;*T z^vII80y6Yw`q<@ty}4~I5fW6Fa-?#PJNZocb4!YTP8EHr##*i9@{?khKath%j>5?j zAMYK0;(MnS*Ke(?Bvnmu7U1T(I%4sJxmQ2uu5+U{J*|Yce%juoMUd^P%20wH7m$o3 zH6fptBad5hM+A+wlii3(% z&G`L#k(&{bkza+fU=F?SSW0%BvtDj zik`dF&yBsa?8jn;L6PQ&`|7ypk9MCcFFk0ab`|)m-+Q>=Q96|DF81;Ko7IaKM8q6M ze}pxv@{F;gPTiip^??_|A8=2Z_;fC%F?Sw#ThpJ9A(#gfmTh@Pc7-zP3z+2 zO41c@wZo@^8wz=IKV;9Z{c<7FbNsI=o8FcB(i?$JsG~micN?ts8m*cYCdm*xT_j9L zZ!}EU+mNV6!2vn1D^n|uP5xbZS{6+8;wiN>*v4&V&?5ojF$QA5itC$5$E)W};YB3;k{> zmxWYDD&s1L=emnx98SESct3?gv9qKm*0v6MU(4;e!MS(k)R(nro{%j=Wm(%N+a;H3PDke6+kEs!@v0orcIUAr3tp1_8 z`a))0J4vDRwb_MvI5*>rac?f2UW>HuAeVX^-7v41=#P^wbAalG=^v<2*hsalH}dL9 zz~*(#vwSM3x*_b+y0>!PA+vMa<>d4J(*xUIwK{v$Q6iN~8)y+!hPOn$_l&*_T5|{e z(ZX@L@N9<{YAKWJZ)djVyfTqxaF$ws<(Krz;>m{-(}k7DA~sTeAhBt&vt_Q4Q$+v$ zf}*8l>9W2+Q<SWgbWGsx2HT(A#>nS{LeiE zreU(bxy0KAe<8*+5b~?Yl}QxrSL^{1zA$M@R|^X!0SBb{gi-(X@7*@>*R255A}bSe z0KCSwqR<=QEG!0tX-R}YF@OR%d@rs83lJ;FZO9L(7xdNt_Dy00@faKcQIVg6TJb0C zV$At~KRO^pa6T#1EU48&oJ4D(z;e{=%k=%uA5)X)+{r;QoF7&`6sViCeLi$i3&}p| zm`;(L6HwYWE;MX~MGq)4n-Jx{!5lAqS*S2!GaKn@fe!JmL z3(wy&Lj!U^g@UHNzPb1wGS`P5E}nT|bX++p)+q*Wne zo;H?9#yWRXb|9SWV0U6+Ah};S(E3X9s~38>tG&t}!--)=ea;W4hMZytl?V z(xhf7zOBJ?gUhNl>sh$l5TJb)4uFItuxuQA7V^u#r+`rzY|}C^&s2p%pma3pDD1>k zU+e3hJ9wZUbMN2(6K$fQ?G~~L5pOD$%F$>ek}8!DsS9ajMz)E1CP8S{@Q~rIQKjiR zsef-z_wd@pN9(0_>m8B@Dco62k<3Jw4rX6tKKnh#W3adadl13A6!7U>~4|0Jyc^pZ<^( z2!N3hVn3rdr3|>*a(|~yw*LTp3v&nrmu3J7;DGYTY;>0InP=i=%1jv3Jf^Co7TDHG zD`-Vc$+*Q>%5Z{w|KsUESqP08*_wWOK=K`TapK`TyxLn}c*Kr2Z=LMvs4w)RrA zKxd{}-VPuH&^G|=6xjWhoWy9mQ!E-aw*W6I5el`87&(U_+H-MpvtzwweZIrPU2DMJ zS|OFa;i%f~j*-dvHaz`i^>g zed^x%`==eSan3a6B51aL!9QbG&gP$YZ(V+)C|`V2N2RXee-;sCmh62A6rz#MQv1LM z`2n?UpIdO@h|#po{EJk;yUrmWcW~FV4bUc70IMF-%omNW#80EX=Fj{5FG1|(M{Fz$UW?%R zPkj0&F-zkD(Vmd=c;;wP&nWiR-Tp?hZ$66d>C5znC7TYO9%r7Y z&1B~t_YR+dMkd3&HR3xy4ZOV{VV$aZ|o;~t;^wFBY}EVP#Bb!99i1Ml9b{d1yo8KOiM}&lnLf31~AGv&;y8o z)8{sIE|wm?I+qWOE(DyCqziTtB$Fm+lmRd*Dc#=0MaKjs1Awd<0K{$|Fjnut+1;TF z_8XAA{(#1A6pW?=yEl_;s82*hNr-`}age78W|dyDr)@%T3o70001jEjMfc literal 0 HcmV?d00001 diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss index 363092a..9a37730 100644 --- a/src/assets/styles/element-ui.scss +++ b/src/assets/styles/element-ui.scss @@ -69,7 +69,7 @@ // dropdown .el-dropdown-menu { a { - display: block + display: block; } } @@ -89,4 +89,8 @@ > .el-submenu__title .el-submenu__icon-arrow { display: none; -} \ No newline at end of file +} + +.el-button [class*="icon-jc-"] + span { + margin-left: 5px; +} diff --git a/src/main.js b/src/main.js index 13c6cf2..4cc4dd7 100644 --- a/src/main.js +++ b/src/main.js @@ -1,67 +1,75 @@ -import Vue from 'vue' +import Vue from "vue"; -import Cookies from 'js-cookie' +import Cookies from "js-cookie"; -import Element from 'element-ui' -import './assets/styles/element-variables.scss' +import Element from "element-ui"; +import "./assets/styles/element-variables.scss"; -import '@/assets/styles/index.scss' // global css -import '@/assets/styles/ruoyi.scss' // ruoyi css -import App from './App' -import store from './store' -import router from './router' -import directive from './directive' // directive -import plugins from './plugins' // plugins -import { download } from '@/utils/request' +import "@/assets/styles/index.scss"; // global css +import "@/assets/styles/ruoyi.scss"; // ruoyi css +import App from "./App"; +import store from "./store"; +import router from "./router"; +import directive from "./directive"; // directive +import plugins from "./plugins"; // plugins +import { download } from "@/utils/request"; +import "./assets/static/icon/iconfont.css"; -import './assets/icons' // icon -import './permission' // permission control +import "./assets/icons"; // icon +import "./permission"; // permission control import { getDicts } from "@/api/system/dict/data"; import { getConfigKey } from "@/api/system/config"; -import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi"; +import { + parseTime, + resetForm, + addDateRange, + selectDictLabel, + selectDictLabels, + handleTree, +} from "@/utils/ruoyi"; // 分页组件 import Pagination from "@/components/Pagination"; // 自定义表格工具组件 -import RightToolbar from "@/components/RightToolbar" +import RightToolbar from "@/components/RightToolbar"; // 富文本组件 -import Editor from "@/components/Editor" +import Editor from "@/components/Editor"; // 文件上传组件 -import FileUpload from "@/components/FileUpload" +import FileUpload from "@/components/FileUpload"; // 图片上传组件 -import ImageUpload from "@/components/ImageUpload" +import ImageUpload from "@/components/ImageUpload"; // 图片预览组件 -import ImagePreview from "@/components/ImagePreview" +import ImagePreview from "@/components/ImagePreview"; // 字典标签组件 -import DictTag from '@/components/DictTag' +import DictTag from "@/components/DictTag"; // 头部标签组件 -import VueMeta from 'vue-meta' +import VueMeta from "vue-meta"; // 字典数据组件 -import DictData from '@/components/DictData' +import DictData from "@/components/DictData"; // 全局方法挂载 -Vue.prototype.getDicts = getDicts -Vue.prototype.getConfigKey = getConfigKey -Vue.prototype.parseTime = parseTime -Vue.prototype.resetForm = resetForm -Vue.prototype.addDateRange = addDateRange -Vue.prototype.selectDictLabel = selectDictLabel -Vue.prototype.selectDictLabels = selectDictLabels -Vue.prototype.download = download -Vue.prototype.handleTree = handleTree +Vue.prototype.getDicts = getDicts; +Vue.prototype.getConfigKey = getConfigKey; +Vue.prototype.parseTime = parseTime; +Vue.prototype.resetForm = resetForm; +Vue.prototype.addDateRange = addDateRange; +Vue.prototype.selectDictLabel = selectDictLabel; +Vue.prototype.selectDictLabels = selectDictLabels; +Vue.prototype.download = download; +Vue.prototype.handleTree = handleTree; // 全局组件挂载 -Vue.component('DictTag', DictTag) -Vue.component('Pagination', Pagination) -Vue.component('RightToolbar', RightToolbar) -Vue.component('Editor', Editor) -Vue.component('FileUpload', FileUpload) -Vue.component('ImageUpload', ImageUpload) -Vue.component('ImagePreview', ImagePreview) +Vue.component("DictTag", DictTag); +Vue.component("Pagination", Pagination); +Vue.component("RightToolbar", RightToolbar); +Vue.component("Editor", Editor); +Vue.component("FileUpload", FileUpload); +Vue.component("ImageUpload", ImageUpload); +Vue.component("ImagePreview", ImagePreview); -Vue.use(directive) -Vue.use(plugins) -Vue.use(VueMeta) -DictData.install() +Vue.use(directive); +Vue.use(plugins); +Vue.use(VueMeta); +DictData.install(); /** * If you don't want to use mock-server @@ -73,14 +81,14 @@ DictData.install() */ Vue.use(Element, { - size: Cookies.get('size') || 'medium' // set element-ui default size -}) + size: Cookies.get("size") || "medium", // set element-ui default size +}); -Vue.config.productionTip = false +Vue.config.productionTip = false; new Vue({ - el: '#app', + el: "#app", router, store, - render: h => h(App) -}) + render: (h) => h(App), +}); diff --git a/src/views/dataCloudMap/index.vue b/src/views/dataCloudMap/index.vue index 473b9f5..2499aaf 100644 --- a/src/views/dataCloudMap/index.vue +++ b/src/views/dataCloudMap/index.vue @@ -1,5 +1,8 @@