基于Vue3的人工智能生成内容标识服务平台前端页面设计 - 教程

效果图：

素材库：

App.vue

强制性国家标准 GB45438-2025《网络安全技术 人工智能生成合成内容标识方法》
import { ref } from 'vue'
import Header from './components/Header.vue'
import UploadArea from './components/UploadArea.vue'
import PropertyList from './components/PropertyList.vue'
const activeTab = ref('identify')
const uploadedFile = ref(null)
const detectionResult = ref(null)
const handleFileUpload = (file) => {
uploadedFile.value = file
// 模拟检测过程
setTimeout(() => {
detectionResult.value = {
hasAiContent: Math.random() > 0.5,
confidence: Math.floor(Math.random() * 40) + 60,
details: '基于深度学习算法分析文件特征'
}
}, 2000)
}
.main-content {
min-height: calc(100vh - 80px);
padding: 24px 0;
background: #f5f5f5;
}
.container {
max-width: 1800px;
margin: 0 auto;
padding: 0 32px;
}
.subtitle-section {
text-align: center;
margin-bottom: 24px;
}
.subtitle {
font-size: 14px;
color: #70BAFF;
font-weight: 400;
}
.detection-tabs {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 32px;
}
.detection-tab {
background: white;
color: #666;
border: none;
padding: 12px 32px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.detection-tab.active {
background: #1890ff;
color: white;
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
.detection-tab:hover:not(.active) {
background: #f8f9fa;
transform: translateY(-1px);
}
.content-area {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 32px;
padding: 16px;
background: #f5f5f5;
}
/* 左侧区域 */
.left-container {
animation: fadeIn 0.5s ease-out;
}
.left-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 24px;
display: flex;
gap: 24px;
align-items: stretch;
min-height: 600px;
}
/* 右侧区域 */
.right-container {
animation: fadeIn 0.5s ease-out 0.2s;
animation-fill-mode: both;
}
.right-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
height: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
.main-title {
font-size: 2rem;
}
.content-area {
grid-template-columns: 1fr;
gap: 24px;
}
.right-section {
gap: 16px;
}
.detection-tabs {
flex-direction: column;
align-items: center;
gap: 12px;
}
.detection-tab {
width: 200px;
}
}

我创作的动力和源泉,感谢！！！就是如有需要或帮助，请评论区留言获取完整代码，一键三连，您的协助