2024年最新哪吒探针面板详细搭建教程

一、准备 一个GitHub账号，宝塔面板，一个是面板的域名，第二个仅仅解析到面板服务器的域名，不套cdn，用于客户端连接服务端用，比如我的tz.weirain.com作为面板的域名，ttz.weirain.com用来记录面板服务器的ip。

二、在GitHub上的操作

2.1新建OAuth App 打开： GitHub ，然后点击New OAuth App按钮。

记录下OAuth Apps的Client ID和Client secrets

三、执行脚本 3.1 服务端需要放行8008、5555两个端口

3.2 服务端部署面板服务

国外：

1
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh  -o nezha.sh && chmod +x nezha.sh
2
sudo ./nezha.sh

国内：

1
curl -L https://cdn.jsdelivr.net/gh/naiba/nezha@master/script/install.sh -o nezha.sh && chmod +x nezha.sh
2
CN=true sudo ./nezha.sh

按1进行安装面板，接着就要输入前面记录下来的GITHUB账号ID、OAUTHAPP的CLIENT ID、OAUTHAPP的CLIENT SECRETS 按照提示输入。

四、新建网站

4.1宝塔新建一个网站，设置ssl

4.2设置反代

1
location /
2
{
3
proxy_pass http://127.0.0.1:8008;
4
proxy_set_header Host $host;
5
}
6
location /ws
7
{
8
proxy_pass http://127.0.0.1:8008;
9
proxy_http_version 1.1;
10
proxy_set_header Upgrade $http_upgrade;
11
proxy_set_header Connection "Upgrade";
12
proxy

五、客户端(被监控机器)

访问 https://你的域名到页面并登陆后台。设置未接入CDN的面板服务器域名/IP

到服务器页面添加服务器

会生成一个节点服务器的专属id与密钥

需要被监控的机器执行脚本

国外：

1
curl -L https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x
2
sudo ./nezha.sh

国内：

1
curl -L https://raw.sevencdn.com/naiba/nezha/master/script/install.sh -o nezha.sh && chmod +x nezha.sh
2
sudo ./nezha.sh

按8进行安装监控Agent，

按照提示输入

解析到面板IP的域名地址、面板RPC端口(默认5555)、服务器AGENT ID、服务器AGENT 密钥

六、美化

主题设置：后台管理-设置

前台界面主题: 选Default（默认）

自定义代码：复制粘贴下面的

1
<style>
2
/* 屏幕适配 */
3
@media only screen and (min-width: 1200px) {
4
  .ui.container {
5
        width: 80% !important;
6
    }
7
}
8

9
@media only screen and (max-width: 767px) {
10
  .ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui) {
11
    margin-top: 0.4em !important;
12
  }
13
}
14

15
/* 整体图标 */
16
i.icon {
17
  color: #000;
18
  width: 1.2em !important;
19
}
20

21
/* 背景图片 */
22
body {
23
  content: " " !important;
24
  background: fixed !important;
25
  z-index: -1 !important;
26
  top: 0 !important;
27
  right: 0 !important;
28
  bottom: 0 !important;
29
  left: 0 !important;
30
  background-position: top !important;
31
  background-repeat: no-repeat !important;
32
  background-size: cover !important;
33
  background-image: url(https://t.mwm.moe/pc) !important;
34
  font-family: Arial,Helvetica,sans-serif !important;
35
}
36

37
/* 导航栏 */
38
.ui.large.menu {
39
  border: 0 !important;
40
  border-radius: 0px !important;
41
  background-color: rgba(255, 255, 255, 55%) !important;
42
}
43

44
/* 首页按钮 */
45
.ui.menu .active.item {
46
  background-color: transparent !important;
47
}
48

49
/* 导航栏下拉框 */
50
.ui.dropdown .menu {
51
  border: 0 !important;
52
  border-radius: 0 !important;
53
  background-color: rgba(255, 255, 255, 80%) !important;
54
}
55

56
/* 登陆按钮 */
57
.nezha-primary-btn {
58
  background-color: transparent !important;
59
  color: #000 !important;
60
}
61

62
/* 大卡片 */
63
#app .ui.fluid.accordion {
64
  background-color: #fbfbfb26 !important;
65
  border-radius: 0.4rem !important;
66
}
67

