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>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8" />
<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="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico"
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="demo.css">
<link rel="stylesheet" href="iconfont.css">
@ -34,10 +37,12 @@
}
</style>
</head>
<body>
<div class="main">
<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>
<div class="nav-tabs">
@ -47,13 +52,20 @@
<li class="dib"><span>Symbol</span></li>
</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 class="tab-container">
<div class="content unicode" style="display: block;">
<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">
<span class="icon iconfont">&#xe650;</span>
<div class="name">excel</div>
@ -657,16 +669,16 @@
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1624608582557') format('woff2'),
url('iconfont.woff?t=1624608582557') format('woff'),
url('iconfont.ttf?t=1624608582557') format('truetype');
src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624613153423') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
@ -676,7 +688,7 @@
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
@ -688,6 +700,15 @@
<div class="content font-class">
<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">
<span class="icon iconfont iconexcel"></span>
<div class="name">
@ -1583,10 +1604,10 @@
</ul>
<p>使用步骤如下：</p>
<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>
<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>
<blockquote>
<p>"
@ -1597,6 +1618,14 @@
<div class="content symbol">
<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">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconexcel"></use>
@ -2396,10 +2425,10 @@
</ul>
<p>使用步骤如下：</p>
<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>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
@ -2410,7 +2439,7 @@
&lt;/style&gt;
</code></pre>
<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;/svg&gt;
</code></pre>
@ -2439,4 +2468,5 @@
})
</script>
</body>
</html>

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

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1624608582557') format('woff2'),
url('iconfont.woff?t=1624608582557') format('woff'),
url('iconfont.ttf?t=1624608582557') format('truetype');
src: url('iconfont.woff2?t=1624613153423') format('woff2'),
url('iconfont.woff?t=1624613153423') format('woff'),
url('iconfont.ttf?t=1624613153423') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.iconzhankai:before {
content: "\e631";
}
.iconexcel:before {
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",
"description": "",
"glyphs": [
{
"icon_id": "11990084",
"name": "展 开 ",
"font_class": "zhankai",
"unicode": "e631",
"unicode_decimal": 58929
},
{
"icon_id": "1990758",
"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"
:style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow">
<i class="iconfont iconfold" />
<i class="iconfont iconzhankai" />
</div>
<div class="layout-middle"
@ -604,18 +604,24 @@ export default {
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: bottom;
-ms-flex-align: bottom;
align-items: bottom;
font-size: 12px;
overflow: hidden;
background-color: #171b22;
background-color: #455766;
cursor: pointer;
i {
font-size: 40px;
width: 15px;
margin-left: -15px;
color: #bcc9d4;
font-size: 22px;
width: 18px;
height: 23px;
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;
//width: calc(100% - 445px);
height: 100%;
background-color: #4f4f4ff0;
background-color: #455766;
box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid #dcdee2;
border-color: #e8eaec;
border-radius: 4px;
border: 1px solid #455766;
align-items: center;
vertical-align: middle;
.top-button {
@ -637,10 +641,10 @@ export default {
flex-direction: row;
height: 40px;
line-height: 40px;
margin-left: 100px;
margin-left: 9px;
.btn {
color: #409eff;
width: 53px;
color: #cde8ff;
width: 36px;
text-align: center;
display: block;
cursor: pointer;
@ -692,7 +696,7 @@ export default {
}
.el-tabs__content {
background-color: #263445;
height: calc(100vh - 40px);
height: calc(100vh - 39px);
overflow-x: hidden;
overflow-y: auto;
.el-tab-pane {
@ -714,12 +718,12 @@ export default {
}
&::-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 {
min-height: 20px;
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 {
background: transparent;

Write Preview
Loading…
Cancel
Save