添加开始检测，停止检测，修改开始录屏，停止录屏方法，优化样式方法
This commit is contained in:
parent
03c3f0a6c9
commit
aaf12babc3
@ -11,6 +11,7 @@
|
||||
<!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> -->
|
||||
<span class="page-title">实时检测</span>
|
||||
</div>
|
||||
<div style="padding-left: 10px;">检测中</div>
|
||||
<img src="@/assets/sz.png" alt="" title="编辑相机参数" v-if="isConnected == true"
|
||||
style="margin-left: 20px;cursor: pointer; width: 24px;height: 24px;"
|
||||
@click="cameraUpdate">
|
||||
@ -41,12 +42,12 @@
|
||||
</div>
|
||||
|
||||
<div class="top-bar-right">
|
||||
<el-icon class="top-icon">
|
||||
<el-icon class="top-icon" @click="routerClick">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<el-icon class="top-icon">
|
||||
<!-- <el-icon class="top-icon">
|
||||
<Grid />
|
||||
</el-icon>
|
||||
</el-icon> -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -61,10 +62,11 @@
|
||||
身体姿态
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">
|
||||
<div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }"
|
||||
style="font-size: 14px;">
|
||||
{{ femtoboltStatus }}</div>
|
||||
</div>
|
||||
<div ref="wholeBodyRef" style="display: flex;justify-content: center;height: 100%;padding-top: 0px;">
|
||||
<div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 40px);padding-top: 0px;">
|
||||
<!-- 使用深度相机视频流替换静态图片 -->
|
||||
<img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流"
|
||||
style="width: 100%;height: calc(100% - 40px);object-fit:contain;background:#323232;">
|
||||
@ -75,7 +77,7 @@
|
||||
align-content: space-between;
|
||||
">
|
||||
|
||||
<div class="module-card" style=" height:50%;min-height: 425px;margin-bottom: 1px;">
|
||||
<div class="module-card" style=" height:calc( 45%);margin-bottom: 1px;">
|
||||
<!-- 头部姿态模块 -->
|
||||
<div style="display: flex;">
|
||||
<div class="module-header">
|
||||
@ -108,66 +110,54 @@
|
||||
|
||||
</div>
|
||||
<!-- 仪表盘区域 -->
|
||||
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
|
||||
<div style="height:calc(100% - 40px) ; display: flex;justify-content: space-between;align-items: center; padding:10px;">
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">旋转角</div>
|
||||
<div class="chart-titles">{{ headlist.rotation }}</div>
|
||||
<div id="rotationChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
|
||||
<div class="rotation-titles">{{ headlist.rotation }}°</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
|
||||
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span></div>
|
||||
|
||||
</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">倾斜角</div>
|
||||
<div class="chart-titles">{{ headlist.tilt }}</div>
|
||||
<div id="tiltChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
|
||||
<div class="rotation-titles">{{ headlist.tilt }}°</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
|
||||
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
|
||||
|
||||
</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1" style="">右最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">俯仰角</div>
|
||||
<div class="chart-titles">{{ headlist.pitch }}</div>
|
||||
<div id="pitchChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">俯：<span class="gauge-group-box-text2">{{
|
||||
<div class="rotation-titles">{{ headlist.pitch }}°</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1">俯最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
|
||||
</div>
|
||||
<div class="gauge-group-box" style="justify-content: center;">
|
||||
<div class="gauge-group-box-text1">俯最大：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
|
||||
<div class="gauge-group-box-text1" style="margin-left: 20px;">仰：<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<div class="icon-box-mark"></div>
|
||||
<div class="icon-box-text">历史数据</div>
|
||||
</div>
|
||||
<!-- 历史数据表格 -->
|
||||
<div style="display: flex;justify-content: center;padding: 0px 10px;margin-top: 5px;height: 100%;">
|
||||
<el-table :data="historyData" border style="width: 100%;overflow: auto;height: calc(100% - 280px);">
|
||||
<el-table-column prop="id" label="ID" align="center" width="60" />
|
||||
<el-table-column label="最大旋转角" align="center">
|
||||
<el-table-column prop="rotLeft" label="左" min-width="60" align="center" />
|
||||
<el-table-column prop="rotRight" label="右" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
<el-table-column label="最大倾斜角" align="center">
|
||||
<el-table-column prop="tiltLeft" label="左" min-width="60" align="center" />
|
||||
<el-table-column prop="tiltRight" label="右" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
<el-table-column label="最大仰视角" align="center">
|
||||
<el-table-column prop="pitchDown" label="下" min-width="60" align="center" />
|
||||
<el-table-column prop="pitchUp" label="上" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 足部压力模块 -->
|
||||
<div class="module-card" style=" height:50%;">
|
||||
<div class="module-card" style=" height:calc( 55% - 1px);overflow: hidden;">
|
||||
<div style="display: flex;">
|
||||
<div class="module-header">
|
||||
<div class="module-title">
|
||||
@ -180,8 +170,13 @@
|
||||
pressureStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-container">
|
||||
<div class="foot-container-left" style="font-size: 18px;">
|
||||
<div style="
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;">
|
||||
<div class="foot-container" style="height:calc(100%) ">
|
||||
<div class="foot-container-left" style="font-size: 18px;text-align: right;">
|
||||
<div style="width: 190px;">
|
||||
<span>左前足</span>
|
||||
<span class="foot-container-paddingcolor">{{ footPressure.left_front
|
||||
@ -201,13 +196,13 @@
|
||||
<span>右足</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;width: 300px;height: 300px;">
|
||||
<img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 300px;height: 300px;" alt="">
|
||||
<div style="position: relative;width: 100%;height:calc(100% - 80px) ;">
|
||||
<img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 100%;height: 100%;" alt="">
|
||||
<div class="xline"></div>
|
||||
<div class="yline"></div>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;justify-content: center;margin-top: 8px;font-size: 18px;width: 470px;margin-left: -85px;">
|
||||
style="display: flex;justify-content: center;font-size: 18px;width: 100%;">
|
||||
<div style="width: 215px;display: flex;align-items: center;">
|
||||
<div style="width:95px;">左足总压力</div>
|
||||
<div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.left_total
|
||||
@ -234,14 +229,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body-posture" style="width: 30%;display: flex;
|
||||
<div class="body-posture" style="width: 30%;display: flex;height:calc(100vh - 100px);
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
">
|
||||
<!-- 基础信息模块 -->
|
||||
<div class="module-card" style="padding-bottom: 40px; height: 50%;min-height: 425px;margin-bottom: 1px;">
|
||||
<div class="module-card" style="height:calc( 45%);margin-bottom: 1px;">
|
||||
<div style="display: flex;">
|
||||
<div class="module-header">
|
||||
<div class="module-title">
|
||||
@ -322,7 +319,7 @@
|
||||
|
||||
</div>
|
||||
<!-- 视频模块 -->
|
||||
<div class="module-card" style="height: 50%;">
|
||||
<div class="module-card" style="height: calc( 55% - 1px)">
|
||||
<div style="display: flex;">
|
||||
<div class="module-header">
|
||||
<div class="module-title">
|
||||
@ -334,7 +331,7 @@
|
||||
<div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="videoImgRef" style="width: 100%;height: calc(100% - 40px)">
|
||||
<div ref="videoImgRef" style="width: 100%;height: calc(100% - 47px)">
|
||||
<img :src="(cameraStatus === '已连接' && rtspImgSrc) ? rtspImgSrc : noImageSvg" alt=""
|
||||
style="width: 100%;height: calc(100%);object-fit:contain;background:#323232;" />
|
||||
</div>
|
||||
@ -586,19 +583,13 @@ const screenshotLoading = ref(false)
|
||||
const dataCollectionLoading = ref(false)
|
||||
const isRecording = ref(false)
|
||||
const cameraDialogVisible =ref(false) // 设置相机参数弹框
|
||||
|
||||
|
||||
const contenGridRef =ref(null) // 实时检查整体box
|
||||
|
||||
const wholeBodyRef = ref(null) // 身体姿态ref
|
||||
const videoImgRef =ref(null) // 视频流图片ref
|
||||
|
||||
// 录像相关变量
|
||||
let mediaRecorder = null
|
||||
let recordedChunks = []
|
||||
let recordingStream = null
|
||||
|
||||
|
||||
// 患者信息（从页面获取或通过API获取）
|
||||
const patientInfo = ref({
|
||||
id: '',
|
||||
@ -693,11 +684,7 @@ const calculatedAge = ref(null)
|
||||
//修改
|
||||
|
||||
// 模拟历史数据
|
||||
const historyData = ref([
|
||||
// { id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' },
|
||||
// { 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°' }
|
||||
])
|
||||
const historyData = ref([])
|
||||
const chartoption = ref({
|
||||
backgroundColor: '#242424',
|
||||
grid: { top: 0, right: 0, bottom: 0, left: 0 },
|
||||
@ -825,7 +812,7 @@ const startTimer = () => {
|
||||
if (seconds.value >= 60) {
|
||||
console.log('⏰ 检测时长超过10分钟，自动停止检测');
|
||||
ElMessage.warning('检测时长已达到10分钟，自动停止检测');
|
||||
stopDetection();
|
||||
stopRecord()
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1683,28 +1670,23 @@ async function handleStartStop() {
|
||||
}
|
||||
|
||||
if (isStart.value) {
|
||||
// 停止检测
|
||||
await stopDetection()
|
||||
// 停止录制视频
|
||||
await stopRecord()
|
||||
} else {
|
||||
patientInfo.value.sessionId = null
|
||||
// 开始检测
|
||||
await startDetection()
|
||||
// 开始录制视频
|
||||
await startRecord()
|
||||
}
|
||||
}
|
||||
// 开始检测
|
||||
async function startDetection() {
|
||||
try {
|
||||
console.log('🚀 正在开始检测...')
|
||||
isRecording.value = true
|
||||
startTimer()
|
||||
// 验证患者信息
|
||||
if (!patientInfo.value || !patientInfo.value.id) {
|
||||
throw new Error('缺少患者信息，无法开始检测')
|
||||
}
|
||||
let screen_location = contenGridRef.value.getBoundingClientRect()
|
||||
let femtobolt_location = wholeBodyRef.value.getBoundingClientRect()
|
||||
let camera_location = videoImgRef.value.getBoundingClientRect()
|
||||
let titile_height = 24
|
||||
// 调用后端API开始检测
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/start`, {
|
||||
method: 'POST',
|
||||
@ -1715,10 +1697,6 @@ async function startDetection() {
|
||||
patient_id: patientInfo.value.id,
|
||||
// 可以添加其他检测参数
|
||||
creator_id: creatorId.value,
|
||||
screen_location:[Math.round(screen_location.x), Math.round(screen_location.y) + titile_height, Math.round(screen_location.width), Math.round(screen_location.height-titile_height)],
|
||||
camera_location:[Math.round(camera_location.x), Math.round(camera_location.y)+ titile_height, Math.round(camera_location.width), Math.round(camera_location.height-titile_height)],
|
||||
femtobolt_location:[Math.round(femtobolt_location.x), Math.round(femtobolt_location.y) + titile_height, Math.round(femtobolt_location.width), Math.round(femtobolt_location.height-titile_height)],
|
||||
|
||||
})
|
||||
})
|
||||
if (!response.ok) {
|
||||
@ -1729,14 +1707,8 @@ async function startDetection() {
|
||||
|
||||
if (result.success) {
|
||||
console.log('✅ 检测开始成功')
|
||||
|
||||
// 保存会话ID和检测开始时间
|
||||
patientInfo.value.sessionId = result.session_id
|
||||
patientInfo.value.detectionStartTime = Date.now()
|
||||
console.log('✅ 检测会话创建成功，会话ID:', patientInfo.value.sessionId)
|
||||
|
||||
isStart.value = true
|
||||
ElMessage.success('检测已开始')
|
||||
} else {
|
||||
throw new Error(result.message || '开始检测失败')
|
||||
}
|
||||
@ -1751,14 +1723,8 @@ async function startDetection() {
|
||||
// 停止检测
|
||||
async function stopDetection() {
|
||||
try {
|
||||
console.log('🛑 停止检测，会话ID:', patientInfo.value.sessionId)
|
||||
resetTimer()
|
||||
// 计算检测持续时间
|
||||
let duration = 0
|
||||
if (patientInfo.value.detectionStartTime) {
|
||||
duration = Math.floor((Date.now() - patientInfo.value.detectionStartTime) / 1000)
|
||||
}
|
||||
|
||||
// 调用后端API停止检测
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop`, {
|
||||
method: 'POST',
|
||||
@ -1773,8 +1739,6 @@ async function stopDetection() {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
isRecording.value = false
|
||||
isStart.value = false
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 停止检测失败:', error)
|
||||
ElMessage.error(`停止检测失败: ${error.message}`)
|
||||
@ -1979,15 +1943,11 @@ const getDevicesInit = async () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
console.log(wholeBodyRef.value.getBoundingClientRect())
|
||||
console.log(videoImgRef.value.getBoundingClientRect())
|
||||
// 加载患者信息
|
||||
loadPatientInfo()
|
||||
|
||||
// 页面加载时自动连接WebSocket
|
||||
connectWebSocket()
|
||||
|
||||
startDetection()
|
||||
// 监听页面关闭或刷新事件
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
if (authStore.currentUser) {
|
||||
@ -2005,11 +1965,12 @@ onUnmounted(() => {
|
||||
if (isRecording.value) {
|
||||
stopRecording()
|
||||
}
|
||||
// 停止检测（如果正在检测）
|
||||
if (isStart.value) {
|
||||
stopDetection()
|
||||
if(isStart.value == true){
|
||||
|
||||
stopRecord()
|
||||
}
|
||||
|
||||
stopDetection()
|
||||
// 页面关闭时断开WebSocket连接
|
||||
disconnectWebSocket()
|
||||
|
||||
@ -2042,6 +2003,90 @@ onUnmounted(() => {
|
||||
// 移除页面关闭事件监听器
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
})
|
||||
|
||||
const startRecord = async () => { // 开始录屏
|
||||
try {
|
||||
console.log('🚀 正在开始录屏...')
|
||||
|
||||
// 验证患者信息
|
||||
if (!patientInfo.value || !patientInfo.value.sessionId) {
|
||||
throw new Error('缺少患者信息，无法开始录屏')
|
||||
}
|
||||
isRecording.value = true
|
||||
let screen_location = contenGridRef.value.getBoundingClientRect()
|
||||
let femtobolt_location = wholeBodyRef.value.getBoundingClientRect()
|
||||
let camera_location = videoImgRef.value.getBoundingClientRect()
|
||||
let titile_height = 24
|
||||
// 调用后端API开始录屏
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/start_record`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
patient_id: patientInfo.value.sessionId,
|
||||
// 可以添加其他录屏参数
|
||||
creator_id: creatorId.value,
|
||||
screen_location:[Math.round(screen_location.x), Math.round(screen_location.y) + titile_height, Math.round(screen_location.width), Math.round(screen_location.height-titile_height)],
|
||||
camera_location:[Math.round(camera_location.x), Math.round(camera_location.y)+ titile_height, Math.round(camera_location.width), Math.round(camera_location.height-titile_height)],
|
||||
femtobolt_location:[Math.round(femtobolt_location.x), Math.round(femtobolt_location.y) + titile_height, Math.round(femtobolt_location.width), Math.round(femtobolt_location.height-titile_height)],
|
||||
|
||||
})
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (result.success) {
|
||||
// 保存会话ID和检测开始时间
|
||||
patientInfo.value.detectionStartTime = Date.now()
|
||||
console.log('✅ 录屏会话创建成功，会话ID:', patientInfo.value.sessionId)
|
||||
isStart.value = true
|
||||
ElMessage.success('录屏已开始')
|
||||
} else {
|
||||
throw new Error(result.message || '开始录屏失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(`开始录屏失败: ${error.message}`)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const stopRecord = async () => { // 停止录屏
|
||||
try {
|
||||
resetTimer()
|
||||
// 计算检测持续时间
|
||||
let duration = 0
|
||||
if (patientInfo.value.detectionStartTime) {
|
||||
duration = Math.floor((Date.now() - patientInfo.value.detectionStartTime) / 1000)
|
||||
}
|
||||
|
||||
// 调用后端API停止检测
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop_record`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
duration: duration
|
||||
})
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
}
|
||||
isRecording.value = false
|
||||
isStart.value = false
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 停止检测失败:', error)
|
||||
ElMessage.error(`停止检测失败: ${error.message}`)
|
||||
}
|
||||
}
|
||||
function routerClick(){
|
||||
router.push(`/patient/${patientInfo.value.id}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -2458,7 +2503,8 @@ onUnmounted(() => {
|
||||
.foot-container-content {
|
||||
margin: 0px 20px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
/* width: 300px; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.foot-container-margintop {
|
||||
@ -2480,7 +2526,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
/* justify-content: center;
|
||||
box-sizing: border-box; */
|
||||
padding-top: 15px;
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -2499,14 +2545,14 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.basic-info-text2 {
|
||||
width: 180px;
|
||||
font-size: 20px;
|
||||
width: 80%;
|
||||
font-size: 18px;
|
||||
background-color: rgba(36, 36, 36, 1);
|
||||
border-radius: 4px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@ -2526,7 +2572,7 @@ onUnmounted(() => {
|
||||
flex-wrap: wrap;
|
||||
align-content: center; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 40px) ;
|
||||
/* display: flex; */
|
||||
text-align: center;
|
||||
display: flex;
|
||||
@ -2607,7 +2653,7 @@ onUnmounted(() => {
|
||||
|
||||
.xline {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
width: calc(100% + 50px) ;
|
||||
/* height: 1px; */
|
||||
border-top: 1px dashed red;
|
||||
top: 50%;
|
||||
@ -2617,7 +2663,7 @@ onUnmounted(() => {
|
||||
.yline {
|
||||
position: absolute;
|
||||
/* width:1px; */
|
||||
height: 350px;
|
||||
height: calc(100% + 50px);
|
||||
/* height: 1px; */
|
||||
border-left: 1px dashed red;
|
||||
top: -25px;
|
||||
@ -2809,5 +2855,14 @@ onUnmounted(() => {
|
||||
border-radius: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.rotation-titles{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
color: #30F3FF;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1174,6 +1174,7 @@ onMounted(() => {
|
||||
.main-content {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -983,6 +983,7 @@ onUnmounted(() => {
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user