当前位置：首页 > news >正文

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

news 2025/9/17 5:53:34

效果图：

素材库：

App.vue

<template><div id="app"><!-- 头部导航 --><Header /><!-- 主要内容区域 --><main class="main-content"><div class="container"><!-- 强制性国家标准说明 --><div class="subtitle-section"><p class="subtitle">强制性国家标准 GB45438-2025《网络安全技术 人工智能生成合成内容标识方法》</p></div><!-- 检测按钮组 --><div class="detection-tabs"><button class="detection-tab" :class="{ active: activeTab === 'identify' }"@click="activeTab = 'identify'">标识检测</button><button class="detection-tab" :class="{ active: activeTab === 'generate' }"@click="activeTab = 'generate'">生成合成内容标识</button></div><!-- 主内容区 --><div class="content-area"><!-- 左侧区域容器 --><div class="left-container"><div class="left-content"><!-- 上传区域 --><div class="upload-section"><UploadArea @file-uploaded="handleFileUpload":uploaded-file="uploadedFile"/></div></div></div><!-- 右侧区域容器 --><div class="right-container"><div class="right-content"><PropertyList :file="uploadedFile" /></div></div></div></div></main></div>
</template><script setup>
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)
}
</script><style scoped>
.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;}
}
</style>

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