179 lines
3.9 KiB
Vue
179 lines
3.9 KiB
Vue
<template>
|
||
<div class="downloads-page">
|
||
<div class="page-header">
|
||
<h1 class="page-title">入会资料下载</h1>
|
||
<p class="page-desc">下载企业会员、个人会员入会申请材料，完成填写盖章或签字后上传审核</p>
|
||
</div>
|
||
|
||
<div class="downloads-grid">
|
||
<div v-for="item in downloadItems" :key="item.title" class="download-card">
|
||
<div class="download-icon">{{ item.icon }}</div>
|
||
<div class="download-body">
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.desc }}</p>
|
||
<div class="download-tags">
|
||
<a-tag v-for="tag in item.tags" :key="tag" color="blue">{{ tag }}</a-tag>
|
||
</div>
|
||
</div>
|
||
<div class="download-actions">
|
||
<a-button type="primary" ghost @click="handleDownload(item.title)">下载模板</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="review-section">
|
||
<h2>资格审核与资料上传</h2>
|
||
<p>请选择对应身份进入申请系统，填写表单并上传盖章或签字后的申请表及证明材料。</p>
|
||
<div class="review-actions">
|
||
<a-button type="primary" size="large" @click="navigateTo('/about/join/enterprise')">企业会员申请</a-button>
|
||
<a-button size="large" @click="navigateTo('/about/join/personal')">个人会员申请</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
|
||
useHead({ title: '入会资料下载 - 决策咨询网' })
|
||
|
||
const downloadItems = [
|
||
{
|
||
icon: '🏢',
|
||
title: '企业会员入会申请表',
|
||
desc: '适用于企业会员入会申请，需填写完整信息并加盖单位公章后上传。',
|
||
tags: ['企业会员', '盖章上传'],
|
||
},
|
||
{
|
||
icon: '👤',
|
||
title: '个人会员入会申请表',
|
||
desc: '适用于个人会员入会申请，需本人签字后连同证明材料一并提交审核。',
|
||
tags: ['个人会员', '签字上传'],
|
||
},
|
||
{
|
||
icon: '📋',
|
||
title: '学会章程与入会须知',
|
||
desc: '提交申请前请先阅读章程与入会须知，确认资格条件与资料清单。',
|
||
tags: ['章程', '资格说明'],
|
||
},
|
||
]
|
||
|
||
function handleDownload(name: string) {
|
||
message.info(`资料「${name}」下载功能待接入实际文件，当前已预留下载入口`)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.downloads-page {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px 64px;
|
||
}
|
||
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #1f2937;
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.page-desc {
|
||
font-size: 15px;
|
||
color: #6b7280;
|
||
margin: 0;
|
||
}
|
||
|
||
.downloads-grid {
|
||
display: grid;
|
||
gap: 20px;
|
||
}
|
||
|
||
.download-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 24px;
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.download-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.download-body {
|
||
flex: 1;
|
||
}
|
||
|
||
.download-body h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 18px;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.download-body p {
|
||
margin: 0 0 12px;
|
||
color: #6b7280;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.download-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.download-actions {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.review-section {
|
||
margin-top: 32px;
|
||
padding: 32px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
.review-section h2 {
|
||
margin: 0 0 10px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.review-section p {
|
||
margin: 0 0 20px;
|
||
color: rgba(255, 255, 255, 0.82);
|
||
}
|
||
|
||
.review-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.download-card {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.download-actions {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|