359 lines
7.5 KiB
Plaintext
359 lines
7.5 KiB
Plaintext
<view class="container">
|
||
<!-- 顶部统计 -->
|
||
<view class="A">
|
||
<view class="card purple">
|
||
<text class="a1">48</text>
|
||
<text class="a2">在住老人</text>
|
||
<text class="a3">入住率 85%</text>
|
||
</view>
|
||
<view class="card purple">
|
||
<text class="a1">92%</text>
|
||
<text class="a2">任务完成率</text>
|
||
<text class="a3">较昨日提升 1%</text>
|
||
</view>
|
||
<view class="card purple">
|
||
<text class="a1">5</text>
|
||
<text class="a2">异常预警</text>
|
||
<text class="a3">需处理</text>
|
||
</view>
|
||
<view class="card purple">
|
||
<text class="a1">12/16</text>
|
||
<text class="a2">在线护工</text>
|
||
<text class="a3">当前护工</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 待处理预警 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text>待处理预警</text>
|
||
<navigator url="/pages/alerts/index" class="more">查看全部 ></navigator>
|
||
</view>
|
||
<view class="alert-list">
|
||
<view class="alert-item warning">
|
||
<text class="title">健康异常</text>
|
||
<text class="content">张奶奶心率持续偏高，建议就医检查</text>
|
||
<text class="time">张奶奶 · 10-31 17:00</text>
|
||
</view>
|
||
<view class="alert-item info">
|
||
<text class="title">设备故障</text>
|
||
<text class="content">301房间设备故障，需要维修</text>
|
||
<text class="time">301房间 · 10-31 16:30</text>
|
||
</view>
|
||
<view class="alert-item info">
|
||
<text class="title">任务超时</text>
|
||
<text class="content">护工小李有3个任务未按时完成</text>
|
||
<text class="time">护工小李 · 10-31 16:00</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 护工工作状态 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text>护工工作状态</text>
|
||
<navigator url="/pages/staff/index" class="more">管理 ></navigator>
|
||
</view>
|
||
<view class="staff-list">
|
||
<view class="staff-item">
|
||
<view class="info">
|
||
<text class="name">护工小王</text>
|
||
<text class="room">301房间 · 5个任务</text>
|
||
</view>
|
||
<text class="status online">在线</text>
|
||
</view>
|
||
<view class="staff-item">
|
||
<view class="info">
|
||
<text class="name">护工小李</text>
|
||
<text class="room">205房间 · 8个任务</text>
|
||
</view>
|
||
<text class="status busy">忙碌</text>
|
||
</view>
|
||
<view class="staff-item">
|
||
<view class="info">
|
||
<text class="name">护工小张</text>
|
||
<text class="room">102房间 · 3个任务</text>
|
||
</view>
|
||
<text class="status online">在线</text>
|
||
</view>
|
||
<view class="staff-item">
|
||
<view class="info">
|
||
<text class="name">护工小刘</text>
|
||
<text class="room">无 · 0个任务</text>
|
||
</view>
|
||
<text class="status offline">离线</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最近任务 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text>最近任务</text>
|
||
<navigator url="/pages/tasks/index" class="more">查看全部 ></navigator>
|
||
</view>
|
||
<view class="task-list">
|
||
<view class="task-item completed">
|
||
<text class="title">为张奶奶测量血压</text>
|
||
<text class="desc">护工小王 · 张奶奶 · 10-31 16:30</text>
|
||
<text class="status-tag">已完成</text>
|
||
</view>
|
||
<view class="task-item ongoing">
|
||
<text class="title">协助李爷爷用药</text>
|
||
<text class="desc">护工小李 · 李爷爷 · 10:30</text>
|
||
<text class="status-tag">进行中</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 健康异常 -->
|
||
<view class="section">
|
||
<view class="section-header">
|
||
<text>健康异常</text>
|
||
<navigator url="/pages/health/index" class="more">查看详情 ></navigator>
|
||
</view>
|
||
<view class="health-list">
|
||
<view class="health-item warning">
|
||
<text class="name">张奶奶</text>
|
||
<text class="value">心率: 95 (正常: 60-90)</text>
|
||
<text class="status">警告</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
wxss
|
||
.container {
|
||
background-color: #e6f7ff;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
/* 顶部 */
|
||
.A {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 5rpx;
|
||
background-color:#8fcde004;
|
||
}
|
||
|
||
.card {
|
||
width: 47%;
|
||
height: 160rpx;
|
||
background: linear-gradient(135deg, #6e7ff3, #9a8cf9);
|
||
color: white;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card .a1 {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.card .a2 {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.card .a3 {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 标题 */
|
||
.section {
|
||
margin-top: 30rpx;
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.section-header .icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.section-header .more {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 警告 */
|
||
.alert-list .alert-item {
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 15rpx;
|
||
position: relative;
|
||
border-left: 6rpx solid #f56c6c;
|
||
}
|
||
|
||
.alert-item.warning {
|
||
background-color: #fef0f0;
|
||
border-left-color: #f56c6c;
|
||
}
|
||
|
||
.alert-item.info {
|
||
background-color: #f0f7ff;
|
||
border-left-color: #409eff;
|
||
}
|
||
|
||
.alert-item .title {
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.alert-item .content {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.alert-item .time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 护工 */
|
||
.staff-list .staff-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.staff-item .avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.staff-item .info {
|
||
flex: 1;
|
||
}
|
||
|
||
.staff-item .name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.staff-item .room {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.staff-item .status {
|
||
font-size: 26rpx;
|
||
padding: 6rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.status.online {
|
||
color: #67c23a;
|
||
background-color: #f0f9eb;
|
||
}
|
||
|
||
.status.busy {
|
||
color: #e6a23c;
|
||
background-color: #fdf6ec;
|
||
}
|
||
|
||
.status.offline {
|
||
color: #909399;
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
/* 任务 */
|
||
.task-list .task-item {
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 15rpx;
|
||
position: relative;
|
||
border-left: 6rpx solid #67c23a;
|
||
}
|
||
|
||
.task-item.completed {
|
||
background-color: #f0f9eb;
|
||
border-left-color: #67c23a;
|
||
}
|
||
|
||
.task-item.ongoing {
|
||
background-color: #f0f7ff;
|
||
border-left-color: #409eff;
|
||
}
|
||
|
||
.task-item .title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.task-item .desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.task-item .status-tag {
|
||
font-size: 24rpx;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
float: right;
|
||
}
|
||
|
||
.status-tag.completed {
|
||
color: #67c23a;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
.status-tag.ongoing {
|
||
color: #409eff;
|
||
background-color: #ecf5ff;
|
||
}
|
||
|
||
/* 健康异常 */
|
||
.health-list .health-item {
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #fef0f0;
|
||
border-left: 6rpx solid #f56c6c;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.health-item .name {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #f56c6c;
|
||
}
|
||
|
||
.health-item .value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.health-item .status {
|
||
font-size: 26rpx;
|
||
color: #f56c6c;
|
||
background-color: #fef0f0;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 8rpx;
|
||
} |