ThbTech/BodyBalanceEvaluation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改首页样式

Browse Source
This commit is contained in:
limengnan 2025-07-29 09:54:01 +08:00
parent d5925c1435
commit 2d2057d8f7
2 changed files with 223 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/renderer/src/style.css
View File

@ -60,7 +60,6 @@ body {
.header {
height: 60px;
background: white;
border-bottom: 1px solid #e4e7ed;
display: flex;
align-items: center;

343
frontend/src/renderer/src/views/Dashboard.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="dashboard-container">
<div class="dashboard-container dashboard-container-home">
<!-- 顶部导航栏 -->
<div class="header">
<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>
</div>
<div class="header-right">
@ -27,32 +27,20 @@
</div>
</div>
</div>
<div class="main-content">
<!-- 左侧功能导航 -->
<div class="sidebar">
<div class="nav-menu">
<div class="nav-item" :class="{ active: activeNav === 'detection' }" @click="activeNav = 'detection'">
<el-icon class="nav-icon"><Monitor /></el-icon>
<span>检测</span>
</div>
<div class="nav-item" :class="{ active: activeNav === 'patient' }" @click="activeNav = 'patient'">
<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 class="main-dashboard-content">
<aside class="sidebar">
<div class="sidebar-item active">
<el-icon class="sidebar-icon"><UserFilled /></el-icon>
<span class="sidebar-text">检测</span>
</div>
</aside>
<!-- 右侧内容区域 -->
<div class="content-area">
<!-- 患者列表区域 -->
<div class="patient-section">
<div class="section-header">
<h2>患者列表</h2>
<div class="module-title">身体姿态</div>
<div class="search-box">
<el-input
v-model="searchKeyword"
@ -63,89 +51,90 @@
/>
</div>
</div>
<div class="patient-list">
<div
v-for="patient in filteredPatients"
:key="patient.id"
class="patient-item"
:class="{ selected: selectedPatient?.id === patient.id }"
@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>
<el-table :data="filteredPatients" style="width: 100%" border @cell-click="selectPatient" highlight-current-row>
<el-table-column prop="name" label="姓名" min-width="60" />
<el-table-column prop="id" label="测试者ID" min-width="60" />
<el-table-column prop="datetime" label="最后一次检查时间" min-width="60" />
<el-table-column prop="gender" label="性别" min-width="60" />
<el-table-column prop="num" label="测试次数" min-width="60" />
</el-table>
</div>
<!-- 患者详情区域 -->
<div class="patient-detail" v-if="selectedPatient">
<div class="detail-header">
<h3>患者信息</h3>
<div class="patient-detail-box" >
<div class="detail-header">
<div class="module-title">身体姿态</div>
<el-button type="text" @click="editPatient">
<el-icon><Edit /></el-icon>
</el-button>
</div>
<div class="detail-content">
<div class="info-grid">
<div class="info-item">
<label>姓名：</label>
<span>{{ selectedPatient.name }}</span>
<div class="basic-info-box">
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">测试者ID</div>
<div>2101</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">姓名</div>
<div>张三</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">性别</div>
<div>男</div>
</div>
</div>
<div class="info-item">
<label>性别：</label>
<span>{{ selectedPatient.gender }}</span>
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">出生日期</div>
<div>2011/03/07</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">年龄</div>
<div>14</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">民族</div>
<div>-</div>
</div>
</div>
<div class="info-item">
<label>年龄：</label>
<span>{{ selectedPatient.age }}岁</span>
<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="info-item">
<label>身高：</label>
<span>{{ selectedPatient.height }}cm</span>
</div>
<div class="info-item">
<label>体重：</label>
<span>{{ selectedPatient.weight }}kg</span>
</div>
<div class="info-item">
<label>联系电话：</label>
<span>{{ selectedPatient.phone }}</span>
</div>
<div class="info-item">
<label>创建时间：</label>
<span>{{ formatDate(selectedPatient.createdAt) }}</span>
</div>
<div class="info-item">
<label>最后检测：</label>
<span>{{ selectedPatient.lastDetection ? formatDate(selectedPatient.lastDetection) : '暂无' }}</span>
<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 class="action-buttons">
<el-button type="primary" size="large" class="action-btn view-btn" @click="viewPatientProfile">
查看档案
</el-button>
<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 class="action-view-buttons" @click="viewPatientProfile">查看档案</div>
<div class="action-view-buttons" @click="startDetection">检查</div>
<div class="action-view-buttons" @click="createNewPatient">+新患者建档</div>
</div>
</div>
@ -193,10 +182,15 @@ const handleSearch = () => {
// 搜索逻辑已在计算属性中处理
}
// const selectPatient = (patient) => {
// selectedPatient.value = patient
// }
const selectPatient = (patient) => {
selectedPatient.value = patient
}
const editPatient = () => {
router.push(`/patient/edit/${selectedPatient.value.id}`)
}
@ -284,33 +278,24 @@ const loadPatients = async () => {
name: '张三',
gender: '男',
age: 45,
height: 175,
weight: 70,
phone: '13800138001',
createdAt: '2024-01-15T10:30:00Z',
lastDetection: '2024-01-20T14:20:00Z'
datetime: '2023-05-01 14:00:00',
num:4
},
{
id: 2,
name: '李四',
gender: '女',
age: 38,
height: 165,
weight: 55,
phone: '13800138002',
createdAt: '2024-01-10T09:15:00Z',
lastDetection: null
datetime: '2023-05-01 14:00:00',
num:4
},
{
id: 3,
name: '王五',
gender: '男',
age: 52,
height: 180,
weight: 75,
phone: '13800138003',
createdAt: '2024-01-05T16:45:00Z',
lastDetection: '2024-01-18T11:30:00Z'
datetime: '2023-05-01 14:00:00',
num:4
}
]
}
@ -334,12 +319,12 @@ onMounted(() => {
height: 100vh;
display: flex;
flex-direction: column;
background: #f5f7fa;
background: #000;
}
.header {
height: 60px;
background: #fff;
/* background: #fff; */
border-bottom: 1px solid #e4e7ed;
display: flex;
justify-content: space-between;
@ -363,7 +348,7 @@ onMounted(() => {
.system-title {
font-size: 20px;
font-weight: 600;
color: #2c3e50;
color: #fff;
margin: 0;
}
@ -380,24 +365,49 @@ onMounted(() => {
.username {
font-size: 14px;
color: #606266;
color: #fff;
}
.user-dropdown {
padding: 0;
color: #909399;
color: #fff;
}
.main-content {
.main-dashboard-content {
flex: 1;
display: flex;
overflow: hidden;
}
/* 左侧导航栏 */
.sidebar {
width: 200px;
background: #2c3e50;
padding: 20px 0;
width: 60px;
background-color: #2C2C2C;
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 {
@ -440,13 +450,11 @@ onMounted(() => {
}
.patient-section {
flex: 1;
background: #fff;
width: calc(100% - 420px);
background: rgb(51,51,51);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.section-header {
@ -523,14 +531,18 @@ onMounted(() => {
.patient-detail {
width: 400px;
background: #fff;
/* background: #fff; */
}
.patient-detail-box{
background: rgb(51,51,51);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
color:#fff;
}
.detail-header {
display: flex;
justify-content: space-between;
@ -575,9 +587,9 @@ onMounted(() => {
}
.action-buttons {
display: flex;
/* display: flex;
flex-direction: column;
gap: 12px;
gap: 12px; */
}
.action-btn {
@ -607,7 +619,7 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
background: rgb(51, 51, 51);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@ -615,4 +627,93 @@ onMounted(() => {
:deep(.el-empty__description) {
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>