Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
R
report-html-template
概览
Overview
Details
Activity
Cycle Analytics
版本库
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
问题
0
Issues
0
列表
Board
标记
里程碑
合并请求
0
Merge Requests
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
Snippets
成员
Collapse sidebar
Close sidebar
活动
图像
聊天
创建新问题
作业
提交
Issue Boards
Open sidebar
frontend
report-html-template
Commits
e7efeaff
Commit
e7efeaff
authored
Jun 02, 2023
by
Tippi.Rao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
文件重命名
parent
142b2cf4
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
1128 行增加
和
1121 行删除
+1128
-1121
report-ioc.css
+147
-921
report-ioc.html
+31
-28
report.css
+921
-147
report.html
+29
-25
没有找到文件。
report-
multi
.css
→
report-
ioc
.css
查看文件 @
e7efeaff
html
{
border
:
3px
solid
rgba
(
255
,
255
,
255
,
0.15
);
background-color
:
#152235
;
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
99vh
;
}
@media
screen
and
(
min-width
:
1651px
)
{
}
height
:
99vh
;
position
:
relative
;
}
body
{
/* opacity: 0.15; */
font-size
:
28px
;
}
.left-top
{
width
:
9px
;
...
...
@@ -51,18 +47,8 @@ body {
transform
:
translateX
(
-50%
);
}
.report-title-bg
>
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
23.57rem
;
height
:
2.8rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
504px
;
height
:
51px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
780px
;
height
:
82px
;
}
width
:
504px
;
height
:
51px
;
}
.report-title
{
position
:
absolute
;
...
...
@@ -73,198 +59,79 @@ body {
}
.report-title-time
{
color
:
#37f1e7
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
36px
;
}
font-size
:
24px
;
margin-right
:
10px
;
}
.report-title-info
{
color
:
#ffffff
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
36px
;
}
font-size
:
24px
;
}
.invest-wrapper
{
@media
screen
and
(
max-width
:
750px
)
{
margin-top
:
3.75rem
;
margin-left
:
2.4rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-top
:
70px
;
margin-left
:
47px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-top
:
120px
;
margin-left
:
72px
;
}
margin-top
:
70px
;
margin-left
:
47px
;
}
.invest-wrapper-title
{
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
1.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
27px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
30px
;
}
margin-bottom
:
27px
;
}
.invest-wrapper
.invest-wrapper-title
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
6rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
110px
;
height
:
25px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
168px
;
height
:
38px
;
}
width
:
110px
;
height
:
25px
;
}
.invest-wrapper-content
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
font-size
:
18px
;
position
:
relative
;
display
:
inline-block
;
}
.invest-wrapper-flex
{
@media
screen
and
(
min-width
:
751px
)
{
display
:
flex
;
}
display
:
flex
;
}
.invest-wrapper-left-bracket
img
{
position
:
absolute
;
left
:
0
;
top
:
0
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
width
:
6px
;
height
:
43px
;
}
.invest-wrapper-right-bracket
img
{
position
:
absolute
;
right
:
0
;
top
:
0
;
margin-left
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.42rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
width
:
6px
;
height
:
43px
;
}
.invest-wrapper-content-first-text
{
display
:
inline-block
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0.32rem
;
margin-top
:
0.32rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
10px
;
margin-top
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
margin-top
:
12px
;
}
margin-left
:
10px
;
margin-top
:
8px
;
}
.invest-wrapper-content-second-text
{
display
:
inline-block
;
}
.invest-wrapper-content-last-text
{
display
:
inline-block
;
@media
screen
and
(
max-width
:
750px
)
{
margin-right
:
0.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-right
:
20px
;
}
margin-right
:
10px
;
}
.invest-wrapper-content-customers
{
color
:
#ff6464
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.5rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
42px
;
}
font-size
:
24px
;
}
.invest-wrapper-content-left
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
28px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
font-size
:
28px
;
}
.invest-wrapper-content-left-item
{
display
:
flex
;
@media
screen
and
(
max-width
:
1650px
)
{
margin-bottom
:
4px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
10px
;
}
margin-bottom
:
4px
;
}
.invest-wrapper-content-left-item-img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.21rem
;
height
:
1.68rem
;
margin-right
:
0.82rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
170px
;
height
:
30px
;
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
258px
;
height
:
47px
;
margin-right
:
20px
;
}
width
:
170px
;
height
:
30px
;
margin-right
:
10px
;
text-align
:
center
;
}
...
...
@@ -273,66 +140,25 @@ body {
height
:
100%
;
}
.invest-wrapper-content-left-item-line
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
4.54rem
;
height
:
0.5rem
;
margin-top
:
0.64rem
;
margin-right
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
82px
;
height
:
7px
;
margin-top
:
9px
;
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
127px
;
height
:
14px
;
margin-top
:
18px
;
margin-right
:
20px
;
}
width
:
82px
;
height
:
7px
;
margin-top
:
9px
;
margin-right
:
10px
;
}
.invest-wrapper-content-left-item-type
{
color
:
#fff
;
opacity
:
0.7
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
width
:
4.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
font-size
:
18px
;
margin-right
:
45px
;
}
.invest-wrapper-content-left-item-num
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
22px
;
font-weight
:
700
;
}
.invest-wrapper-content-right
{
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0
;
margin-top
:
1.79rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
130px
;
margin-top
:
40px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
184px
;
margin-top
:
60px
;
}
margin-left
:
130px
;
margin-top
:
40px
;
}
.invest-wrapper-content-red-triangle
{
width
:
0
;
...
...
@@ -353,33 +179,16 @@ body {
left
:
0
;
top
:
0
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
4.07rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
73px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
114px
;
}
width
:
6px
;
height
:
73px
;
}
.invest-wrapper-right-bracket-big
img
{
position
:
absolute
;
right
:
0
;
top
:
0
;
margin-left
:
10px
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
6px
;
height
:
73px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
114px
;
}
width
:
6px
;
height
:
73px
;
}
.invest-wrapper-left-bracket-middle
{
...
...
@@ -393,18 +202,8 @@ body {
left
:
0
;
top
:
0
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
3.73
pxpx
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
width
:
3.73
pxpx
;
height
:
43px
;
}
.invest-wrapper-right-bracket-middle
img
{
...
...
@@ -412,18 +211,8 @@ body {
right
:
0
;
top
:
0
;
margin-left
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
3.73
pxpx
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
width
:
3.73
pxpx
;
height
:
43px
;
}
.invest-wrapper-content-green-triangle
{
...
...
@@ -436,85 +225,38 @@ body {
}
.operator-wrapper
{
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
2.88rem
;
margin-top
:
1.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
{
margin-left
:
47px
;
margin-top
:
26px
;
}
@media
screen
and
(
min-width
:
1651px
)
and
(
min-width
:
751px
)
{
margin-left
:
72px
;
margin-top
:
36px
;
}
margin-left
:
47px
;
margin-top
:
26px
;
display
:
relative
;
}
.operator-wrapper-title
{
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
1.07rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
30px
;
}
margin-bottom
:
30px
;
}
.operator-wrapper-title
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
6rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
110px
;
height
:
25px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
168px
;
height
:
38px
;
}
width
:
110px
;
height
:
25px
;
}
.operator-wrapper-content
{
display
:
flex
;
flex-wrap
:
wrap
;
}
.operator-wrapper-content-box
{
@media
screen
and
(
max-width
:
1650px
)
{
margin-right
:
30px
;
margin-bottom
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-right
:
40px
;
margin-bottom
:
30px
;
}
margin-right
:
30px
;
margin-bottom
:
18px
;
position
:
relative
;
}
.operator-wrapper-content-box-title
{
color
:
#37f1e7
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
16px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
24px
;
}
font-size
:
16px
;
/* margin-bottom: 10px; */
margin-left
:
28px
;
}
.operator-wrapper-content-box-chart
{
/* width: 472px; */
/* height: 170px; */
@media
screen
and
(
max-width
:
750px
)
{
height
:
7.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
120px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
height
:
120px
;
position
:
relative
;
background-size
:
cover
;
padding-top
:
4px
;
...
...
@@ -522,15 +264,7 @@ body {
display
:
flex
;
}
.operator-wrapper-content-box-progress
{
@media
screen
and
(
max-width
:
750px
)
{
height
:
12rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
137px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
height
:
137px
;
position
:
relative
;
background-size
:
cover
;
...
...
@@ -539,125 +273,44 @@ body {
display
:
flex
;
}
.electricity-box-progress
{
@media
screen
and
(
max-width
:
750px
)
{
height
:
7.6rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
137px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
height
:
137px
;
position
:
relative
;
background-size
:
cover
;
padding-top
:
4px
;
box-sizing
:
border-box
;
display
:
flex
;
}
.repair-requir-info
{
@media
screen
and
(
max-width
:
750px
)
{
display
:
block
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
display
:
flex
;
}
@media
screen
and
(
min-width
:
1651px
)
{
display
:
flex
;
}
}
.advise-wrapper
{
@media
screen
and
(
max-width
:
1650px
)
{
margin-left
:
47px
;
margin-top
:
14px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
72px
;
margin-top
:
20px
;
}
margin-left
:
47px
;
margin-top
:
14px
;
display
:
relative
;
}
.advise-wrapper-title
{
margin-bottom
:
10px
;
}
.advise-wrapper-title
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.18rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
140px
;
height
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
257px
;
height
:
38px
;
}
width
:
140px
;
height
:
24px
;
}
.advise-wrapper-content-item
{
display
:
flex
;
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
0.57rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
16px
;
}
margin-bottom
:
8px
;
}
.advise-wrapper-content-item
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.71rem
;
height
:
0.71rem
;
margin-right
:
0.71rem
;
margin-top
:
0.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
13px
;
height
:
13px
;
margin-right
:
13px
;
margin-top
:
6px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
20px
;
height
:
20px
;
margin-right
:
20px
;
margin-top
:
10px
;
}
width
:
13px
;
height
:
13px
;
margin-right
:
13px
;
margin-top
:
6px
;
}
.advise-wrapper-content-item-text
{
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
font-size
:
18px
;
color
:
#fff
;
opacity
:
0.7
;
}
.chart-area
{
@media
screen
and
(
max-width
:
750px
)
{
/* width: 5rem;
height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
140px
;
height
:
140px
;
margin
:
12px
24px
20px
28px
;
}
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
padding
:
14px
14px
;
box-sizing
:
border-box
;
...
...
@@ -666,20 +319,8 @@ body {
}
.circle-bar
{
font-size
:
200px
;
@media
screen
and
(
max-width
:
750px
)
{
/* width: 4rem;
height: 4rem; */
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
width
:
72px
;
height
:
72px
;
position
:
relative
;
/* background-color: #333; */
...
...
@@ -687,20 +328,8 @@ body {
}
.circle-bar-left
,
.circle-bar-right
{
@media
screen
and
(
max-width
:
750px
)
{
/* width: 4rem;
height: 4rem; */
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
width
:
72px
;
height
:
72px
;
/* background-color: #eee; */
background-color
:
#2c3849
;
...
...
@@ -710,45 +339,15 @@ body {
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right
{
@media
screen
and
(
max-width
:
750px
)
{
/* clip: rect(0, auto, auto, 2rem); */
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
.circle-bar-left
{
@media
screen
and
(
max-width
:
750px
)
{
/* clip: rect(0, 2rem, auto, 0); */
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
.mask
{
@media
screen
and
(
max-width
:
750px
)
{
/* width: 3.2rem;
height: 3.2rem; */
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
width
:
60px
;
height
:
60px
;
background-color
:
#0c0e14
;
text-align
:
center
;
...
...
@@ -756,24 +355,9 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color
:
rgba
(
255
,
255
,
255
);
}
.mask
:first-child
{
@media
screen
and
(
max-width
:
750px
)
{
/* font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem; */
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
display
:
block
;
}
...
...
@@ -781,18 +365,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2
{
/* width: 112px;
height: 112px; */
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
width
:
72px
;
height
:
72px
;
/* background-color: #eee; */
background-color
:
#2c3849
;
}
...
...
@@ -801,79 +375,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right-2
{
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
.circle-bar-left-2
{
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
.second-mask
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
width
:
60px
;
height
:
60px
;
background-color
:
#0c0e14
;
text-align
:
center
;
line-height
:
22.4px
;
color
:
rgba
(
255
,
255
,
255
);
}
.second-mask
:first-child
{
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
display
:
block
;
}
.circle-bar-3
{
font-size
:
200px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
width
:
72px
;
height
:
72px
;
position
:
relative
;
background
:
#f3be28
;
}
...
...
@@ -895,79 +421,31 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3
,
.circle-bar-right-3
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
width
:
72px
;
height
:
72px
;
/* background-color: #eee; */
background-color
:
#2c3849
;
}
.circle-bar-right-3
{
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
.circle-bar-left-3
{
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
.third-mask
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
width
:
60px
;
height
:
60px
;
background-color
:
#0c0e14
;
text-align
:
center
;
line-height
:
22.4px
;
color
:
rgba
(
255
,
255
,
255
);
}
.third-mask
:first-child
{
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
display
:
block
;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
...
...
@@ -986,18 +464,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent-text
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.79rem
;
margin-top
:
1.79rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
margin-top
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
22px
;
margin-top
:
50px
;
}
font-size
:
18px
;
margin-top
:
30px
;
opacity
:
0.7
;
}
...
...
@@ -1007,82 +475,34 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.89rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
165px
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
277px
;
height
:
27px
;
}
width
:
165px
;
height
:
18px
;
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.chart-desc-other
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
10.46rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
175px
!important
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
293px
;
height
:
27px
;
}
width
:
175px
!important
;
height
:
18px
;
}
.chart-desc-task
{
position
:
relative
;
display
:
flex
;
@media
screen
and
(
max-width
:
750px
)
{
margin-top
:
1.07rem
;
width
:
9.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-top
:
10px
;
width
:
160px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-top
:
30px
;
width
:
260px
;
}
margin-top
:
10px
;
width
:
160px
;
}
.chart-desc-text
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
margin-left
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
margin-left
:
8px
;
margin-top
:
4px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
margin-left
:
20px
;
}
font-size
:
18px
;
margin-left
:
8px
;
margin-top
:
4px
;
}
.chart-desc-value
{
margin-left
:
auto
;
margin-right
:
10px
;
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
22px
;
font-weight
:
700
;
}
...
...
@@ -1091,33 +511,15 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-unfinished-value
{
color
:
#ff6464
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
22px
;
font-weight
:
700
;
margin-left
:
auto
;
margin-right
:
10px
;
}
.chart-desc-daily-legend
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.43rem
;
height
:
0.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
8px
;
height
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
12px
;
height
:
12px
;
}
width
:
8px
;
height
:
8px
;
background
:
rgba
(
92
,
179
,
255
,
0.302
);
opacity
:
1
;
border
:
2px
solid
#5cb3ff
;
...
...
@@ -1125,18 +527,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left
:
20px
;
}
.chart-desc-handle-legend
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.43rem
;
height
:
0.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
8px
;
height
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
12px
;
height
:
12px
;
}
width
:
8px
;
height
:
8px
;
background
:
rgba
(
255
,
100
,
100
,
0.302
);
opacity
:
1
;
border
:
2px
solid
#ff6464
;
...
...
@@ -1148,52 +540,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-chart
{
background
:
url("./assets/repair-require-bg.png")
no-repeat
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
width
:
115px
;
height
:
115px
;
background-size
:
cover
;
}
.repair-require-chart-wrapper
{
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
width
:
115px
;
height
:
115px
;
}
.contract-chart
{
background
:
url("./assets/contract-bg.png")
no-repeat
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
width
:
115px
;
height
:
115px
;
background-size
:
cover
;
}
.contract-chart-wrapper
{
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
width
:
115px
;
height
:
115px
;
}
.top-left
{
...
...
@@ -1229,153 +593,51 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right
:
0
;
}
.repair-require-info
{
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
margin-left
:
10px
;
margin-top
:
10px
;
}
.repair-require-info
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
4.82rem
;
height
:
4.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
65px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
100px
;
height
:
92px
;
}
width
:
65px
;
height
:
60px
;
}
.repair-require-info-text
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.86rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
margin-left
:
8px
;
}
.repair-require-info-text
span
{
font-weight
:
700
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
18px
;
text-align
:
center
;
}
.electricity-info-text
{
color
:
#ff6464
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.86rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
margin-left
:
8px
;
}
.electricity-info-text
span
{
font-weight
:
700
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
18px
;
text-align
:
center
;
}
.chart-data
{
position
:
relative
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
10.55rem
;
margin-left
:
1.39rem
;
margin-top
:
0.36rem
;
margin-bottom
:
0.8rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
180px
;
margin-left
:
20px
;
margin-top
:
20px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
260px
;
margin-left
:
55px
;
margin-top
:
20px
;
}
}
.chart-data
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
11rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
165px
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
277px
;
height
:
27px
;
}
margin-top
:
20px
;
width
:
180px
;
margin-left
:
20px
;
}
.bar-data
{
position
:
relative
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
1.96rem
;
margin-top
:
-1.25rem
;
width
:
10.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
20px
;
margin-top
:
-20px
;
width
:
180px
;
}
@media
screen
and
(
min-width
:
1651px
)
and
(
min-width
:
751px
)
{
margin-left
:
55px
;
margin-top
:
-35px
;
width
:
260px
;
}
margin-left
:
20px
;
margin-top
:
-20px
;
width
:
180px
;
}
.bar-data-2
{
position
:
relative
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
1.96rem
;
margin-top
:
0.35rem
;
width
:
10.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
20px
;
margin-top
:
10px
;
width
:
180px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
55px
;
margin-top
:
10px
;
width
:
260px
;
}
margin-left
:
20px
;
margin-top
:
10px
;
width
:
180px
;
}
.chart-data-text
{
display
:
flex
;
...
...
@@ -1383,33 +645,17 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-title
{
color
:
#fff
;
opacity
:
0.8
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
16px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
font-size
:
16px
;
}
.chart-data-text-num
{
color
:
#fff
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
margin-right
:
2rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
margin-right
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-size
:
22px
;
margin-right
:
30px
;
margin-left
:
auto
;
}
.return-rate
{
/* background: linear-gradient(#00d8ff, #00b6ff); */
color
:
#00d8ff
;
width
:
260px
;
}
...
...
@@ -1420,18 +666,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value
:
0%
;
}
.g-progress
{
@media
screen
and
(
max-width
:
750px
)
{
margin
:
0
;
width
:
9.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
167px
;
margin
:
auto
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
256px
;
margin
:
auto
;
}
margin
:
auto
;
width
:
167px
;
height
:
9px
;
border-radius
:
25px
;
...
...
@@ -1445,18 +681,8 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition
:
0.3s
--progress
;
}
.assign-progress
{
@media
screen
and
(
max-width
:
750px
)
{
margin
:
0
;
width
:
9.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
166px
;
margin
:
auto
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
256px
;
margin
:
auto
;
}
margin
:
auto
;
width
:
166px
;
height
:
9px
;
border-radius
:
25px
;
...
...
report-
multi
.html
→
report-
ioc
.html
查看文件 @
e7efeaff
...
...
@@ -8,7 +8,7 @@
<!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
-->
<link
rel=
"stylesheet"
href=
"report-
multi
.css"
/>
<link
rel=
"stylesheet"
href=
"report-
ioc
.css"
/>
</head>
<body>
...
...
@@ -316,38 +316,36 @@
<img
src=
"./assets/repair-requir-icon.png"
/>
<div
class=
"repair-require-info-text"
><span>
389
</span>
个
</div>
</div>
<div
class=
"repair-requir-info"
>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
处理中
</div>
<div
class=
"chart-data-text-num"
>
293
</div>
</div>
<img
src=
"./assets/line.png"
/>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
处理中
</div>
<div
class=
"chart-data-text-num"
>
293
</div>
</div>
<
div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
工单回访率
</div
>
<div
class=
"chart-data-text-num"
>
70%
</div
>
</div>
<div
class=
"
g-progress"
style=
"--progress: 70%"
>
</div>
<
img
src=
"./assets/line.png"
/
>
</div
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<
div
class=
"chart-data-text-title"
>
工单回访率
<
/div>
<div
class=
"
chart-data-text-num"
>
70%
</div>
</div>
<div
class=
"g-progress"
style=
"--progress: 70%"
></div>
</div>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
平均处理时长
</div>
<div
class=
"chart-data-text-num"
>
2.4h
</div>
</div>
<img
src=
"./assets/line.png"
/>
</div>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
平均处理时长
</div>
<div
class=
"chart-data-text-num"
>
2.4h
</div>
</div>
<
div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
派单及时率
</div
>
<div
class=
"chart-data-text-num"
>
99%
</div
>
</div>
<div
class=
"
assign-progress"
style=
"--progress: 99%"
>
</div>
<
img
src=
"./assets/line.png"
/
>
</div
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<
div
class=
"chart-data-text-title"
>
派单及时率
<
/div>
<div
class=
"
chart-data-text-num"
>
99%
</div>
</div>
<div
class=
"assign-progress"
style=
"--progress: 99%"
></div>
</div>
</div>
</div>
...
...
@@ -501,6 +499,9 @@
tooltip
:
{
trigger
:
"item"
,
},
title
:
{
show
:
false
,
},
legend
:
false
,
color
:
[
"#FF6464"
,
"#5CB3FF"
],
series
:
[
...
...
@@ -508,6 +509,7 @@
name
:
""
,
type
:
"pie"
,
radius
:
[
"50%"
,
"60%"
],
hoverAnimation
:
false
,
itemStyle
:
{
borderRadius
:
10
,
borderColor
:
""
,
...
...
@@ -554,6 +556,7 @@
name
:
""
,
type
:
"pie"
,
radius
:
[
"50%"
,
"60%"
],
hoverAnimation
:
false
,
itemStyle
:
{
borderRadius
:
10
,
borderColor
:
""
,
...
...
report.css
查看文件 @
e7efeaff
html
{
border
:
3px
solid
rgba
(
255
,
255
,
255
,
0.15
);
background-color
:
#152235
;
height
:
99vh
;
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
99vh
;
}
@media
screen
and
(
min-width
:
1651px
)
{
}
position
:
relative
;
}
body
{
/* opacity: 0.15; */
font-size
:
28px
;
}
.left-top
{
width
:
9px
;
...
...
@@ -47,8 +51,18 @@ body {
transform
:
translateX
(
-50%
);
}
.report-title-bg
>
img
{
width
:
504px
;
height
:
51px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
23.57rem
;
height
:
2.8rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
504px
;
height
:
51px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
780px
;
height
:
82px
;
}
}
.report-title
{
position
:
absolute
;
...
...
@@ -59,79 +73,198 @@ body {
}
.report-title-time
{
color
:
#37f1e7
;
font-size
:
24px
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
36px
;
}
margin-right
:
10px
;
}
.report-title-info
{
color
:
#ffffff
;
font-size
:
24px
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
36px
;
}
}
.invest-wrapper
{
margin-top
:
70px
;
margin-left
:
47px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-top
:
3.75rem
;
margin-left
:
2.4rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-top
:
70px
;
margin-left
:
47px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-top
:
120px
;
margin-left
:
72px
;
}
}
.invest-wrapper-title
{
margin-bottom
:
27px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
1.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
27px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
30px
;
}
}
.invest-wrapper
.invest-wrapper-title
img
{
width
:
110px
;
height
:
25px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
6rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
110px
;
height
:
25px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
168px
;
height
:
38px
;
}
}
.invest-wrapper-content
{
color
:
#fff
;
font-size
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
position
:
relative
;
display
:
inline-block
;
}
.invest-wrapper-flex
{
display
:
flex
;
@media
screen
and
(
min-width
:
751px
)
{
display
:
flex
;
}
}
.invest-wrapper-left-bracket
img
{
position
:
absolute
;
left
:
0
;
top
:
0
;
margin-right
:
10px
;
width
:
6px
;
height
:
43px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
}
.invest-wrapper-right-bracket
img
{
position
:
absolute
;
right
:
0
;
top
:
0
;
margin-left
:
10px
;
width
:
6px
;
height
:
43px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.42rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
}
.invest-wrapper-content-first-text
{
display
:
inline-block
;
margin-left
:
10px
;
margin-top
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0.32rem
;
margin-top
:
0.32rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
10px
;
margin-top
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
margin-top
:
12px
;
}
}
.invest-wrapper-content-second-text
{
display
:
inline-block
;
}
.invest-wrapper-content-last-text
{
display
:
inline-block
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-right
:
0.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-right
:
20px
;
}
}
.invest-wrapper-content-customers
{
color
:
#ff6464
;
font-size
:
24px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.5rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
42px
;
}
}
.invest-wrapper-content-left
{
color
:
#fff
;
font-size
:
28px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
28px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
}
.invest-wrapper-content-left-item
{
display
:
flex
;
margin-bottom
:
4px
;
@media
screen
and
(
max-width
:
1650px
)
{
margin-bottom
:
4px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
10px
;
}
}
.invest-wrapper-content-left-item-img
{
width
:
170px
;
height
:
30px
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.21rem
;
height
:
1.68rem
;
margin-right
:
0.82rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
170px
;
height
:
30px
;
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
258px
;
height
:
47px
;
margin-right
:
20px
;
}
text-align
:
center
;
}
...
...
@@ -140,25 +273,66 @@ body {
height
:
100%
;
}
.invest-wrapper-content-left-item-line
{
width
:
82px
;
height
:
7px
;
margin-top
:
9px
;
margin-right
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
4.54rem
;
height
:
0.5rem
;
margin-top
:
0.64rem
;
margin-right
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
82px
;
height
:
7px
;
margin-top
:
9px
;
margin-right
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
127px
;
height
:
14px
;
margin-top
:
18px
;
margin-right
:
20px
;
}
}
.invest-wrapper-content-left-item-type
{
color
:
#fff
;
opacity
:
0.7
;
font-size
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
width
:
4.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
margin-right
:
45px
;
}
.invest-wrapper-content-left-item-num
{
color
:
#fff
;
font-size
:
22px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-weight
:
700
;
}
.invest-wrapper-content-right
{
margin-left
:
130px
;
margin-top
:
40px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0
;
margin-top
:
1.79rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
130px
;
margin-top
:
40px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
184px
;
margin-top
:
60px
;
}
}
.invest-wrapper-content-red-triangle
{
width
:
0
;
...
...
@@ -179,16 +353,33 @@ body {
left
:
0
;
top
:
0
;
margin-right
:
10px
;
width
:
6px
;
height
:
73px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
4.07rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
6px
;
height
:
73px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
114px
;
}
}
.invest-wrapper-right-bracket-big
img
{
position
:
absolute
;
right
:
0
;
top
:
0
;
margin-left
:
10px
;
width
:
6px
;
height
:
73px
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
6px
;
height
:
73px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
114px
;
}
}
.invest-wrapper-left-bracket-middle
{
...
...
@@ -202,8 +393,18 @@ body {
left
:
0
;
top
:
0
;
margin-right
:
10px
;
width
:
3.73
pxpx
;
height
:
43px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
3.73
pxpx
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
}
.invest-wrapper-right-bracket-middle
img
{
...
...
@@ -211,8 +412,18 @@ body {
right
:
0
;
top
:
0
;
margin-left
:
10px
;
width
:
3.73
pxpx
;
height
:
43px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.36rem
;
height
:
2.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
3.73
pxpx
;
height
:
43px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
10px
;
height
:
68px
;
}
}
.invest-wrapper-content-green-triangle
{
...
...
@@ -225,38 +436,85 @@ body {
}
.operator-wrapper
{
margin-left
:
47px
;
margin-top
:
26px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
2.88rem
;
margin-top
:
1.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
{
margin-left
:
47px
;
margin-top
:
26px
;
}
@media
screen
and
(
min-width
:
1651px
)
and
(
min-width
:
751px
)
{
margin-left
:
72px
;
margin-top
:
36px
;
}
display
:
relative
;
}
.operator-wrapper-title
{
margin-bottom
:
30px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
1.07rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
30px
;
}
}
.operator-wrapper-title
img
{
width
:
110px
;
height
:
25px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
6rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
110px
;
height
:
25px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
168px
;
height
:
38px
;
}
}
.operator-wrapper-content
{
display
:
flex
;
flex-wrap
:
wrap
;
}
.operator-wrapper-content-box
{
margin-right
:
30px
;
margin-bottom
:
18px
;
@media
screen
and
(
max-width
:
1650px
)
{
margin-right
:
30px
;
margin-bottom
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-right
:
40px
;
margin-bottom
:
30px
;
}
position
:
relative
;
}
.operator-wrapper-content-box-title
{
color
:
#37f1e7
;
font-size
:
16px
;
@media
screen
and
(
max-width
:
1650px
)
{
font-size
:
16px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
24px
;
}
/* margin-bottom: 10px; */
margin-left
:
28px
;
}
.operator-wrapper-content-box-chart
{
/* width: 472px; */
/* height: 170px; */
height
:
120px
;
@media
screen
and
(
max-width
:
750px
)
{
height
:
7.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
120px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
position
:
relative
;
background-size
:
cover
;
padding-top
:
4px
;
...
...
@@ -264,7 +522,15 @@ body {
display
:
flex
;
}
.operator-wrapper-content-box-progress
{
height
:
137px
;
@media
screen
and
(
max-width
:
750px
)
{
height
:
12rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
137px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
position
:
relative
;
background-size
:
cover
;
...
...
@@ -273,44 +539,125 @@ body {
display
:
flex
;
}
.electricity-box-progress
{
height
:
137px
;
@media
screen
and
(
max-width
:
750px
)
{
height
:
7.6rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
height
:
137px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
height
:
170px
;
}
position
:
relative
;
background-size
:
cover
;
padding-top
:
4px
;
box-sizing
:
border-box
;
display
:
flex
;
}
.repair-requir-info
{
@media
screen
and
(
max-width
:
750px
)
{
display
:
block
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
display
:
flex
;
}
@media
screen
and
(
min-width
:
1651px
)
{
display
:
flex
;
}
}
.advise-wrapper
{
margin-left
:
47px
;
margin-top
:
14px
;
@media
screen
and
(
max-width
:
1650px
)
{
margin-left
:
47px
;
margin-top
:
14px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
72px
;
margin-top
:
20px
;
}
display
:
relative
;
}
.advise-wrapper-title
{
margin-bottom
:
10px
;
}
.advise-wrapper-title
img
{
width
:
140px
;
height
:
24px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.18rem
;
height
:
1.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
140px
;
height
:
24px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
257px
;
height
:
38px
;
}
}
.advise-wrapper-content-item
{
display
:
flex
;
margin-bottom
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-bottom
:
0.57rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-bottom
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-bottom
:
16px
;
}
}
.advise-wrapper-content-item
img
{
width
:
13px
;
height
:
13px
;
margin-right
:
13px
;
margin-top
:
6px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.71rem
;
height
:
0.71rem
;
margin-right
:
0.71rem
;
margin-top
:
0.36rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
13px
;
height
:
13px
;
margin-right
:
13px
;
margin-top
:
6px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
20px
;
height
:
20px
;
margin-right
:
20px
;
margin-top
:
10px
;
}
}
.advise-wrapper-content-item-text
{
font-size
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
color
:
#fff
;
opacity
:
0
.7
;
}
.chart-area
{
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
@media
screen
and
(
max-width
:
750px
)
{
/* width: 5rem;
height: 5rem;
margin: 0.43rem 0.86rem 0.71rem 1rem; */
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
100px
;
height
:
100px
;
margin
:
12px
10px
14px
19px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
140px
;
height
:
140px
;
margin
:
12px
24px
20px
28px
;
}
padding
:
14px
14px
;
box-sizing
:
border-box
;
...
...
@@ -319,8 +666,20 @@ body {
}
.circle-bar
{
font-size
:
200px
;
width
:
72px
;
height
:
72px
;
@media
screen
and
(
max-width
:
750px
)
{
/* width: 4rem;
height: 4rem; */
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
position
:
relative
;
/* background-color: #333; */
...
...
@@ -328,8 +687,20 @@ body {
}
.circle-bar-left
,
.circle-bar-right
{
width
:
72px
;
height
:
72px
;
@media
screen
and
(
max-width
:
750px
)
{
/* width: 4rem;
height: 4rem; */
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
/* background-color: #eee; */
background-color
:
#2c3849
;
...
...
@@ -339,15 +710,45 @@ body {
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
@media
screen
and
(
max-width
:
750px
)
{
/* clip: rect(0, auto, auto, 2rem); */
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
}
.circle-bar-left
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
@media
screen
and
(
max-width
:
750px
)
{
/* clip: rect(0, 2rem, auto, 0); */
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
}
.mask
{
width
:
60px
;
height
:
60px
;
@media
screen
and
(
max-width
:
750px
)
{
/* width: 3.2rem;
height: 3.2rem; */
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
background-color
:
#0c0e14
;
text-align
:
center
;
...
...
@@ -355,9 +756,24 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
color
:
rgba
(
255
,
255
,
255
);
}
.mask
:first-child
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
/* font-size: 1.2rem;
height: 3.2rem;
line-height: 2.5rem; */
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
display
:
block
;
}
...
...
@@ -365,8 +781,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-right-2
{
/* width: 112px;
height: 112px; */
width
:
72px
;
height
:
72px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
/* background-color: #eee; */
background-color
:
#2c3849
;
}
...
...
@@ -375,31 +801,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
*/
.circle-bar-right-2
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
}
.circle-bar-left-2
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
}
.second-mask
{
width
:
60px
;
height
:
60px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
background-color
:
#0c0e14
;
text-align
:
center
;
line-height
:
22
.4px
;
color
:
rgba
(
255
,
255
,
255
);
}
.second-mask
:first-child
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
display
:
block
;
}
.circle-bar-3
{
font-size
:
200px
;
width
:
72px
;
height
:
72px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
position
:
relative
;
background
:
#f3be28
;
}
...
...
@@ -421,31 +895,79 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.circle-bar-left-3
,
.circle-bar-right-3
{
width
:
72px
;
height
:
72px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
72px
;
height
:
72px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
112px
;
height
:
112px
;
}
/* background-color: #eee; */
background-color
:
#2c3849
;
}
.circle-bar-right-3
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
35px
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
auto
,
auto
,
56px
);
}
}
.circle-bar-left-3
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
@media
screen
and
(
max-width
:
750px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
clip
:
rect
(
0
,
35px
,
auto
,
0
);
}
@media
screen
and
(
min-width
:
1651px
)
{
clip
:
rect
(
0
,
56px
,
auto
,
0
);
}
}
.third-mask
{
width
:
60px
;
height
:
60px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
60px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
89.6px
;
height
:
89.6px
;
}
background-color
:
#0c0e14
;
text-align
:
center
;
line-height
:
22
.4px
;
color
:
rgba
(
255
,
255
,
255
);
}
.third-mask
:first-child
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
height
:
30px
;
line-height
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
33.6px
;
height
:
89.6px
;
line-height
:
70px
;
}
display
:
block
;
}
/*所有的后代都水平垂直居中，这样就是同心圆了*/
...
...
@@ -464,8 +986,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.percent-text
{
color
:
#fff
;
font-size
:
18px
;
margin-top
:
30px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.79rem
;
margin-top
:
1.79rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
margin-top
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
22px
;
margin-top
:
50px
;
}
opacity
:
0
.7
;
}
...
...
@@ -475,34 +1007,82 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc
img
{
width
:
165px
;
height
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
9.89rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
165px
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
277px
;
height
:
27px
;
}
position
:
absolute
;
bottom
:
0
;
left
:
0
;
}
.chart-desc-other
{
width
:
175px
!important
;
height
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
10.46rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
175px
!important
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
293px
;
height
:
27px
;
}
}
.chart-desc-task
{
position
:
relative
;
display
:
flex
;
margin-top
:
10px
;
width
:
160px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-top
:
1.07rem
;
width
:
9.29rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-top
:
10px
;
width
:
160px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-top
:
30px
;
width
:
260px
;
}
}
.chart-desc-text
{
color
:
#fff
;
font-size
:
18px
;
margin-left
:
8px
;
margin-top
:
4px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
margin-left
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
margin-left
:
8px
;
margin-top
:
4px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
margin-left
:
20px
;
}
}
.chart-desc-value
{
margin-left
:
auto
;
margin-right
:
10px
;
color
:
#fff
;
font-size
:
22px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-weight
:
700
;
}
...
...
@@ -511,15 +1091,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.chart-desc-unfinished-value
{
color
:
#ff6464
;
font-size
:
22px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
font-weight
:
700
;
margin-left
:
auto
;
margin-right
:
10px
;
}
.chart-desc-daily-legend
{
width
:
8px
;
height
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.43rem
;
height
:
0.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
8px
;
height
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
12px
;
height
:
12px
;
}
background
:
rgba
(
92
,
179
,
255
,
0
.302
);
opacity
:
1
;
border
:
2px
solid
#5cb3ff
;
...
...
@@ -527,8 +1125,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
margin-left
:
20px
;
}
.chart-desc-handle-legend
{
width
:
8px
;
height
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
0.43rem
;
height
:
0.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
8px
;
height
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
12px
;
height
:
12px
;
}
background
:
rgba
(
255
,
100
,
100
,
0
.302
);
opacity
:
1
;
border
:
2px
solid
#ff6464
;
...
...
@@ -540,24 +1148,52 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
}
.repair-require-chart
{
background
:
url("./assets/repair-require-bg.png")
no-repeat
;
width
:
115px
;
height
:
115px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
background-size
:
cover
;
}
.repair-require-chart-wrapper
{
width
:
115px
;
height
:
115px
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
}
.contract-chart
{
background
:
url("./assets/contract-bg.png")
no-repeat
;
width
:
115px
;
height
:
115px
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
background-size
:
cover
;
}
.contract-chart-wrapper
{
width
:
115px
;
height
:
115px
;
@media
screen
and
(
max-width
:
1650px
)
{
width
:
115px
;
height
:
115px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
160px
;
height
:
160px
;
}
}
.top-left
{
...
...
@@ -593,51 +1229,153 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
right
:
0
;
}
.repair-require-info
{
margin-left
:
10px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
0.71rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
10px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
margin-top
:
10px
;
}
.repair-require-info
img
{
width
:
65px
;
height
:
60px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
4.82rem
;
height
:
4.43rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
65px
;
height
:
60px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
100px
;
height
:
92px
;
}
}
.repair-require-info-text
{
color
:
#fff
;
margin-left
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.86rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
}
.repair-require-info-text
span
{
font-weight
:
700
;
font-size
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
text-align
:
center
;
}
.electricity-info-text
{
color
:
#ff6464
;
margin-left
:
8px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
0.86rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
8px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
20px
;
}
}
.electricity-info-text
span
{
font-weight
:
700
;
font-size
:
18px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
text-align
:
center
;
}
.chart-data
{
position
:
relative
;
margin-top
:
20px
;
width
:
180px
;
margin-left
:
20px
;
@media
screen
and
(
max-width
:
750px
)
{
width
:
10.55rem
;
margin-left
:
1.39rem
;
margin-top
:
0.36rem
;
margin-bottom
:
0.8rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
180px
;
margin-left
:
20px
;
margin-top
:
20px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
260px
;
margin-left
:
55px
;
margin-top
:
20px
;
}
}
.chart-data
img
{
@media
screen
and
(
max-width
:
750px
)
{
width
:
11rem
;
height
:
0.96rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
165px
;
height
:
18px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
277px
;
height
:
27px
;
}
}
.bar-data
{
position
:
relative
;
margin-left
:
20px
;
margin-top
:
-20px
;
width
:
180px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
1.96rem
;
margin-top
:
-1.25rem
;
width
:
10.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
20px
;
margin-top
:
-20px
;
width
:
180px
;
}
@media
screen
and
(
min-width
:
1651px
)
and
(
min-width
:
751px
)
{
margin-left
:
55px
;
margin-top
:
-35px
;
width
:
260px
;
}
}
.bar-data-2
{
position
:
relative
;
margin-left
:
20px
;
margin-top
:
10px
;
width
:
180px
;
@media
screen
and
(
max-width
:
750px
)
{
margin-left
:
1.96rem
;
margin-top
:
0.35rem
;
width
:
10.1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
margin-left
:
20px
;
margin-top
:
10px
;
width
:
180px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
margin-left
:
55px
;
margin-top
:
10px
;
width
:
260px
;
}
}
.chart-data-text
{
display
:
flex
;
...
...
@@ -645,17 +1383,33 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
.chart-data-text-title
{
color
:
#fff
;
opacity
:
0.8
;
font-size
:
16px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
16px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
28px
;
}
}
.chart-data-text-num
{
color
:
#fff
;
font-size
:
22px
;
margin-right
:
30px
;
@media
screen
and
(
max-width
:
750px
)
{
font-size
:
1.21rem
;
margin-right
:
2rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
font-size
:
22px
;
margin-right
:
30px
;
}
@media
screen
and
(
min-width
:
1651px
)
{
font-size
:
34px
;
}
margin-left
:
auto
;
}
.return-rate
{
/* background: linear-gradient(#00d8ff, #00b6ff); */
color
:
#00d8ff
;
width
:
260px
;
}
...
...
@@ -666,8 +1420,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
initial-value
:
0%
;
}
.g-progress
{
margin
:
auto
;
width
:
167px
;
@media
screen
and
(
max-width
:
750px
)
{
margin
:
0
;
width
:
9.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
167px
;
margin
:
auto
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
256px
;
margin
:
auto
;
}
height
:
9px
;
border-radius
:
25px
;
...
...
@@ -681,8 +1445,18 @@ clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
transition
:
0
.3s
--progress
;
}
.assign-progress
{
margin
:
auto
;
width
:
166px
;
@media
screen
and
(
max-width
:
750px
)
{
margin
:
0
;
width
:
9.14rem
;
}
@media
screen
and
(
max-width
:
1650px
)
and
(
min-width
:
751px
)
{
width
:
166px
;
margin
:
auto
;
}
@media
screen
and
(
min-width
:
1651px
)
{
width
:
256px
;
margin
:
auto
;
}
height
:
9px
;
border-radius
:
25px
;
...
...
report.html
查看文件 @
e7efeaff
...
...
@@ -316,36 +316,38 @@
<img
src=
"./assets/repair-requir-icon.png"
/>
<div
class=
"repair-require-info-text"
><span>
389
</span>
个
</div>
</div>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
处理中
</div>
<div
class=
"chart-data-text-num"
>
293
</div>
<div
class=
"repair-requir-info"
>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
处理中
</div>
<div
class=
"chart-data-text-num"
>
293
</div>
</div>
<img
src=
"./assets/line.png"
/>
</div>
<
img
src=
"./assets/line.png"
/
>
</div
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<
div
class=
"chart-data-text-title"
>
工单回访率
<
/div>
<div
class=
"
chart-data-text-num"
>
70%
</div>
<
div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
工单回访率
</div
>
<div
class=
"chart-data-text-num"
>
70%
</div
>
</div>
<div
class=
"
g-progress"
style=
"--progress: 70%"
>
</div>
</div>
<div
class=
"g-progress"
style=
"--progress: 70%"
></div>
</div>
</div>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
平均处理时长
</div>
<div
class=
"chart-data-text-num"
>
2.4h
</div>
<div
class=
"chart-desc"
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
平均处理时长
</div>
<div
class=
"chart-data-text-num"
>
2.4h
</div>
</div>
<img
src=
"./assets/line.png"
/>
</div>
<
img
src=
"./assets/line.png"
/
>
</div
>
<div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<
div
class=
"chart-data-text-title"
>
派单及时率
<
/div>
<div
class=
"
chart-data-text-num"
>
99%
</div>
<
div
class=
"chart-data"
>
<div
class=
"chart-data-text"
>
<div
class=
"chart-data-text-title"
>
派单及时率
</div
>
<div
class=
"chart-data-text-num"
>
99%
</div
>
</div>
<div
class=
"
assign-progress"
style=
"--progress: 99%"
>
</div>
</div>
<div
class=
"assign-progress"
style=
"--progress: 99%"
></div>
</div>
</div>
</div>
...
...
@@ -506,6 +508,7 @@
name
:
""
,
type
:
"pie"
,
radius
:
[
"50%"
,
"60%"
],
hoverAnimation
:
false
,
itemStyle
:
{
borderRadius
:
10
,
borderColor
:
""
,
...
...
@@ -552,6 +555,7 @@
name
:
""
,
type
:
"pie"
,
radius
:
[
"50%"
,
"60%"
],
hoverAnimation
:
false
,
itemStyle
:
{
borderRadius
:
10
,
borderColor
:
""
,
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑！
取消
请
注册
或者
登录
后发表评论
