样式美化

3 years ago · 1f18844aca
parent e068f409b6
commit 1f18844aca
8 changed files with 2214 additions and 2169 deletions
--- a/report-ui/src/assets/iconfont/demo_index.html
+++ b/report-ui/src/assets/iconfont/demo_index.html
@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <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>
@ -660,9 +672,9 @@
          <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>
@ -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">
@ -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>
@ -2439,4 +2468,5 @@
    })
  </script>
 </body>
+
 </html>
--- a/report-ui/src/assets/iconfont/iconfont.css
+++ b/report-ui/src/assets/iconfont/iconfont.css
@ -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";
 }
--- a/report-ui/src/assets/iconfont/iconfont.js
+++ b/report-ui/src/assets/iconfont/iconfont.js
--- a/report-ui/src/assets/iconfont/iconfont.json
+++ b/report-ui/src/assets/iconfont/iconfont.json
@ -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",
--- a/report-ui/src/assets/iconfont/iconfont.ttf
+++ b/report-ui/src/assets/iconfont/iconfont.ttf
--- a/report-ui/src/assets/iconfont/iconfont.woff
+++ b/report-ui/src/assets/iconfont/iconfont.woff
--- a/report-ui/src/assets/iconfont/iconfont.woff2
+++ b/report-ui/src/assets/iconfont/iconfont.woff2
--- a/report-ui/src/views/report/bigscreen/designer/index.vue
+++ b/report-ui/src/views/report/bigscreen/designer/index.vue
@ -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;