修改首页样式
This commit is contained in:
parent
d5925c1435
commit
2d2057d8f7
@ -60,7 +60,6 @@ body {
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background: white;
|
|
||||||
border-bottom: 1px solid #e4e7ed;
|
border-bottom: 1px solid #e4e7ed;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dashboard-container">
|
<div class="dashboard-container dashboard-container-home">
|
||||||
<!-- 顶部导航栏 -->
|
<!-- 顶部导航栏 -->
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-left">
|
<div class="header-left">
|
||||||
<img src="/logo.png" alt="Logo" class="logo" />
|
<!-- <img src="/logo.png" alt="Logo" class="logo" /> -->
|
||||||
<h1 class="system-title">平衡体态检测系统</h1>
|
<h1 class="system-title">平衡体态检测系统</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
@ -27,32 +27,20 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="main-content">
|
|
||||||
<!-- 左侧功能导航 -->
|
<!-- 左侧功能导航 -->
|
||||||
<div class="sidebar">
|
<div class="main-dashboard-content">
|
||||||
<div class="nav-menu">
|
<aside class="sidebar">
|
||||||
<div class="nav-item" :class="{ active: activeNav === 'detection' }" @click="activeNav = 'detection'">
|
<div class="sidebar-item active">
|
||||||
<el-icon class="nav-icon"><Monitor /></el-icon>
|
<el-icon class="sidebar-icon"><UserFilled /></el-icon>
|
||||||
<span>检测</span>
|
<span class="sidebar-text">检测</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-item" :class="{ active: activeNav === 'patient' }" @click="activeNav = 'patient'">
|
</aside>
|
||||||
<el-icon class="nav-icon"><User /></el-icon>
|
|
||||||
<span>人员</span>
|
|
||||||
</div>
|
|
||||||
<div class="nav-item" :class="{ active: activeNav === 'system' }" @click="activeNav = 'system'">
|
|
||||||
<el-icon class="nav-icon"><Setting /></el-icon>
|
|
||||||
<span>系统</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧内容区域 -->
|
<!-- 右侧内容区域 -->
|
||||||
<div class="content-area">
|
<div class="content-area">
|
||||||
<!-- 患者列表区域 -->
|
<!-- 患者列表区域 -->
|
||||||
<div class="patient-section">
|
<div class="patient-section">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<h2>患者列表</h2>
|
<div class="module-title">身体姿态</div>
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="searchKeyword"
|
v-model="searchKeyword"
|
||||||
@ -63,89 +51,90 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<el-table :data="filteredPatients" style="width: 100%" border @cell-click="selectPatient" highlight-current-row>
|
||||||
<div class="patient-list">
|
<el-table-column prop="name" label="姓名" min-width="60" />
|
||||||
<div
|
<el-table-column prop="id" label="测试者ID" min-width="60" />
|
||||||
v-for="patient in filteredPatients"
|
<el-table-column prop="datetime" label="最后一次检查时间" min-width="60" />
|
||||||
:key="patient.id"
|
<el-table-column prop="gender" label="性别" min-width="60" />
|
||||||
class="patient-item"
|
<el-table-column prop="num" label="测试次数" min-width="60" />
|
||||||
:class="{ selected: selectedPatient?.id === patient.id }"
|
</el-table>
|
||||||
@click="selectPatient(patient)"
|
|
||||||
>
|
|
||||||
<el-avatar :size="50" :src="patient.avatar">
|
|
||||||
{{ patient.name.charAt(0) }}
|
|
||||||
</el-avatar>
|
|
||||||
<div class="patient-info">
|
|
||||||
<div class="patient-name">{{ patient.name }}</div>
|
|
||||||
<div class="patient-details">
|
|
||||||
<span>{{ patient.gender }} | {{ patient.age }}岁</span>
|
|
||||||
<span class="patient-id">ID: {{ patient.id }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="patient-status">
|
|
||||||
<el-tag :type="getStatusType(patient.lastDetection)">{{ getStatusText(patient.lastDetection) }}</el-tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 患者详情区域 -->
|
<!-- 患者详情区域 -->
|
||||||
<div class="patient-detail" v-if="selectedPatient">
|
<div class="patient-detail" v-if="selectedPatient">
|
||||||
|
<div class="patient-detail-box" >
|
||||||
<div class="detail-header">
|
<div class="detail-header">
|
||||||
<h3>患者信息</h3>
|
<div class="module-title">身体姿态</div>
|
||||||
<el-button type="text" @click="editPatient">
|
<el-button type="text" @click="editPatient">
|
||||||
<el-icon><Edit /></el-icon>
|
<el-icon><Edit /></el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-content">
|
<div class="basic-info-box">
|
||||||
<div class="info-grid">
|
<div class="basic-info-content">
|
||||||
<div class="info-item">
|
<div class="basic-info-text">
|
||||||
<label>姓名：</label>
|
<div class="basic-info-textcolor">测试者ID</div>
|
||||||
<span>{{ selectedPatient.name }}</span>
|
<div>2101</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="basic-info-text">
|
||||||
<label>性别：</label>
|
<div class="basic-info-textcolor">姓名</div>
|
||||||
<span>{{ selectedPatient.gender }}</span>
|
<div>张三</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="basic-info-text">
|
||||||
<label>年龄：</label>
|
<div class="basic-info-textcolor">性别</div>
|
||||||
<span>{{ selectedPatient.age }}岁</span>
|
<div>男</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
|
||||||
<label>身高：</label>
|
|
||||||
<span>{{ selectedPatient.height }}cm</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="basic-info-content">
|
||||||
<label>体重：</label>
|
<div class="basic-info-text">
|
||||||
<span>{{ selectedPatient.weight }}kg</span>
|
<div class="basic-info-textcolor">出生日期</div>
|
||||||
|
<div>2011/03/07</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="basic-info-text">
|
||||||
<label>联系电话：</label>
|
<div class="basic-info-textcolor">年龄</div>
|
||||||
<span>{{ selectedPatient.phone }}</span>
|
<div>14</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="basic-info-text">
|
||||||
<label>创建时间：</label>
|
<div class="basic-info-textcolor">民族</div>
|
||||||
<span>{{ formatDate(selectedPatient.createdAt) }}</span>
|
<div>-</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
|
||||||
<label>最后检测：</label>
|
|
||||||
<span>{{ selectedPatient.lastDetection ? formatDate(selectedPatient.lastDetection) : '暂无' }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="basic-info-content">
|
||||||
|
<div class="basic-info-text">
|
||||||
|
<div class="basic-info-textcolor">身高cm</div>
|
||||||
|
<div>167</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-text">
|
||||||
|
<div class="basic-info-textcolor">体重kg</div>
|
||||||
|
<div>51</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-text">
|
||||||
|
<div class="basic-info-textcolor">鞋码</div>
|
||||||
|
<div>38</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-content">
|
||||||
|
<div class="basic-info-text">
|
||||||
|
<div class="basic-info-textcolor">电话号码</div>
|
||||||
|
<div>18011110000</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-text">
|
||||||
|
<div class="basic-info-textcolor">建档时间</div>
|
||||||
|
<div>2024/12/13</div>
|
||||||
|
</div>
|
||||||
|
<div class="basic-info-text">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="action-buttons">
|
<div class="action-buttons">
|
||||||
<el-button type="primary" size="large" class="action-btn view-btn" @click="viewPatientProfile">
|
<div class="action-view-buttons" @click="viewPatientProfile">查看档案</div>
|
||||||
查看档案
|
<div class="action-view-buttons" @click="startDetection">检查</div>
|
||||||
</el-button>
|
<div class="action-view-buttons" @click="createNewPatient">+新患者建档</div>
|
||||||
<el-button type="success" size="large" class="action-btn detect-btn" @click="startDetection">
|
|
||||||
开始检测
|
|
||||||
</el-button>
|
|
||||||
<el-button type="warning" size="large" class="action-btn new-btn" @click="createNewPatient">
|
|
||||||
新患者建档
|
|
||||||
</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -193,10 +182,15 @@ const handleSearch = () => {
|
|||||||
// 搜索逻辑已在计算属性中处理
|
// 搜索逻辑已在计算属性中处理
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const selectPatient = (patient) => {
|
||||||
|
// selectedPatient.value = patient
|
||||||
|
// }
|
||||||
|
|
||||||
const selectPatient = (patient) => {
|
const selectPatient = (patient) => {
|
||||||
selectedPatient.value = patient
|
selectedPatient.value = patient
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const editPatient = () => {
|
const editPatient = () => {
|
||||||
router.push(`/patient/edit/${selectedPatient.value.id}`)
|
router.push(`/patient/edit/${selectedPatient.value.id}`)
|
||||||
}
|
}
|
||||||
@ -284,33 +278,24 @@ const loadPatients = async () => {
|
|||||||
name: '张三',
|
name: '张三',
|
||||||
gender: '男',
|
gender: '男',
|
||||||
age: 45,
|
age: 45,
|
||||||
height: 175,
|
datetime: '2023-05-01 14:00:00',
|
||||||
weight: 70,
|
num:4
|
||||||
phone: '13800138001',
|
|
||||||
createdAt: '2024-01-15T10:30:00Z',
|
|
||||||
lastDetection: '2024-01-20T14:20:00Z'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: '李四',
|
name: '李四',
|
||||||
gender: '女',
|
gender: '女',
|
||||||
age: 38,
|
datetime: '2023-05-01 14:00:00',
|
||||||
height: 165,
|
num:4
|
||||||
weight: 55,
|
|
||||||
phone: '13800138002',
|
|
||||||
createdAt: '2024-01-10T09:15:00Z',
|
|
||||||
lastDetection: null
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
name: '王五',
|
name: '王五',
|
||||||
gender: '男',
|
gender: '男',
|
||||||
age: 52,
|
age: 52,
|
||||||
height: 180,
|
datetime: '2023-05-01 14:00:00',
|
||||||
weight: 75,
|
num:4
|
||||||
phone: '13800138003',
|
|
||||||
createdAt: '2024-01-05T16:45:00Z',
|
|
||||||
lastDetection: '2024-01-18T11:30:00Z'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -334,12 +319,12 @@ onMounted(() => {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #f5f7fa;
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background: #fff;
|
/* background: #fff; */
|
||||||
border-bottom: 1px solid #e4e7ed;
|
border-bottom: 1px solid #e4e7ed;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -363,7 +348,7 @@ onMounted(() => {
|
|||||||
.system-title {
|
.system-title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #2c3e50;
|
color: #fff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -380,24 +365,49 @@ onMounted(() => {
|
|||||||
|
|
||||||
.username {
|
.username {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #606266;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-dropdown {
|
.user-dropdown {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #909399;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-dashboard-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 左侧导航栏 */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 200px;
|
width: 60px;
|
||||||
background: #2c3e50;
|
background-color: #2C2C2C;
|
||||||
padding: 20px 0;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item.active {
|
||||||
|
color: #C22ED0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-text {
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-menu {
|
.nav-menu {
|
||||||
@ -440,13 +450,11 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.patient-section {
|
.patient-section {
|
||||||
flex: 1;
|
width: calc(100% - 420px);
|
||||||
background: #fff;
|
background: rgb(51,51,51);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
@ -523,14 +531,18 @@ onMounted(() => {
|
|||||||
|
|
||||||
.patient-detail {
|
.patient-detail {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
background: #fff;
|
/* background: #fff; */
|
||||||
|
|
||||||
|
}
|
||||||
|
.patient-detail-box{
|
||||||
|
background: rgb(51,51,51);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
color:#fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-header {
|
.detail-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -575,9 +587,9 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
/* display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 12px;
|
gap: 12px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
.action-btn {
|
||||||
@ -607,7 +619,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #fff;
|
background: rgb(51, 51, 51);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
@ -615,4 +627,93 @@ onMounted(() => {
|
|||||||
:deep(.el-empty__description) {
|
:deep(.el-empty__description) {
|
||||||
color: #909399;
|
color: #909399;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.module-title {
|
||||||
|
|
||||||
|
|
||||||
|
width: 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 2px solid #ffffff;
|
||||||
|
border-image: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216)) 1;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1px 10px ;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.basic-info-box{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.basic-info-content{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.basic-info-text{
|
||||||
|
width: 33%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.basic-info-textcolor{
|
||||||
|
color: rgb(48,205,223);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
.action-view-buttons{
|
||||||
|
height: 100px;
|
||||||
|
line-height:100px ;
|
||||||
|
text-align: center;
|
||||||
|
background: linear-gradient(to right, #e930aa, rgb(160, 5, 216));
|
||||||
|
font-size: 40px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border-radius:50px ;
|
||||||
|
margin-top: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.dashboard-container.dashboard-container-home .el-table{
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table tr{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table thead.is-group th.el-table__cell{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .cell{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table th.el-table__cell.is-leaf{
|
||||||
|
background-color: rgb(70, 70,70 ) !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table td.el-table__cell{
|
||||||
|
background-color: rgb(0, 0,0 ) !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-table--border .el-table__cell{
|
||||||
|
border-right: transparent !important;
|
||||||
|
}
|
||||||
|
.dashboard-container.dashboard-container-home .el-table__body tr.current-row>td.el-table__cell{
|
||||||
|
background-color: rgb(121, 121, 121) !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user