68
/* 小卡片 */
69
.ui.four.cards>.card {
70
  border-radius: 0.6rem !important;
71
  background-color: #fafafaa3 !important;
72
}
73

74
/* 卡片内间距，如需调整小卡片高度，可以修改下面的3.3rem的数字 */
75
.status.cards .wide.column {
76
  padding-top: 0 !important;
77
  padding-bottom: 0 !important;
78
  height: 3.3rem !important;
79
}
80

81
.status.cards .three.wide.column {
82
  padding-right: 0rem !important;
83
}
84

85
.status.cards .wide.column:nth-child(1) {
86
  margin-top: 2rem !important;
87
}
88

89
.status.cards .wide.column:nth-child(2) {
90
  margin-top: 2rem !important;
91
}
92

93
.status.cards .description {
94
  padding-bottom: 0 !important;
95
}
96

97
/* 小鸡名 */
98
.status.cards .flag {
99
  margin-right: 0.5rem !important;
100
}
101

102
/* 弹出卡片图标 */
103
.status.cards .header > .info.icon {
104
  margin-right: 0 !important;
105
}
106

107
.nezha-secondary-font {
108
  color: #21ba45 !important;
109
}
110

111
/* 进度条圆角和颜色 */
112
.ui.progress {
113
  border-radius: 50rem !important;
114
}
115

116
/* 状态进度条 */
117
.ui.progress .bar {
118
  min-width: 1.8em !important;
119
  border-radius: 15px !important;
120
  line-height: 1.65em !important;
121
}
122

123
/* 正常状态进度条颜色 */
124
.ui.progress.fine .bar {
125
  background-color: #21ba45 !important;
126
}
127

128
/* 有点累状态进度条颜色 */
129
.ui.progress.warning .bar {
130
  background-color: #ff9800 !important;
131
}
132

133
/* 高负载状态进度条颜色 */
134
.ui.progress.error .bar {
135
  background-color: #e41e10 !important;
136
}
137

138
/* 离线状态进度条颜色 */
139
.ui.progress.offline .bar {
140
  background-color: #000 !important;
141
}
142

143
/* 上传下载 */
144
.status.cards .outline.icon {
145
  margin-right: 1px !important;
146
}
147

148
i.arrow.alternate.circle.down.outline.icon {
149
  color: #21ba45 !important;
150
}
151

152
i.arrow.alternate.circle.up.outline.icon {
153
  color: red !important;
154
}
155

156
/* 弹出卡片小箭头 */
157
.ui.right.center.popup {
158
  margin: -3px 0 0 0.914286em !important;
159
  -webkit-transform-origin: left 50% !important;
160
  transform-origin: left 50% !important;
161
}
162

163
.ui.bottom.left.popup {
164
  margin-left: 1px !important;
165
  margin-top: 3px !important;
166
}
167

168
.ui.top.left.popup {
169
  margin-left: 0 !important;
170
  margin-bottom: 10px !important;
171
}
172

173
.ui.top.right.popup {
174
  margin-right: 0 !important;
175
  margin-bottom: 8px !important;
176
}
177

178
.ui.left.center.popup {
179
  margin: -3px .91428571em 0 0 !important;
180
  -webkit-transform-origin: right 50% !important;
181
  transform-origin: right 50% !important;
182
}
183

184
.ui.right.center.popup:before,
185
.ui.left.center.popup:before {
186
  border: 0px solid #fafafaeb !important;
187
  background: #fafafaeb !important;
188
}
189

190
.ui.top.popup:before {
191
  border-color: #fafafaeb transparent transparent !important;
192
}
193

194
.ui.popup:before {
195
  border-color: #fafafaeb transparent transparent !important;
196
}
197

198
.ui.bottom.left.popup:before {
199
  border-radius: 0 !important;
200
  border: 1px solid transparent !important;
201
  border-color: #fafafaeb transparent transparent !important;
202
  background: #fafafaeb !important;
203
  -webkit-box-shadow: 0px 0px 0 0
204
#fafafaeb !important;
205
  box-shadow: 0px 0px 0 0 #fafafaeb !important;
206
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
207
}
208

