From a015563dbe5adccd2837d33d69e9c032e2a7efa9 Mon Sep 17 00:00:00 2001
From: chenyc <501753378@qq.com>
Date: 星期二, 04 三月 2025 19:58:29 +0800
Subject: [PATCH] 34
---
src/views/home/index.vue | 27 +++++++++++++++++++--------
1 files changed, 19 insertions(+), 8 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e877662..f01fd6b 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="home-container layout-pd ">
<div class="container">
- <div class="container-left">
+ <div class="container-left" v-if="isLeftVisible">
<div class="patTabel">
<el-table :data="state.filterTableData" stripe :height="state.tableHeight.left" size="default"
highlight-current-row @current-change="handleCurrentChange" style="width: 300px">
@@ -35,7 +35,7 @@
</el-table>
</div>
</div>
- <div class="right" style="width: 100%;">
+ <div class="right" :class="{'full-width': !isLeftVisible}" style="width: 100%;">
<div style="width: 100%;">
<el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="患者档案" name="患者档案">
@@ -153,9 +153,11 @@
</div>
</div>
</div>
- <div class="fixed-div" v-show="patientsInfo.patientName">
+ <div class="fixed-div" v-show="patientsInfo.patientName" @click="toggleVisibility">
<el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
<div>{{ patientsInfo.patientName }}</div>
+ <el-icon size="20" v-if="isLeftVisible"><Fold /></el-icon>
+ <el-icon size="20" v-else><Expand /></el-icon>
</div>
</div>
</template>
@@ -207,7 +209,9 @@
const fangAnRef=ref()
const suifangjiluRef=ref()
const jilubiaoRef=ref()
+const isLeftVisible=ref(true)
const state = reactive({
+
global: {
homeChartOne: null,
homeChartTwo: null,
@@ -227,6 +231,10 @@
setTableHeight()
getPatients()
})
+// 定义一个方法来切换左边div的显示状态
+const toggleVisibility = () => {
+ isLeftVisible.value = !isLeftVisible.value;
+};
const handleCurrentChange = (val: any | undefined) => {
if (val) {
console.log(val)
@@ -347,11 +355,14 @@
.container-left {
width: 300px; /* 右边div的固定宽度 */
-.right {
- background-color: #409EFF;
- flex-grow: 1; /* 让这个div扩展以填充可用空间 */
- margin-left: 20px; /* 如果需要的话，可以给右边的div留出一些间距 */
+ transition: all 0.3s ease; /* 添加过渡效果，使宽度变化更加平滑 */
}
+.right {
+ flex-grow: 1; /* 让这个div扩展以填充可用空间 */
+ transition: all 0.3s ease; /* 添加过渡效果，使宽度变化更加平滑 */
+}
+.full-width {
+ width: 100%; /* 当左边div隐藏时，右边div占据全部宽度 */
}
.home-container {
overflow: hidden;
@@ -406,7 +417,7 @@
align-items: center;
bottom: 10px;
right: 30px;
- width: 200px;
+ width: 220px;
height: 100px;
color: rgb(16, 3, 3);
padding: 10px;
--
Gitblit v1.8.0