From 05f693e5fa05f91cab90460640e9fadfce18408a Mon Sep 17 00:00:00 2001
From: chenhaizhao <2291973799@qq.com>
Date: Tue, 23 Dec 2025 17:39:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=82=A3=E8=80=85=E9=A1=B5=E9=9D=A2=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/patient/patient.vue | 228 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 228 insertions(+)
 create mode 100644 pages/patient/patient.vue

diff --git a/pages/patient/patient.vue b/pages/patient/patient.vue
new file mode 100644
index 0000000..0bb685f
--- /dev/null
+++ b/pages/patient/patient.vue
@@ -0,0 +1,228 @@
+<script setup>
+import { ref } from 'vue';
+let active = ref('all')
+let cutNav = (type) => {
+   active.value = type
+}
+
+</script>
+
+<template>
+    <wd-watermark content="wot-design-uni"></wd-watermark>
+    <wd-fab inactiveIcon="ellipsis" activeIcon="rollback">
+        <view class="fab">
+            <view>调压趋势</view>
+            <view>新增任务</view>
+            <view>新增手术</view>
+        </view>
+    </wd-fab>
+    <view class="nav_bar">
+        <view class="nav">
+            <text @tap="cutNav('all')" :class="{active: active === 'all'}">全部</text>
+            <text @tap="cutNav('week')" :class="{active: active === 'week'}">本周</text>
+            <text @tap="cutNav('month')" :class="{active: active === 'month'}">本月</text>
+            <text @tap="cutNav('custom')" :class="{active: active === 'custom'}">自定义</text>
+        </view>
+        <wd-search placeholder="住院号/病人名称/医生" hide-cancel />
+    </view>
+    <view class="patient_list">
+        <view class="item" v-for="value in 10" :key="value">
+            <view class="top">
+                <text>已完成</text>
+                <text>住院号：000000</text>
+            </view>
+            <view class="content">
+                <view class="user_info">
+                    <view class="img">
+                        <image src="/static/patient.png"></image>
+                    </view>
+                    <view class="user">
+                        <view>
+                            <view class="name">林莲英</view>
+                            <view>手术时间</view>
+                        </view>
+                        <view>
+                            <view>00000000000</view>
+                            <view class="date">2020-12-22</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="drug">
+                    <view>植入物品牌</view>
+                    <view>索菲萨</view>
+                    <view>原发病</view>
+                    <view>小脑但脂瘤</view>
+                </view>
+                <view class="stress">
+                    <view>
+                        <view>初始压力</view>
+                        <view class="start">110</view>
+                    </view>
+                    <view>
+                        <view>当前压力</view>
+                        <view class="current">110</view>
+                    </view>
+                    <view>
+                        <view>脑积水类型</view>
+                        <view class="type">交通性，高压性</view>
+                    </view>
+                </view>
+                <view class="btns">
+                    <text>调压趋势</text>
+                    <text>调压记录</text>
+                    <text class="add">新增任务</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.fab {
+    view{
+        background: #4d80f0;
+        width: 112rpx;
+        height: 112rpx;
+        border-radius: 50%;
+        color: #fff;
+        box-sizing: border-box;
+        line-height: 34rpx;
+        padding: 20rpx 28rpx;
+        font-size: 14px;
+        margin-top: 18rpx;
+    }
+}
+.nav_bar {
+    position: sticky;
+    left: 0;
+    top: 0;
+    background-color: #fff;
+    .nav {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 28rpx;
+        color: #6b7280;
+        padding: 10rpx;
+        text {
+            padding: 10rpx 16rpx;
+            border-radius: 5rpx;
+        }
+    }
+    .active {
+        background: #3b82f6;
+        color: #ffffff;
+        border: 1rpx solid #3b82f6;
+    }
+}
+.patient_list {
+    background-color: #e0e0e0;
+    padding: 15rpx;
+    font-size: 24rpx;
+    color: #a3a5a6;
+    .item {
+        background-color: #fff;
+        overflow: hidden;
+        border-radius: 10rpx;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        margin-bottom: 15rpx;
+        .top {
+            display: flex;
+            justify-content: space-between;
+            background-color: #d4edda;
+            padding: 20rpx;
+            color: #155724;
+            text:first-of-type {
+                background: rgba(21, 87, 36, 0.1);
+                padding: 5rpx 12rpx;
+                border-radius: 5rpx;
+            }
+        }
+        .content {
+            padding: 20rpx;
+            .user_info {
+                display: flex;
+                line-height: 40rpx;
+                // justify-content: space-between;
+                .img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 65rpx;
+                    height: 65rpx;
+                    border-radius: 50%;
+                    margin-right: 18rpx;
+                    background-color: #e9ecef;
+                    image {
+                        width: 40rpx;
+                        height: 40rpx;
+                    }
+                }
+                .user {
+                    flex: 1;
+                    > view {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                    .name {
+                        font-weight: bold;
+                        font-size: 32rpx;
+                        color: #212529;
+                    }
+                    .date {
+                        font-size: 26rpx;
+                        font-weight: bold;
+                    }
+                }
+            }
+            .drug {
+                display: flex;
+                flex-wrap: wrap;
+                line-height: 40rpx;
+                margin: 20rpx 0;
+                view {
+                    width: 50%;
+                }
+            }
+            .stress {
+                display: flex;
+                border-radius: 12rpx;
+                padding: 22rpx;
+                background-color: #f8f9fa;
+                justify-content: space-around;
+                text-align: center;
+                font-size: 22rpx;
+                line-height: 40rpx;
+                .start {
+                    font-size: 28rpx;
+                    font-weight: bold;
+                }
+                .current {
+                    font-size: 28rpx;
+                    font-weight: bold;
+                    color: #20c997;
+                }
+                .type {
+                    font-size: 26rpx;
+                }
+            }
+            .btns {
+                display: flex;
+                gap: 15rpx;
+                margin-top: 20rpx;
+                text {
+                    background-color: #f8f9fa;
+                    border-radius: 12rpx;
+                    flex: 1;
+                    padding: 16rpx 12rpx;
+                    text-align: center;
+                }
+                .add {
+                    background-color: #007bff;
+                    color: #ffffff;
+                }
+            }
+        }
+    }
+}
+</style>