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

修改

Browse Source
This commit is contained in:
jingna 2025-08-05 20:07:18 +08:00
parent 5dd55a2a40
commit cd9808c8e2
1 changed files with 417 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
frontend/src/renderer/src/views/Detection.vue
View File

@ -14,39 +14,21 @@
<!-- <div > <!-- <div >
{{ formattedTime }} {{ formattedTime }}
</div> --> </div> -->
<el-button <el-button v-if="!isRecording" @click="handleStartStop" :disabled="!isConnected" type="primary"
v-if="!isRecording" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
@click="handleStartStop"
:disabled="!isConnected"
type="primary"
class="start-btn"
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
--el-button-border-color: #409EFF; --el-button-border-color: #409EFF;
--el-button-border-color: transparent;" --el-button-border-color: transparent;">
>
{{ isConnected ? '开始' : '连接中saveRecording...' }} {{ isConnected ? '开始' : '连接中saveRecording...' }}
</el-button> </el-button>
<!-- handleStartStop --> <!-- handleStartStop -->
<el-button <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
v-if="isRecording"
@click="handleStartStop"
type="primary"
class="start-btn"
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
--el-button-border-color: #409EFF; --el-button-border-color: #409EFF;
--el-button-border-color: transparent " --el-button-border-color: transparent ">
>
结束 结束
</el-button> </el-button>
<el-button <el-button v-if="isStart && isConnected" @click="handleScreenshot" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6);
v-if="isStart && isConnected"
@click="handleScreenshot"
type="primary"
class="start-btn"
style="background-image: linear-gradient(to right, #FBB106, #A817C6);
--el-button-border-color: #409EFF; --el-button-border-color: #409EFF;
--el-button-border-color: transparent " --el-button-border-color: transparent ">
>
保存数据 保存数据
</el-button> </el-button>
<!-- <el-button <!-- <el-button
@ -77,8 +59,12 @@
<div class="top-bar-right"> <div class="top-bar-right">
<span class="info-item">测试时间：2025/5/28 下午14:38</span> <span class="info-item">测试时间：2025/5/28 下午14:38</span>
<span class="info-item">测试医生：李四</span> <span class="info-item">测试医生：李四</span>
<el-icon class="top-icon"><Clock /></el-icon> <el-icon class="top-icon">
<el-icon class="top-icon"><Grid /></el-icon> <Clock />
</el-icon>
<el-icon class="top-icon">
<Grid />
</el-icon>
</div> </div>
</header> </header>
@ -90,16 +76,14 @@
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
身体姿态</div> 身体姿态
</div>
</div> </div>
</div> </div>
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;"> <div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
<!-- 使用深度相机视频流替换静态图片 --> <!-- 使用深度相机视频流替换静态图片 -->
<img <img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流"
:src="depthCameraImgSrc || '@/assets/posture.png'" style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;">
alt="深度相机视频流"
style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;"
>
</div> </div>
</div> </div>
<div class="body-posture" style="width: 44%;display: flex; <div class="body-posture" style="width: 44%;display: flex;
@ -107,22 +91,18 @@
align-content: space-between; align-content: space-between;
"> ">
<div class="module-card" style=" height:513px"> <div class="module-card" style=" height:420px">
<!-- 头部姿态模块 --> <!-- 头部姿态模块 -->
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
头部姿态</div> 头部姿态
</div> </div>
<el-button </div>
type="primary" <el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
class="start-btn" --el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;">
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
--el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;"
>
清零 清零
</el-button> </el-button>
</div> </div>
@ -131,33 +111,37 @@
<!-- 仪表盘区域 --> <!-- 仪表盘区域 -->
<div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;"> <div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <div id="headChart1" style="width: 100%;height: 140px;"></div>
<!-- <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> -->
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-55.2°</span></div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-55.2°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">-55.2°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span
class="gauge-group-box-text2">-55.2°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;">
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-7.7°</span></div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-7.7°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">8.7°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span
class="gauge-group-box-text2">8.7°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;">
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-10.5°</span></div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-10.5°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">11.5°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span
class="gauge-group-box-text2">11.5°</span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 历史数据表格 --> <!-- 历史数据表格 -->
<div style="display: flex;justify-content: center;padding: 0px 25px;">
<div class="gauge-table-title"> <div class="gauge-table-title">
历史数据 历史数据..
</div> </div>
<div style="display: flex;justify-content: center;margin-bottom: 10px;"> <el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
<el-table :data="historyData" style="width: 96%">
<el-table-column prop="id" label="ID" width="60" /> <el-table-column prop="id" label="ID" width="60" />
<el-table-column label="最大旋转角" align="center"> <el-table-column label="最大旋转角" align="center">
<el-table-column prop="rotLeft" label="左" min-width="60" align="center" /> <el-table-column prop="rotLeft" label="左" min-width="60" align="center" />
@ -175,59 +159,58 @@
</div> </div>
</div> </div>
<!-- 足部压力模块 --> <!-- 足部压力模块 -->
<div class="module-card" style=" height: calc(100% - 523px); min-height: calc(335px);"> <div class="module-card" style=" height: calc(100% - 426px); min-height: calc(335px);">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
足部压力</div> 足部压力
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-container"> <div class="foot-container">
<div class="foot-container-left"> <div class="foot-container-left" style="font-size: 14px;">
<div> <div>
<span>左前足</span> <span>左前足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>左后足</span> <span>左后足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
<div class="foot-container-content"> <div class="foot-container-content">
<div style="display: flex;justify-content: center;margin-bottom: 8px;"> <div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 16px;font-weight: 700;">
<div> <div>
<span>左前足</span> <span>左足</span>
<span class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-marginleft">
<span>左后足</span> <span>右足</span>
<span class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
<img src="@/assets/zu.png" alt=""> <img src="@/assets/zu.png" alt="">
<div style="display: flex;justify-content: center;margin-top: 8px;"> <div style="display: flex;justify-content: center;margin-top: 8px;font-size: 14px;">
<div> <div>
<span>左前足</span> <span>左足总压力</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-marginleft">
<span>左后足</span> <span>右足总压力</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-container-right"> <div class="foot-container-right" style="font-size: 14px;">
<div> <div>
<span>右前足</span> <span>右前足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>右后足</span> <span>右后足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
</div> </div>
@ -240,16 +223,19 @@
align-content: space-between; align-content: space-between;
"> ">
<!-- 基础信息模块 --> <!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: calc(370px);"> <div class="module-card" style="padding-bottom: 40px; height: calc(364px);">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;">
基础信息</div> 基础信息
</div>
</div> </div>
<el-icon class="edit-icon"><Edit /></el-icon> <el-icon class="edit-icon">
<Edit />
</el-icon>
</div> </div>
</div> </div>
<div class="basic-info-box"> <div class="basic-info-box">
@ -313,18 +299,20 @@
</div> </div>
<!-- 视频模块 --> <!-- 视频模块 -->
<div class="module-card" style="height: calc(100% - 380px);min-height: 324px;"> <div class="module-card" style="height: calc(100% - 370px);min-height: 324px;">
<div style="display: flex;margin-bottom: 20px;"> <div style="display: flex;margin-bottom: 20px;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; "> <img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
视频</div> 视频
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 使用img元素显示视频流（优化的Data URL方案） --> <!-- 使用img元素显示视频流（优化的Data URL方案） -->
<img :src="rtspImgSrc" alt="" style="width: 100%;height: calc(100% - 70px);object-fit:contain;background:#000;" /> <img :src="rtspImgSrc" alt=""
style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#000;" />
</div> </div>
</div> </div>
</div> </div>
@ -332,8 +320,12 @@
<el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose"> <el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose">
<div> <div>
<div class="dialog-title"> <div class="dialog-title">
<div class="dialog-title-item"><div>用户ID:</div>{{patientInfo.sessionId}}</div> <div class="dialog-title-item">
<div class="dialog-title-item"><div>姓名:{{patientInfo.name}}</div></div> <div>用户ID:</div>{{ patientInfo.sessionId }}
</div>
<div class="dialog-title-item">
<div>姓名:{{ patientInfo.name }}</div>
</div>
</div> </div>
<div> <div>
<el-form :model="diagnosticForm" label-width="50px"> <el-form :model="diagnosticForm" label-width="50px">
@ -371,6 +363,7 @@ import { io } from 'socket.io-client'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import Header from '@/views/Header.vue' import Header from '@/views/Header.vue'
import { useAuthStore } from '../stores/index.js' import { useAuthStore } from '../stores/index.js'
import * as echarts from 'echarts';
const authStore = useAuthStore() const authStore = useAuthStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
@ -423,7 +416,58 @@ const historyData = ref([
{ id: 2, rotLeft: '-55.8°', rotRight: '56.2°', tiltLeft: '-17.5°', tiltRight: '17.9°', pitchDown: '-21.2°', pitchUp: '12.1°' }, { id: 2, rotLeft: '-55.8°', rotRight: '56.2°', tiltLeft: '-17.5°', tiltRight: '17.9°', pitchDown: '-21.2°', pitchUp: '12.1°' },
{ id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' } { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
]) ])
const chartoption = ref({
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: 25,
color: '#999',
fontSize: 20
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 80,
offsetCenter: [0, '70%']
},
data: [
{
value: 70
}
]
}
]
})
function routeTo(path) { function routeTo(path) {
router.push(`/`) router.push(`/`)
} }
@ -901,10 +945,10 @@ async function startRecording() {
} }
} }
mediaRecorder.onstop = async () => { // mediaRecorder.onstop = async () => {
console.log('🎬 录像停止，开始保存...') // console.log('🎬 录像停止，开始保存...')
await saveRecording() // await saveRecording()
} // }
// 开始录制 // 开始录制
mediaRecorder.start(1000) // 每秒收集一次数据 mediaRecorder.start(1000) // 每秒收集一次数据
@ -1046,6 +1090,7 @@ async function saveRecording() {
message: `录像保存成功！文件路径: ${result.filepath}`, message: `录像保存成功！文件路径: ${result.filepath}`,
duration: 5000 duration: 5000
}) })
isRecording.value = false
dialogVisible.value = true dialogVisible.value = true
// 更新会话的视频路径 // 更新会话的视频路径
if (patientInfo.value.sessionId) { if (patientInfo.value.sessionId) {
@ -1177,9 +1222,9 @@ async function stopDetection() {
} }
// 如果正在录制，停止录制 // 如果正在录制，停止录制
// if (isRecording.value) { if (isRecording.value) {
// stopRecording() stopRecording()
// } }
saveRecording() saveRecording()
isStart.value = false isStart.value = false
@ -1274,6 +1319,31 @@ const handleBeforeUnload = () => {
} }
} }
const creatorId = ref('') const creatorId = ref('')
let headCharts = null;
const initchart = () => {
// 确保 DOM 元素已经渲染
nextTick(() => {
const chartDom = document.getElementById('headChart1');
if (chartDom) {
// 如果图表已经存在，先销毁
if (headCharts) {
headCharts.dispose();
}
headCharts = echarts.init(chartDom);
headCharts.setOption(chartoption.value);
// 添加窗口大小调整监听器
window.addEventListener('resize', () => {
if (headCharts) {
headCharts.resize();
}
});
} else {
console.warn('找不到 ID 为 headChart1 的 DOM 元素');
}
});
}
onMounted(() => { onMounted(() => {
// 加载患者信息 // 加载患者信息
loadPatientInfo() loadPatientInfo()
@ -1287,6 +1357,7 @@ onMounted(() => {
console.log(authStore.currentUser) console.log(authStore.currentUser)
creatorId.value = authStore.currentUser.id creatorId.value = authStore.currentUser.id
} }
initchart()
}) })
onUnmounted(() => { onUnmounted(() => {
@ -1414,7 +1485,7 @@ onUnmounted(() => {
/* 核心内容网格布局 */ /* 核心内容网格布局 */
.content-grid { .content-grid {
display: flex; display: flex;
padding: 10px; padding: 0px 10px;
justify-content: space-between; justify-content: space-between;
height: calc(100vh - 130px); height: calc(100vh - 130px);
/* flex: 1; /* flex: 1;
@ -1459,6 +1530,7 @@ onUnmounted(() => {
color: #ffffff; color: #ffffff;
padding: 2px; padding: 2px;
} }
.module-title-bg { .module-title-bg {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1467,6 +1539,7 @@ onUnmounted(() => {
border-radius: 20px; border-radius: 20px;
padding: 0px 15px; padding: 0px 15px;
} }
.header-icon { .header-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -1679,22 +1752,27 @@ onUnmounted(() => {
color: #ffffff; color: #ffffff;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
} }
.gauge-group-box-text1 { .gauge-group-box-text1 {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
.gauge-group-box-text2 { .gauge-group-box-text2 {
font-size: 24px; font-size: 24px;
color: #30F3FF; color: #30F3FF;
font-weight: 700; font-weight: 700;
} }
.gauge-table-title { .gauge-table-title {
padding: 10px; padding: 0px 5px;
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
writing-mode: vertical-rl;
font-weight: 700;
} }
/* .foot-container-left{ /* .foot-container-left{
margin-right: 10px; margin-right: 10px;
} }
@ -1703,17 +1781,22 @@ onUnmounted(() => {
} */ } */
.foot-container-content { .foot-container-content {
margin: 0px 20px; margin: 0px 20px;
text-align: center;
} }
.foot-container-margintop { .foot-container-margintop {
margin-top: 80px; margin-top: 80px;
} }
.foot-container-marginleft { .foot-container-marginleft {
margin-left: 40px; margin-left: 40px;
} }
.foot-container-paddingcolor { .foot-container-paddingcolor {
padding-left: 10px; padding-left: 10px;
color: rgb(48,205,223); color: #30F3FF;
} }
.basic-info-content { .basic-info-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1721,67 +1804,76 @@ onUnmounted(() => {
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
} }
.basic-info-text { .basic-info-text {
width: 33%; width: 33%;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
} }
.basic-info-textcolor { .basic-info-textcolor {
color: rgb(48, 205, 223); color: rgb(48, 205, 223);
padding-bottom: 8px; padding-bottom: 8px;
} }
.basic-info-box { .basic-info-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
height: 100%; height: 100%;
} }
.dialog-title { .dialog-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
color: #ffffff; color: #ffffff;
} }
.dialog-title-item { .dialog-title-item {
display: flex; display: flex;
width: 200px; width: 200px;
color: #ffffff; color: #ffffff;
} }
:deep(.el-dialog) { :deep(.el-dialog) {
background-color: #1D1b26; background-color: #1D1b26;
} }
:deep(.el-dialog__title) { :deep(.el-dialog__title) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-textarea__inner) { :deep(.el-textarea__inner) {
background: #1D1b26; background: #1D1b26;
color: #ffffff; color: #ffffff;
} }
:deep(.el-table__header-wrapper) {
background: #E7e6e6;
}
:deep(.dashboard-container .cell) {
color: #000000;
}
:deep(.el-table thead) {
color: #000000;
}
:deep(.el-table thead.is-group th.el-table__cell) {
background: #d8d7d7;
}
:deep(.el-table .el-table__cell) {
padding: 4px 0px;
}
</style> </style>
<style> <style>
.dashboard-container .el-table{
background: transparent !important;
}
.dashboard-container .el-table tr{
background-color: transparent !important;
}
.dashboard-container .el-table thead.is-group th.el-table__cell{
background-color: transparent !important;
}
.dashboard-container .cell{
color: #fff;
}
.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
background-color: transparent !important;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
background-color: transparent !important;
}
.top-bar .el-button { .top-bar .el-button {
height: 44px; height: 44px;
border-radius: 25px; border-radius: 25px;