209
.ui.bottom.right.popup:before {
210
  border-radius: 0 !important;
211
  border: 1px solid transparent !important;
212
  border-color: #fafafaeb transparent transparent !important;
213
  background: #fafafaeb !important
214
-webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
215
  box-shadow: 0px 0px 0 0 #fafafaeb !important;
216
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
217
}
218

219
.ui.top.left.popup:before {
220
  border-radius: 0 !important;
221
  border: 1px solid transparent !important;
222
  border-color: #fafafaeb transparent transparent !important;
223
  background: #fafafaeb !important;
224
  -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
225
  box-shadow: 0px 0px 0 0 #fafafaeb !important;
226
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
227
}
228

229
.ui.top.right.popup:before {
230
  border-radius: 0 !important;
231
  border: 1px solid transparent !important;
232
  border-color: #fafafaeb transparent transparent !important;
233
  background: #fafafaeb !important;
234
  -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
235
  box-shadow: 0px 0px 0 0 #fafafaeb !important;
236
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
237
}
238

239
.ui.left.center.popup:before {
240
  border-radius: 0 !important;
241
  border: 1px solid transparent !important;
242
  border-color: #fafafaeb transparent transparent !important;
243
  background: #fafafaeb !important;
244
  -webkit-box-shadow: 0px 0px 0 0 #fafafaeb !important;
245
  box-shadow: 0px 0px 0 0 #fafafaeb !important;
246
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
247
}
248

249
/* 弹出卡片 */
250
.status.cards .ui.content.popup {
251
  min-width: 20rem !important;
252
  line-height: 2rem !important;
253
  border-radius: 5px !important;
254
  border: 1px solid transparent !important;
255
  background-color: #fafafaeb !important;
256
  font-family: Arial,Helvetica,sans-serif !important;
257
}
258

259
.ui.content {
260
  margin: 0 !important;
261
  padding: 1em !important;
262
}
263

264
/* 服务页 */
265
.ui.table {
266
  background: RGB(225,225,225,0.6) !important;
267
}
268

269
.ui.table thead th {
270
  background: transparent !important;
271
}
272

273
/* 服务页进度条 */
274
.service-status .good {
275
  background-color: #21ba45 !important;
276
}
277

278
.service-status .danger {
279
  background-color: red !important;
280
}
281

282
.service-status .warning {
283
  background-color: orange !important;
284
}
285

286
/* 提示消息 */
287
.floating.message.success {
288
  backdrop-filter: blur(15px) brightness(110%);
289
  background-color: rgba(255, 255, 255, 0.556);
290
  border: 3px solid rgba(225.225.255.0.5);
291
  border-radius: 1rem !important;
292
  color: black;
293
  box-shadow: 0 0 15px rgba(33, 186, 69, 0.66);
294
}
295

296
.floating.message.success .header {
297
  color: black;
298
}
299

300
.floating.message.warning {
301
  backdrop-filter: blur(15px) brightness(110%);
302
  background-color: rgba(255, 255, 255, 0.55);
303
  border: 1px solid rgba(225.225.255.0.5);
304
  border-radius: 1rem !important;
305
  color: black;
306
  box-shadow: 0 0 15px rgba(33, 186, 69, 0.66);
307
}
308

309
.floating.message.warning .header {
310
  color: black;
311
}
312

313
/* 版权 */
314
.ui.inverted.segment,
315
.ui.primary.inverted.segment {
316
  color: #000 !important;
317
  font-weight: bold !important;
318
  background-color: #fafafaa3 !important;
319
}
320
</style>
321

322
<!--Logo和版权-->
323
<script>
324
window.onload = function() {
325
var avatar=document.querySelector(".item img")
326
var footer=document.querySelector("div.is-size-7")
327
footer.innerHTML="Copyright © 2024风尘落微雨の探针 All Rights Reserved."
328
footer.style.visibility="visible"
329
avatar.src="https://img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png"
330
avatar.style.visibility="visible"
331
}
332
</script>
333

334
<!--替换默认Favicon-->
335
<script>
336
var faviconurl="//img14.360buyimg.com/ddimg/jfs/t1/162473/22/23012/3692/6184b06aEa95a0194/8c51cebbd04b95b2.png";
337
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
338
link.type = 'image/png';
339
link.rel = 'shortcut icon';
340
link.href = faviconurl;
341
document.getElementsByTagName('head')[0].appendChild(link);
342
</script>

