From dc73454be900fc697e5a2ba50e20d556f2e5a93a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BE=89?= <814457906@qq.com>
Date: Thu, 1 Aug 2024 16:18:16 +0800
Subject: [PATCH] xg

---
 src/views/manage/components/cardlist.vue | 152 +++++++++++++++++++++--
 1 file changed, 145 insertions(+), 7 deletions(-)

diff --git a/src/views/manage/components/cardlist.vue b/src/views/manage/components/cardlist.vue
index 4b7883c..3f4aac0 100644
--- a/src/views/manage/components/cardlist.vue
+++ b/src/views/manage/components/cardlist.vue
@@ -5,6 +5,45 @@
                 <div class="top">
                     <img src="../../../assets/manage/nvtouxiang.png" alt="" class="img" />
                     <!-- <img src="../../../assets/manage/touxiang.png" alt="" class="img" /> -->
+                    <div class="name">
+                        张三
+                    </div>
+                    <div class="agesex">
+                        女
+                        <span style="padding: 0 3px;">|</span>
+                        64岁
+                        <!-- <span class="zy">在院</span> -->
+                        <span class="cy">出院</span>
+                    </div>
+                    <div class="diagnosis">
+                        诊断名称：
+                    </div>
+                </div>
+                <div class="bottom">
+                    <div class="formitem">
+                        医生：李四
+                    </div>
+                    <div class="formitem">
+                        科室：心血管内科
+                    </div>
+                    <div class="formitem">
+                        就诊时间：2024-06-27
+                    </div>
+                    <div class="formitem flex">
+                        <span>
+                            康复计划执行率：
+                        </span>
+                        <el-progress :percentage="0" :format="format"></el-progress>
+                    </div>
+                    <div class="formitem flex">
+                        <span>
+                            康复计划完成率：
+                        </span>
+                        <el-progress :percentage="100" :format="format"></el-progress>
+                    </div>
+                    <div class="formitem">
+                        下次任务：
+                    </div>
                 </div>
             </div>
         </div>
@@ -29,7 +68,11 @@ export default {
     },
     mounted() {
     },
-    methods: {},
+    methods: {
+        format(percentage) {
+            return percentage === 100 ? `${percentage}%(3/3)` : `${percentage}%(3/3)`;
+        }
+    }
 }
 </script>
 <style lang="scss" scoped>
@@ -46,17 +89,112 @@ export default {
         min-height: 200px;
         border: 1px solid #DCDFE6;
         border-radius: 10px;
+        font-size: 14px;
+        font-weight: 600;
+
+        .bottom {
+            height: 160px;
+            padding: 0 6px;
+
+            .formitem {
+                height: 26px;
+                line-height: 26px;
+                font-size: 12px;
+                color: #756A5E;
+                font-weight: 550;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                overflow: hidden;
+            }
+
+            .flex {
+                display: flex;
+                align-items: center;
+
+                ::v-deep .el-progress-bar {
+                    flex: 1;
+                }
+
+                ::v-deep .el-progress__text {
+                    font-size: 12px !important;
+                    flex: 0.8;
+                    text-align: right;
+                }
+
+                span {
+                    flex: 0.8;
+                    max-width: 50%;
+                }
+
+                ::v-deep .el-progress {
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                }
+            }
+        }
 
         .top {
-            height: 80px;
+            height: 100px;
             background-color: #F7F8FA;
+            position: relative;
+            border-radius: 10px 10px 0 0;
+
+            .img {
+                margin: 10px 0 0 10px;
+                width: 50px;
+                height: 50px;
+            }
+
+            .agesex {
+                position: absolute;
+                right: 10px;
+                top: 16px;
+
+                // 在院
+                .zy {
+                    background-color: #DEEDF4;
+                    color: #1D98C6;
+                    border: 1.5px solid #1D98C6;
+                    border-radius: 2px;
+                    padding: 3px 5px;
+                    margin-left: 4px;
+                }
+
+                // 出院
+                .cy {
+                    background-color: #DEEFEE;
+                    color: #2A9A82;
+                    border: 1.5px solid #2A9A82;
+                    border-radius: 2px;
+                    padding: 3px 5px;
+                    margin-left: 4px;
+                }
+            }
+
+            .diagnosis {
+                position: absolute;
+                color: #756A5E;
+                font-weight: 550;
+                left: 70px;
+                top: 42px;
+                font-size: 12px;
+                height: 48px;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                padding-right: 4px;
+            }
+
+            .name {
+                position: absolute;
+                left: 70px;
+                top: 16px;
+            }
         }
 
-        .img {
-            margin: 10px 0 0 10px;
-            width: 50px;
-            height: 50px;
-        }
     }
 }
 </style>
\ No newline at end of file