refactor(web): 重构前端UI主题为深色科技风
1. 整体替换网站配色为深色深蓝主题，使用#0F172A作为主背景色 2. 引入Fira Code和Fira Sans字体提升排版质感 3. 重写头部、卡片、表单等组件的样式，适配深色主题 4. 添加全局滚动条样式优化和选中文字样式 5. 移除不再需要的setup-paddlepaddle.sh脚本文件 6. 优化Home页面的标签页样式和交互逻辑
This commit is contained in:
wwh
@@ -22,10 +22,11 @@
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
|
||||
color: #F8FAFC;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -39,6 +40,12 @@
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
font-family: 'Fira Code', monospace;
|
||||
letter-spacing: -0.5px;
|
||||
background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
@@ -49,6 +56,8 @@
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -56,7 +65,9 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #0F172A;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
#app {
|
||||
@@ -65,7 +76,30 @@ body {
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background: #f5f7fa;
|
||||
background: #0F172A;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(34, 197, 94, 0.3);
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0F172A;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #334155;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #475569;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -231,10 +231,15 @@ onMounted(() => {
|
||||
|
||||
.loading-wrapper {
|
||||
padding: 20px;
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.empty-config {
|
||||
padding: 20px;
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.algorithm-list {
|
||||
@@ -244,10 +249,16 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.algorithm-item {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.algorithm-item:hover {
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.algorithm-header {
|
||||
@@ -257,23 +268,30 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.algorithm-header :deep(.el-switch__label) {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #E2E8F0;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
cursor: help;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
.algorithm-params {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #dcdfe6;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.param-item {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.param-item:last-child {
|
||||
@@ -282,45 +300,84 @@ onMounted(() => {
|
||||
|
||||
.param-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
margin-bottom: 8px;
|
||||
color: #94A3B8;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: 500;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
color: #c0c4cc;
|
||||
color: #475569;
|
||||
cursor: help;
|
||||
font-size: 12px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-icon:hover {
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
.param-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider__runway) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider__bar) {
|
||||
background: rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider__button) {
|
||||
border: 2px solid #22C55E;
|
||||
background: #0F172A;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider__button:hover) {
|
||||
background: #22C55E;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.param-control :deep(.el-slider__input) {
|
||||
width: 60px;
|
||||
width: 70px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.param-unit {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
min-width: 40px;
|
||||
font-weight: 500;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.config-actions :deep(.el-button) {
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.config-actions :deep(.el-button--small) {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
450
apps/web/src/components/DetectionConfig.vue
Normal file
450
apps/web/src/components/DetectionConfig.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div class="detection-config-container">
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon class="header-icon"><Setting /></el-icon>
|
||||
<span>{{ configType === 'image' ? '图片检测配置' : '视频检测配置' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 检测类型切换 -->
|
||||
<div class="type-switcher">
|
||||
<el-select
|
||||
v-model="configType"
|
||||
placeholder="选择检测类型"
|
||||
class="type-select"
|
||||
size="large"
|
||||
>
|
||||
<el-option
|
||||
v-for="type in detectionTypes"
|
||||
:key="type.value"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
>
|
||||
<div class="select-option">
|
||||
<el-icon class="option-icon">
|
||||
<component :is="type.icon" />
|
||||
</el-icon>
|
||||
<span class="option-label">{{ type.label }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-form label-position="top" class="config-form">
|
||||
<el-form-item label="选择模型">
|
||||
<el-select
|
||||
v-model="config.model"
|
||||
placeholder="选择检测模型"
|
||||
class="full-width"
|
||||
>
|
||||
<el-option
|
||||
v-for="model in models"
|
||||
:key="model.id"
|
||||
:label="model.name"
|
||||
:value="model.id"
|
||||
>
|
||||
<span>{{ model.name }}</span>
|
||||
<span class="model-size">{{ model.size }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>置信度阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 300px; line-height: 1.6;">
|
||||
<p><strong>置信度是什么？</strong></p>
|
||||
<p>表示模型对检测结果的"确定程度"，范围 0-1</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>≥0.8：高置信度（绿色）- 模型非常确定</li>
|
||||
<li>0.6-0.8：中等置信度（黄色）- 模型比较确定</li>
|
||||
<li><0.6：低置信度（红色）- 模型不太确定</li>
|
||||
</ul>
|
||||
<p><strong>阈值作用：</strong></p>
|
||||
<p>低于此值的检测结果会被过滤掉</p>
|
||||
<p>建议：0.3-0.5（火灾检测可适当降低）</p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.confidence"
|
||||
:min="0.1"
|
||||
:max="1.0"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatConfidence"
|
||||
/>
|
||||
<div class="slider-value">{{ config.confidence.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>IOU阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 320px; line-height: 1.6;">
|
||||
<p><strong>IOU是什么？</strong></p>
|
||||
<p>交并比(Intersection Over Union)，衡量两个检测框的重叠程度</p>
|
||||
<p style="margin: 8px 0;"><strong>计算公式：</strong></p>
|
||||
<p style="background: #f5f5f5; padding: 4px 8px; border-radius: 4px; font-family: monospace;">IOU = 交集面积 / 并集面积</p>
|
||||
<p style="margin: 8px 0;"><strong>阈值作用：</strong></p>
|
||||
<p>用于NMS去重，IOU超过此值的框被认为是重复检测</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>高阈值(0.7-0.9)：保留更多框，适合密集场景</li>
|
||||
<li>中阈值(0.45-0.6)：平衡，适合一般场景</li>
|
||||
<li>低阈值(0.1-0.3)：结果更精简，适合稀疏场景</li>
|
||||
</ul>
|
||||
<p><strong>建议：0.45-0.6</strong></p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.iou"
|
||||
:min="0.1"
|
||||
:max="0.9"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatIOU"
|
||||
/>
|
||||
<div class="slider-value">{{ config.iou.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 算法配置（仅对人员检测模型显示） -->
|
||||
<AlgorithmConfig
|
||||
v-model="config.algorithmConfig"
|
||||
@change="onAlgorithmChange"
|
||||
:model-id="config.model"
|
||||
/>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import {
|
||||
Setting,
|
||||
Picture,
|
||||
VideoCamera,
|
||||
QuestionFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import AlgorithmConfig from './AlgorithmConfig.vue'
|
||||
|
||||
const props = defineProps({
|
||||
models: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultType: {
|
||||
type: String,
|
||||
default: 'image'
|
||||
},
|
||||
defaultModel: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['type-change', 'config-change'])
|
||||
|
||||
const configType = ref(props.defaultType)
|
||||
|
||||
const detectionTypes = [
|
||||
{ value: 'image', label: '图片检测', icon: Picture },
|
||||
{ value: 'video', label: '视频检测', icon: VideoCamera }
|
||||
]
|
||||
|
||||
const config = ref({
|
||||
type: props.defaultType,
|
||||
model: props.defaultModel || (props.models.length > 0 ? props.models[0].id : ''),
|
||||
confidence: 0.5,
|
||||
iou: 0.45,
|
||||
algorithmConfig: {}
|
||||
})
|
||||
|
||||
const formatConfidence = (value) => {
|
||||
return `置信度: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const formatIOU = (value) => {
|
||||
return `IOU: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const onAlgorithmChange = (algoConfig) => {
|
||||
config.value.algorithmConfig = algoConfig
|
||||
emit('config-change', config.value)
|
||||
}
|
||||
|
||||
// 监听类型变化
|
||||
watch(configType, (newType) => {
|
||||
config.value.type = newType
|
||||
emit('type-change', newType)
|
||||
emit('config-change', config.value)
|
||||
})
|
||||
|
||||
// 监听配置变化
|
||||
watch(() => [config.value.model, config.value.confidence, config.value.iou], () => {
|
||||
emit('config-change', config.value)
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detection-config-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.config-card {
|
||||
height: auto;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.config-card :deep(.el-card__body) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #F8FAFC;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
font-size: 18px;
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
/* 类型切换 */
|
||||
.type-switcher {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-input__wrapper) {
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-input__wrapper:hover) {
|
||||
border-color: rgba(34, 197, 94, 0.4);
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
}
|
||||
|
||||
.type-select :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: #22C55E;
|
||||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
|
||||
}
|
||||
|
||||
.type-select :deep(.el-input__inner) {
|
||||
color: #E2E8F0;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select__caret) {
|
||||
color: #64748B;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.type-select:hover :deep(.el-select__caret) {
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select__placeholder) {
|
||||
color: #343637;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown__item) {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
margin: 4px 8px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown__item:hover) {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown__item.is-selected) {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
border-color: #22C55E;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown__item.is-selected:hover) {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown) {
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-popper__arrow) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 20px;
|
||||
color: #3a3c3f;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select-dropdown__item:hover) .option-icon,
|
||||
.type-select :deep(.el-select-dropdown__item.is-selected) .option-icon {
|
||||
color: #22C55E;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3a3c3f;
|
||||
}
|
||||
|
||||
:deep(.el-divider) {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.config-form :deep(.el-form-item) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.config-form :deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #E2E8F0;
|
||||
padding-bottom: 8px;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.model-size {
|
||||
float: right;
|
||||
color: #64748B;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #22C55E;
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-icon:hover {
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
:deep(.el-card) {
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:deep(.el-card:hover) {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.type-select :deep(.el-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.type-select :deep(.el-select__selected-item) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.type-select :deep(.el-select__selected-item) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.option-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.option-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,106 +2,13 @@
|
||||
<div class="image-detection-container">
|
||||
<!-- 左侧配置面板 -->
|
||||
<div class="left-panel" :style="{ width: leftPanelWidth + 'px' }">
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon class="header-icon"><Setting /></el-icon>
|
||||
<span>图片检测配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form label-position="top" class="config-form">
|
||||
<el-form-item label="选择模型">
|
||||
<el-select
|
||||
v-model="config.model"
|
||||
placeholder="选择检测模型"
|
||||
class="full-width"
|
||||
>
|
||||
<el-option
|
||||
v-for="model in models"
|
||||
:key="model.id"
|
||||
:label="model.name"
|
||||
:value="model.id"
|
||||
>
|
||||
<span>{{ model.name }}</span>
|
||||
<span class="model-size">{{ model.size }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>置信度阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 300px; line-height: 1.6;">
|
||||
<p><strong>置信度是什么？</strong></p>
|
||||
<p>表示模型对检测结果的"确定程度"，范围 0-1</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>大于等于0.8：高置信度（绿色）- 模型非常确定</li>
|
||||
<li>0.6-0.8：中等置信度（黄色）- 模型比较确定</li>
|
||||
<li>小于0.6：低置信度（红色）- 模型不太确定</li>
|
||||
</ul>
|
||||
<p><strong>阈值作用：</strong></p>
|
||||
<p>低于此值的检测结果会被过滤掉</p>
|
||||
<p>建议：0.3-0.5（火灾检测可适当降低）</p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.confidence"
|
||||
:min="0.1"
|
||||
:max="1.0"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatConfidence"
|
||||
/>
|
||||
<div class="slider-value">{{ config.confidence.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>IOU阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 320px; line-height: 1.6;">
|
||||
<p><strong>IOU是什么？</strong></p>
|
||||
<p>交并比(Intersection Over Union)，衡量两个检测框的重叠程度</p>
|
||||
<p style="margin: 8px 0;"><strong>计算公式：</strong></p>
|
||||
<p style=" padding: 4px 8px; border-radius: 4px; font-family: monospace;">IOU = 交集面积 / 并集面积</p>
|
||||
<p style="margin: 8px 0;"><strong>阈值作用：</strong></p>
|
||||
<p>用于NMS去重，IOU超过此值的框被认为是重复检测</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>高阈值(0.7-0.9)：保留更多框，适合密集场景</li>
|
||||
<li>中阈值(0.45-0.6)：平衡，适合一般场景</li>
|
||||
<li>低阈值(0.1-0.3)：结果更精简，适合稀疏场景</li>
|
||||
</ul>
|
||||
<p><strong>建议：0.45-0.6</strong></p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.iou"
|
||||
:min="0.1"
|
||||
:max="0.9"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatIOU"
|
||||
/>
|
||||
<div class="slider-value">{{ config.iou.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 算法配置（仅对人员检测模型显示） -->
|
||||
<AlgorithmConfig
|
||||
v-model="config.algorithmConfig"
|
||||
@change="onAlgorithmChange"
|
||||
:model-id="config.model"
|
||||
/>
|
||||
|
||||
</el-form>
|
||||
</el-card>
|
||||
<DetectionConfig
|
||||
:models="models"
|
||||
:default-type="'image'"
|
||||
:default-model="config.model"
|
||||
@type-change="onTypeChange"
|
||||
@config-change="onConfigChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 拖拽调整条 -->
|
||||
@@ -224,15 +131,12 @@ import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
UploadFilled,
|
||||
Picture,
|
||||
Document,
|
||||
Setting,
|
||||
View,
|
||||
DataLine,
|
||||
List,
|
||||
QuestionFilled
|
||||
List
|
||||
} from '@element-plus/icons-vue'
|
||||
import { detectionApi } from '@/api/detection'
|
||||
import AlgorithmConfig from './AlgorithmConfig.vue'
|
||||
import DetectionConfig from './DetectionConfig.vue'
|
||||
|
||||
const props = defineProps({
|
||||
models: {
|
||||
@@ -241,6 +145,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['type-change'])
|
||||
|
||||
const config = ref({
|
||||
model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
|
||||
confidence: 0.5,
|
||||
@@ -248,6 +154,14 @@ const config = ref({
|
||||
algorithmConfig: {}
|
||||
})
|
||||
|
||||
const onTypeChange = (type) => {
|
||||
emit('type-change', type)
|
||||
}
|
||||
|
||||
const onConfigChange = (newConfig) => {
|
||||
config.value = { ...newConfig }
|
||||
}
|
||||
|
||||
// 可拖拽调整宽度相关
|
||||
const leftPanelWidth = ref(320)
|
||||
const isResizing = ref(false)
|
||||
@@ -295,14 +209,6 @@ const uploadUrl = computed(() => {
|
||||
return `/api/detect/image?${params.toString()}`
|
||||
})
|
||||
|
||||
const formatConfidence = (value) => {
|
||||
return `置信度: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const formatIOU = (value) => {
|
||||
return `IOU: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const isImage = file.type.startsWith('image/')
|
||||
if (!isImage) {
|
||||
@@ -358,10 +264,6 @@ const modelName = computed(() => {
|
||||
const model = props.models.find(m => m.id === config.value.model)
|
||||
return model ? model.name : config.value.model
|
||||
})
|
||||
|
||||
const onAlgorithmChange = (algoConfig) => {
|
||||
config.value.algorithmConfig = algoConfig
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -370,6 +272,7 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
gap: 0;
|
||||
background: #0F172A;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
@@ -396,25 +299,25 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
}
|
||||
|
||||
.resize-handle:hover {
|
||||
background: #d0d0d0;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.resize-handle.resizing {
|
||||
background: #409eff;
|
||||
background: #22C55E;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.resize-indicator {
|
||||
width: 3px;
|
||||
height: 40px;
|
||||
background: #c0c4cc;
|
||||
background: #475569;
|
||||
border-radius: 2px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.resize-handle:hover .resize-indicator,
|
||||
.resize-handle.resizing .resize-indicator {
|
||||
background: #409eff;
|
||||
background: #22C55E;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
@@ -425,16 +328,24 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
|
||||
/* 卡片通用样式 */
|
||||
:deep(.el-card) {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:deep(.el-card:hover) {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
/* 卡片头部样式 */
|
||||
@@ -444,7 +355,8 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: #F8FAFC;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -455,6 +367,7 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
|
||||
.header-icon {
|
||||
font-size: 18px;
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
.header-upload :deep(.el-upload) {
|
||||
@@ -479,8 +392,9 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
.config-form :deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
color: #E2E8F0;
|
||||
padding-bottom: 8px;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
@@ -490,7 +404,7 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
/* 模型选择器 */
|
||||
.model-size {
|
||||
float: right;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -499,13 +413,15 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
color: #22C55E;
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #ecf5ff;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
/* 空状态占位区域 */
|
||||
@@ -516,24 +432,25 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
color: #dcdfe6;
|
||||
color: #334155;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
color: #94A3B8;
|
||||
margin: 0 0 8px 0;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -558,8 +475,8 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 0 0 12px 12px;
|
||||
background: #0F172A;
|
||||
border-radius: 0 0 16px 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@@ -573,13 +490,13 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 64px;
|
||||
color: #dcdfe6;
|
||||
color: #334155;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -609,20 +526,31 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
color: #94A3B8;
|
||||
font-weight: 500;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.stat-item :deep(.el-tag) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
align-self: flex-start;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 详情卡片 */
|
||||
@@ -634,42 +562,89 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table) {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__header) {
|
||||
background: #f5f7fa;
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__header th) {
|
||||
background: #f5f7fa;
|
||||
background: #1E293B !important;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: #F8FAFC;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__body) {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__body tr) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table td) {
|
||||
background: #1E293B !important;
|
||||
color: #E2E8F0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table th) {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row:hover) {
|
||||
background: #334155 !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row:hover td) {
|
||||
background: #334155 !important;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row--striped) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row--striped td) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.bbox-code {
|
||||
background: #f5f7fa;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
border-radius: 6px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
color: #E2E8F0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 帮助图标样式 */
|
||||
.help-icon {
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-icon:hover {
|
||||
color: #409eff;
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
/* 告警卡片 */
|
||||
.alerts-card {
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid #f56c6c;
|
||||
border: 2px solid #EF4444;
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.alerts-card .card-header {
|
||||
@@ -689,11 +664,17 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
background: #fef0f0;
|
||||
border-left: 4px solid #f56c6c;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-left: 4px solid #EF4444;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-item:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
@@ -705,7 +686,7 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
|
||||
.alert-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.alert-detail {
|
||||
@@ -717,25 +698,28 @@ const onAlgorithmChange = (algoConfig) => {
|
||||
|
||||
.alert-message {
|
||||
font-size: 14px;
|
||||
color: #f56c6c;
|
||||
color: #EF4444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-duration {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
color: #64748B;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.alert-bbox {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
color: #64748B;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
|
||||
@@ -2,108 +2,13 @@
|
||||
<div class="video-detection-container">
|
||||
<!-- 左侧配置面板 -->
|
||||
<div class="left-panel" :style="{ width: leftPanelWidth + 'px' }">
|
||||
<el-card class="config-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon class="header-icon"><Setting /></el-icon>
|
||||
<span>视频检测配置</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form label-position="top" class="config-form">
|
||||
<el-form-item label="选择模型">
|
||||
<el-select
|
||||
v-model="config.model"
|
||||
placeholder="选择检测模型"
|
||||
class="full-width"
|
||||
@change="updateCameraConfig"
|
||||
>
|
||||
<el-option
|
||||
v-for="model in models"
|
||||
:key="model.id"
|
||||
:label="model.name"
|
||||
:value="model.id"
|
||||
>
|
||||
<span>{{ model.name }}</span>
|
||||
<span class="model-size">{{ model.size }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>置信度阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 300px; line-height: 1.6;">
|
||||
<p><strong>置信度是什么？</strong></p>
|
||||
<p>表示模型对检测结果的"确定程度"，范围 0-1</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>≥0.8：高置信度（绿色）- 模型非常确定</li>
|
||||
<li>0.6-0.8：中等置信度（黄色）- 模型比较确定</li>
|
||||
<li><0.6：低置信度（红色）- 模型不太确定</li>
|
||||
</ul>
|
||||
<p><strong>阈值作用：</strong></p>
|
||||
<p>低于此值的检测结果会被过滤掉</p>
|
||||
<p>建议：0.3-0.5（火灾检测可适当降低）</p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.confidence"
|
||||
:min="0.1"
|
||||
:max="1.0"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatConfidence"
|
||||
@change="updateCameraConfig"
|
||||
/>
|
||||
<div class="slider-value">{{ config.confidence.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<span>IOU阈值</span>
|
||||
<el-tooltip placement="top" :show-after="200">
|
||||
<template #content>
|
||||
<div style="max-width: 320px; line-height: 1.6;">
|
||||
<p><strong>IOU是什么？</strong></p>
|
||||
<p>交并比(Intersection Over Union)，衡量两个检测框的重叠程度</p>
|
||||
<p style="margin: 8px 0;"><strong>计算公式：</strong></p>
|
||||
<p style="background: #f5f5f5; padding: 4px 8px; border-radius: 4px; font-family: monospace;">IOU = 交集面积 / 并集面积</p>
|
||||
<p style="margin: 8px 0;"><strong>阈值作用：</strong></p>
|
||||
<p>用于NMS去重，IOU超过此值的框被认为是重复检测</p>
|
||||
<ul style="margin: 8px 0; padding-left: 16px;">
|
||||
<li>高阈值(0.7-0.9)：保留更多框，适合密集场景</li>
|
||||
<li>中阈值(0.45-0.6)：平衡，适合一般场景</li>
|
||||
<li>低阈值(0.1-0.3)：结果更精简，适合稀疏场景</li>
|
||||
</ul>
|
||||
<p><strong>建议：0.45-0.6</strong></p>
|
||||
</div>
|
||||
</template>
|
||||
<el-icon class="help-icon"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-slider
|
||||
v-model="config.iou"
|
||||
:min="0.1"
|
||||
:max="0.9"
|
||||
:step="0.05"
|
||||
:format-tooltip="formatIOU"
|
||||
@change="updateCameraConfig"
|
||||
/>
|
||||
<div class="slider-value">{{ config.iou.toFixed(2) }}</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 算法配置（仅对人员检测模型显示） -->
|
||||
<AlgorithmConfig
|
||||
v-model="config.algorithmConfig"
|
||||
@change="onAlgorithmChange"
|
||||
:model-id="config.model"
|
||||
/>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<DetectionConfig
|
||||
:models="models"
|
||||
:default-type="'video'"
|
||||
:default-model="config.model"
|
||||
@type-change="onTypeChange"
|
||||
@config-change="onConfigChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 拖拽调整条 -->
|
||||
@@ -300,21 +205,19 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onUnmounted } from 'vue'
|
||||
import { ref, computed, onUnmounted, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
VideoCamera,
|
||||
Setting,
|
||||
VideoPlay,
|
||||
VideoPause,
|
||||
View,
|
||||
DataLine,
|
||||
List,
|
||||
QuestionFilled,
|
||||
Timer,
|
||||
Delete
|
||||
} from '@element-plus/icons-vue'
|
||||
import AlgorithmConfig from './AlgorithmConfig.vue'
|
||||
import DetectionConfig from './DetectionConfig.vue'
|
||||
|
||||
const props = defineProps({
|
||||
models: {
|
||||
@@ -323,6 +226,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['type-change'])
|
||||
|
||||
const config = ref({
|
||||
model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
|
||||
confidence: 0.5,
|
||||
@@ -330,6 +235,19 @@ const config = ref({
|
||||
algorithmConfig: {}
|
||||
})
|
||||
|
||||
const onTypeChange = (type) => {
|
||||
emit('type-change', type)
|
||||
}
|
||||
|
||||
const onConfigChange = (newConfig) => {
|
||||
config.value = { ...newConfig }
|
||||
|
||||
// 如果摄像头已连接，实时更新配置
|
||||
if (websocket.value && cameraConnected.value) {
|
||||
updateCameraConfig()
|
||||
}
|
||||
}
|
||||
|
||||
// 可拖拽调整宽度相关
|
||||
const leftPanelWidth = ref(320)
|
||||
const isResizing = ref(false)
|
||||
@@ -405,14 +323,6 @@ const clearLogs = () => {
|
||||
ElMessage.success('日志已清空')
|
||||
}
|
||||
|
||||
const formatConfidence = (value) => {
|
||||
return `置信度: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const formatIOU = (value) => {
|
||||
return `IOU: ${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
const toggleCamera = async () => {
|
||||
if (cameraConnected.value) {
|
||||
stopCamera()
|
||||
@@ -519,14 +429,6 @@ const updateCameraConfig = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onAlgorithmChange = (algoConfig) => {
|
||||
config.value.algorithmConfig = algoConfig
|
||||
// 如果摄像头已连接，实时更新配置
|
||||
if (websocket.value && cameraConnected.value) {
|
||||
updateCameraConfig()
|
||||
}
|
||||
}
|
||||
|
||||
const getConfidenceType = (confidence) => {
|
||||
if (!confidence && confidence !== 0) return 'info'
|
||||
if (confidence >= 0.8) return 'success'
|
||||
@@ -552,6 +454,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
gap: 0;
|
||||
background: #0F172A;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
@@ -578,25 +481,25 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.resize-handle:hover {
|
||||
background: #d0d0d0;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.resize-handle.resizing {
|
||||
background: #409eff;
|
||||
background: #22C55E;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.resize-indicator {
|
||||
width: 3px;
|
||||
height: 40px;
|
||||
background: #c0c4cc;
|
||||
background: #475569;
|
||||
border-radius: 2px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.resize-handle:hover .resize-indicator,
|
||||
.resize-handle.resizing .resize-indicator {
|
||||
background: #409eff;
|
||||
background: #22C55E;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
@@ -607,16 +510,24 @@ onUnmounted(() => {
|
||||
|
||||
/* 卡片通用样式 */
|
||||
:deep(.el-card) {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:deep(.el-card:hover) {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px 12px 0 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
/* 卡片头部样式 */
|
||||
@@ -626,7 +537,8 @@ onUnmounted(() => {
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: #F8FAFC;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -637,6 +549,7 @@ onUnmounted(() => {
|
||||
|
||||
.header-icon {
|
||||
font-size: 18px;
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
/* 配置卡片样式 */
|
||||
@@ -657,8 +570,9 @@ onUnmounted(() => {
|
||||
.config-form :deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
color: #E2E8F0;
|
||||
padding-bottom: 8px;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
@@ -668,7 +582,7 @@ onUnmounted(() => {
|
||||
/* 模型选择器 */
|
||||
.model-size {
|
||||
float: right;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -677,26 +591,28 @@ onUnmounted(() => {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
color: #22C55E;
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #ecf5ff;
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
min-width: 60px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
/* 帮助图标样式 */
|
||||
.help-icon {
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.help-icon:hover {
|
||||
color: #409eff;
|
||||
color: #22C55E;
|
||||
}
|
||||
|
||||
/* 视频展示区域 */
|
||||
@@ -720,8 +636,8 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 0 0 12px 12px;
|
||||
background: #0F172A;
|
||||
border-radius: 0 0 16px 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@@ -735,13 +651,13 @@ onUnmounted(() => {
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
font-size: 64px;
|
||||
color: #dcdfe6;
|
||||
color: #334155;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -758,24 +674,25 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
color: #dcdfe6;
|
||||
color: #334155;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
color: #94A3B8;
|
||||
margin: 0 0 8px 0;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -800,20 +717,31 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
color: #94A3B8;
|
||||
font-weight: 500;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.stat-item :deep(.el-tag) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
align-self: flex-start;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 详情卡片 */
|
||||
@@ -825,23 +753,65 @@ onUnmounted(() => {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table) {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__header) {
|
||||
background: #f5f7fa;
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__header th) {
|
||||
background: #f5f7fa;
|
||||
background: #1E293B !important;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
color: #F8FAFC;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__body) {
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__body tr) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table td) {
|
||||
background: #1E293B !important;
|
||||
color: #E2E8F0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row:hover) {
|
||||
background: #334155 !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row:hover td) {
|
||||
background: #334155 !important;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row--striped) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.details-table :deep(.el-table__row--striped td) {
|
||||
background: #1E293B !important;
|
||||
}
|
||||
|
||||
.bbox-code {
|
||||
background: #f5f7fa;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
border-radius: 6px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
color: #E2E8F0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 日志卡片 */
|
||||
@@ -867,13 +837,43 @@ onUnmounted(() => {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
background: #1E293B;
|
||||
}
|
||||
|
||||
.logs-container :deep(.el-timeline) {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.logs-container :deep(.el-timeline-item__node) {
|
||||
background: #22C55E;
|
||||
border: 2px solid #1E293B;
|
||||
}
|
||||
|
||||
.logs-container :deep(.el-timeline-item__tail) {
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logs-container :deep(.el-timeline-item__timestamp) {
|
||||
color: #94A3B8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.logs-container :deep(.el-timeline-item__content) {
|
||||
color: #E2E8F0;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
background: #f5f7fa;
|
||||
background: #1E293B;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.log-item:hover {
|
||||
border-color: rgba(34, 197, 94, 0.4);
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
@@ -885,7 +885,7 @@ onUnmounted(() => {
|
||||
|
||||
.log-confidence {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.log-detail {
|
||||
@@ -896,16 +896,17 @@ onUnmounted(() => {
|
||||
|
||||
.log-model {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.log-bbox {
|
||||
font-size: 11px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #E2E8F0;
|
||||
background: #0F172A;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.logs-more {
|
||||
@@ -916,7 +917,8 @@ onUnmounted(() => {
|
||||
/* 告警卡片 */
|
||||
.alerts-card {
|
||||
margin-bottom: 20px;
|
||||
border: 2px solid #f56c6c;
|
||||
border: 2px solid #EF4444;
|
||||
box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.alerts-card .card-header {
|
||||
@@ -936,11 +938,17 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
background: #fef0f0;
|
||||
border-left: 4px solid #f56c6c;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-left: 4px solid #EF4444;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-item:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
@@ -952,7 +960,7 @@ onUnmounted(() => {
|
||||
|
||||
.alert-time {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.alert-detail {
|
||||
@@ -964,25 +972,28 @@ onUnmounted(() => {
|
||||
|
||||
.alert-message {
|
||||
font-size: 14px;
|
||||
color: #f56c6c;
|
||||
color: #EF4444;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-duration {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
color: #64748B;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.alert-bbox {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
background: #fff;
|
||||
color: #64748B;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
font-family: 'Fira Code', monospace;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
|
||||
@@ -1,29 +1,17 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tab-header">
|
||||
<el-radio-group v-model="activeTab" size="large" class="tab-group">
|
||||
<el-radio-button label="image">
|
||||
<el-icon><Picture /></el-icon>
|
||||
<span>图片检测</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button label="video">
|
||||
<el-icon><VideoCamera /></el-icon>
|
||||
<span>视频检测</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- 图片检测模块 -->
|
||||
<ImageDetection
|
||||
v-if="activeTab === 'image'"
|
||||
:models="models"
|
||||
@type-change="handleTypeChange"
|
||||
/>
|
||||
|
||||
<!-- 视频检测模块 -->
|
||||
<VideoDetection
|
||||
v-if="activeTab === 'video'"
|
||||
:models="models"
|
||||
@type-change="handleTypeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,6 +27,10 @@ import VideoDetection from '@/components/VideoDetection.vue'
|
||||
const activeTab = ref('image')
|
||||
const models = ref([])
|
||||
|
||||
const handleTypeChange = (type) => {
|
||||
activeTab.value = type
|
||||
}
|
||||
|
||||
const loadModels = async () => {
|
||||
try {
|
||||
const response = await detectionApi.getModels()
|
||||
@@ -55,41 +47,72 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.home-container {
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 60px);
|
||||
background: #f0f2f5;
|
||||
background: #0F172A;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-group {
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
padding: 6px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.tab-group :deep(.el-radio-button__inner) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
padding: 14px 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: #94A3B8;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Fira Sans', sans-serif;
|
||||
}
|
||||
|
||||
.tab-group :deep(.el-radio-button__inner:hover) {
|
||||
color: #F8FAFC;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.tab-group :deep(.el-radio-button.is-active .el-radio-button__inner) {
|
||||
background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
|
||||
color: #F8FAFC;
|
||||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.tab-group :deep(.el-radio-button__inner .el-icon) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.home-container {
|
||||
padding: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.tab-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab-group :deep(.el-radio-button__inner) {
|
||||
padding: 10px 16px;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user