1
<style>
2
    .footer {
3
        display: none;
4
    }
5

6
    .nezha-primary-btn {
7
        background-color: #00000073 !important;
8
        color: #ff84a3 !important;
9
        transition: background-color 0.3s, color 0.3s;
10
    }
11

12
     .menu .container:first-child a:first-child img {
13
        content: url('https://img.weirain.com/file/278091a789ac4f997a794.png');
14
     }
15

16
     .nezha-primary-btn:hover {
17
        background-color: #000000 !important;
18
        color: #ffffff !important;
19
    }
20

21
    :root {
22
        --lc-color-light: rgba(235, 235, 235, 0.4);
23
        --bc-color-light: rgba(235, 235, 235, 0.4);
24
        --the-color-light: rgba(235, 235, 235, 0.6);
25
        --he-color-light: rgba(235, 235, 235, 0.8);
26
        --message-color-light: rgb(22, 22, 22, 1);
27
        --popup-color-light:rgba(235, 235, 235, 1);
28

29
        --bc-color-dark: rgba(0, 0, 0, 0.4);
30
        --lc-color-dark: rgba(55, 55, 55, 0.4);
31
        --the-color-dark: rgba(35, 35, 35, 0.3);
32
        --he-color-dark: rgba(35, 35, 35, 0.8);
33
        --message-color-dark: rgb(235, 235, 235, 0.8);
34
        --popup-color-dark:rgba(78, 78, 78, 1);
35

36

37
        /* 注释上面一段颜色代码并取消下面注释的代码开启毛玻璃效果（图形性能开销巨大，可能导致掉帧） */
38

39
        /* --bb: blur(15px) brightness(110%);
40
        --lc-color-light: rgba(255, 255, 255, 0.7);
41
        --bc-color-light: rgba(255, 255, 255, 0.1);
42
        --the-color-light: rgba(255, 255, 255, 0.4);
43
        --he-color-light: rgba(255, 255, 255, 0.5);
44
        --message-color-light: rgb(22, 22, 22, 1);
45
        --popup-color-light:rgba(235, 235, 235, 1);
46

47
        --bc-color-dark: rgba(0, 0, 0, 0.3);
48
        --lc-color-dark: rgba(55, 55, 55, 0.8);
49
        --the-color-dark: rgba(70, 70, 70, 0.1);
50
        --he-color-dark: rgba(35, 35, 35, 0.7);
51
        --message-color-dark: rgb(235, 235, 235, 0.8);
52
        --popup-color-dark:rgba(78, 78, 78, 1); */
53

54
    }
55

56
    /* 暗色模式适配 */
57
    @media (prefers-color-scheme: dark) {
58
        *:not(.icon, i) {
59
            color: rgba(220, 220, 220, 0.95) !important;
60
        }
61

62
        .ui.menu .ui.dropdown .menu>.item {
63
            color: rgba(220, 220, 220, 0.95) !important;
64
        }
65

66

67
        .ui .cards>.card {
68
            background-color: var(--lc-color-dark) !important;
69
            border-color: var(--lc-color-dark) !important;
70
        }
71

72
        .ui .cards>.card i:not(.flag) {
73
            filter: saturate(60%) !important;
74
        }
75

76

77
        .ui.table thead th,
78
        .ui.table thead {
79
            background-color: var(--the-color-dark) !important;
80
        }
81

82
        .ui.table {
83
            background-color: none !important;
84
        }
85

86
        .ui.large.menu,
87
        .right.menu .menu,
88
        .service-status h2,
89
        .footer,
90
        .floating.message.warning,
91
        .floating.message.success {
92
            background-color: var(--he-color-dark) !important;
93
        }
94

95
        .floating.message.warning,
96
        .floating.message.success {
97
            color: var(--message-color-dark) !important;
98
        }
99

100
        #app .ui.fluid.accordion,
101
        .table {
102
            background-color: var(--bc-color-dark) !important;
103
        }
104

105
        .ui.content.popup {
106
            background-color: var(--popup-color-dark) !important;
107
        }
108
        .ui.content.popup:before{
109
            background-color: var(--popup-color-dark) !important;
110
        }
111

112
        .ui.progress small,
113
        td:not(.button):not(.bar):not(:has(.button, .bar)):not(:has(> small)) {
114
            filter: brightness(115%);
115
        }
116

117
        .ui.progress .bar,
118
        .nb-container .ui.icon.button,
119
        .service-status .delay-today>i {
120
            filter: brightness(85%);
121
        }
122

123
        .ui.button:hover {
124
            filter: brightness(100%) !important;
125
        }
126

127
        .ui.popup:before {
128
            background-color: var(--popup-color-dark) !important;
129
            box-shadow: 0px 0px 0 0 #ffffff !important;
130
        }
131

132
        .amzayo-custom-button {
133
            background-color: #4d4d4d8f !important;
134
            color: rgba(178, 178, 178, 0.95) !important;
135
            border: 2px solid #292929ae !important;
136
        }
137

138
        .amzayo-custom-button:hover {
139
            background-color: #ff8457 !important;
140
            color: #ffffffbd !important;
141
            font-weight: bolder !important;
142
        }
143

144
        i.amzayo-secondary-font {
145
            color: #727272ae !important;
146
        }
147

148
        .ui.popup {
149
            background-color: var(--popup-color-dark) !important;
150
        }
151

152
        .ui.menu .item:before {
153
            background: rgba(125, 125, 125, 0.15);
154
        }
155

156
        .ui.menu .active.item {
157
            background: rgba(10, 10, 10, 0.2);
158
        }
159

160
        .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
161
            border-left: 1px solid rgba(125, 125, 125, 0.15);
162
        }
