feat(about): 重构“关于我们”页面并丰富内容展示
- 采用左右分栏布局，左侧新增图标导航 - 全新设计顶部 Banner，提升视觉效果 - 添加学会简介数据亮点和主要职能展示 - 新增组织机构图、主要领导及专家委员会成员展示 - 引入学会章程章节分明条目展示 - 丰富咨询服务内容，新增服务项目卡片和联系方式 - “加入我们”板块支持企业与个人会员申请详情说明 - 支持资料下载并优化排版与交互体验 - 增强响应式支持，保证移动端体验一致 - 页面样式大幅调整，提升整体美观与可读性
This commit is contained in:
220
app/pages/admin/applications/expert.vue
Normal file
220
app/pages/admin/applications/expert.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="admin-applications-expert">
|
||||
<!-- 复用专家审核，这里是专家申请管理入口 -->
|
||||
<div class="page-header">
|
||||
<h3>专家申请管理</h3>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="navigateTo('/admin/experts/review')">前往审核</a-button>
|
||||
<a-button @click="loadData">刷新</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item blue">
|
||||
<div class="stat-num">{{ stats.total }}</div>
|
||||
<div class="stat-label">总申请</div>
|
||||
</div>
|
||||
<div class="stat-item orange">
|
||||
<div class="stat-num">{{ stats.pending }}</div>
|
||||
<div class="stat-label">待审核</div>
|
||||
</div>
|
||||
<div class="stat-item green">
|
||||
<div class="stat-num">{{ stats.approved }}</div>
|
||||
<div class="stat-label">已通过</div>
|
||||
</div>
|
||||
<div class="stat-item red">
|
||||
<div class="stat-num">{{ stats.rejected }}</div>
|
||||
<div class="stat-label">已拒绝</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请材料模板下载 -->
|
||||
<div class="template-card">
|
||||
<h4>申请材料模板</h4>
|
||||
<p>以下为专家申请所需材料的模板文件，请申请人按要求填写并提交。</p>
|
||||
<div class="template-list">
|
||||
<div class="template-item">
|
||||
<span class="template-icon">📄</span>
|
||||
<span class="template-name">专家申请表（个人签字）</span>
|
||||
<a-button size="small" type="primary">下载模板</a-button>
|
||||
</div>
|
||||
<div class="template-item">
|
||||
<span class="template-icon">📋</span>
|
||||
<span class="template-name">专家申请说明文件</span>
|
||||
<a-button size="small" type="primary">下载模板</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近期申请列表 -->
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">近期申请记录</span>
|
||||
<a-button size="small" @click="navigateTo('/admin/experts/review')">查看全部并审核 →</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="recentApplications"
|
||||
:loading="loading"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button size="small" @click="navigateTo('/admin/experts/review')">审核</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ layout: 'admin' })
|
||||
useHead({ title: '专家申请管理' })
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const stats = reactive({ total: 12, pending: 3, approved: 8, rejected: 1 })
|
||||
|
||||
const columns = [
|
||||
{ title: '申请人', dataIndex: 'name', key: 'name' },
|
||||
{ title: '单位', dataIndex: 'organization', key: 'organization' },
|
||||
{ title: '研究领域', dataIndex: 'researchArea', key: 'researchArea' },
|
||||
{ title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
|
||||
{ title: '状态', key: 'status', width: 100 },
|
||||
{ title: '操作', key: 'action', width: 80 },
|
||||
]
|
||||
|
||||
const recentApplications = ref([
|
||||
{ id: 1, name: '张某某', organization: '广西大学', researchArea: '区域经济', applyTime: '2024-12-18', status: 'pending' },
|
||||
{ id: 2, name: '李某某', organization: '广西社科院', researchArea: '产业政策', applyTime: '2024-12-17', status: 'pending' },
|
||||
{ id: 3, name: '王某某', organization: '广西师范大学', researchArea: '金融经济', applyTime: '2024-12-15', status: 'approved' },
|
||||
])
|
||||
|
||||
function getStatusColor(status: string) {
|
||||
const map: Record<string, string> = { pending: 'orange', approved: 'green', rejected: 'red' }
|
||||
return map[status] || 'default'
|
||||
}
|
||||
|
||||
function getStatusText(status: string) {
|
||||
const map: Record<string, string> = { pending: '待审核', approved: '已通过', rejected: '已拒绝' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
// TODO: 接入API
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-applications-expert { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.page-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.stat-item.blue { border-top: 3px solid #3b82f6; }
|
||||
.stat-item.orange { border-top: 3px solid #f97316; }
|
||||
.stat-item.green { border-top: 3px solid #22c55e; }
|
||||
.stat-item.red { border-top: 3px solid #ef4444; }
|
||||
|
||||
.stat-num {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.template-card, .table-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.template-card h4, .table-header {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.template-card p {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.template-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.template-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.template-icon { font-size: 16px; }
|
||||
|
||||
.template-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
}
|
||||
</style>
|
||||
186
app/pages/admin/applications/member.vue
Normal file
186
app/pages/admin/applications/member.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="admin-applications-member">
|
||||
<div class="page-header">
|
||||
<h3>会员申请管理</h3>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="navigateTo('/admin/members/review')">前往审核</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-item blue">
|
||||
<div class="stat-num">{{ stats.total }}</div>
|
||||
<div class="stat-label">总申请</div>
|
||||
</div>
|
||||
<div class="stat-item orange">
|
||||
<div class="stat-num">{{ stats.pending }}</div>
|
||||
<div class="stat-label">待审核</div>
|
||||
</div>
|
||||
<div class="stat-item green">
|
||||
<div class="stat-num">{{ stats.approved }}</div>
|
||||
<div class="stat-label">已通过</div>
|
||||
</div>
|
||||
<div class="stat-item purple">
|
||||
<div class="stat-num">{{ stats.enterprise }}</div>
|
||||
<div class="stat-label">企业会员</div>
|
||||
</div>
|
||||
<div class="stat-item teal">
|
||||
<div class="stat-num">{{ stats.personal }}</div>
|
||||
<div class="stat-label">个人会员</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 材料模板 -->
|
||||
<div class="template-card">
|
||||
<h4>申请材料模板</h4>
|
||||
<a-tabs>
|
||||
<a-tab-pane key="enterprise" tab="企业会员模板">
|
||||
<div class="template-list">
|
||||
<div class="template-item">
|
||||
<span class="template-icon">📄</span>
|
||||
<span class="template-name">企业会员入会申请表（盖章）</span>
|
||||
<a-button size="small" type="primary">下载模板</a-button>
|
||||
</div>
|
||||
<div class="template-desc">所需材料：营业执照副本、法人身份证、单位简介</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="personal" tab="个人会员模板">
|
||||
<div class="template-list">
|
||||
<div class="template-item">
|
||||
<span class="template-icon">📄</span>
|
||||
<span class="template-name">个人会员入会申请表（签字）</span>
|
||||
<a-button size="small" type="primary">下载模板</a-button>
|
||||
</div>
|
||||
<div class="template-desc">所需材料：个人简介、职称证书/学历证书、身份证、研究成果或获奖证明</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="table-header">
|
||||
<span class="table-title">近期申请记录</span>
|
||||
<a-button size="small" @click="navigateTo('/admin/members/review')">查看全部并审核 →</a-button>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="recentApplications"
|
||||
row-key="id"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="record.type === 'enterprise' ? 'blue' : 'green'">
|
||||
{{ record.type === 'enterprise' ? '企业' : '个人' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 'pending' ? 'orange' : record.status === 'approved' ? 'green' : 'red'">
|
||||
{{ record.status === 'pending' ? '待审核' : record.status === 'approved' ? '已通过' : '已拒绝' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-button size="small" @click="navigateTo('/admin/members/review')">审核</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
definePageMeta({ layout: 'admin' })
|
||||
useHead({ title: '会员申请管理' })
|
||||
|
||||
const stats = reactive({ total: 20, pending: 5, approved: 14, enterprise: 8, personal: 12 })
|
||||
|
||||
const columns = [
|
||||
{ title: '申请人', dataIndex: 'name', key: 'name' },
|
||||
{ title: '类型', key: 'type', width: 90 },
|
||||
{ title: '联系方式', dataIndex: 'contact', key: 'contact' },
|
||||
{ title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
|
||||
{ title: '状态', key: 'status', width: 100 },
|
||||
{ title: '操作', key: 'action', width: 80 },
|
||||
]
|
||||
|
||||
const recentApplications = ref([
|
||||
{ id: 1, name: '广西某科技公司', type: 'enterprise', contact: '139****0001', applyTime: '2024-12-19', status: 'pending' },
|
||||
{ id: 2, name: '张某某', type: 'personal', contact: '138****0002', applyTime: '2024-12-18', status: 'pending' },
|
||||
{ id: 3, name: '南宁某咨询机构', type: 'enterprise', contact: '137****0003', applyTime: '2024-12-15', status: 'approved' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-applications-member { display: flex; flex-direction: column; gap: 16px; }
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 14px 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
.page-header h3 { font-size: 16px; font-weight: 700; color: #1f2937; margin: 0; }
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.stat-item.blue { border-top: 3px solid #3b82f6; }
|
||||
.stat-item.orange { border-top: 3px solid #f97316; }
|
||||
.stat-item.green { border-top: 3px solid #22c55e; }
|
||||
.stat-item.purple { border-top: 3px solid #8b5cf6; }
|
||||
.stat-item.teal { border-top: 3px solid #14b8a6; }
|
||||
|
||||
.stat-num { font-size: 28px; font-weight: 800; color: #1f2937; }
|
||||
.stat-label { font-size: 12px; color: #9ca3af; margin-top: 4px; }
|
||||
|
||||
.template-card, .table-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.template-card h4 { font-size: 15px; font-weight: 600; color: #1f2937; margin: 0 0 12px; }
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.table-title { font-size: 15px; font-weight: 600; color: #1f2937; }
|
||||
|
||||
.template-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.template-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.template-icon { font-size: 16px; }
|
||||
.template-name { flex: 1; font-size: 14px; color: #374151; }
|
||||
|
||||
.template-desc {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
padding: 4px 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user