xinyilu/postdischarge-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xg

Browse Source
This commit is contained in:
辉 2024-08-01 16:18:16 +08:00
parent afdc4cc8d7
commit dc73454be9
1 changed files with 145 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
src/views/manage/components/cardlist.vue
View File

@ -5,6 +5,45 @@
<div class="top"> <div class="top">
<img src="../../../assets/manage/nvtouxiang.png" alt="" class="img" /> <img src="../../../assets/manage/nvtouxiang.png" alt="" class="img" />
<!-- <img src="../../../assets/manage/touxiang.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> </div>
</div> </div>
@ -29,7 +68,11 @@ export default {
}, },
mounted() { mounted() {
}, },
methods: {}, methods: {
format(percentage) {
return percentage === 100 ? `${percentage}%(3/3)` : `${percentage}%(3/3)`;
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -46,17 +89,112 @@ export default {
min-height: 200px; min-height: 200px;
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
border-radius: 10px; 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 { .top {
height: 80px; height: 100px;
background-color: #F7F8FA; 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> </style>