163
    }
164

165
    /* 屏幕适配 */
166

167
    @media (min-width: 320px) {
168
        .ui-alerts.top-center {
169
            margin-left: 0px !important;
170
            left: 50%;
171
            transform: translate(-50%, -0%);
172
        }
173
    }
174

175
    @media (min-width: 766px) {
176
        .ui.container {
177
            width: 80%;
178
        }
179

180
        /* 表格样式 */
181
        .ui.table thead th {
182
            backdrop-filter:var(--bb);
183
            background-color: var(--the-color-light);
184
        }
185

186
        thead tr :first-child {
187
            border-radius: 1rem 0 0 1rem !important;
188
        }
189

190
        thead tr :last-child {
191
            border-radius: 0 1rem 1rem 0 !important;
192
        }
193

194
        /* 小卡片 */
195
        .ui .cards>.card {
196
            border-radius: 1rem;
197
            border: none !important;
198
            background-color: var(--lc-color-light);
199
            padding: .25rem .25rem !important;
200
            margin: .5rem .3rem !important;
201
        }
202

203
        /* 小卡片头部调整 */
204
        .ui.card>.content>.header,
205
        .ui.cards>.card>.content>.header {
206
            padding-top: 0;
207
            display: flex;
208
            color: rgba(0, 0, 0, .85);
209
            align-items: center;
210
            padding-bottom: .2em;
211
            border-bottom: 1px solid rgba(0, 0, 0, .2);
212
        }
213

214
        .header_info {
215
            font-size: 1rem !important;
216
            line-height: 1rem !important;
217
            margin-top: .3rem !important;
218
            padding-right: .38rem !important;
219
        }
220
    }
221

222
    @media (max-width: 766px) {
223

224
        /* 表格样式 */
225
        .ui.table thead {
226
            backdrop-filter:var(--bb);
227
            background-color: var(--the-color-light);
228
        }
229

230
        thead {
231
            border-radius: 1rem !important;
232
        }
233

234
        thead tr {
235
            padding: 0 !important;
236
        }
237

238
        /* 小卡片 */
239
        .ui .cards>.card {
240
            border-radius: 1rem;
241
            background-color: var(--lc-color-light);
242
            outline: none !important;
243
        }
244

245
        /* 小卡片头部调整 */
246
        .ui.card>.content>.header,
247
        .ui.cards>.card>.content>.header {
248
            padding-top: 0.5rem;
249
            display: flex;
250
            color: rgba(0, 0, 0, .85);
251
            align-items: center;
252
            padding-bottom: .2em;
253
            border-bottom: 1px solid rgba(0, 0, 0, .2);
254
        }
255

256
        .header_info {
257
            font-size: 1rem !important;
258
            line-height: 1rem !important;
259
            padding-top: -.1rem !important;
260
            padding-right: .38rem !important;
261
        }
262
    }
