zzzwangjun@gmail.com
5 months ago
6 changed files with 327 additions and 252 deletions
@ -1,204 +1,228 @@ |
|||||
|
|
||||
@page |
@page |
||||
@using Lion.AbpPro |
@using Lion.AbpPro |
||||
@model Lion.AbpPro.Pages.Monitor |
@model Lion.AbpPro.Pages.Monitor |
||||
|
|
||||
|
|
||||
@{ |
@{ |
||||
Layout = null; |
Layout = null; |
||||
} |
} |
||||
|
|
||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
|
|
||||
<html lang="en"> |
<html lang="en"> |
||||
<head> |
<head> |
||||
<meta charset="UTF-8"/> |
<meta charset="UTF-8"/> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> |
||||
<title>后端服务</title> |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
||||
|
<title>后端服务监控</title> |
||||
</head> |
</head> |
||||
|
|
||||
<body> |
<body> |
||||
<div class="container projects "> |
<div class="page-wrapper"> |
||||
<div class="projects-header page-header"> |
<div class="container"> |
||||
<h2>后端服务列表</h2> |
<div class="page-header"> |
||||
@* <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p> *@ |
<h1>后端服务监控面板</h1> |
||||
</div> |
<p class="subtitle">请选择您要访问的服务面板</p> |
||||
<div class="row"> |
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> |
|
||||
<div class="thumbnail" style="height: 180px"> |
|
||||
<a href="@AbpProHttpApiHostConst.SwaggerUiEndPoint" target="_blank"> |
|
||||
<img class="lazy" src="/images/swagger.png" width="300" height="150"/> |
|
||||
</a> |
|
||||
<div class="caption"> |
|
||||
<h3> |
|
||||
<a href="@AbpProHttpApiHostConst.SwaggerUiEndPoint" target="_blank">SwaggerUI</a> |
|
||||
</h3> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<div class="services-grid"> |
||||
|
<div class="service-item"> |
||||
|
<a href="@AbpProHttpApiHostConst.SwaggerUiEndPoint" target="_blank" class="service-link"> |
||||
|
<div class="service-icon"> |
||||
|
<i class="fas fa-book"></i> |
||||
</div> |
</div> |
||||
|
<div class="service-info"> |
||||
|
<h3>SwaggerUI</h3> |
||||
|
<p class="description">API文档与测试</p> |
||||
</div> |
</div> |
||||
|
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> |
|
||||
<div class="thumbnail" style="height: 180px"> |
|
||||
<a href="@AbpProHttpApiHostConst.CapDashboardEndPoint" target="_blank"> |
|
||||
<img class="lazy" src="/images/cap.png" width="300" height="150"/> |
|
||||
</a> |
</a> |
||||
<div class="caption"> |
|
||||
<h3> |
|
||||
<a href="@AbpProHttpApiHostConst.CapDashboardEndPoint" target="_blank">CAP面板</a> |
|
||||
</h3> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<div class="service-item"> |
||||
|
<a href="@AbpProHttpApiHostConst.CapDashboardEndPoint" target="_blank" class="service-link"> |
||||
|
<div class="service-icon"> |
||||
|
<i class="fas fa-exchange-alt"></i> |
||||
</div> |
</div> |
||||
|
<div class="service-info"> |
||||
|
<h3>CAP面板</h3> |
||||
|
<p class="description">事件总线监控</p> |
||||
</div> |
</div> |
||||
|
|
||||
<div class="col-sm-6 col-md-4 col-lg-3"> |
|
||||
<div class="thumbnail" style="height: 180px"> |
|
||||
<a href="@AbpProHttpApiHostConst.HangfireDashboardEndPoint" target="_blank"> |
|
||||
<img class="lazy" src="/images/hangfire.png" width="300" height="150"/> |
|
||||
</a> |
</a> |
||||
<div class="caption"> |
|
||||
<h3> |
|
||||
<a href="@AbpProHttpApiHostConst.HangfireDashboardEndPoint" target="_blank">Hangfire面板</a> |
|
||||
</h3> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<div class="service-item"> |
||||
|
<a href="@AbpProHttpApiHostConst.HangfireDashboardEndPoint" target="_blank" class="service-link"> |
||||
|
<div class="service-icon"> |
||||
|
<i class="fas fa-tasks"></i> |
||||
</div> |
</div> |
||||
|
<div class="service-info"> |
||||
|
<h3>Hangfire面板</h3> |
||||
|
<p class="description">后台任务管理</p> |
||||
</div> |
</div> |
||||
<div class="col-sm-6 col-md-4 col-lg-3"> |
|
||||
<div class="thumbnail" style="height: 180px"> |
|
||||
<a href="@AbpProHttpApiHostConst.MiniprofilerEndPoint" target="_blank"> |
|
||||
<img class="lazy" src="/images/miniprofiler.png" width="300" height="150"/> |
|
||||
</a> |
</a> |
||||
<div class="caption"> |
|
||||
<h3> |
|
||||
<a href="@AbpProHttpApiHostConst.MiniprofilerEndPoint" target="_blank">Miniprofiler</a> |
|
||||
</h3> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<div class="service-item"> |
||||
|
<a href="@AbpProHttpApiHostConst.MiniprofilerEndPoint" target="_blank" class="service-link"> |
||||
|
<div class="service-icon"> |
||||
|
<i class="fas fa-chart-line"></i> |
||||
</div> |
</div> |
||||
|
<div class="service-info"> |
||||
|
<h3>Miniprofiler</h3> |
||||
|
<p class="description">性能分析工具</p> |
||||
</div> |
</div> |
||||
<div class="col-sm-6 col-md-4 col-lg-3"> |
|
||||
<div class="thumbnail" style="height: 180px"> |
|
||||
<a href="@AbpProHttpApiHostConst.MoreEndPoint" target="_blank"> |
|
||||
<img class="lazy" src="/images/more.png" width="300" height="150"/> |
|
||||
</a> |
</a> |
||||
<div class="caption"> |
|
||||
<h3> |
|
||||
<a href="@AbpProHttpApiHostConst.MoreEndPoint" target="_blank">了解更多...</a> |
|
||||
</h3> |
|
||||
</div> |
</div> |
||||
|
|
||||
|
<div class="service-item"> |
||||
|
<a href="@AbpProHttpApiHostConst.MoreEndPoint" target="_blank" class="service-link"> |
||||
|
<div class="service-icon"> |
||||
|
<i class="fas fa-ellipsis-h"></i> |
||||
|
</div> |
||||
|
<div class="service-info"> |
||||
|
<h3>了解更多...</h3> |
||||
|
<p class="description">更多服务选项</p> |
||||
|
</div> |
||||
|
</a> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
</body> |
</body> |
||||
|
|
||||
</html> |
|
||||
<style> |
<style> |
||||
*:before, |
* { |
||||
*:after { |
margin: 0; |
||||
-webkit-box-sizing: border-box; |
padding: 0; |
||||
-moz-box-sizing: border-box; |
|
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
} |
} |
||||
|
|
||||
|
body { |
||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; |
||||
|
background-color: #f5f7fa; |
||||
|
color: #333; |
||||
|
line-height: 1.6; |
||||
|
min-height: 100vh; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.page-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: calc(100vh - 40px); |
||||
|
} |
||||
|
|
||||
.container { |
.container { |
||||
width: 1170px; |
max-width: 1000px; |
||||
padding-right: 15px; |
width: 100%; |
||||
padding-left: 15px; |
background: white; |
||||
margin-right: auto; |
border-radius: 12px; |
||||
margin-left: auto; |
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); |
||||
|
padding: 40px; |
||||
} |
} |
||||
|
|
||||
.projects-header { |
.page-header { |
||||
width: 60%; |
|
||||
text-align: center; |
text-align: center; |
||||
font-weight: 200; |
margin-bottom: 40px; |
||||
display: block; |
|
||||
margin: 60px auto 40px !important; |
|
||||
} |
} |
||||
|
|
||||
.page-header { |
.page-header h1 { |
||||
padding-bottom: 9px; |
font-size: 28px; |
||||
margin: 40px auto; |
font-weight: 600; |
||||
border-bottom: 1px solid #eee; |
color: #2d3748; |
||||
|
margin-bottom: 10px; |
||||
} |
} |
||||
|
|
||||
.projects-header h2 { |
.subtitle { |
||||
font-size: 42px; |
font-size: 16px; |
||||
letter-spacing: -1px; |
color: #718096; |
||||
} |
} |
||||
|
|
||||
h2 { |
.services-grid { |
||||
margin-top: 20px; |
display: grid; |
||||
margin-bottom: 10px; |
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
||||
font-weight: 500; |
gap: 25px; |
||||
line-height: 1.1; |
} |
||||
color: inherit; |
|
||||
/* text-align: center; */ |
.service-item { |
||||
|
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
transition: all 0.3s ease; |
||||
|
background: #ffffff; |
||||
|
border: 1px solid #e2e8f0; |
||||
} |
} |
||||
|
|
||||
p { |
.service-item:hover { |
||||
margin: 0 0 10px; |
transform: translateY(-3px); |
||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
||||
|
border-color: #cbd5e0; |
||||
} |
} |
||||
|
|
||||
.row { |
.service-link { |
||||
margin-right: -15px; |
text-decoration: none; |
||||
margin-left: -15px; |
color: inherit; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 25px; |
||||
} |
} |
||||
|
|
||||
.col-lg-3 { |
.service-icon { |
||||
width: 25%; |
width: 60px; |
||||
|
height: 60px; |
||||
|
border-radius: 50%; |
||||
|
background: #edf2f7; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20px; |
||||
|
flex-shrink: 0; |
||||
} |
} |
||||
|
|
||||
.projects .thumbnail { |
.service-icon i { |
||||
display: block; |
font-size: 24px; |
||||
margin-right: auto; |
color: #4299e1; |
||||
margin-left: auto; |
|
||||
text-align: center; |
|
||||
margin-bottom: 30px; |
|
||||
border-radius: 0; |
|
||||
} |
} |
||||
|
|
||||
.thumbnail { |
.service-info h3 { |
||||
display: block; |
font-size: 18px; |
||||
padding: 4px; |
font-weight: 600; |
||||
line-height: 1.42857143; |
color: #2d3748; |
||||
background-color: #fff; |
margin-bottom: 5px; |
||||
border: 1px solid #ddd; |
} |
||||
|
|
||||
. |
.description { |
||||
|
font-size: 14px; |
||||
|
color: #718096; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
transition(border 0.2 s ease-in-out); |
/* 使用响应式单位和弹性布局替代媒体查询 */ |
||||
|
.container { |
||||
|
padding: clamp(20px, 5vw, 40px); |
||||
} |
} |
||||
|
|
||||
a { |
.page-header h1 { |
||||
color: #337ab7; |
font-size: clamp(24px, 4vw, 28px); |
||||
text-decoration: none; |
|
||||
background-color: transparent; |
|
||||
} |
} |
||||
|
|
||||
.projects .thumbnail img { |
.service-link { |
||||
max-width: 100%; |
padding: clamp(15px, 3vw, 25px); |
||||
height: auto; |
|
||||
} |
} |
||||
|
|
||||
.thumbnail a > img, |
.services-grid { |
||||
.thumbnail > img { |
gap: clamp(15px, 3vw, 25px); |
||||
margin-right: auto; |
|
||||
margin-left: auto; |
|
||||
} |
} |
||||
|
|
||||
img { |
.service-icon { |
||||
vertical-align: middle; |
width: clamp(50px, 8vw, 60px); |
||||
|
height: clamp(50px, 8vw, 60px); |
||||
} |
} |
||||
|
|
||||
/* .projects .thumbnail .caption { |
.service-icon i { |
||||
overflow-y: hidden; |
font-size: clamp(20px, 4vw, 24px); |
||||
color: #555; |
|
||||
} */ |
|
||||
.caption { |
|
||||
padding: 9px; |
|
||||
overflow-y: hidden; |
|
||||
color: #555; |
|
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
|
</html> |
||||
Loading…
Reference in new issue