首页优化
This commit is contained in:
parent
a34f6bb1f9
commit
10bf5828d0
@ -57,9 +57,27 @@
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Mark</div>
|
||||
<div class="code-name">&#xe632;</div>
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Pin</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">bell</div>
|
||||
<div class="code-name">&#xe604;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Clock</div>
|
||||
<div class="code-name">&#xe606;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">phone book</div>
|
||||
<div class="code-name">&#xe600;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -74,12 +92,6 @@
|
||||
<div class="code-name">&#xe627;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 74</div>
|
||||
<div class="code-name">&#xe613;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 83</div>
|
||||
@ -92,12 +104,6 @@
|
||||
<div class="code-name">&#xe615;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 238</div>
|
||||
<div class="code-name">&#xe616;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 164</div>
|
||||
@ -116,12 +122,6 @@
|
||||
<div class="code-name">&#xe619;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 266</div>
|
||||
<div class="code-name">&#xe61a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 67</div>
|
||||
@ -134,18 +134,6 @@
|
||||
<div class="code-name">&#xe61c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 137</div>
|
||||
<div class="code-name">&#xe61d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 108</div>
|
||||
<div class="code-name">&#xe61e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 196</div>
|
||||
@ -164,36 +152,12 @@
|
||||
<div class="code-name">&#xe621;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 261</div>
|
||||
<div class="code-name">&#xe622;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 253</div>
|
||||
<div class="code-name">&#xe623;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 131</div>
|
||||
<div class="code-name">&#xe624;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 57</div>
|
||||
<div class="code-name">&#xe601;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 18</div>
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 286</div>
|
||||
@ -212,18 +176,6 @@
|
||||
<div class="code-name">&#xe607;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 150</div>
|
||||
<div class="code-name">&#xe608;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 284</div>
|
||||
<div class="code-name">&#xe609;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 3</div>
|
||||
@ -242,42 +194,6 @@
|
||||
<div class="code-name">&#xe60c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 112</div>
|
||||
<div class="code-name">&#xe60d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 63</div>
|
||||
<div class="code-name">&#xe60e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 126</div>
|
||||
<div class="code-name">&#xe60f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 110</div>
|
||||
<div class="code-name">&#xe610;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 116</div>
|
||||
<div class="code-name">&#xe612;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">组 4</div>
|
||||
<div class="code-name">&#xe600;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">24gl-expand2</div>
|
||||
@ -309,9 +225,9 @@
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src:
|
||||
url('iconfont.woff2?t=1709515058835') format('woff2'),
|
||||
url('iconfont.woff?t=1709515058835') format('woff'),
|
||||
url('iconfont.ttf?t=1709515058835') format('truetype');
|
||||
url('iconfont.woff2?t=1709685340067') format('woff2'),
|
||||
url('iconfont.woff?t=1709685340067') format('woff'),
|
||||
url('iconfont.ttf?t=1709685340067') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -338,11 +254,38 @@
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-Mark"></span>
|
||||
<span class="icon iconfont icon-Pin"></span>
|
||||
<div class="name">
|
||||
Mark
|
||||
Pin
|
||||
</div>
|
||||
<div class="code-name">.icon-Mark
|
||||
<div class="code-name">.icon-Pin
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-bell"></span>
|
||||
<div class="name">
|
||||
bell
|
||||
</div>
|
||||
<div class="code-name">.icon-bell
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-Clock"></span>
|
||||
<div class="name">
|
||||
Clock
|
||||
</div>
|
||||
<div class="code-name">.icon-Clock
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-phonebook"></span>
|
||||
<div class="name">
|
||||
phone book
|
||||
</div>
|
||||
<div class="code-name">.icon-a-phonebook
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -364,15 +307,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu74"></span>
|
||||
<div class="name">
|
||||
组 74
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu74
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu83"></span>
|
||||
<div class="name">
|
||||
@ -391,15 +325,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu238"></span>
|
||||
<div class="name">
|
||||
组 238
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu238
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu164"></span>
|
||||
<div class="name">
|
||||
@ -427,15 +352,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu266"></span>
|
||||
<div class="name">
|
||||
组 266
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu266
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu67"></span>
|
||||
<div class="name">
|
||||
@ -454,24 +370,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu137"></span>
|
||||
<div class="name">
|
||||
组 137
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu137
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu108"></span>
|
||||
<div class="name">
|
||||
组 108
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu108
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu196"></span>
|
||||
<div class="name">
|
||||
@ -499,33 +397,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu261"></span>
|
||||
<div class="name">
|
||||
组 261
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu261
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu253"></span>
|
||||
<div class="name">
|
||||
组 253
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu253
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu131"></span>
|
||||
<div class="name">
|
||||
组 131
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu131
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu57"></span>
|
||||
<div class="name">
|
||||
@ -535,15 +406,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu18"></span>
|
||||
<div class="name">
|
||||
组 18
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu18
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu286"></span>
|
||||
<div class="name">
|
||||
@ -571,24 +433,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu150"></span>
|
||||
<div class="name">
|
||||
组 150
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu150
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu284"></span>
|
||||
<div class="name">
|
||||
组 284
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu284
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu3"></span>
|
||||
<div class="name">
|
||||
@ -616,60 +460,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu112"></span>
|
||||
<div class="name">
|
||||
组 112
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu112
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu63"></span>
|
||||
<div class="name">
|
||||
组 63
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu63
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu126"></span>
|
||||
<div class="name">
|
||||
组 126
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu126
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu110"></span>
|
||||
<div class="name">
|
||||
组 110
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu110
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu116"></span>
|
||||
<div class="name">
|
||||
组 116
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu116
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-a-zu4"></span>
|
||||
<div class="name">
|
||||
组 4
|
||||
</div>
|
||||
<div class="code-name">.icon-a-zu4
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-24gl-expand2"></span>
|
||||
<div class="name">
|
||||
@ -717,10 +507,34 @@
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-Mark"></use>
|
||||
<use xlink:href="#icon-Pin"></use>
|
||||
</svg>
|
||||
<div class="name">Mark</div>
|
||||
<div class="code-name">#icon-Mark</div>
|
||||
<div class="name">Pin</div>
|
||||
<div class="code-name">#icon-Pin</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-bell"></use>
|
||||
</svg>
|
||||
<div class="name">bell</div>
|
||||
<div class="code-name">#icon-bell</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-Clock"></use>
|
||||
</svg>
|
||||
<div class="name">Clock</div>
|
||||
<div class="code-name">#icon-Clock</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-phonebook"></use>
|
||||
</svg>
|
||||
<div class="name">phone book</div>
|
||||
<div class="code-name">#icon-a-phonebook</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
@ -739,14 +553,6 @@
|
||||
<div class="code-name">#icon-a-zu249</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu74"></use>
|
||||
</svg>
|
||||
<div class="name">组 74</div>
|
||||
<div class="code-name">#icon-a-zu74</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu83"></use>
|
||||
@ -763,14 +569,6 @@
|
||||
<div class="code-name">#icon-a-zu198</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu238"></use>
|
||||
</svg>
|
||||
<div class="name">组 238</div>
|
||||
<div class="code-name">#icon-a-zu238</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu164"></use>
|
||||
@ -795,14 +593,6 @@
|
||||
<div class="code-name">#icon-a-zu65</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu266"></use>
|
||||
</svg>
|
||||
<div class="name">组 266</div>
|
||||
<div class="code-name">#icon-a-zu266</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu67"></use>
|
||||
@ -819,22 +609,6 @@
|
||||
<div class="code-name">#icon-a-zu76</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu137"></use>
|
||||
</svg>
|
||||
<div class="name">组 137</div>
|
||||
<div class="code-name">#icon-a-zu137</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu108"></use>
|
||||
</svg>
|
||||
<div class="name">组 108</div>
|
||||
<div class="code-name">#icon-a-zu108</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu196"></use>
|
||||
@ -859,30 +633,6 @@
|
||||
<div class="code-name">#icon-a-zu208</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu261"></use>
|
||||
</svg>
|
||||
<div class="name">组 261</div>
|
||||
<div class="code-name">#icon-a-zu261</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu253"></use>
|
||||
</svg>
|
||||
<div class="name">组 253</div>
|
||||
<div class="code-name">#icon-a-zu253</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu131"></use>
|
||||
</svg>
|
||||
<div class="name">组 131</div>
|
||||
<div class="code-name">#icon-a-zu131</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu57"></use>
|
||||
@ -891,14 +641,6 @@
|
||||
<div class="code-name">#icon-a-zu57</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu18"></use>
|
||||
</svg>
|
||||
<div class="name">组 18</div>
|
||||
<div class="code-name">#icon-a-zu18</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu286"></use>
|
||||
@ -923,22 +665,6 @@
|
||||
<div class="code-name">#icon-a-zu73</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu150"></use>
|
||||
</svg>
|
||||
<div class="name">组 150</div>
|
||||
<div class="code-name">#icon-a-zu150</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu284"></use>
|
||||
</svg>
|
||||
<div class="name">组 284</div>
|
||||
<div class="code-name">#icon-a-zu284</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu3"></use>
|
||||
@ -963,54 +689,6 @@
|
||||
<div class="code-name">#icon-a-zu291</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu112"></use>
|
||||
</svg>
|
||||
<div class="name">组 112</div>
|
||||
<div class="code-name">#icon-a-zu112</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu63"></use>
|
||||
</svg>
|
||||
<div class="name">组 63</div>
|
||||
<div class="code-name">#icon-a-zu63</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu126"></use>
|
||||
</svg>
|
||||
<div class="name">组 126</div>
|
||||
<div class="code-name">#icon-a-zu126</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu110"></use>
|
||||
</svg>
|
||||
<div class="name">组 110</div>
|
||||
<div class="code-name">#icon-a-zu110</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu116"></use>
|
||||
</svg>
|
||||
<div class="name">组 116</div>
|
||||
<div class="code-name">#icon-a-zu116</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-a-zu4"></use>
|
||||
</svg>
|
||||
<div class="name">组 4</div>
|
||||
<div class="code-name">#icon-a-zu4</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-24gl-expand2"></use>
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
font-family: "iconfont"; /* Project id 4299634 */
|
||||
/* Color fonts */
|
||||
src:
|
||||
url('iconfont.woff2?t=1709515058835') format('woff2'),
|
||||
url('iconfont.woff?t=1709515058835') format('woff'),
|
||||
url('iconfont.ttf?t=1709515058835') format('truetype');
|
||||
url('iconfont.woff2?t=1709685340067') format('woff2'),
|
||||
url('iconfont.woff?t=1709685340067') format('woff'),
|
||||
url('iconfont.ttf?t=1709685340067') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -15,8 +15,20 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-Mark:before {
|
||||
content: "\e632";
|
||||
.icon-Pin:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-bell:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
.icon-Clock:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-a-phonebook:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-a-zu185:before {
|
||||
@ -27,10 +39,6 @@
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.icon-a-zu74:before {
|
||||
content: "\e613";
|
||||
}
|
||||
|
||||
.icon-a-zu83:before {
|
||||
content: "\e614";
|
||||
}
|
||||
@ -39,10 +47,6 @@
|
||||
content: "\e615";
|
||||
}
|
||||
|
||||
.icon-a-zu238:before {
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-a-zu164:before {
|
||||
content: "\e617";
|
||||
}
|
||||
@ -55,10 +59,6 @@
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.icon-a-zu266:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.icon-a-zu67:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
@ -67,14 +67,6 @@
|
||||
content: "\e61c";
|
||||
}
|
||||
|
||||
.icon-a-zu137:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-a-zu108:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-a-zu196:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
@ -87,26 +79,10 @@
|
||||
content: "\e621";
|
||||
}
|
||||
|
||||
.icon-a-zu261:before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
.icon-a-zu253:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.icon-a-zu131:before {
|
||||
content: "\e624";
|
||||
}
|
||||
|
||||
.icon-a-zu57:before {
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-a-zu18:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-a-zu286:before {
|
||||
content: "\e603";
|
||||
}
|
||||
@ -119,14 +95,6 @@
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-a-zu150:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-a-zu284:before {
|
||||
content: "\e609";
|
||||
}
|
||||
|
||||
.icon-a-zu3:before {
|
||||
content: "\e60a";
|
||||
}
|
||||
@ -139,30 +107,6 @@
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-a-zu112:before {
|
||||
content: "\e60d";
|
||||
}
|
||||
|
||||
.icon-a-zu63:before {
|
||||
content: "\e60e";
|
||||
}
|
||||
|
||||
.icon-a-zu126:before {
|
||||
content: "\e60f";
|
||||
}
|
||||
|
||||
.icon-a-zu110:before {
|
||||
content: "\e610";
|
||||
}
|
||||
|
||||
.icon-a-zu116:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-a-zu4:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-24gl-expand2:before {
|
||||
content: "\eb6c";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -6,11 +6,32 @@
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "39402403",
|
||||
"name": "Mark",
|
||||
"font_class": "Mark",
|
||||
"unicode": "e632",
|
||||
"unicode_decimal": 58930
|
||||
"icon_id": "39438936",
|
||||
"name": "Pin",
|
||||
"font_class": "Pin",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "39438935",
|
||||
"name": "bell",
|
||||
"font_class": "bell",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "39438934",
|
||||
"name": "Clock",
|
||||
"font_class": "Clock",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "39438937",
|
||||
"name": "phone book",
|
||||
"font_class": "a-phonebook",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "39402081",
|
||||
@ -26,13 +47,6 @@
|
||||
"unicode": "e627",
|
||||
"unicode_decimal": 58919
|
||||
},
|
||||
{
|
||||
"icon_id": "39402101",
|
||||
"name": "组 74",
|
||||
"font_class": "a-zu74",
|
||||
"unicode": "e613",
|
||||
"unicode_decimal": 58899
|
||||
},
|
||||
{
|
||||
"icon_id": "39402102",
|
||||
"name": "组 83",
|
||||
@ -47,13 +61,6 @@
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "39402100",
|
||||
"name": "组 238",
|
||||
"font_class": "a-zu238",
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "39402086",
|
||||
"name": "组 164",
|
||||
@ -75,13 +82,6 @@
|
||||
"unicode": "e619",
|
||||
"unicode_decimal": 58905
|
||||
},
|
||||
{
|
||||
"icon_id": "39402095",
|
||||
"name": "组 266",
|
||||
"font_class": "a-zu266",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "39402098",
|
||||
"name": "组 67",
|
||||
@ -96,20 +96,6 @@
|
||||
"unicode": "e61c",
|
||||
"unicode_decimal": 58908
|
||||
},
|
||||
{
|
||||
"icon_id": "39402090",
|
||||
"name": "组 137",
|
||||
"font_class": "a-zu137",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "39402094",
|
||||
"name": "组 108",
|
||||
"font_class": "a-zu108",
|
||||
"unicode": "e61e",
|
||||
"unicode_decimal": 58910
|
||||
},
|
||||
{
|
||||
"icon_id": "39402083",
|
||||
"name": "组 196",
|
||||
@ -131,27 +117,6 @@
|
||||
"unicode": "e621",
|
||||
"unicode_decimal": 58913
|
||||
},
|
||||
{
|
||||
"icon_id": "39402089",
|
||||
"name": "组 261",
|
||||
"font_class": "a-zu261",
|
||||
"unicode": "e622",
|
||||
"unicode_decimal": 58914
|
||||
},
|
||||
{
|
||||
"icon_id": "39402085",
|
||||
"name": "组 253",
|
||||
"font_class": "a-zu253",
|
||||
"unicode": "e623",
|
||||
"unicode_decimal": 58915
|
||||
},
|
||||
{
|
||||
"icon_id": "39402084",
|
||||
"name": "组 131",
|
||||
"font_class": "a-zu131",
|
||||
"unicode": "e624",
|
||||
"unicode_decimal": 58916
|
||||
},
|
||||
{
|
||||
"icon_id": "39402116",
|
||||
"name": "组 57",
|
||||
@ -159,13 +124,6 @@
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "39402115",
|
||||
"name": "组 18",
|
||||
"font_class": "a-zu18",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "39402114",
|
||||
"name": "组 286",
|
||||
@ -187,20 +145,6 @@
|
||||
"unicode": "e607",
|
||||
"unicode_decimal": 58887
|
||||
},
|
||||
{
|
||||
"icon_id": "39402112",
|
||||
"name": "组 150",
|
||||
"font_class": "a-zu150",
|
||||
"unicode": "e608",
|
||||
"unicode_decimal": 58888
|
||||
},
|
||||
{
|
||||
"icon_id": "39402087",
|
||||
"name": "组 284",
|
||||
"font_class": "a-zu284",
|
||||
"unicode": "e609",
|
||||
"unicode_decimal": 58889
|
||||
},
|
||||
{
|
||||
"icon_id": "39402105",
|
||||
"name": "组 3",
|
||||
@ -222,48 +166,6 @@
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "39402106",
|
||||
"name": "组 112",
|
||||
"font_class": "a-zu112",
|
||||
"unicode": "e60d",
|
||||
"unicode_decimal": 58893
|
||||
},
|
||||
{
|
||||
"icon_id": "39402108",
|
||||
"name": "组 63",
|
||||
"font_class": "a-zu63",
|
||||
"unicode": "e60e",
|
||||
"unicode_decimal": 58894
|
||||
},
|
||||
{
|
||||
"icon_id": "39402097",
|
||||
"name": "组 126",
|
||||
"font_class": "a-zu126",
|
||||
"unicode": "e60f",
|
||||
"unicode_decimal": 58895
|
||||
},
|
||||
{
|
||||
"icon_id": "39402104",
|
||||
"name": "组 110",
|
||||
"font_class": "a-zu110",
|
||||
"unicode": "e610",
|
||||
"unicode_decimal": 58896
|
||||
},
|
||||
{
|
||||
"icon_id": "39402091",
|
||||
"name": "组 116",
|
||||
"font_class": "a-zu116",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "39401777",
|
||||
"name": "组 4",
|
||||
"font_class": "a-zu4",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "7597941",
|
||||
"name": "24gl-expand2",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/home/4-1.png
Normal file
BIN
src/assets/home/4-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/home/4-2.png
Normal file
BIN
src/assets/home/4-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/home/4-3.png
Normal file
BIN
src/assets/home/4-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/home/avaB.png
Normal file
BIN
src/assets/home/avaB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/assets/home/avaG.png
Normal file
BIN
src/assets/home/avaG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/home/over.png
Normal file
BIN
src/assets/home/over.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/home/overtime.png
Normal file
BIN
src/assets/home/overtime.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/home/prepare2.png
Normal file
BIN
src/assets/home/prepare2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/assets/home/warn.png
Normal file
BIN
src/assets/home/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/home/图层_11.png
Normal file
BIN
src/assets/home/图层_11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
@ -37,10 +37,14 @@ const MainLayout = (props) => {
|
||||
|
||||
return (
|
||||
<div className={`main ${matchLogin ? 'float' : ''}`}>
|
||||
<div className='main__header'><Header matchLogin={matchLogin} /></div>
|
||||
|
||||
<div className={matchHome ? 'main__body2' : 'main__body'}>
|
||||
<div className='main__body-sider'><Sider matchLogin={matchLogin?matchLogin:matchHome} repost={matchPost}/></div>
|
||||
{matchLogin?'':<div className='main__body-sider'><Sider matchLogin={matchLogin?matchLogin:matchHome} repost={matchPost}/></div>}
|
||||
<div className='main__body-right'>
|
||||
{matchLogin?'':<div className='main__body-header'><Header matchLogin={matchLogin} /></div>}
|
||||
<div className='main__body-content' onClick={repost}>{props.children}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -18,9 +18,7 @@ import "./sider.less";
|
||||
import MenuItem from "antd/lib/menu/MenuItem";
|
||||
import SubMenu from "antd/lib/menu/SubMenu";
|
||||
|
||||
|
||||
const Sider = (props) => {
|
||||
|
||||
/** 菜单页展开与收起 */
|
||||
const timer = useRef(-1);
|
||||
const handleExpandMenuShow = () => {
|
||||
@ -47,13 +45,16 @@ const Sider = (props) => {
|
||||
setActiveMenu(null);
|
||||
props.history.push({ pathname: "/home" });
|
||||
};
|
||||
const clickMenu = ()=>{
|
||||
collapsed===true?setCollapsed(false):setCollapsed(false)
|
||||
|
||||
|
||||
}
|
||||
const clickMenu = () => {
|
||||
collapsed === true ? setCollapsed(false) : setCollapsed(false);
|
||||
};
|
||||
const [mainSilder, setMainSilder] = useState(1);
|
||||
const clickMainMenu = (index) => {
|
||||
setMainSilder(index);
|
||||
};
|
||||
/** 子菜单路由 */
|
||||
const navToMenu = (menu) => {
|
||||
console.log("12312312312", menu);
|
||||
props.history.push({ pathname: `/main/${menu.ID}` });
|
||||
};
|
||||
|
||||
@ -72,6 +73,7 @@ const clickMenu = ()=>{
|
||||
/** 已激活菜单 */
|
||||
const [activeMenu, setActiveMenu] = useState(null);
|
||||
const handleActiveMenu = (menu) => {
|
||||
console.log("111111");
|
||||
setActiveMenu(menu);
|
||||
navToMenu(menu);
|
||||
};
|
||||
@ -157,173 +159,214 @@ const clickMenu = ()=>{
|
||||
}
|
||||
}, [IS_MENU_SHRINK]);
|
||||
const [collapsed, setCollapsed] = useState(true);
|
||||
const [MenuShow, setMenuShow] = useState(false);
|
||||
|
||||
const toggleCollapsed = () => {
|
||||
setCollapsed(!collapsed);
|
||||
};
|
||||
useEffect(()=>{
|
||||
if(collapsed == false) {
|
||||
useEffect(() => {
|
||||
if (collapsed == false) {
|
||||
setCollapsed(true);
|
||||
}
|
||||
},[props.repost])
|
||||
// console.log(props.repost,'21312313213213123')
|
||||
}, [props.repost]);
|
||||
const menuCUR = topMenus.menus[mainSilder - 2];
|
||||
|
||||
/** 登录页隐藏 */
|
||||
if (props.matchLogin) return null;
|
||||
|
||||
return (
|
||||
<div className={`sider ${"shortMenuShow"}`}>
|
||||
<div className={`sider ${"shortMenuShow_overflow"}`}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
inlineCollapsed={collapsed}
|
||||
style={{
|
||||
// marginTop: 24,
|
||||
// paddingRight: 10,
|
||||
paddingTop:'21px'
|
||||
}}
|
||||
// defaultOpenKeys={['sub1']}
|
||||
inlineIndent="16"
|
||||
onClick={clickMenu}
|
||||
>
|
||||
<MenuItem key="1" onClick={navToHome} title={'工作台'}>
|
||||
{/* <img
|
||||
src={require("../assets/layout/menu-all.png")}
|
||||
alt=""
|
||||
className="sider__menuAll-icon"
|
||||
/> */}
|
||||
<Icon type="home"></Icon>
|
||||
<span>工作台</span>
|
||||
</MenuItem>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<Icon type="profile" title="常用菜单"></Icon>
|
||||
<span>常用菜单</span>
|
||||
</span>
|
||||
|
||||
}
|
||||
onTitleClick={clickMenu}
|
||||
>
|
||||
{favorMenus.map((menu2, index2) => {
|
||||
return (
|
||||
<MenuItem
|
||||
key={`${menu2.ID}_${index2}`}
|
||||
onClick={() => handleActiveMenu(menu2)}
|
||||
title={menu2.NAME}
|
||||
>
|
||||
<Icon type={menu2.ICON ? menu2.ICON : "file-text"} />
|
||||
|
||||
<span>{menu2.NAME}</span>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</SubMenu>
|
||||
|
||||
{topMenus.menus.map((menu, index) => {
|
||||
return (
|
||||
// <div
|
||||
// key={`${menu.Node.ID}_${index}`}
|
||||
// // onMouseEnter={() => {
|
||||
// // setCurrMenu(menu.Node);
|
||||
// // setActiveKeepMenu(menu.Node);
|
||||
// // }}
|
||||
// onClick={() =>{handleActiveMenu(menu.Node);setCurrMenu(menu.Node);
|
||||
// setActiveKeepMenu(menu.Node);} }
|
||||
// className={wrapClass}
|
||||
// >
|
||||
// <div className="sider__menuExpand-menu--item">
|
||||
// <Icon
|
||||
// type={menu.Node.ICON ? menu.ICON : "file-text"}
|
||||
// className={iconClass}
|
||||
// />
|
||||
// <div className={fontClass}>{menu.Node.NAME}</div>
|
||||
// </div>
|
||||
// <div className={indicatorClass} />
|
||||
// </div>
|
||||
|
||||
<SubMenu
|
||||
key={`${menu.Node.ID}_${index}`}
|
||||
title={
|
||||
<span>
|
||||
<Icon type= {menu.Node.ICON ? menu.Node.ICON : "reconciliation"} title={menu.Node.NAME}></Icon>
|
||||
<span>{menu.Node.NAME}</span>
|
||||
</span>
|
||||
|
||||
}
|
||||
onTitleClick={() => {
|
||||
setCurrMenu(menu.Node);
|
||||
clickMenu()
|
||||
<div>
|
||||
<div className={`sider ${"shortMenuShow_overflow"}`}>
|
||||
<div className={`sider ${"shortMenuShow_overflowb"}`}>
|
||||
<div
|
||||
className="sider__shortMenuShowoverca"
|
||||
onClick={() => {
|
||||
clickMainMenu(1);
|
||||
navToHome();
|
||||
setMenuShow(false);
|
||||
}}
|
||||
|
||||
>
|
||||
{/* 二级 */}
|
||||
{menu.Children.map((menu1, index1) => {
|
||||
const isLevel4Menu = menu1.Children?.find(
|
||||
(mc) => mc.Children?.length
|
||||
);
|
||||
const childMenus = isLevel4Menu
|
||||
? [menu]
|
||||
: menu.Children || [];
|
||||
<Icon
|
||||
type="home"
|
||||
className={
|
||||
mainSilder == 1
|
||||
? "sider__shortMenuShowoverca-overcd"
|
||||
: "sider__shortMenuShowoverca-overc"
|
||||
}
|
||||
></Icon>
|
||||
<div className="sider__shortMenuShowoverca-title">首页</div>
|
||||
</div>
|
||||
{/* <div
|
||||
className="sider__shortMenuShowoverca"
|
||||
onClick={() => {
|
||||
clickMainMenu(2);
|
||||
setMenuShow(true);
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
type="profile"
|
||||
title="常用菜单"
|
||||
className={
|
||||
mainSilder == 2
|
||||
? "sider__shortMenuShowoverca-overcd"
|
||||
: "sider__shortMenuShowoverca-overc"
|
||||
}
|
||||
></Icon>
|
||||
</div> */}
|
||||
<div>
|
||||
{topMenus.menus.map((menu, index) => {
|
||||
return (
|
||||
<SubMenu
|
||||
key={`${menu1.Node.ID}_${index1}`}
|
||||
title={
|
||||
<span>
|
||||
<Icon type={menu1.Node.ICON ? menu1.Node.ICON : "reconciliation"}></Icon>
|
||||
<span>{ menu1.Node.NAME}</span>
|
||||
</span>
|
||||
|
||||
}
|
||||
<div
|
||||
className="sider__shortMenuShowoverca"
|
||||
onClick={() => {
|
||||
clickMainMenu(index + 2);
|
||||
setCurrMenu(menu.Node);
|
||||
clickMenu();
|
||||
setMenuShow(true);
|
||||
}}
|
||||
>
|
||||
{/* 三级 */}
|
||||
{menu1.Children.map((menu3, index3) => {
|
||||
return (
|
||||
<MenuItem key={`${menu3.Node.ID}_${index3}`} onClick={() =>
|
||||
isLevel4Menu
|
||||
? navToBackend(menu3.Node)
|
||||
: handleActiveMenu(menu3.Node)
|
||||
}
|
||||
title={menu3.Node.NAME}
|
||||
>
|
||||
<Icon type={menu3.Node.ICON ? menu3.Node.ICON : "file-text"} />
|
||||
|
||||
<span>{menu3.Node.NAME}</span>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</SubMenu>
|
||||
<Icon
|
||||
type={menu.Node.ICON ? menu.Node.ICON : "reconciliation"}
|
||||
title={menu.Node.NAME}
|
||||
className={
|
||||
mainSilder == index + 2
|
||||
? "sider__shortMenuShowoverca-overcd"
|
||||
: "sider__shortMenuShowoverca-overc"
|
||||
}
|
||||
></Icon>
|
||||
<div className="sider__shortMenuShowoverca-title">{menu.Node.NAME}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</SubMenu>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
|
||||
</div>
|
||||
<div onClick={toggleCollapsed}
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
display:'flex',
|
||||
alignItems:'center',
|
||||
position:'absolute',
|
||||
right:0,
|
||||
top:'40%',
|
||||
padding:'40px 0px',
|
||||
backgroundColor:'#DEE0E8',
|
||||
borderRadius:'6px',
|
||||
margin:'0px 0px 0px 0px',
|
||||
|
||||
}}>
|
||||
<Icon type={collapsed ? 'right' : 'left'} style={{
|
||||
fontSize:'12px',
|
||||
display:'flex',
|
||||
// alignItems:'right',
|
||||
// justifyContent:'flex-end'
|
||||
}} />
|
||||
</div>
|
||||
<div className="sider__outButton">
|
||||
<div
|
||||
className="sider__shortMenuShowovercae"
|
||||
onClick={() => {
|
||||
setMenuShow(!MenuShow);
|
||||
if(mainSilder == 1){ //禁止mainsilder为1--首页状态
|
||||
setMainSilder(2);
|
||||
}
|
||||
// if (MenuShow) {
|
||||
// setMainSilder(1);
|
||||
// } else {
|
||||
// setMainSilder(2);
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
type="import"
|
||||
className="sider__shortMenuShowoverca-overcd"
|
||||
></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
MenuShow
|
||||
? `sider ${"shortMenuShow_overflowc"}`
|
||||
: `sider ${"shortMenuShow_overflowcExpand"}`
|
||||
}
|
||||
>
|
||||
{/* <img
|
||||
src={require("././../assets/logo-slider.jpg")}
|
||||
style={{
|
||||
height: "80px",
|
||||
width: "auto",
|
||||
objectFit: "contain",
|
||||
marginTop: "10px",
|
||||
}}
|
||||
></img> */}
|
||||
<div className={`sider ${"__shortMenuShowChild"}`}>
|
||||
{/* {mainSilder == 2 ? (
|
||||
<div className={`sider ${"shortMenuShow_ChildPadding"}`}>
|
||||
{favorMenus.map((menu2, index2) => {
|
||||
return (
|
||||
<div
|
||||
// key={`${menu2.ID}_${index2}`}
|
||||
onClick={() => handleActiveMenu(menu2)}
|
||||
className="sider__shortMenuShowChild"
|
||||
>
|
||||
<Icon
|
||||
type={menu2.ICON ? menu2.ICON : "file-text"}
|
||||
className="sider__shortMenuShowChild-iconone"
|
||||
/>
|
||||
|
||||
<span className="sider__shortMenuShowChild-name">
|
||||
{menu2.NAME}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : ( */}
|
||||
<div className={`sider ${"shortMenuShow_ChildPadding"}`}>
|
||||
{menuCUR &&
|
||||
menuCUR.Children.map((menu2, index2) => {
|
||||
return (
|
||||
<div
|
||||
// key={`${menu2.ID}_${index2}`}
|
||||
className="sider__shortMenuShowFlex"
|
||||
>
|
||||
<div className="sider__shortMenuShowChildTwo">
|
||||
<Icon
|
||||
type={"caret-right"}
|
||||
className="sider__shortMenuShowChildTwo-iconri"
|
||||
/>
|
||||
<Icon
|
||||
type={
|
||||
menu2.Node.ICON ? menu2.Node.ICON : "file-text"
|
||||
}
|
||||
className="sider__shortMenuShowChildTwo-icon"
|
||||
/>
|
||||
|
||||
<span className="sider__shortMenuShowChildTwo-name">
|
||||
{menu2.Node.NAME}
|
||||
</span>
|
||||
</div>
|
||||
<div className="sider__shortMenuShowGrid">
|
||||
{menu2.Children.map((menu3, index3) => {
|
||||
return (
|
||||
<div
|
||||
key={`${menu3.Node.ID}_${index3}`}
|
||||
onClick={() => {
|
||||
handleActiveMenu(menu3.Node);
|
||||
}}
|
||||
title={menu3.Node.NAME}
|
||||
>
|
||||
<div className="sider__shortMenuShowChild">
|
||||
{/* <Icon
|
||||
type={"caret-right"}
|
||||
className="sider__shortMenuShowChild-iconritwo"
|
||||
/> */}
|
||||
<Icon
|
||||
type={
|
||||
menu3.Node.ICON
|
||||
? menu3.Node.ICON
|
||||
: "file-text"
|
||||
}
|
||||
className="sider__shortMenuShowChild-icontwo"
|
||||
/>
|
||||
|
||||
<span className="sider__shortMenuShowChild-nametwo">
|
||||
{menu3.Node.NAME}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* // )} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,85 +1,92 @@
|
||||
:global {
|
||||
@main-prefix: main;
|
||||
|
||||
.@{main-prefix} {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background-color: #f2f2f2;
|
||||
|
||||
&.float {
|
||||
.@{main-prefix}__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
position: absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
width : 100%;
|
||||
height : 52px;
|
||||
z-index : 999;
|
||||
}
|
||||
|
||||
&__body {
|
||||
position: relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding : 52px 0 0 82px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
|
||||
&-sider {
|
||||
// width : 256px;
|
||||
height : ~'calc(100% - 52px)';
|
||||
position: fixed;
|
||||
// top : 52px;
|
||||
top:52px;
|
||||
bottom: 0;
|
||||
left : 0;
|
||||
z-index : 998;
|
||||
overflow: auto;
|
||||
box-shadow : 0 0 8px rgba(0, 0, 0, 0.25);
|
||||
|
||||
|
||||
}
|
||||
&-sider ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&-content {
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
|
||||
&__body2 {
|
||||
position: relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
// padding : 52px 0 0 76px;
|
||||
|
||||
&-sider {
|
||||
width : 76px;
|
||||
height : ~'calc(100% - 52px)';
|
||||
position: absolute;
|
||||
top : 52px;
|
||||
left : 0;
|
||||
z-index : 998;
|
||||
}
|
||||
&-content {
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__backend {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding-top: 52px;
|
||||
@main-prefix: main;
|
||||
|
||||
.@{main-prefix} {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
background-color: #f4f7ff;
|
||||
|
||||
&.float {
|
||||
.@{main-prefix}__body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&__body {
|
||||
// position: relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding : 0px 0 0 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: calc(100% - 100px);
|
||||
}
|
||||
|
||||
&-sider {
|
||||
width : auto;
|
||||
height : 100%;
|
||||
position: fixed;
|
||||
// top : 52px;
|
||||
// top:52px;
|
||||
bottom: 0;
|
||||
left : 0;
|
||||
z-index : 998;
|
||||
overflow: auto;
|
||||
box-shadow : 0 0 8px rgba(0, 0, 0, 0.25);
|
||||
min-width: 90px;
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
&-sider ::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&-header {
|
||||
width : 100%;
|
||||
height : 52px;
|
||||
// z-index : 999;
|
||||
}
|
||||
&-content {
|
||||
width : 100%;
|
||||
height: ~'calc(100% - 52px)';
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
|
||||
&__body2 {
|
||||
position: relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
// padding : 52px 0 0 76px;
|
||||
|
||||
&-sider {
|
||||
width : 76px;
|
||||
height : ~'calc(100% - 52px)';
|
||||
position: absolute;
|
||||
top : 52px;
|
||||
left : 0;
|
||||
z-index : 998;
|
||||
}
|
||||
&-content {
|
||||
width : 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__backend {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
padding-top: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,373 +1,630 @@
|
||||
:global {
|
||||
@opacity-bg : #ffffff;//#f5f5f5菜单背景色
|
||||
@active-color: #0047FF;
|
||||
@sider-prefix: sider;
|
||||
.ant-menu-inline-collapsed {
|
||||
.ant-menu-item {
|
||||
padding: 5px 0px 5px 0px !important;
|
||||
.anticon {
|
||||
@opacity-bg: #55c596; //#f5f5f5菜单背景色
|
||||
@active-color: #0047ff;
|
||||
@sider-prefix: sider;
|
||||
.ant-menu-inline-collapsed {
|
||||
.ant-menu-item {
|
||||
padding: 5px 0px 5px 0px !important;
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-submenu .ant-menu-submenu-title {
|
||||
padding: 5px 0px 5px 0px !important;
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.ant-menu-inline {
|
||||
.ant-menu-submenu {
|
||||
.ant-menu-submenu-title {
|
||||
line-height: 30px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline{
|
||||
.ant-menu-submenu {
|
||||
.ant-menu-submenu-title{
|
||||
line-height: 20px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
.ant-menu-item {
|
||||
line-height: 18px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.ant-menu-submenu-popup {
|
||||
display: none;
|
||||
}
|
||||
.ant-menu-vertical {
|
||||
border-right: 0px;
|
||||
}
|
||||
.ant-menu-inline {
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
|
||||
.@{sider-prefix} {
|
||||
position : relative;
|
||||
width : 100%;
|
||||
height : 100%;
|
||||
// padding : 0 12px;
|
||||
background-color: @opacity-bg;
|
||||
transition : width .2s ease;
|
||||
// box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);
|
||||
|
||||
&.shortMenuShow {
|
||||
|
||||
height: 100%;
|
||||
// overflow: auto;
|
||||
// position: relative;
|
||||
background-color: #ffffff;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
.ant-menu-submenu .ant-menu-submenu-title {
|
||||
padding: 5px 0px 5px 0px !important;
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.shortMenuShow_overflow {
|
||||
width: 256;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
// width: ~'calc(100% - 12px)';
|
||||
}
|
||||
}
|
||||
.ant-menu-inline {
|
||||
.ant-menu-submenu {
|
||||
.ant-menu-submenu-title {
|
||||
line-height: 30px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&.shortMenuShow_overflow::-webkit-scrollbar {
|
||||
}
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
.ant-menu-submenu {
|
||||
.ant-menu-submenu-title {
|
||||
line-height: 20px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-menu-sub.ant-menu-inline {
|
||||
.ant-menu-item {
|
||||
line-height: 18px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.ant-menu-submenu-popup {
|
||||
display: none;
|
||||
}
|
||||
.ant-menu-vertical {
|
||||
border-right: 0px;
|
||||
}
|
||||
.ant-menu-inline {
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
.@{sider-prefix} {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding : 0 12px;
|
||||
// background-color: @opacity-bg;
|
||||
transition: width 0.2s ease;
|
||||
overflow: hidden;
|
||||
// overflow: auto;
|
||||
// box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);
|
||||
|
||||
&.shortMenuShow {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
// flex-direction: row;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&.shortMenuShow_overflow {
|
||||
// width: 250px;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-radius: 10px;
|
||||
// min-width: 200px;
|
||||
// width: ~'calc(100% - 12px)';
|
||||
}
|
||||
&.shortMenuShow_overflow::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&.shortMenuShow_overflowb {
|
||||
width: 100px;
|
||||
// height: 100%;
|
||||
padding-top: 100px;
|
||||
// display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #55c596;
|
||||
}
|
||||
|
||||
&.shortMenuShow_overflowc {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
width: 900px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
&.shortMenuShow_overflowcExpand {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
border-radius: 10px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
&.shortMenuShow_sliderChild {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
&.shortMenuShow_ChildPadding {
|
||||
padding: 60px 10px 40px 10px;
|
||||
margin-bottom: 40px;
|
||||
// background-color: #f3f4f6;
|
||||
// background: linear-gradient(
|
||||
// 90deg,
|
||||
// rgba(166, 226, 235, 0.2) 0%,
|
||||
// rgba(127, 190, 171, 0.2) 100%
|
||||
// );
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#55c596 0%,
|
||||
rgba(166, 226, 235, 0.2) 100%
|
||||
);
|
||||
overflow-y: auto;
|
||||
}
|
||||
&__outButton {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
&__shortMenuShowoverca {
|
||||
width: 100%;
|
||||
margin: 15px 0px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
&-overc {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
&-overcd {
|
||||
color: #55c596;
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #3ea178;
|
||||
}
|
||||
&-title {
|
||||
display: none;
|
||||
}
|
||||
&__menuAll,
|
||||
&__menu {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: flex-start;
|
||||
align-items : center;
|
||||
width : 100%;
|
||||
padding : 0 12px;
|
||||
cursor : pointer;
|
||||
overflow : hidden;
|
||||
}
|
||||
&__shortMenuShowovercae {
|
||||
width: 100%;
|
||||
margin: 15px 0px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
&-overc {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__menuAll {
|
||||
height : 61px;
|
||||
border-bottom: 1px solid #333333;//#333333菜单下划线颜色
|
||||
|
||||
&-icon {
|
||||
width : auto;
|
||||
height: 28px;
|
||||
}
|
||||
&-overcd {
|
||||
color: #55c596;
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #3ea178;
|
||||
}
|
||||
|
||||
&__menuExpand {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 100%;
|
||||
width : 0;
|
||||
height : 100%;
|
||||
transition : width .2s ease;
|
||||
background-color: @opacity-bg;
|
||||
box-shadow : 6px 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-divempty {
|
||||
position: absolute;
|
||||
top : -52px;
|
||||
left : -30%;
|
||||
height : 50px;
|
||||
width : 130%;
|
||||
}
|
||||
|
||||
&-divempty-hide {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
height : 100%;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
position : absolute;
|
||||
top : 0;
|
||||
left : 0;
|
||||
height : 100%;
|
||||
border-left: 1px solid #333333;//#333333
|
||||
}
|
||||
|
||||
&-divempty-right {
|
||||
position: relative;
|
||||
bottom : 100%;
|
||||
left : 100%;
|
||||
height : 100%;
|
||||
width : 200px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display : flex;
|
||||
}
|
||||
&__shortMenuShowoverca:hover {
|
||||
width: 100%;
|
||||
margin: 15px 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
&__shortMenuShowoverca:hover &__shortMenuShowoverca-overcd {
|
||||
color: #55c596;
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #3ea178;
|
||||
margin-left: 28px;
|
||||
}
|
||||
&__shortMenuShowoverca:hover &__shortMenuShowoverca-overc {
|
||||
color: #55c596;
|
||||
background-color: #fff;
|
||||
font-size: 24px;
|
||||
padding: 10px 10px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px 0px #3ea178;
|
||||
margin-left: 28px;
|
||||
}
|
||||
&__shortMenuShowoverca:hover &__shortMenuShowoverca-title {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
height: 44px;
|
||||
left: 72px;
|
||||
padding: 0px 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #55c596;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&__shortMenuShowGrid {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto;
|
||||
grid-template-columns: repeat(auto-fill, 170px);
|
||||
justify-content: space-between;
|
||||
// grid-gap: 5px;
|
||||
/* 声明了两行，行高分别为 50px 50px */
|
||||
// grid-template-rows: 50px;
|
||||
margin: 10px 20px 10px 70px;
|
||||
}
|
||||
&__shortMenuShowFlex {
|
||||
background-color: #fff;
|
||||
// border-top: 10px solid #f3f4f6;
|
||||
padding: 30px 0px 20px 0px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 30px;
|
||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
&__shortMenuShowChildTwo {
|
||||
line-height: 20px;
|
||||
height: 44px;
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&-iconri {
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
// background-color: #fff;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
}
|
||||
&-name {
|
||||
// background-color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2c5570;
|
||||
font-weight: bold;
|
||||
}
|
||||
&-icon {
|
||||
font-size: 20px;
|
||||
// width: 20px;
|
||||
background-color: #d4f4e8;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
color: #0cbf7c;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__shortMenuShowChild {
|
||||
line-height: 20px;
|
||||
// height: 44px;
|
||||
background-color: #fff;
|
||||
// background: linear-gradient(90deg, rgba(166,226,235,0.2) 0%, rgba(127,190,171,0.2) 100%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
margin: 10px 0px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
// justify-content: center;
|
||||
&-icontwo {
|
||||
font-size: 18px;
|
||||
// width: 20px;
|
||||
// background-color: #fff;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
color: #4791ff;
|
||||
background-color: #e0edff;
|
||||
// margin-left: 70px;
|
||||
}
|
||||
&-nametwo {
|
||||
// background-color: #fff;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// color: #2c5570;
|
||||
color: #303133;
|
||||
padding-right: 10px;
|
||||
// font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&__shortMenuShowChild:hover {
|
||||
// transform: scale(1.1);
|
||||
transform: translate(-5px , -5px);
|
||||
transition: all 0.5s ease 0s;
|
||||
box-shadow: 5px 5px 15px rgba(67,72,84,0.5);
|
||||
|
||||
}
|
||||
|
||||
&__position {
|
||||
background-color: #fff;
|
||||
height: 40px;
|
||||
}
|
||||
&__menuAll,
|
||||
&__menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__menuAll {
|
||||
height: 61px;
|
||||
border-bottom: 1px solid #333333; //#333333菜单下划线颜色
|
||||
|
||||
&-icon {
|
||||
width: auto;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
&__menuExpand {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 0.2s ease;
|
||||
background-color: @opacity-bg;
|
||||
box-shadow: 6px 0 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-divempty {
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -30%;
|
||||
height: 50px;
|
||||
width: 130%;
|
||||
}
|
||||
|
||||
&-divempty-hide {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
&-divider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
border-left: 1px solid #333333; //#333333
|
||||
}
|
||||
|
||||
&-divempty-right {
|
||||
position: relative;
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
// flex-wrap : nowrap;
|
||||
// width : 100%;
|
||||
// height : 61px;
|
||||
border-bottom: 1px solid #333333;//#333333菜单扩展处下划线颜色
|
||||
border-bottom: 1px solid #333333; //#333333菜单扩展处下划线颜色
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
width: 100%;
|
||||
height: ~"calc(100% - 140px)";
|
||||
padding: 12px 0;
|
||||
|
||||
&--scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 16px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&-body {
|
||||
width : 100%;
|
||||
height : ~'calc(100% - 140px)';
|
||||
padding: 12px 0;
|
||||
|
||||
&--scroll {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
justify-content: flex-start;
|
||||
align-items : flex-start;
|
||||
flex-wrap : wrap;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
|
||||
&--title {
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--scroll {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 82px;
|
||||
height: 100%;
|
||||
margin-right: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.@{sider-prefix}__menuExpand-menu--itemIcon,
|
||||
.@{sider-prefix}__menuExpand-menu--itemText {
|
||||
color: @active-color;
|
||||
}
|
||||
|
||||
.@{sider-prefix}__menuExpand-menu--indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
position : relative;
|
||||
height : 70px;
|
||||
padding : 4px;
|
||||
border : 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
|
||||
&--title {
|
||||
position: absolute;
|
||||
top : -24px;
|
||||
left : 0;
|
||||
}
|
||||
|
||||
&--scroll {
|
||||
font-size : 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&.lastChild {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
position : relative;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
&--item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
width : 82px;
|
||||
height : 100%;
|
||||
margin-right : 40px;
|
||||
cursor : pointer;
|
||||
|
||||
align-items: center;
|
||||
|
||||
&Icon {
|
||||
font-size: 12px;
|
||||
color: #333333; //#333333右侧扩展菜单图标颜色
|
||||
margin-right: 5px;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&Text {
|
||||
font-size: 16px;
|
||||
color: #333333; //#333333右侧扩展菜单字体颜色
|
||||
transition: color 0.2s ease;
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--indicator {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
width: 48px;
|
||||
height: 2px;
|
||||
background-color: @active-color;
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-subMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 20px;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&--title {
|
||||
font-size: 12px;
|
||||
color: #333333; //#ABABAB二级菜单颜色
|
||||
margin-bottom: 18px;
|
||||
cursor: pointer;
|
||||
|
||||
&--icon {
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--menu {
|
||||
width: 100%;
|
||||
// padding-left : 20px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
.@{sider-prefix}__menuExpand-menu--itemIcon,
|
||||
.@{sider-prefix}__menuExpand-menu--itemText {
|
||||
color: @active-color;
|
||||
}
|
||||
|
||||
.@{sider-prefix}__menuExpand-menu--indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.lastChild {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&--item {
|
||||
width : 100%;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: center;
|
||||
align-items : center;
|
||||
|
||||
&Icon {
|
||||
font-size : 12px;
|
||||
color : #333333;//#333333右侧扩展菜单图标颜色
|
||||
margin-right: 5px;
|
||||
transition : color .2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&Text {
|
||||
font-size : 16px;
|
||||
color : #333333;//#333333右侧扩展菜单字体颜色
|
||||
transition: color .2s ease;
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--indicator {
|
||||
position : absolute;
|
||||
bottom : 12px;
|
||||
width : 48px;
|
||||
height : 2px;
|
||||
background-color: @active-color;
|
||||
border-radius : 2px;
|
||||
opacity : 0;
|
||||
transition : opacity .2s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-subMenu {
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
padding-right : 20px;
|
||||
margin-bottom : 4px;
|
||||
overflow : hidden;
|
||||
|
||||
&--title {
|
||||
font-size : 12px;
|
||||
color : #333333;//#ABABAB二级菜单颜色
|
||||
margin-bottom: 18px;
|
||||
cursor : pointer;
|
||||
|
||||
&--icon {
|
||||
margin-left: 5px;
|
||||
font-size : 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @active-color;;
|
||||
}
|
||||
}
|
||||
|
||||
&--menu {
|
||||
width : 100%;
|
||||
// padding-left : 20px;
|
||||
margin-bottom : 20px;
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: flex-start;
|
||||
align-items : center;
|
||||
cursor : pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
.@{sider-prefix}__menuExpand-menu--itemIcon,
|
||||
.@{sider-prefix}__menuExpand-menu--itemText {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__scrollbars {
|
||||
width : 100%;
|
||||
height: ~'calc(100% - 61px)' !important;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
height : 28px;
|
||||
margin-top: 30px;
|
||||
|
||||
&:hover {
|
||||
|
||||
.@{sider-prefix}__menu-icon,
|
||||
.@{sider-prefix}__menu-font--text {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.lastChild {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size : 28px;
|
||||
color : #333333;//#333333左侧常用菜单图标颜色
|
||||
transition: color .2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-font {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
justify-content: flex-start;
|
||||
align-items : center;
|
||||
margin-left : 16px;
|
||||
|
||||
&--text {
|
||||
font-size : 16px;
|
||||
color : #333333;//#333333左侧常用菜单字体颜色
|
||||
margin-right: 4px;
|
||||
white-space : nowrap;
|
||||
transition : color .2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
font-size: 12px;
|
||||
color : #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__scrollbars {
|
||||
width: 100%;
|
||||
height: ~"calc(100% - 61px)" !important;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
height: 28px;
|
||||
margin-top: 30px;
|
||||
|
||||
&:hover {
|
||||
.@{sider-prefix}__menu-icon,
|
||||
.@{sider-prefix}__menu-font--text {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.lastChild {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 28px;
|
||||
color: #333333; //#333333左侧常用菜单图标颜色
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-font {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-left: 16px;
|
||||
|
||||
&--text {
|
||||
font-size: 16px;
|
||||
color: #333333; //#333333左侧常用菜单字体颜色
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
&.active {
|
||||
color: @active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
3454
src/routes/Home.js
3454
src/routes/Home.js
File diff suppressed because it is too large
Load Diff
@ -482,7 +482,7 @@ class LoginPage extends React.Component {
|
||||
<div className="login-page__footer">
|
||||
{/* <img src={require('../assets/login/footer_logo.png')} alt='OPT' /> */}
|
||||
<div className="login-page__footer-copyright">
|
||||
<p>Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司</p>
|
||||
<p>Copyright ©2024-2025 厦门鸣鹤管理咨询股份有限公司</p>
|
||||
</div>
|
||||
<div className="login-page__footer-qrcode">
|
||||
{/* <img src={require('../assets/login/footer_qrcode.png')} alt='二维码' />
|
||||
|
||||
@ -1,436 +1,306 @@
|
||||
/* 工作台调整样式 */
|
||||
:global(.dashboard-div-style){
|
||||
height: 100%;
|
||||
width:100%;
|
||||
border-radius:10px;
|
||||
background-color:white;
|
||||
min-height: 20px;
|
||||
}
|
||||
:global(.redTableCell){
|
||||
background: #e6f7ff;
|
||||
}
|
||||
:global(.bi001-table){
|
||||
:global(.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td){
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
:global(.home-rate) {
|
||||
width: calc(50% - 10px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:global(.home-userInfo-tabs) {
|
||||
background-color: #eefff8;
|
||||
color: #55c596;
|
||||
padding: 3px 10px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid #55c596;
|
||||
}
|
||||
:global(.home-userInfo-card) {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
:global(.home-userInfo) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fafafa;
|
||||
padding: 10px 30px 10px 10px;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
width: calc(25% - 10px);
|
||||
}
|
||||
:global(.home-userInfo-pad) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(.slide-style){
|
||||
/* margin-bottom: 10px; */
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color:#de4e58;
|
||||
/* -webkit-text-stroke: #E38C7A 1px; */
|
||||
/* padding-left:30px; */
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
:global(.slide-icon-style){
|
||||
/* padding: 0px 20px; */
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
:global(.slide-content){
|
||||
margin-bottom: 10px;
|
||||
background: #ffffff;
|
||||
/* padding-left:30px; */
|
||||
padding: 0px 30px;
|
||||
box-sizing: border-box;
|
||||
border-radius:4px;
|
||||
height:50px;
|
||||
line-height:50px;
|
||||
/* border:1px solid red; */
|
||||
/* overflow:hidden; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);
|
||||
/* min-width: 100px; */
|
||||
}
|
||||
|
||||
:global(.slide-text-style){
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
white-space:nowrap;
|
||||
animation: slide-text-style 20s linear 1s infinite ;
|
||||
width:'auto';
|
||||
align-items: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@keyframes slide-text-style{
|
||||
0%{margin-left:100%;}
|
||||
100%{margin-left:-1200px;}
|
||||
}
|
||||
|
||||
|
||||
:global(.slick-prev){
|
||||
padding: 2px 0px 0px 0px !important;
|
||||
}
|
||||
:global(.slick-next){
|
||||
padding: 2px 0px 0px 0px !important;
|
||||
}
|
||||
:global(.slick-dots){
|
||||
position: absolute!important;
|
||||
bottom: 20px!important;
|
||||
z-index: 100;
|
||||
}
|
||||
:global(.slick-prev){
|
||||
background-color: rgb(50,150,250) !important;
|
||||
left: 8px !important;
|
||||
z-index: 100 !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
:global(.slick-next){
|
||||
background-color: rgb(50,150,250) !important;
|
||||
right: 8px !important;
|
||||
z-index: 100 !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
:global(.score-title-style){
|
||||
font-size: 14pt;
|
||||
padding-top: 18px;
|
||||
color: red;
|
||||
text-align: center;
|
||||
min-width: 110px;
|
||||
}
|
||||
|
||||
:global(.score-num-style){
|
||||
font-size: 60pt;
|
||||
font-weight: bold;
|
||||
margin-top: 14px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.score-icon-style){
|
||||
font-size: 30pt;
|
||||
margin-top: -64px;
|
||||
color: white;
|
||||
float: right;
|
||||
}
|
||||
|
||||
:global(.backlog-title-style){
|
||||
font-size: 14pt;
|
||||
margin-left: 22px;
|
||||
padding-top: 10px;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
/* min-width: 120px; */
|
||||
}
|
||||
:global(.backlog-icontitle-style){
|
||||
font-size: 32px;
|
||||
margin-left: 22px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
margin-top: 22px;
|
||||
}
|
||||
:global(.backlog-icontitle-style1){
|
||||
font-size: 32px;
|
||||
margin-left: 24px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
margin-top: 22px;
|
||||
}
|
||||
:global(.backlog-icontitle-style2){
|
||||
font-size: 32px;
|
||||
margin-left: 18px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
margin-top: 22px;
|
||||
}
|
||||
:global(.backlog-icontitle-style3){
|
||||
font-size: 32px;
|
||||
margin-left: 22px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
margin-top: 22px;
|
||||
}
|
||||
:global(.backlog-icontitle-style4){
|
||||
font-size: 32px;
|
||||
margin-left: 18px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
margin-top: 22px;
|
||||
}
|
||||
:global(.backlog-icon-score){
|
||||
font-size: 32px;
|
||||
/* margin-left: 22px; */
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
/* margin-top: 22px; */
|
||||
}
|
||||
|
||||
:global(.backlog-title-score){
|
||||
font-size: 14pt;
|
||||
margin-left: 12px;
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
}
|
||||
|
||||
:global(.backlog-scoretitle-style){
|
||||
font-size: 32px;
|
||||
/* margin-left: 22px; */
|
||||
/* padding-top: 10px; */
|
||||
color: white;
|
||||
/* min-width: 120px; */
|
||||
/* margin-top: 20px; */
|
||||
margin: 9px 0px 9px 22px;
|
||||
}
|
||||
:global(.backlog-score-wrap){
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20px 0px 0px 0px;
|
||||
}
|
||||
|
||||
|
||||
:global(.backlog-icon-title){
|
||||
font-size: 14pt;
|
||||
margin-left: 10px;
|
||||
/* padding-top: 10px; */
|
||||
color: #333333;
|
||||
/* min-width: 120px; */
|
||||
/* margin-top: 22px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.backlog-background-style){
|
||||
background: linear-gradient(135deg, #75baf3,#2177d5);
|
||||
}
|
||||
:global(.backlog-background-style1){
|
||||
background: linear-gradient(135deg, #ffa94d,#f76707);
|
||||
}
|
||||
:global(.backlog-background-style2){
|
||||
background:linear-gradient(135deg, #99ca6e,#48a447);
|
||||
/* linear-gradient(135deg, #aab5e2,#5f6ac2); */
|
||||
}
|
||||
:global(.backlog-background-style3){
|
||||
background: linear-gradient(135deg, #ffe066,#fcc419);
|
||||
}
|
||||
:global(.backlog-background-style4){
|
||||
background: linear-gradient(135deg, rgb(245, 121, 118),#c92a2a);
|
||||
/*#ea9a99,#de4e58 */
|
||||
}
|
||||
|
||||
:global(.backlog-title-style2){
|
||||
font-size: 12pt;
|
||||
margin-left: 10px;
|
||||
padding-top: 2px;
|
||||
color: white;
|
||||
min-width: 500px;
|
||||
}
|
||||
:global(.backlog-style){
|
||||
font-size: 28pt;
|
||||
font-weight: bold;
|
||||
margin-left:22px;
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
}
|
||||
:global(.backlog-style-score){
|
||||
|
||||
/* margin-left:22px; */
|
||||
color: white;
|
||||
/* margin-top: 5px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0px 20px 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 38pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
:global(.score-title){
|
||||
font-size: 16pt;
|
||||
/* font-weight: bold; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* margin-left:22px; */
|
||||
}
|
||||
:global(.score-content){
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:global(.score-num){
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
:global(.home-userInfo-Icon) {
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
:global(.home-userInfo-title) {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:global(.home-userInfo-content) {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
/* margin-right: 20px; */
|
||||
}
|
||||
:global(.home-always-title) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 10px 10px 0px;
|
||||
}
|
||||
:global(.home-always-left) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.home-always-badge) {
|
||||
width: 4px;
|
||||
height: 19px;
|
||||
background-color: #4f69e9;
|
||||
border-radius: 3px;
|
||||
margin-top: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
:global(.home-always-name) {
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
}
|
||||
:global(.home-always-icon) {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
:global(.backlog-style4){
|
||||
font-size: 28pt;
|
||||
font-weight: bold;
|
||||
margin-left:22px;
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
}
|
||||
:global(.backlog-style2){
|
||||
font-size: 20pt;
|
||||
font-weight: bold;
|
||||
margin-left:10px;
|
||||
color: white;
|
||||
margin-top: -8px;
|
||||
}
|
||||
:global(.backlog-style3){
|
||||
font-size: 16pt;
|
||||
font-weight: bold;
|
||||
margin-left:10px;
|
||||
color: white;
|
||||
margin-top: -8px;
|
||||
}
|
||||
:global(.notice-title-style){
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 16pt;
|
||||
margin-left: 20px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
:global(.notice-title-style span){
|
||||
float: right;
|
||||
margin-right: 48px;
|
||||
font-size: 14pt;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
:global(.notice-content-style ){
|
||||
color: white;
|
||||
line-height: 38px;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 12pt;
|
||||
}
|
||||
:global(.notice-content-style span){
|
||||
margin-right: 16px;
|
||||
}
|
||||
:global(.statistical-title-style){
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
padding: 8px 0px 8px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.statistical-title-style2){
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
padding: 8px 0px 0px 20px;
|
||||
}
|
||||
:global(.badge-style){
|
||||
/* background: #ffffff;
|
||||
border: 2px solid #5f6ac2;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
margin-right:8px;
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
top: -2px; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.backlog-icon-style){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 45%;
|
||||
width: 30px;
|
||||
}
|
||||
:global(.backlog-icon-style2){
|
||||
position: relative;
|
||||
/* top: -2px; */
|
||||
/* width: 10px; */
|
||||
}
|
||||
:global(.backlog-icon-style3){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: calc(50% - 20px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 10px solid #3b8bde;
|
||||
}
|
||||
:global(.backlog-icon-style4){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: calc(50% - 20px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 10px solid #fa7b1c;
|
||||
}
|
||||
:global(.backlog-icon-style5){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: calc(50% - 20px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 10px solid #5faf52;
|
||||
}
|
||||
:global(.backlog-icon-style6){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: calc(50% - 20px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 10px solid #fdcc2e;
|
||||
}
|
||||
:global(.backlog-icon-style7){
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: calc(50% - 20px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
border-top: 10px solid #c92a2a;
|
||||
}
|
||||
.sideContent :global(.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title){
|
||||
padding: 0 10px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sideContent :global(.ant-menu-inline-collapsed){
|
||||
width: inherit!important;
|
||||
}
|
||||
.IndexPageTabs{
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.IndexPageTabs :global(.ant-tabs-bar){
|
||||
background-color: #ecf4f6;
|
||||
padding: 0 10px;
|
||||
}
|
||||
/* :global(.header .IndexPage__loginMenu___xUJI4 span) {
|
||||
vertical-align: baseline!important;
|
||||
} */
|
||||
:global(.ant-select-combobox .ant-select-search__field) {
|
||||
z-index: auto!important;
|
||||
}
|
||||
:global(.badge-style) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(.home-tech-col) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:global(.home-tech-back) {
|
||||
background-color: #fafafa;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
:global(.home-tech-icon) {
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
}
|
||||
:global(.home-tech-name) {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
margin-top: 5px;
|
||||
}
|
||||
:global(.home-row) {
|
||||
width: 100%;
|
||||
height: calc(35% - 70px);
|
||||
display: flex;
|
||||
padding: 0px 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.home-rank) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
:global(.home-rank-index) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 40px;
|
||||
color: #eac088;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
:global(.home-rank-name) {
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
margin-right: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
:global(.home-img) {
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
:global(.home-rank > .ant-progress .ant-progress-text) {
|
||||
margin-left: 30px;
|
||||
}
|
||||
:global(.home-job-title) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.home-job-icon) {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin-right: 5px;
|
||||
}
|
||||
:global(.home-job-content) {
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto;
|
||||
grid-template-columns: repeat(auto-fill, 30%);
|
||||
justify-content: space-between;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
:global(.home-work-wrap) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 20px;
|
||||
/* background-color: #fafafa; */
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
background: url("./../assets/home/prepare2.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
/* align-items: center; */
|
||||
}
|
||||
:global(.home-work-wrap-overtime) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 20px;
|
||||
/* background-color: #fafafa; */
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
background: url("./../assets/home/overtime.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
/* align-items: center; */
|
||||
}
|
||||
:global(.home-work-wrap-over) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 20px;
|
||||
/* background-color: #fafafa; */
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
background: url("./../assets/home/over.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
/* align-items: center; */
|
||||
}
|
||||
:global(.home-work-wrap-warn) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 20px;
|
||||
/* background-color: #fafafa; */
|
||||
margin-bottom: 20px;
|
||||
border-radius: 15px;
|
||||
background: url("./../assets/home/warn.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
/* align-items: center; */
|
||||
}
|
||||
:global(.home-work-more) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 25px;
|
||||
/* background-color: #fafafa; */
|
||||
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
color: #2177d5;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
border-radius: 15px;
|
||||
/* font-weight: bold; */
|
||||
justify-content: space-between;
|
||||
}
|
||||
:global(.home-more-icon) {
|
||||
font-size: 12px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
:global(.home-work-icon) {
|
||||
padding: 3px 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
:global(.home-work-right) {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 71px);
|
||||
}
|
||||
:global(.home-work-top) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
:global(.home-work-type-red) {
|
||||
background-color: #ffeff0;
|
||||
color: #ff3838;
|
||||
padding: 3px 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-type-yellow) {
|
||||
background-color: #fff8ee;
|
||||
color: #ffab2b;
|
||||
padding: 3px 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-type-black) {
|
||||
background-color: #eef6eb;
|
||||
color: #6dd230;
|
||||
padding: 3px 8px;
|
||||
margin-right: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-person) {
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
:global(.home-work-title) {
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
padding: 5px 0px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
:global(.home-work-date) {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
}
|
||||
:global(.home-work-detail) {
|
||||
color: #2177d5;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
:global(.home-chart) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: calc(50% - 10px);
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user