263

264
    /* 自定义字体 */
265
    @font-face {
266
        font-family: 'Harmony Hans';
267
        src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
268
    }
269

270
    * {
271
        font-family: 'Harmony Hans';
272
    }
273

274
    *:not(.content) {
275
        transition: all .2s;
276
    }
277

278
    /* 背景图片 */
279
    body::before {
280
        content: "";
281
        position: fixed;
282
        top: 0;
283
        left: 0;
284
        width: 100%;
285
        height: 100%;
286
        z-index: -1;
287
        background: url('https://img.weirain.com/file/c3974836145fe9cb27f6b.png') center/cover no-repeat;
288
    }
289

290
    /* 菜单颜色 */
291
    .ui.large.menu {
292
        backdrop-filter:var(--bb);
293
        background-color: var(--he-color-light);
294
        border-radius: 0 0 1rem 1rem !important;
295
    }
296

297
    .ui.menu .item:last-child {
298
        padding: 0 1.142em !important;
299
    }
300

301
    /* 登录按钮区域 */
302
    .ui.simple.dropdown {
303
        height: 100%;
304
        display: flex;
305
        flex-direction: row;
306
        justify-content: center;
307
        align-items: center;
308
    }
309

310
    /* 登录之后的下拉菜单 */
311
    .right.menu .menu {
312
        border-radius: 0 0 1rem 1rem !important;
313
        position: absolute;
314
        top: 0 !important;
315
        background-color: var(--he-color-light);
316
        padding: 0 0.3em !important;
317
    }
318

319
    /* 登录按钮颜色（需要使用配套自定义主题） */
320
    .amzayo-custom-button {
321
        backdrop-filter:var(--bb);
322
        background-color: #ffffff8f;
323
        color: #000000cf;
324
        border: 2px solid #ebe1d9;
325
        border-radius: 1rem;
326
        padding: 10px 20px;
327
        font-size: 16px;
328
    }
329

330
    .amzayo-custom-button:hover {
331
        background-color: #ff8457;
332
        color: #ffffffbd;
333
        font-weight: bolder;
334
    }
335

336
    /* 大卡片 */
337
    #app .ui.fluid.accordion {
338
        backdrop-filter:var(--bb);
339
        background-color: var(--bc-color-light);
340
        border-radius: 1rem;
341
    }
342

343
    #app :last-child.accordion {
344
        margin-bottom: 0 !important;
345
    }
346

347
    /* 小卡片靠哪个方向对齐 */
348
    .cards {
349
        justify-content: center;
350
    }
351

352
    .ui.card,
353
    .ui.cards>.card {
354
        box-shadow: none !important;
355
    }
356

357
    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
358
    /* .ui.card,
359
    .ui.cards>.card {
360
        width: 300px !important;
361
    } */
362

363
    /* 小卡片右上角的图标 */
364

365
    i.amzayo-secondary-font {
366
        margin-left: auto;
367
        color: rgba(255, 153, 1, 0.65);
368
    }
369

370
    /* 头部配置信息样式 */
371
    .header_info i {
372
        margin-top: .25rem;
373
        margin-right: .3rem;
374
        margin-left: .3rem;
375
    }
376

377
    /* 更多信息卡片 */
378
    .ui.content.popup {
379
        border: none !important;
380
        border-radius: 1rem;
381
        margin: 0;
382
        padding: 1em !important;
383
        background-color: var(--popup-color-light);
384
        width: max-content;
385
        height: max-content;
386
    }
387

388
    .ui.popup {
389
        border: none !important;
390
    }
391

392
    /* 小三角 */
393
    .ui.content.popup:before {
394
        background-color: var(--popup-color-light);
395
        z-index: 9999 !important;
396
        border: none !important;
397
        box-shadow: 0px 0px 0 0 #ffffff !important;
398
    }
399

400
    .ui.bottom.popup:before {
401
        clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
402
    }
403

404
    .ui.top.popup:before {
405
        clip-path: polygon(100% 100%, 0% 100%, 100% 0);
406
    }
407

408
    /* 进度条圆角和颜色 */
