315 lines
6.9 KiB
Vue
315 lines
6.9 KiB
Vue
<template>
|
|
<div class="detail-page">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="dashboard-header">
|
|
<div class="logo">
|
|
<img src="../assets/logo1.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
|
<img src="../assets/logo2.png" alt="北京理工大学" @click="handleLogoClick" style="cursor: pointer;" />
|
|
<h1 class="main-title">
|
|
<div class="title-line"></div>
|
|
<span class="title-text">智慧科研评估系统</span>
|
|
<div class="title-line"></div>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page-header">
|
|
<button class="back-button" @click="goBack">
|
|
<el-icon><back /></el-icon> 返回仪表盘
|
|
</button>
|
|
<h1>科研成果详情</h1>
|
|
</div>
|
|
|
|
<div class="page-content">
|
|
<!-- 筛选条件 -->
|
|
<div class="filter-panel">
|
|
<h2>筛选条件</h2>
|
|
<div class="filter-form">
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<label>时间范围</label>
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>成果类型</label>
|
|
<el-select v-model="researchType">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="论文" value="paper" />
|
|
<el-option label="专利" value="patent" />
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>学院</label>
|
|
<el-select v-model="college">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="计算机学院" value="cs" />
|
|
<el-option label="材料学院" value="material" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="filter-buttons">
|
|
<el-button type="primary">应用筛选</el-button>
|
|
<el-button>重置</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="table-panel">
|
|
<h2>研究成果列表</h2>
|
|
<el-table :data="tableData" style="width: 100%" border>
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column prop="title" label="标题" min-width="250" />
|
|
<el-table-column prop="author" label="作者" width="150" />
|
|
<el-table-column prop="type" label="类型" width="100" />
|
|
<el-table-column prop="journal" label="期刊/来源" width="180" />
|
|
<el-table-column prop="date" label="发表日期" width="120" />
|
|
<el-table-column prop="citations" label="引用次数" width="100" />
|
|
<el-table-column label="操作" width="120">
|
|
<template #default>
|
|
<el-button size="small">查看</el-button>
|
|
<el-button size="small" type="primary">导出</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="100"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// 跳转回仪表盘
|
|
const emit = defineEmits(['back-to-dashboard', 'logout'])
|
|
const goBack = () => {
|
|
emit('back-to-dashboard')
|
|
}
|
|
|
|
// 处理Logo点击事件
|
|
const handleLogoClick = () => {
|
|
emit('logout')
|
|
}
|
|
|
|
// 筛选条件
|
|
const dateRange = ref([])
|
|
const researchType = ref('')
|
|
const college = ref('')
|
|
|
|
// 模拟表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
title: '基于深度学习的图像识别算法研究',
|
|
author: '张三, 李四',
|
|
type: '论文',
|
|
journal: 'IEEE Transactions on Image Processing',
|
|
date: '2024-10-15',
|
|
citations: 25
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '新型高效电池材料的合成与表征',
|
|
author: '王五, 赵六',
|
|
type: '论文',
|
|
journal: 'Advanced Materials',
|
|
date: '2024-09-22',
|
|
citations: 18
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '一种新型智能机器人控制方法',
|
|
author: '张三, 王五',
|
|
type: '专利',
|
|
journal: '国家知识产权局',
|
|
date: '2024-08-10',
|
|
citations: 0
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '高性能计算在流体力学中的应用',
|
|
author: '李四, 赵六',
|
|
type: '论文',
|
|
journal: 'Journal of Computational Physics',
|
|
date: '2024-07-05',
|
|
citations: 12
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '纳米材料在催化领域的应用研究',
|
|
author: '王五, 张三',
|
|
type: '论文',
|
|
journal: 'ACS Catalysis',
|
|
date: '2024-06-18',
|
|
citations: 30
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style scoped>
|
|
.detail-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #0c1633;
|
|
color: white;
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
background-color: #1a2b56;
|
|
padding: 0 20px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo img {
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.main-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.title-line {
|
|
width: 20px;
|
|
height: 2px;
|
|
background-color: #fff;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
.title-text {
|
|
color: #fff;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
background-color: #1a2b56;
|
|
}
|
|
|
|
.back-button {
|
|
display: flex;
|
|
align-items: center;
|
|
background: none;
|
|
border: none;
|
|
color: #4080ff;
|
|
cursor: pointer;
|
|
margin-right: 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.page-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.filter-panel, .table-panel {
|
|
background-color: #1a2b56;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-panel h2, .table-panel h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.filter-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.filter-item label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Element Plus 暗色主题定制 */
|
|
:deep(.el-input__wrapper),
|
|
:deep(.el-select .el-input__wrapper) {
|
|
background-color: #2a3b66;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:deep(.el-input__inner) {
|
|
color: white;
|
|
}
|
|
|
|
:deep(.el-table) {
|
|
background-color: transparent;
|
|
color: white;
|
|
}
|
|
|
|
:deep(.el-table th.el-table__cell) {
|
|
background-color: #2a3b66;
|
|
color: white;
|
|
}
|
|
|
|
:deep(.el-table tr) {
|
|
background-color: #1a2b56;
|
|
}
|
|
|
|
:deep(.el-table td.el-table__cell) {
|
|
color: white;
|
|
border-bottom-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
:deep(.el-button) {
|
|
border: 1px solid #4080ff;
|
|
color: #4080ff;
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(.el-button--primary) {
|
|
background-color: #4080ff;
|
|
color: white;
|
|
}
|
|
</style> |