feat: 初始化医护端与患者端页面骨架
完成两个 Vite 应用的基础工程化配置、路由、状态管理及第一版业务页面，当前使用演示数据，尚未接入真实后端接口。
This commit is contained in:
yelan
@@ -0,0 +1,481 @@
|
||||
:root {
|
||||
font-family:
|
||||
Inter,
|
||||
ui-sans-serif,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
sans-serif;
|
||||
color: #173b56;
|
||||
background: #f3f8f8;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background: radial-gradient(circle at 10% 0%, rgb(170 226 215 / 28%), transparent 30%), #f3f8f8;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-shell {
|
||||
width: min(100%, 560px);
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px 42px;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
.mobile-brand-mark,
|
||||
.result-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #17425b;
|
||||
font-weight: 800;
|
||||
border-radius: 14px;
|
||||
background: #9dded1;
|
||||
}
|
||||
|
||||
.mobile-brand-mark {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.mobile-brand strong,
|
||||
.mobile-brand span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-brand strong {
|
||||
color: #173b56;
|
||||
font-size: 17px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.mobile-brand span {
|
||||
margin-top: 2px;
|
||||
color: #8497a5;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: #4d988d;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1.4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.mobile-hero,
|
||||
.mobile-heading {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.mobile-hero h1,
|
||||
.mobile-heading h1,
|
||||
.result-shell h1 {
|
||||
margin: 0;
|
||||
color: #173b56;
|
||||
font-size: 28px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.mobile-hero p:not(.eyebrow),
|
||||
.mobile-heading p:not(.eyebrow),
|
||||
.result-copy {
|
||||
margin: 12px 0 0;
|
||||
color: #788f9d;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.mobile-card,
|
||||
.document-card,
|
||||
.signature-pad {
|
||||
border: 1px solid #e0eceb;
|
||||
border-radius: 18px;
|
||||
background: rgb(255 255 255 / 86%);
|
||||
box-shadow: 0 12px 30px rgb(33 79 92 / 5%);
|
||||
}
|
||||
|
||||
.patient-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
margin-bottom: 16px;
|
||||
color: #8196a3;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.patient-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.patient-avatar {
|
||||
display: grid;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
color: #1c736b;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
background: #dff3ee;
|
||||
}
|
||||
|
||||
.patient-row strong,
|
||||
.patient-row span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.patient-row strong {
|
||||
color: #294d64;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.patient-row span {
|
||||
margin-top: 5px;
|
||||
color: #8aa0aa;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.task-number {
|
||||
margin-top: 18px;
|
||||
padding-top: 14px;
|
||||
color: #8aa0aa;
|
||||
font-size: 11px;
|
||||
border-top: 1px solid #edf3f2;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
margin-top: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.notice-icon {
|
||||
display: grid;
|
||||
flex: 0 0 auto;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #2a8176;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #dff3ee;
|
||||
}
|
||||
|
||||
.notice-card strong,
|
||||
.notice-card p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notice-card strong {
|
||||
color: #31576c;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notice-card p {
|
||||
margin: 6px 0 0;
|
||||
color: #8298a3;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.mobile-primary-button {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
margin-top: 24px;
|
||||
padding: 0 20px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 13px;
|
||||
background: #277d78;
|
||||
box-shadow: 0 10px 20px rgb(39 125 120 / 18%);
|
||||
}
|
||||
|
||||
.mobile-primary-button:hover {
|
||||
background: #216c68;
|
||||
}
|
||||
|
||||
.mobile-text-button {
|
||||
display: block;
|
||||
margin: 14px auto 0;
|
||||
padding: 6px 12px;
|
||||
color: #4d988d;
|
||||
font-size: 13px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.secure-note {
|
||||
margin: 18px 0 0;
|
||||
color: #9aabb3;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-stepper {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
color: #a4b4bb;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mobile-stepper span.is-active {
|
||||
color: #267d77;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mobile-stepper i {
|
||||
width: 18px;
|
||||
height: 1px;
|
||||
background: #d3e3e1;
|
||||
}
|
||||
|
||||
.document-card {
|
||||
max-height: 48vh;
|
||||
margin-bottom: 18px;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.document-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22px;
|
||||
color: #90a4ad;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.document-card h2 {
|
||||
margin: 20px 0 8px;
|
||||
color: #31566c;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.document-card h2:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.document-card p {
|
||||
margin: 0;
|
||||
color: #718995;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.document-placeholder {
|
||||
margin-top: 20px;
|
||||
padding: 13px;
|
||||
color: #7c9997;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
border: 1px dashed #b8d8d1;
|
||||
border-radius: 10px;
|
||||
background: #f3fbf9;
|
||||
}
|
||||
|
||||
.check-row {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: flex-start;
|
||||
color: #5d7885;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.check-row input {
|
||||
flex: 0 0 auto;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 2px 0 0;
|
||||
accent-color: #277d78;
|
||||
}
|
||||
|
||||
.form-error {
|
||||
margin: 10px 0 0;
|
||||
color: #c65d5d;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.signer-form {
|
||||
margin-bottom: 18px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #567281;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-label + .field-label {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mobile-input {
|
||||
width: 100%;
|
||||
min-height: 46px;
|
||||
padding: 0 13px;
|
||||
color: #31566c;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d8e8e6;
|
||||
border-radius: 10px;
|
||||
outline: 0;
|
||||
background: #fbfefd;
|
||||
}
|
||||
|
||||
.mobile-input:focus {
|
||||
border-color: #69b5aa;
|
||||
box-shadow: 0 0 0 3px rgb(105 181 170 / 14%);
|
||||
}
|
||||
|
||||
.signature-pad {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.signature-pad-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
color: #567281;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.signature-hint {
|
||||
color: #9aabb3;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.signature-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
touch-action: none;
|
||||
border: 1px dashed #b9d8d2;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(#fff, #fff),
|
||||
repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
transparent 43px,
|
||||
rgb(185 216 210 / 28%) 44px,
|
||||
transparent 45px
|
||||
);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
margin-top: 9px;
|
||||
padding: 5px 0;
|
||||
color: #4d988d;
|
||||
font-size: 11px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.result-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin-bottom: 22px;
|
||||
color: #1f776f;
|
||||
font-size: 32px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.result-copy {
|
||||
max-width: 370px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
width: 100%;
|
||||
margin-top: 28px;
|
||||
padding: 6px 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.result-card > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #edf3f2;
|
||||
}
|
||||
|
||||
.result-card > div:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.result-card span {
|
||||
color: #91a4ad;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.result-card strong {
|
||||
color: #31566c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.mobile-shell {
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.mobile-hero h1,
|
||||
.mobile-heading h1,
|
||||
.result-shell h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user