效果圖：

素材庫：

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>

如有需要或幫助，請評論區留言獲取完整代碼，一鍵三連，您的支持是我創作的動力和源泉,感謝！！！