409
    .ui.progress {
410
        border-radius: 50rem;
411
        height: 1.5rem;
412
    }
413

414
    /* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
415
    .status.cards .wide.column {
416
        padding-top: 0 !important;
417
        padding-bottom: 0 !important;
418
        height: 2rem !important;
419
    }
420

421
    .bi::before,
422
    [class^="bi-"]::before,
423
    [class*=" bi-"]::before {
424
        vertical-align: middle;
425
        margin-bottom: .2rem;
426
    }
427

428
    /* 状态进度条 */
429
    .card .bar {
430
        height: 1.5rem;
431
    }
432

433
    .card .bar small {
434
        vertical-align: super;
435
        line-height: 1.5rem;
436
    }
437

438
    .card .ui.progress .bar {
439
        min-width: 1.8em !important;
440
        border-radius: 13px;
441
        line-height: 1.65em;
442
        height: 1.5rem;
443
    }
444

445
    table .ui.progress .bar {
446
        border-radius: 13px;
447
    }
448

449
    /* 正常状态进度条颜色 */
450
    .nb-container .ui.progress.fine .bar {
451
        background-image: linear-gradient(to right, rgba(125, 252, 0, 0.6), rgba(50, 205, 50, 0.6));
452
    }
453

454
    /*有点累状态进度条颜色 */
455
    .nb-container .ui.progress.warning .bar {
456
        background-image: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 125, 80, 0.6));
457
    }
458

459
    /*高负载状态进度条颜色 */
460
    .nb-container .ui.progress.error .bar {
461
        background-image: linear-gradient(to right, rgba(255, 160, 120, 0.6), rgba(255, 70, 0, 0.6));
462
    }
463

464
    /* 离线状态进度条颜色 */
465
    .ui.progress.offline .bar {
466
        background-color: #000;
467
    }
468

469
    /* 上传下载图标颜色 */
470
    i.arrow.alternate.circle.down.outline.icon {
471
        color: rgb(0, 157, 255);
472
    }
473

474
    i.arrow.alternate.circle.up.outline.icon {
475
        color: #ff0000;
476
    }
477

478
    /*服务状态*/
479
    .nb-container .service-status .good {
480
        background: rgba(50, 205, 50, 0.75);
481
    }
482

483
    .nb-container .service-status .warning {
484
        background: rgba(250, 155, 40, 0.75);
485
    }
486

487
    .nb-container .service-status .danger {
488
        background: rgba(255, 35, 0, 0.75);
489
    }
490

491
    /* 服务页面大表格背景 */
492
    .table {
493
        backdrop-filter:var(--bb);
494
        background-color: var(--bc-color-light);
495
        border-radius: 1rem !important;
496
    }
497

498
    .ui.table {
499
        background-color: var(--bc-color-light);
500
    }
501

502
    .ui.button:not(.good):not(.warning):not(.danger):hover {
503
        background: #e0e1e2 none;
504
    }
505

506
    .ui.button:hover {
507
        filter: brightness(0.9);
508
    }
509

510
    .service-status .delay-today {
511
        vertical-align: sub;
512
    }
513

514
    /* 循环流量统计标题 */
515
    .service-status h2 {
516
        backdrop-filter:var(--bb);
517
        background-color: var(--he-color-light);
518
        border-radius: 1rem !important;
519
        margin: 0 !important;
520
    }
521

522
    /*底部*/
523
    .footer {
524
        backdrop-filter:var(--bb);
525
        background-color: var(--he-color-light);
526
        position: fixed !important;
527
        bottom: 0 !important;
528
        left: 0 !important;
529
        right: 0 !important;
530
        border-radius: 1rem 1rem 0 0 !important;
531
    }
532

533
    .ui.inverted.segment,
534
    .ui.primary.inverted.segment {
535
        background-color: var(--he-color-light);
536
    }
537

538
    .footer .container,
539
    .footer .container a {
540
        color: var(--message-color-light);
541
    }
542

543
    .footer .container a:hover {
544
        color: #ff8457 !important;
545
    }
546

547
    /* 提示消息 */
548
    .floating.message.success {
549
        backdrop-filter: blur(15px) brightness(110%);
550
        background-color: var(--he-color-light);
551
        border: 3px solid rgba(255.255.255.0.5);
552
        border-radius: 1rem !important;
553
        color: var(--message-color-light);
554
        box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
555
    }
