<style>
:root {
--sidebar
-hover
: #adcfe
3;
--sidebar
-active
: #5071d9;
--content
-bg
: #f8f9fa;
--header
-bg
: #
3498db;
--card
-shadow
: 0 4px 12px rgba(0, 0, 0, 0.1);
--primary
-color
: #
3498db;
--secondary
-color
: #8e44ad;
--success
-color
: #2ecc71;
--warning
-color
: #f
39c12;
--danger
-color
: #e74c
3c;
}
body {
font-family
: "Arial","Microsoft YaHei","SimHei",sans
-serif;
background
: #eff0f4;
color
: #
333;
display
: flex;
max
-height
: 100vh;
overflow
-x
: hidden;
}
.sidebar {
width
: 250px;
background
: #ffffff;
color
: white;
position
: fixed;
height
: 910px;
z
-index
: 1000;
overflow
-y
: auto;
transition
: all 0.
3s;
border
-radius
: 20px;
margin
-top
:20px;
margin
-bottom
:20px;
margin
-left
:20px
}
.sidebar
-header {
padding
: 20px;
background
: rgba(0, 0, 0, 0.2);
text
-align
: center;
}
.sidebar
-header h
3 {
font-size: 1.5
rem;
margin
-bottom
: 0;
}
.sidebar
-menu {
padding
: 25px 0;
}
.sidebar
-menu ul {
list
-style
: none;
padding
: 0;
margin
: 0;
}
.sidebar
-menu li {
margin
-bottom
: 5px;
padding
: 5px 5px;
border
-radius
:50px;
}
ul li a {
text
-decoration
: none;
}
.sidebar
-menu a {
display
: flex;
align
-items
: center;
padding
: 12px 20px;
color
: #
333;
text
-decoration
: none;
transition
: all 0.
3s;
}
.sidebar
-menu a
:hover {
background
: var(
--sidebar
-hover);
border
-radius
:50px;
color
: black;
}
.sidebar
-menu a.active {
background
: var(
--sidebar
-active);
border
-radius
:50px;
color
: white;
}
.sidebar
-menu i {
margin
-right
: 15px;
font-size: 1.2
rem;
width
: 25px;
text
-align
: center;
}
.main
-content {
flex
: 1;
margin
-left
: 300px;
margin
-right
: 50px;
max
-height
: 100vh;
display
: flex;
flex
-direction
: column;
}
.header {
border
-radius
: 20px;
color
: white;
padding
: 15px 0;
margin
: 20px 20px 0 20px;
box
-shadow
: var(
--card
-shadow);
display
:flex;
justify
-content
:center;
align
-items
:center;
}
.content
-area {
padding
: 30px;
flex
: 1;
}
.card {
background
: #ffffff;
border
-radius
: 12px;
box
-shadow
: var(
--card
-shadow);
margin
-bottom
: 25px;
border
: none;
transition
: transform 0.
3s;
overflow
: hidden;
}
.card
-header {
background
:#ffffff;
border
-radius
: 12px 12px 0 0 !important;
padding
: 15px 20px;
font-weight
: bold;
display
: flex;
align
-items
: center;
}
.history
-card {
display
: flex;
flex
-direction
: column;
height
: 410px;
}
.table
-container {
height
: 100vh;
overflow
-y
: auto;
}
.card
-body {
flex
: 1;
display
: flex;
flex
-direction
: column;
padding
: 0;
height
:375px;
}
.chart
-container {
position
: relative;
padding
: 20px;
}
.data
-table {
table
-layout
: fixed;
width
: 100%;
border
-collapse
: collapse;
}
.data
-table th
:nth
-child(6),
.data
-table td
:nth
-child(6) { width
: 28%; }
.data
-table th {
padding
: 12px 15px;
text
-align
: center;
background
:#e2e6ed;
}
.data
-table td {
padding
: 10px 15px;
border
-bottom
: 1px solid #eee;
text
-align
: center;
}
.data
-table tr
:hover {
background
-color
: #f9f9f9;
}
.select
-container {
display
: flex;
gap
: 15px;
margin
-bottom
: 25px;
flex
-wrap
: wrap;
}
.select
-box {
flex
: 1;
min
-width
: 200px;
}
#risk
-table {
width
:10%;
table
-layout
:fixed;
}
#th, td {
width
:calc(100% / 6);
}
.level
-row {
display
: flex;
justify
-content
:space
-between;
align
-items
: center;
padding
: 15px 0;
}
.level
-row > div {
flex
:1;
text
-align
:center;
margin
:0 10px;
}
.level
-row
:last
-child {
border
-bottom
: none;
}
.level
-icon {
flex
: 0 0 60px;
display
: flex;
justify
-content
: center;
}
.level
-count {
flex
: 0 0 100px;
text
-align
: center;
font-size: 20px;
font-weight
: bold;
color
: #2c
3e50;
}
.level
-desc {
flex
: 1;
text
-align
: left;
padding
-left
: 15px;
}
.circle
-btn {
display
: inline
-flex;
align
-items
: center;
justify
-content
: center;
width
: 45px;
height
: 45px;
border
-radius
: 50%;
color
: white;
text
-decoration
: none;
font-weight
: bold;
border
: none;
transition
: all 0.
3s;
}
.circle
-btn
:hover {
transform
: scale(1.1);
box
-shadow
: 0 4px 8px rgba(0,0,0,0.2);
}
.circle
-btn.risk {
background
-color
: #e74c
3c;
}
.circle
-btn.subhealth {
background
-color
: #f
39c12;
}
.circle
-btn.health {
background
-color
: #27ae60;
}
.circle
-btn.active {
transform
: scale(1.1);
box
-shadow
: 0 0 0
3px rgba(0,0,0,0.2), 0 0 0 6px rgba(255,255,255,0.5);
}
.circle
-btn a {
color
: white;
text
-decoration
: none;
}
.table
-title {
padding
: 15px 20px;
font-weight
: bold;
background
-color
: #f8f9fa;
border
-bottom
: 1px solid #dee2e6;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="sidebar
-menu">
<ul>
<li>
<a href="/">
<i class="fas fa
-heartbeat me
-2"></i>
<span>首页</span>
</a>
</li>
<li id="register
-link">
<a href="/register">
<i class="fas fa
-sign
-in me
-2"></i>
<span>登陆注册管理</span>
</a>
</li>
<li>
<a href="/general">
<i class="fas fa
-folder"></i>
<span>总体数据概况</span>
</a>
</li>
<li>
<a href="/clf" class="active">
<i class="fas fa
-chart
-pie"></i>
<span>人员分级管理</span>
</a>
</li>
<li>
<a href="/hpa">
<i class="fas fa
-bell"></i>
<span>健康促进活动</span>
</a>
</li>
<li id="blood
-link">
<a href="/blood">
<i class="fas fa
-chart
-bar"></i>
<span>血压数据统计</span>
</a>
</li>
<li id="bmi
-link">
<a href="/bmi">
<i class="fas fa
-chart
-bar"></i>
<span>BMI数据统计</span>
</a>
</li>
<li id="physical
-link">
<a href="/physical">
<i class="fas fa
-check
-circle"></i>
<span>体检信息统计</span>
</a>
</li>
<li>
<a href="/perfile">
<i class="fas fa
-file
-alt"></i>
<span>个人健康档案</span>
</a>
</li>
</ul>
</div>
</div>
<div class="main
-content">
<div class="row">
<div class="col
-9">
<div class="header" style="background
-color
:#5071d9;">
<h1 class="mb
-0">人员分级管理</h1>
</div>
</div>
<div class="col
-3">
<div id="user
-info" class="header" style="background
-color
:#ffffff;">
</div>
</div>
</div>
<div class="content
-area">
<div class="row">
<div class="col
-6">
<div class="select
-container">
<div class="select
-box">
<select id="year
-month
-select" class="form
-select">
<option value="">加载中...</option>
</select>
</div>
</div>
<div class="level
-row">
<div class="level
-icon">
<button id="risk
-btn" class="circle
-btn risk active">
<i class="fas fa
-exclamation
-triangle"></i>
</button>
</div>
<div class="level
-count" id="num
-risk">0</div>
<div class="level
-desc">
<h6 style="
font-weight
:bold;">风险</h6>
<p class="small text
-muted mb
-0">二级/三级高血压</p>
</div>
</div>
<div class="level
-row">
<div class="level
-icon">
<button id="unhealth
-btn" class="circle
-btn subhealth">
<i class="fas fa
-tag"></i>
</button>
</div>
<div class="level
-count" id="num
-unh">0</div>
<div class="level
-desc">
<h6 style="
font-weight
:bold;">亚健康</h6>
<p class="small text
-muted mb
-0">血压BMI未在正常区间/体检指标存在异常</p>
</div>
</div>
<div class="level
-row">
<div class="level
-icon">
<button id="health
-btn" class="circle
-btn health">
<i class="fas fa
-heart"></i>
</button>
</div>
<div class="level
-count" id="num
-health">0</div>
<div class="level
-desc">
<h6 style="
font-weight
:bold;">健康</h6>
<p class="small text
-muted mb
-0">血压BMI正常、体检无异常</p>
</div>
</div>
</div>
<div class="col
-6">
<div class="card">
<div class="chart
-container">
<canvas id="deptChart" height="
320"></canvas>
</div>
</div>
</div>
</div>
<div id="table
-wrapper">
<div class="card history
-card">
<div class="card
-header">
<span id="table
-title">风险人员明细</span>
<div class="ms
-auto" style="width
: 200px;">
<select id="dept
-filter
-select" class="form
-select form
-select
-sm">
<option value="all">全部部门</option>
</select>
</div>
<button id="export
-risk
-btn" class="btn">
<i class="fas fa
-download me
-2"></i>导出名单
</button>
</div>
<div class="card
-body">
<div class="table
-container" style="height
:340px;">
<table class="data
-table">
<tbody id="risk
-table">
<tr><td colspan="7" class="text
-center">加载中...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>改变窗口大小时内部组件会变化大小，是通过什么设定的
本文介绍了CSS3中新增的字体单位rem，它是相对于根节点(html)的大小进行计算的。文章详细解释了如何通过设置html节点的字体大小来实现rem单位的灵活运用，并提供了兼容旧版浏览器的解决方案。
扫一扫
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
