ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式美化

Browse Source
yanzili 3 years ago
parent e068f409b6
commit 1f18844aca
8 changed files with 2214 additions and 2169 deletions
Show Stats Download Patch File Download Diff File

62
report-ui/src/assets/iconfont/demo_index.html
Unescape Escape View File

@ -1,10 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8" />
<title>iconfont Demo</title> <title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/> <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/> type="image/x-icon" />
<link rel="icon" type="image/svg+xml"
href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg" />
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="iconfont.css">
@ -34,10 +37,12 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="main"> <div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"> <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"> <img width="200"
src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1> </a></h1>
<div class="nav-tabs"> <div class="nav-tabs">
@ -47,13 +52,20 @@
<li class="dib"><span>Symbol</span></li> <li class="dib"><span>Symbol</span></li>
</ul> </ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1513211" target="_blank" class="nav-more">查看项目</a> <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1513211" target="_blank"
class="nav-more">查看项目</a>
</div> </div>
<div class="tab-container"> <div class="tab-container">
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">展 开 </div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe650;</span> <span class="icon iconfont">&#xe650;</span>
<div class="name">excel</div> <div class="name">excel</div>
@ -657,16 +669,16 @@
</blockquote> </blockquote>
<p>Unicode 使用步骤如下：</p> <p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1624608582557') format('woff2'), src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624608582557') format('woff'), url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624608582557') format('truetype'); url('iconfont.ttf?t=1624613153423') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css" <pre><code class="language-css"
>.iconfont { >.iconfont {
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-size: 16px; font-size: 16px;
@ -676,7 +688,7 @@
} }
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre> <pre>
<code class="language-html" <code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt; >&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre> </code></pre>
@ -688,6 +700,15 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconzhankai"></span>
<div class="name">
展 开
</div>
<div class="code-name">.iconzhankai
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont iconexcel"></span> <span class="icon iconfont iconexcel"></span>
<div class="name"> <div class="name">
@ -1583,10 +1604,10 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt; <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre> </code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt; <pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre> </code></pre>
<blockquote> <blockquote>
<p>" <p>"
@ -1597,6 +1618,14 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhankai"></use>
</svg>
<div class="name">展 开 </div>
<div class="code-name">#iconzhankai</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconexcel"></use> <use xlink:href="#iconexcel"></use>
@ -2396,10 +2425,10 @@
</ul> </ul>
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt; <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt; <pre><code class="language-html">&lt;style&gt;
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
@ -2410,7 +2439,7 @@
&lt;/style&gt; &lt;/style&gt;
</code></pre> </code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt; <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt; &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt; &lt;/svg&gt;
</code></pre> </code></pre>
@ -2439,4 +2468,5 @@
}) })
</script> </script>
</body> </body>
</html> </html>

10
report-ui/src/assets/iconfont/iconfont.css
Unescape Escape View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 1513211 */ font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1624608582557') format('woff2'), src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624608582557') format('woff'), url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624608582557') format('truetype'); url('iconfont.ttf?t=1624613153423') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconzhankai:before {
content: "\e631";
}
.iconexcel:before { .iconexcel:before {
content: "\e650"; content: "\e650";
} }

2
report-ui/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
report-ui/src/assets/iconfont/iconfont.json
Unescape Escape View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon", "css_prefix_text": "icon",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "11990084",
"name": "展 开 ",
"font_class": "zhankai",
"unicode": "e631",
"unicode_decimal": 58929
},
{ {
"icon_id": "1990758", "icon_id": "1990758",
"name": "excel", "name": "excel",

BIN
report-ui/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
report-ui/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

42
report-ui/src/views/report/bigscreen/designer/index.vue
Unescape Escape View File

@ -44,7 +44,7 @@
<div class="layout-left-fold" <div class="layout-left-fold"
:style="{ width: widthLeftForToolsHideButton + 'px' }" :style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow"> @click="toolIsShow = !toolIsShow">
<i class="iconfont iconfold" /> <i class="iconfont iconzhankai" />
</div> </div>
<div class="layout-middle" <div class="layout-middle"
@ -604,18 +604,24 @@ export default {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
height: 100%; height: 100%;
-webkit-box-align: center; -webkit-box-align: bottom;
-ms-flex-align: center; -ms-flex-align: bottom;
align-items: center; align-items: bottom;
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
background-color: #171b22; background-color: #455766;
cursor: pointer; cursor: pointer;
i { i {
font-size: 40px; font-size: 22px;
width: 15px; width: 18px;
margin-left: -15px; height: 23px;
color: #bcc9d4; margin-left: 0px;
color: #5a83bb;
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-moz-transform: rotate(180deg); /* Firefox */
-webkit-transform: rotate(180deg); /* Safari 和 Chrome */
-o-transform: rotate(180deg); /* Opera */
} }
} }
@ -624,12 +630,10 @@ export default {
position: relative; position: relative;
//width: calc(100% - 445px); //width: calc(100% - 445px);
height: 100%; height: 100%;
background-color: #4f4f4ff0; background-color: #455766;
box-sizing: border-box; box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
border: 1px solid #dcdee2; border: 1px solid #455766;
border-color: #e8eaec;
border-radius: 4px;
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
.top-button { .top-button {
@ -637,10 +641,10 @@ export default {
flex-direction: row; flex-direction: row;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-left: 100px; margin-left: 9px;
.btn { .btn {
color: #409eff; color: #cde8ff;
width: 53px; width: 36px;
text-align: center; text-align: center;
display: block; display: block;
cursor: pointer; cursor: pointer;
@ -692,7 +696,7 @@ export default {
} }
.el-tabs__content { .el-tabs__content {
background-color: #263445; background-color: #263445;
height: calc(100vh - 40px); height: calc(100vh - 39px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
.el-tab-pane { .el-tab-pane {
@ -714,12 +718,12 @@ export default {
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(55, 175, 255, 0.5) inset; box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
min-height: 20px; min-height: 20px;
background-clip: content-box; background-clip: content-box;
box-shadow: 0 0 0 5px rgba(55, 175, 255, 0.5) inset; box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
} }
&::-webkit-scrollbar-corner { &::-webkit-scrollbar-corner {
background: transparent; background: transparent;

Write Preview
Loading…
Cancel
Save