424 lines
9.1 KiB
Vue
424 lines
9.1 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<PageNavigation />
|
|
|
|
<div class="tech-resources-layout">
|
|
<!-- 左侧分类导航 -->
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h3>科技资源</h3>
|
|
</div>
|
|
|
|
<el-menu
|
|
:default-active="activeCategory"
|
|
class="category-menu"
|
|
@select="handleCategorySelect"
|
|
>
|
|
<el-sub-menu index="papers">
|
|
<template #title>
|
|
<el-icon><Document /></el-icon>
|
|
<span>科技论文</span>
|
|
</template>
|
|
<el-menu-item index="papers-all">科技资讯</el-menu-item>
|
|
<el-menu-item index="papers-ai">科技专利</el-menu-item>
|
|
<el-menu-item index="papers-bio">科技政策</el-menu-item>
|
|
<el-menu-item index="papers-cs">科技学者</el-menu-item>
|
|
<el-menu-item index="papers-physics">科技院校</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</div>
|
|
|
|
<!-- 右侧内容区域 -->
|
|
<div class="content-area">
|
|
<div class="content-header">
|
|
<h2>科技论文</h2>
|
|
<div class="search-controls">
|
|
<el-input
|
|
v-model="searchKeyword"
|
|
placeholder="搜索"
|
|
class="search-input"
|
|
clearable
|
|
>
|
|
<template #suffix>
|
|
<el-icon class="search-icon"><Search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
<el-button type="primary">搜索</el-button>
|
|
<el-button type="primary">导出</el-button>
|
|
<el-button type="primary">批量下载</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 论文列表 -->
|
|
<div class="papers-table">
|
|
<el-table
|
|
:data="papersList"
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#f8f9fa', color: '#606266' }"
|
|
>
|
|
<el-table-column prop="title" label="题名" min-width="300" />
|
|
<el-table-column prop="author" label="作者" width="150" />
|
|
<el-table-column prop="journal" label="来源" width="120" />
|
|
<el-table-column prop="date" label="发表时间" width="120" />
|
|
<el-table-column prop="cited" label="被引" width="80" />
|
|
<el-table-column prop="downloads" label="下载次数" width="100" />
|
|
<el-table-column label="操作" width="80">
|
|
<template #default="scope">
|
|
<el-button
|
|
type="primary"
|
|
link
|
|
@click="handleView(scope.row)"
|
|
>
|
|
查看
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div class="pagination-wrapper">
|
|
<div class="pagination-info">
|
|
共 {{ total }} 条记录
|
|
</div>
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:total="total"
|
|
layout="sizes, prev, pager, next"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PageFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { Document, Search } from '@element-plus/icons-vue'
|
|
import PageNavigation from '@/components/PageNavigation.vue'
|
|
import PageFooter from '@/components/PageFooter.vue'
|
|
|
|
interface Paper {
|
|
id: number
|
|
title: string
|
|
author: string
|
|
journal: string
|
|
date: string
|
|
cited: number
|
|
downloads: number
|
|
}
|
|
|
|
const activeCategory = ref('papers-all')
|
|
const searchKeyword = ref('')
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(10)
|
|
const total = ref(126)
|
|
|
|
const papersList = ref<Paper[]>([
|
|
{
|
|
id: 1,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 4,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 5,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 6,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 7,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 8,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 9,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
},
|
|
{
|
|
id: 10,
|
|
title: '基于深度学习的医疗诊断技术',
|
|
author: '王小明, 黄小红',
|
|
journal: '计算机工程',
|
|
date: '2024/03/03',
|
|
cited: 1587,
|
|
downloads: 1579
|
|
}
|
|
])
|
|
|
|
const handleCategorySelect = (key: string) => {
|
|
activeCategory.value = key
|
|
// 这里可以根据分类加载不同的数据
|
|
console.log('Selected category:', key)
|
|
}
|
|
|
|
const handleView = (row: Paper) => {
|
|
console.log('View paper:', row)
|
|
// 这里可以跳转到论文详情页面
|
|
}
|
|
|
|
const handleSizeChange = (val: number) => {
|
|
pageSize.value = val
|
|
// 重新加载数据
|
|
}
|
|
|
|
const handleCurrentChange = (val: number) => {
|
|
currentPage.value = val
|
|
// 重新加载数据
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 页面加载时的初始化操作
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: #f5f7fa;
|
|
padding: 80px 0 0;
|
|
}
|
|
|
|
.tech-resources-layout {
|
|
display: flex;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
gap: 20px;
|
|
padding: 20px 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* 左侧边栏 */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
height: fit-content;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
|
|
.sidebar-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.category-menu {
|
|
border: none;
|
|
}
|
|
|
|
.category-menu .el-menu-item {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.category-menu .el-sub-menu__title {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 右侧内容区域 */
|
|
.content-area {
|
|
flex: 1;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 24px;
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
|
|
.content-header h2 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-controls {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-input {
|
|
width: 200px;
|
|
}
|
|
|
|
.search-icon {
|
|
color: #909399;
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.papers-table {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
:deep(.el-table) {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:deep(.el-table th) {
|
|
background: #f8f9fa !important;
|
|
}
|
|
|
|
:deep(.el-table td) {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
:deep(.el-table tr:hover > td) {
|
|
background-color: #f8f9fa !important;
|
|
}
|
|
|
|
/* 分页样式 */
|
|
.pagination-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 16px;
|
|
border-top: 1px solid #e4e7ed;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
|
|
:deep(.el-pagination) {
|
|
--el-pagination-font-size: 14px;
|
|
}
|
|
|
|
:deep(.el-pagination .btn-prev),
|
|
:deep(.el-pagination .btn-next) {
|
|
background: #f5f7fa;
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
|
|
:deep(.el-pagination .btn-prev:hover),
|
|
:deep(.el-pagination .btn-next:hover) {
|
|
color: #409eff;
|
|
}
|
|
|
|
:deep(.el-pager li.is-active) {
|
|
background: #409eff;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1024px) {
|
|
.tech-resources-layout {
|
|
flex-direction: column;
|
|
padding: 20px;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
}
|
|
|
|
.content-header {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.search-controls {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pagination-wrapper {
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 150px;
|
|
}
|
|
}
|
|
</style> |