556

557
    .floating.message.success .header {
558
        color: var(--message-color-light);
559
    }
560

561
    .floating.message.warning {
562
        backdrop-filter: blur(15px) brightness(110%);
563
        background-color: var(--he-color-light);
564
        border: 1px solid rgba(255.255.255.0.5);
565
        border-radius: 1rem !important;
566
        color: var(--message-color-light);
567
        box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
568
    }
569

570
    .floating.message.warning .header {
571
        color: var(--message-color-light);
572
    }
573

574
    .cpucontent {
575
        display: inline-block;
576
    }
577

578
    .rollanimation {
579
        animation: scroll 10s cubic-bezier(.2, 0, .8, 1) infinite;
580
    }
581

582
    @keyframes scroll {
583

584
        0% {
585
            transform: translateX(0%);
586
        }
587

588
        30% {
589
            transform: translateX(0%);
590
        }
591

592
        100% {
593
            transform: translateX(-100%);
594
        }
595

596
    }
597

598

599
    /*
600

601
    以下样式为部分原版主题样式，由于原版主题样式有些强制性，不方便二次修改，故拿出来
602

603
    */
604

605
    .ui.mini.message {
606
        width: 17rem;
607
    }
608

609
    .ui-alerts {
610
        padding: 23px 0 !important;
611
    }
612

613
    td {
614
        word-wrap: break-word;
615
        word-break: break-all;
616
    }
617

618
    .nb-container {
619
        padding-top: 75px;
620
        min-height: 100vh;
621
        padding-bottom: 65px;
622
        margin-bottom: -47px;
623
    }
624

625
    #app .ui.fluid.accordion {
626
        margin-bottom: 1rem;
627
    }
628

629
    .login.nb-container {
630
        display: flex;
631
        align-items: center;
632
        padding-top: unset;
633
    }
634

635
    .login.nb-container>.grid {
636
        width: 100%;
637
        margin: 0 auto;
638
    }
639

640
    .login.nb-container>.grid .column {
641
        max-width: 450px;
642
    }
643

644
    .status.cards .flag {
645
        margin-right: 0 !important;
646
    }
647

648
    .status.cards .header>.info.icon {
649
        float: right;
650
        margin-right: 0;
651
    }
652

653
    .status.cards .wide.column {
654
        padding-top: 0 !important;
655
        padding-bottom: 0 !important;
656
        height: 2rem !important;
657
    }
658

659
    .status.cards .three.wide.column {
660
        padding-right: 0 !important;
661
    }
662

663
    .status.cards .wide.column:nth-child(1) {
664
        margin-top: 1rem !important;
665
    }
666

667
    .status.cards .wide.column:nth-child(2) {
668
        margin-top: 1rem !important;
669
    }
670

671
    .status.cards .description {
672
        padding-bottom: 1rem !important;
673
    }
674

675
    .status.cards .ui.content.popup {
676
        min-width: 250px;
677
    }
678

679
    .status.cards .outline.icon {
680
        margin-right: 0 !important;
681
    }
682

683
    .ui.progress .bar {
684
        min-width: 1.26em !important;
685
        text-align: right;
686
        padding-right: 0.4em;
687
        line-height: 1.75em;
688
        color: rgba(255, 255, 255, 0.7);
689
        font-weight: 700;
690
        max-width: 100% !important;
691
    }
692

693
    .service-status .delay-today {
694
        display: flex;
695
        align-items: center;
696
    }
697

698
    .service-status .delay-today>i {
699
        display: inline-block;
700
        width: 1.2em;
701
        height: 1.2em;
702
        border-radius: 0.6em;
703
        background-color: grey;
704
        margin-right: 0.3em;
705
    }
706
</style>
707
<!-- 网页特效 - 樱花 -->
708
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
709

710
<!-- 网页鼠标点击特效 - 爱心 -->
711
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
712

713
<!-- 网页鼠标点击特效 - 烟花波纹 -->
714
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>
715

716
<!-- 鼠标特效 - 小星星拖尾 -->
717
<span class="js-cursor-container"></span>
718
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>

风尘落微雨

2024年最新哪吒探针面板详细搭建教程

文章分享

评论区

目录