feat: 初始化医护端与患者端页面骨架
完成两个 Vite 应用的基础工程化配置、路由、状态管理及第一版业务页面，当前使用演示数据，尚未接入真实后端接口。
This commit is contained in:
yelan
@@ -0,0 +1,572 @@
|
||||
:root {
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
sans-serif;
|
||||
color: #1d2939;
|
||||
background: #f5f7fa;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1100px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clinical-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.clinical-sidebar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #d6e4ff;
|
||||
background: #11243e;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
height: 88px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
color: #11243e;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
place-items: center;
|
||||
border-radius: 12px;
|
||||
background: #93d8ca;
|
||||
}
|
||||
|
||||
.brand strong,
|
||||
.brand span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
margin-top: 3px;
|
||||
color: #8fa5c1;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.clinical-menu {
|
||||
flex: 1;
|
||||
padding: 18px 12px;
|
||||
border-right: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.clinical-menu .el-menu-item {
|
||||
height: 48px;
|
||||
margin: 4px 0;
|
||||
color: #a8bad2;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.clinical-menu .el-menu-item:hover {
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 8%);
|
||||
}
|
||||
|
||||
.clinical-menu .el-menu-item.is-active {
|
||||
color: #fff;
|
||||
background: #274765;
|
||||
}
|
||||
|
||||
.menu-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 12px;
|
||||
border-radius: 50%;
|
||||
background: currentcolor;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 22px 24px;
|
||||
color: #8fa5c1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #73d5a5;
|
||||
box-shadow: 0 0 0 4px rgb(115 213 165 / 12%);
|
||||
}
|
||||
|
||||
.clinical-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 88px;
|
||||
padding: 0 34px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
}
|
||||
|
||||
.header-kicker,
|
||||
.eyebrow {
|
||||
margin: 0 0 6px;
|
||||
color: #7e91a8;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.clinical-header h1 {
|
||||
margin: 0;
|
||||
color: #172b4d;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.user-context {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
display: grid;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #176b67;
|
||||
font-weight: 700;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #d9f1ec;
|
||||
}
|
||||
|
||||
.user-context strong,
|
||||
.user-context span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-context strong {
|
||||
color: #263b59;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.user-context span {
|
||||
margin-top: 2px;
|
||||
color: #91a0b3;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.clinical-main {
|
||||
padding: 32px 34px 48px;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-heading h2,
|
||||
.welcome-panel h2 {
|
||||
margin: 0;
|
||||
color: #172b4d;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.page-heading p:not(.eyebrow) {
|
||||
margin: 8px 0 0;
|
||||
color: #8090a5;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.welcome-panel {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
min-height: 190px;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px 34px;
|
||||
overflow: hidden;
|
||||
color: #e8f3f5;
|
||||
border-radius: 18px;
|
||||
background:
|
||||
radial-gradient(circle at 84% 18%, rgb(147 216 202 / 24%), transparent 28%),
|
||||
linear-gradient(125deg, #173958, #195d69);
|
||||
}
|
||||
|
||||
.welcome-panel h2 {
|
||||
max-width: 570px;
|
||||
color: #fff;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.welcome-copy {
|
||||
max-width: 600px;
|
||||
margin: 14px 0 0;
|
||||
color: #b9d1d9;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button {
|
||||
min-height: 40px;
|
||||
padding: 0 18px;
|
||||
color: #123148;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: #9bdfd0;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
background: #b3ebde;
|
||||
}
|
||||
|
||||
.secondary-button {
|
||||
color: #176b67;
|
||||
border: 1px solid #bfe2dc;
|
||||
background: #eefaf7;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card,
|
||||
.content-card {
|
||||
border: 1px solid #e9eef4;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-height: 132px;
|
||||
}
|
||||
|
||||
.stat-card .el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stat-topline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #7f91a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.is-orange {
|
||||
background: #f5b45e;
|
||||
}
|
||||
|
||||
.is-green {
|
||||
background: #68c795;
|
||||
}
|
||||
|
||||
.is-red {
|
||||
background: #eb8d8d;
|
||||
}
|
||||
|
||||
.is-blue {
|
||||
background: #78aee5;
|
||||
}
|
||||
|
||||
.stat-card strong {
|
||||
display: block;
|
||||
margin: 12px 0 4px;
|
||||
color: #193453;
|
||||
font-size: 27px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.stat-card small {
|
||||
color: #91a0b3;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content-card .el-card__header {
|
||||
padding: 20px 22px;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
}
|
||||
|
||||
.content-card .el-card__body {
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-heading h3 {
|
||||
margin: 0;
|
||||
color: #203957;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
color: #267d78;
|
||||
font-size: 12px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 72px;
|
||||
border-bottom: 1px solid #f0f3f6;
|
||||
}
|
||||
|
||||
.task-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.task-avatar {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
color: #456786;
|
||||
font-size: 13px;
|
||||
place-items: center;
|
||||
border-radius: 10px;
|
||||
background: #eaf1f6;
|
||||
}
|
||||
|
||||
.task-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-main strong,
|
||||
.task-main span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-main strong {
|
||||
color: #304968;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-main span {
|
||||
margin-top: 5px;
|
||||
color: #91a0b3;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.reminder-list {
|
||||
margin: 0;
|
||||
padding: 2px 0 8px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.reminder-list li {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f3f6;
|
||||
}
|
||||
|
||||
.reminder-list li:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.reminder-number {
|
||||
color: #62aa9f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reminder-list strong,
|
||||
.reminder-list span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reminder-list strong {
|
||||
color: #304968;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.reminder-list div span {
|
||||
margin-top: 5px;
|
||||
color: #91a0b3;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.table-card .el-card__body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.filter-bar .el-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.filter-bar .el-select {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 90px 1fr;
|
||||
gap: 16px 12px;
|
||||
align-items: center;
|
||||
color: #8797aa;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.detail-grid strong {
|
||||
color: #304968;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
min-height: 142px;
|
||||
}
|
||||
|
||||
.report-card > .el-card__body > span {
|
||||
color: #7f91a8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.report-card > .el-card__body > strong {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.report-placeholder {
|
||||
min-height: 330px;
|
||||
}
|
||||
|
||||
.empty-chart {
|
||||
display: grid;
|
||||
min-height: 280px;
|
||||
color: #8797aa;
|
||||
text-align: center;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.chart-icon {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-bottom: 12px;
|
||||
color: #2f8d83;
|
||||
font-size: 24px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: #e8f7f3;
|
||||
}
|
||||
|
||||
.empty-chart h3 {
|
||||
margin: 0;
|
||||
color: #304968;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.empty-chart p {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
max-width: 780px;
|
||||
}
|
||||
|
||||
.settings-card .el-card__body {
|
||||
padding: 8px 24px;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 86px;
|
||||
border-bottom: 1px solid #f0f3f6;
|
||||
}
|
||||
|
||||
.setting-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.setting-row strong,
|
||||
.setting-row span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting-row strong {
|
||||
color: #304968;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.setting-row span {
|
||||
margin-top: 6px;
|
||||
color: #91a0b3;
|
||||
font-size: 11px;
|
||||
}
|
||||
Reference in New Issue
Block a user