更新首页
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user