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-31 19:02:50 +08:00
parent bb993cc08c
commit 9afcc60c5a
12 changed files with 140 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/renderer/src/assets/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 89 KiB

BIN
frontend/src/renderer/src/assets/jc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 B

BIN
frontend/src/renderer/src/assets/password.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 814 B

BIN
frontend/src/renderer/src/assets/sp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 B

BIN
frontend/src/renderer/src/assets/st.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 B

BIN
frontend/src/renderer/src/assets/tb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 B

BIN
frontend/src/renderer/src/assets/username.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
frontend/src/renderer/src/assets/zb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 B

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

@ -89,7 +89,6 @@ body {
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid #ebeef5;
} }
.card-title { .card-title {

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

@ -68,7 +68,11 @@
<!-- 身体姿态模块 --> <!-- 身体姿态模块 -->
<div class="module-card body-posture" style="width: 25%; "> <div class="module-card body-posture" style="width: 25%; ">
<div class="module-header"> <div class="module-header">
<div class="module-title">身体姿态</div> <div class="module-title">
<div class="module-title-bg">
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
身体姿态</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
@ -84,11 +88,16 @@
align-content: space-between; align-content: space-between;
"> ">
<div class="module-card" style=" height: calc(100% - 342px);"> <div class="module-card" style=" height:513px">
<!-- 头部姿态模块 --> <!-- 头部姿态模块 -->
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title">头部姿态</div>
<div class="module-title">
<div class="module-title-bg">
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
头部姿态</div>
</div>
<el-button <el-button
type="primary" type="primary"
class="start-btn" class="start-btn"
@ -157,11 +166,15 @@
</div> </div>
</div> </div>
<!-- 足部压力模块 --> <!-- 足部压力模块 -->
<div class="module-card" style=" height: calc(335px);"> <div class="module-card" style=" height: calc(100% - 523px); 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> <div class="module-title">
<div class="module-title-bg">
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
足部压力</div>
</div>
</div> </div>
</div> </div>
<div class="foot-container"> <div class="foot-container">
@ -218,10 +231,15 @@
align-content: space-between; align-content: space-between;
"> ">
<!-- 基础信息模块 --> <!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: calc(100% - 342px);"> <div class="module-card" style="padding-bottom: 40px; height: calc(513px);">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title">基础信息</div> <div class="module-title">
<div class="module-title-bg">
<img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;">
基础信息</div>
</div>
<el-icon class="edit-icon"><Edit /></el-icon> <el-icon class="edit-icon"><Edit /></el-icon>
</div> </div>
</div> </div>
@ -286,14 +304,18 @@
</div> </div>
<!-- 视频模块 --> <!-- 视频模块 -->
<div class="module-card"> <div class="module-card" style="height: calc(100% - 520px);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> <div class="module-title">
<div class="module-title-bg">
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
视频</div>
</div>
</div> </div>
</div> </div>
<!-- 使用img元素显示视频流（优化的Data URL方案） --> <!-- 使用img元素显示视频流（优化的Data URL方案） -->
<img :src="rtspImgSrc" alt="" style="width: 100%;height: 268px;object-fit:contain;background:#000;" /> <img :src="rtspImgSrc" alt="" style="width: 100%;height: calc(100% - 70px);object-fit:contain;background:#000;" />
</div> </div>
</div> </div>
</div> </div>
@ -1240,16 +1262,24 @@ onUnmounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 2px solid #ffffff; /* border: 2px solid #ffffff; */
border-image: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216)) 1; background: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216));
border-radius: 20px; border-radius: 20px;
padding: 1px 10px ;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
padding: 2px;
}
.module-title-bg{
display: flex;
align-items: center;
width: 116px;
background: #2C2C2C;
border-radius: 20px;
padding: 0px 15px ;
} }
.header-icon { .header-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;

139
frontend/src/renderer/src/views/Login.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<div class="login-page"> <div class="login-page" :style="{ backgroundImage: `url(${bg})` }">
<!-- 科幻网格地板（3D效果） -->
<div class="grid-floor"></div>
<!-- 两侧光柱特效 -->
<div class="light-pillar left"></div>
<div class="light-pillar right"></div>
<!-- 页面主内容 --> <!-- 页面主内容 -->
<div class="login-content"> <div class="login-content">
<!-- 系统标题 --> <!-- 系统标题 -->
@ -19,31 +13,38 @@
<el-form class="login-form"> <el-form class="login-form">
<!-- 账号输入框 --> <!-- 账号输入框 -->
<el-form-item> <el-form-item>
<el-input <div class="input-box">
v-model="form.account" <img src="@/assets/username.png" alt="" srcset="" height="30" style="margin-left: 10px;">
placeholder="请输入账号" <el-input
prefix-icon="User" v-model="form.account"
class="custom-input" placeholder="请输入账号"
/> class="custom-input"
/>
</div>
</el-form-item> </el-form-item>
<!-- 密码输入框（带显示切换） --> <!-- 密码输入框（带显示切换） -->
<el-form-item> <el-form-item>
<el-input <div class="input-box">
v-model="form.password" <img src="@/assets/password.png" alt="" srcset="" height="30" style="margin-left: 10px;">
:type="passwordVisible ? 'text' : 'password'" <el-input
placeholder="请输入密码" v-model="form.password"
prefix-icon="Lock" :type="passwordVisible ? 'text' : 'password'"
class="custom-input" placeholder="请输入密码"
> class="custom-input"
<template #suffix> >
<el-icon <template #suffix>
:icon="passwordVisible ? Hide : View" <el-icon
class="password-icon" class="password-toggle"
@click="passwordVisible = !passwordVisible" @click="passwordVisible = !passwordVisible"
/> >
</template> <component :is="passwordVisible ? Hide : View" />
</el-input> </el-icon>
</template>
</el-input>
</div>
</el-form-item> </el-form-item>
<!-- 记住密码 & 忘记密码 --> <!-- 记住密码 & 忘记密码 -->
@ -214,6 +215,8 @@ import { ElMessage } from 'element-plus'
import { useAuthStore } from '../stores' import { useAuthStore } from '../stores'
import { User, Lock, View, Hide, Phone } from '@element-plus/icons-vue' import { User, Lock, View, Hide, Phone } from '@element-plus/icons-vue'
import bg from '@/assets/bg.png'
const router = useRouter() const router = useRouter()
const authStore = useAuthStore() const authStore = useAuthStore()
@ -408,7 +411,7 @@ const handleLogin = async () => {
if (result.success) { if (result.success) {
ElMessage.success('登录成功') ElMessage.success('登录成功')
router.push('/dashboard') router.push('/')
} else { } else {
// 根据错误类型显示具体提示 // 根据错误类型显示具体提示
if (result.error && result.error.includes('用户不存在')) { if (result.error && result.error.includes('用户不存在')) {
@ -622,13 +625,16 @@ const copyPassword = async () => {
/* 登录卡片 */ /* 登录卡片 */
.login-card { .login-card {
width: 100%; width: 482px;
max-width: 420px; height: 471px;
background-color: #003366 !important; background: inherit;
border: none !important; background-color: rgba(10, 68, 131, 0.9);
border-radius: 12px !important; box-sizing: border-box;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.2); border-width: 3px;
padding: 30px 25px !important; border-style: solid;
border-color: rgba(11, 92, 168, 1);
border-radius: 5px;
padding: 40px 25px 0;
} }
/* 注册卡片 */ /* 注册卡片 */
@ -644,11 +650,16 @@ const copyPassword = async () => {
/* 卡片头部标题 */ /* 卡片头部标题 */
.card-header { .card-header {
font-size: 1.4rem; /* font-size: 1.4rem;
color: #00ffff; color: #00ffff;
text-align: center; text-align: center;
margin-bottom: 25px; margin-bottom: 25px; */
font-weight: 500;
font-size: 24px;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
font-weight: 700;
font-style: normal;
color: #00FFFF;
} }
/* 登录表单 */ /* 登录表单 */
@ -657,19 +668,20 @@ const copyPassword = async () => {
} }
/* 自定义输入框 */ /* 自定义输入框 */
.custom-input { /* .custom-input {
background-color: #004080 !important; background-color: #004080 !important;
border-color: #00ffff !important; border-color: #00ffff !important;
color: #fff !important; color: #fff !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
.custom-input::placeholder {
color: #aaa !important;
}
.custom-input .el-input__icon { .custom-input .el-input__icon {
color: #00ffff !important; color: #00ffff !important;
} */
.custom-input::placeholder {
font-size: 16px !important;
color: rgb(102, 255, 255) !important;
} }
/* 密码显示图标 */ /* 密码显示图标 */
.password-icon { .password-icon {
color: #00ffff !important; color: #00ffff !important;
@ -1066,4 +1078,43 @@ const copyPassword = async () => {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3); box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3);
} }
.input-box{
display: flex;
align-items: center;
width: 100%;
height: 49px;
background-color: rgba(255, 255, 255, 0);
box-sizing: border-box;
border-width: 2px;
border-style: solid;
border-color: rgba(0, 153, 204, 1);
border-radius: 3px;
}
</style>
<style>
.input-box .el-input__wrapper {
background: transparent;
border: 0 !important;
box-shadow: 0 0 0 0 !important;
}
.input-box .el-input__inner{
background: transparent;
border: 0 !important;
color: #fff;
font-size: 16px;
height: 43px;
}
.custom-input::placeholder {
font-size: 16px !important;
color: #66ffff !important;
}
.login-card .el-button{
padding: 12px 20px !important;
height: 40px;
}
</style> </style>

2
frontend/src/renderer/src/views/PatientCreate.vue
View File

@ -377,7 +377,7 @@ const handleSave = async () => {
try { try {
await savePatient() await savePatient()
ElMessage.success('患者档案保存成功') ElMessage.success('患者档案保存成功')
router.push('/dashboard') router.push('/')
} catch (error) { } catch (error) {
ElMessage.error('保存失败：' + error.message) ElMessage.error('保存失败：' + error.message)
} finally { } finally {