235 lines
7.5 KiB
Vue
235 lines
7.5 KiB
Vue
<template>
|
||
<LearningCenterCases v-if="route.path.endsWith('/cases')" />
|
||
<LearningCenterVideos v-else-if="route.path === '/knowledge/learning-center/videos'" />
|
||
<PageContainer v-else>
|
||
<div class="learning-center-page">
|
||
<PageHeader :title="pageTitle" :description="pageDescription">
|
||
<template #actions>
|
||
<button type="button" class="btn-training-apply" @click="showTrainingModal = true">
|
||
预约培训申请
|
||
</button>
|
||
</template>
|
||
</PageHeader>
|
||
<div class="page-body">
|
||
<section class="section">
|
||
<div class="container">
|
||
<!-- 学习中心概要介绍 -->
|
||
<div class="learning-overview">
|
||
<p class="overview-intro">
|
||
学习中心是 RMO 知识资源体系中的核心模块，面向申办者、持有人、研究中心及保险从业者，提供药物临床试验责任、保险与风险管理的系统化学习资源。通过案例学习、培训视频与考试测评，帮助从业者掌握法规要求、责任界定、保险配置及理赔实务，提升专业能力与合规水平。
|
||
</p>
|
||
|
||
<div class="module-cards">
|
||
<RouterLink to="/knowledge/learning-center/cases" class="module-card">
|
||
<div class="module-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||
<polyline points="14 2 14 8 20 8" />
|
||
<line x1="16" y1="13" x2="8" y2="13" />
|
||
<line x1="16" y1="17" x2="8" y2="17" />
|
||
<polyline points="10 9 9 9 8 9" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="module-title">案例学习</h3>
|
||
<p class="module-desc">
|
||
基于司法裁判文书及公开报道的真实案例，涵盖申办者责任、知情同意书约束、因果关系认定、格式条款解释及赔偿比例酌定等核心议题，帮助理解药物临床试验责任、保险与赔偿的法律逻辑。
|
||
</p>
|
||
<span class="module-link">进入案例学习 →</span>
|
||
</RouterLink>
|
||
|
||
<RouterLink to="/knowledge/learning-center/videos" class="module-card">
|
||
<div class="module-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polygon points="23 7 16 12 23 17 23 7" />
|
||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="module-title">培训视频</h3>
|
||
<p class="module-desc">
|
||
系统化培训视频，对应 PPTX 课件，涵盖申办者责任本质、赔偿金额测算、风险管理、理赔流程与案例、ICF 解读、药害救济国际经验、保险要素、纠纷处理及投保定价等主题，助力专业能力提升。
|
||
</p>
|
||
<span class="module-link">进入培训视频 →</span>
|
||
</RouterLink>
|
||
|
||
<RouterLink to="/knowledge/learning-center/exam" class="module-card">
|
||
<div class="module-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M9 11l3 3L22 4" />
|
||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
|
||
</svg>
|
||
</div>
|
||
<h3 class="module-title">考试中心</h3>
|
||
<p class="module-desc">
|
||
在线测评与认证考试，检验学习成果，支持从业者获得专业认证。功能建设中，敬请期待。
|
||
</p>
|
||
<span class="module-link">进入考试中心 →</span>
|
||
</RouterLink>
|
||
</div>
|
||
|
||
<div class="training-apply-cta">
|
||
<p>如需定制化培训或线下讲座，欢迎提交预约申请，我们将尽快与您联系。</p>
|
||
<button type="button" class="btn btn-primary" @click="showTrainingModal = true">
|
||
预约培训申请
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<TrainingReservationModal v-model:open="showTrainingModal" />
|
||
</PageContainer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import PageContainer from '@/components/PageContainer.vue'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import LearningCenterCases from './LearningCenterCases.vue'
|
||
import LearningCenterVideos from './LearningCenterVideos.vue'
|
||
import TrainingReservationModal from '@/components/TrainingReservationModal.vue'
|
||
|
||
const route = useRoute()
|
||
const showTrainingModal = ref(false)
|
||
|
||
// 从菜单「预约培训申请」进入时自动打开弹窗
|
||
watch(
|
||
() => route.query.apply,
|
||
(val) => {
|
||
if (val === 'training') showTrainingModal.value = true
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
const pageTitle = '学习中心'
|
||
const pageDescription = '案例学习、培训视频与考试中心，助力药物临床试验责任与保险风险管理能力提升'
|
||
</script>
|
||
|
||
<style scoped>
|
||
.learning-center-page {
|
||
min-height: 60vh;
|
||
}
|
||
|
||
.btn-training-apply {
|
||
padding: 0.5rem 1rem;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: var(--white, #fff);
|
||
background: var(--brand-primary, #0ea5e9);
|
||
border: none;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-training-apply:hover {
|
||
background: var(--brand-primary-dark, #0284c7);
|
||
}
|
||
|
||
.learning-overview {
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.overview-intro {
|
||
font-size: 1rem;
|
||
line-height: 1.8;
|
||
color: var(--text-color);
|
||
margin: 0 0 2.5rem 0;
|
||
}
|
||
|
||
.module-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
|
||
.module-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--white);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: box-shadow 0.2s, border-color 0.2s;
|
||
}
|
||
|
||
.module-card:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
border-color: var(--brand-primary, #0ea5e9);
|
||
}
|
||
|
||
.module-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
color: var(--brand-primary, #0ea5e9);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.module-icon svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.module-title {
|
||
font-size: 1.15rem;
|
||
font-weight: 600;
|
||
color: var(--text-color);
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.module-desc {
|
||
font-size: 0.9375rem;
|
||
line-height: 1.65;
|
||
color: var(--text-secondary, #555);
|
||
margin: 0 0 1rem 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.module-link {
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: var(--brand-primary, #0ea5e9);
|
||
}
|
||
|
||
.training-apply-cta {
|
||
padding: 1.5rem;
|
||
background: var(--bg-color, #f8fafc);
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.training-apply-cta p {
|
||
margin: 0 0 1rem 0;
|
||
font-size: 0.9375rem;
|
||
color: var(--text-secondary, #555);
|
||
}
|
||
|
||
.training-apply-cta .btn {
|
||
padding: 0.5rem 1.25rem;
|
||
font-size: 0.9rem;
|
||
border-radius: 8px;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.training-apply-cta .btn-primary {
|
||
background: var(--brand-primary, #0ea5e9);
|
||
color: var(--white, #fff);
|
||
}
|
||
|
||
.training-apply-cta .btn-primary:hover {
|
||
background: var(--brand-primary-dark, #0284c7);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.module-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|