Skip to content

P
project-online-fi
提交 00fc7d34 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 25bfee40
隐藏空白字符变更
内嵌 并排
正在显示 包含 322 行增加 和 67 行删除
src/modules/home/components/Course.vue
浏览文件 @ 00fc7d34
<script lang="ts" setup> <script lang="ts" setup>
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const courseList: Array<{ tit: string; desc: string; img: string }> = [ const courseList: Array<{ tit: string; desc: string; img: string }> = [
{ {
tit: 'PAAP(I)', tit: 'PAAP(I)',
...@@ -18,85 +21,149 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -18,85 +21,149 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set3.png' img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set3.png'
} }
] ]
const courseIndex = $ref(0)
</script> </script>
<template> <template>
<div class="main"> <div v-if="!mobile">
<div class="main_con" id="product"> <div class="main">
<div class="con_tit"> <div class="main_con" id="product">
<div class="tit_img"> <div class="con_tit">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /> <div class="tit_img">
</div> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
<div class="tit_txt">课程介绍</div> </div>
<div class="tit_img"> <div class="tit_txt">课程介绍</div>
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" /> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
</div> </div>
</div> <el-tabs class="my-tabs">
<el-tabs class="my-tabs"> <el-tab-pane>
<el-tab-pane> <template #label>
<template #label> <div class="tab_con con1">
<div class="tab_con con1"> <img src="https://webapp-pub.ezijing.com/project_online/paa/tab1.png" class="con_img" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/tab1.png" class="con_img" /> <img src="https://webapp-pub.ezijing.com/project_online/paa/tab1_active.png" class="con_img_active" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/tab1_active.png" class="con_img_active" /> </div>
</div> <div class="h"></div>
<div class="h"></div> </template>
</template> <div class="con_content">
<div class="con_content"> <div class="content_desc">
<div class="content_desc"> 资产分析规划师（Private Assets Analysis
资产分析规划师（Private Assets Analysis Planner，简称PAAP）认证系列，目前包括资产分析规划师（一级）/PAAP（Ⅰ）和资产分析规划师（二级）/PAAP（Ⅱ）。
Planner，简称PAAP）认证系列，目前包括资产分析规划师（一级）/PAAP（Ⅰ）和资产分析规划师（二级）/PAAP（Ⅱ）。 </div>
</div> <div class="con_list con_list1">
<div class="con_list con_list1"> <div class="list_item" v-for="(item, index) in courseList" :key="index">
<div class="list_item" v-for="(item, index) in courseList" :key="index"> <ul>
<ul> <li>
<li> <p>{{ item.tit }}</p>
<p>{{ item.tit }}</p> </li>
</li> </ul>
</ul> <div class="item_desc">{{ item.desc }}</div>
<div class="item_desc">{{ item.desc }}</div> <img :src="item.img" class="item_img item_img1" />
<img :src="item.img" class="item_img item_img1" /> </div>
</div> </div>
</div> </div>
</div> </el-tab-pane>
</el-tab-pane> <el-tab-pane>
<el-tab-pane> <template #label>
<template #label> <div class="tab_con con2">
<div class="tab_con con2"> <img src="https://webapp-pub.ezijing.com/project_online/paa/tab2.png" class="con_img" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/tab2.png" class="con_img" /> <img src="https://webapp-pub.ezijing.com/project_online/paa/tab2_active.png" class="con_img_active" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/tab2_active.png" class="con_img_active" /> </div>
</div> <div class="h"></div>
<div class="h"></div> </template>
</template> <div class="con_content">
<div class="con_content"> <div class="content_desc">
<div class="content_desc"> 高级资产分析管理师（Senior Private Asset Analysis
高级资产分析管理师（Senior Private Asset Analysis Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用资产分析的多维模型系统解读和规划，构建权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现资产全面增值。
Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用资产分析的多维模型系统解读和规划，构建权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现资产全面增值。 </div>
</div> <div class="con_list con_list2">
<div class="con_list con_list2"> <div class="list_item" v-for="(item, index) in courseList1" :key="index">
<div class="list_item" v-for="(item, index) in courseList1" :key="index"> <div class="item_desc">{{ item.desc }}</div>
<div class="item_desc">{{ item.desc }}</div> <img :src="item.img" class="item_img" />
<img :src="item.img" class="item_img" /> </div>
</div> </div>
</div> </div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="main1">
<div class="con_education">
<div class="education_tit">PAA持续教育</div>
<div class="education_desc">
PAA持续教育，是清控紫荆金融保险学院PAA认证中心为持证人定制研发的终身学习培训平台，旨在为持证人提供知识更新迭代、使其持续拥有PAA证书的持证效力与执业能力。
</div>
<div class="education_con">
<div class="con_part content1">
持证人须在证书报告期内（自获得证书签发之日起，每24个月为一个报告期），完成规定的60学分，如未达到将无法进行证书再认证。
</div> </div>
</el-tab-pane> <div class="con_part">
</el-tabs> 持证人可通过线上学习、线下活动、在职学习、公开发表论文或出版著作以及担任专业组织委员等多种形式获得学分。期间由紫荆教育金融保险学院提供全方位教育科技平台支持和全流程专属导师制辅导。
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="main1"> <div class="h5-main" v-else>
<div class="con_education"> <h1>师资团队</h1>
<div class="education_tit">PAA持续教育</div> <div class="tab-btn">
<div class="education_desc"> <div :class="courseIndex === 0 ? 'btn active' : 'btn'" @click="courseIndex = 0">
PAA持续教育，是清控紫荆金融保险学院PAA认证中心为持证人定制研发的终身学习培训平台，旨在为持证人提供知识更新迭代、使其持续拥有PAA证书的持证效力与执业能力。 <div class="logo"></div>
</div> </div>
<div :class="courseIndex === 1 ? 'btn active' : 'btn'" @click="courseIndex = 1">
<div class="education_con"> <div class="logo"></div>
<div class="con_part content1"> </div>
持证人须在证书报告期内（自获得证书签发之日起，每24个月为一个报告期），完成规定的60学分，如未达到将无法进行证书再认证。 </div>
<div class="tab-content">
<template v-if="courseIndex === 0">
<h2>
私人资产分析规划师（Private Assets Analysis
Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。
</h2>
<h1>PAAP(I)</h1>
<h3>
PAAP（Ⅰ）即通过私人权属资产全面预算的系统学习，具备完成私人资产分析所需要的系统源点知识的底层逻辑，精确盘点私人资产，建立私人资产分析的多维模型。
</h3>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/paa-course1.png" class="img1" />
<div class="btn-box">
<div class="btn1">查看详情</div>
<div class="btn2">立即购买</div>
</div> </div>
<div class="con_part"> <h1 class="mt7">PAAP(II)</h1>
持证人可通过线上学习、线下活动、在职学习、公开发表论文或出版著作以及担任专业组织委员等多种形式获得学分。期间由紫荆教育金融保险学院提供全方位教育科技平台支持和全流程专属导师制辅导。 <h3>
PAAP（Ⅱ）是学员通过深入学习资产分析的模型，并能熟练地通过模型，结合不同维度客户资产情况，准确分析形成并出具私人资产分析报告。
</h3>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/paa-course2.png" class="img1" />
<div class="btn-box">
<div class="btn1">查看详情</div>
<div class="btn2">立即购买</div>
</div> </div>
</template>
<template v-if="courseIndex === 1">
<h2>
高级私人资产分析管理师（Senior Private Asset Analysis
Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用私人资产分析的多维模型系统解读和规划，构建私人权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现私人资产全面增值。
</h2>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/paa-course3.png" class="img1" />
<div class="btn-box">
<div class="btn1">查看详情</div>
<div class="btn2">立即购买</div>
</div>
</template>
</div>
<div class="paa-box">
<h1>PAA持续教育</h1>
<h2>
PAA持续教育，是清控紫荆金融保险学院PAA认证中心为持证人定制研发的终身学习培训平台，旨在为持证人提供知识更新迭代、使其持续拥有PAA证书的持证效力与执业能力。
</h2>
<div class="t">
持证人须在证书报告期内（自获得证书签发之日起，每24个月为一个报告期），完成规定的60学分，如未达到将无法进行证书再认证。
</div>
<div class="t">
持证人可通过线上学习、线下活动、在职学习、公开发表论文或出版著作以及担任专业组织委员等多种形式获得学分。期间由紫荆教育金融保险学院提供全方位教育科技平台支持和全流程专属导师制辅导。
</div> </div>
</div> </div>
</div> </div>
...@@ -377,4 +444,167 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -377,4 +444,167 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
} }
} }
} }
.h5-main {
padding: 0 0.3rem;
> h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding: 0.3rem 0;
}
.tab-btn {
display: flex;
box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.17);
.btn {
flex: 1;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 1rem;
position: relative;
&.active {
background: rgba(193, 171, 133, 1);
&::before {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 6px solid rgba(193, 171, 133, 1);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
}
&:nth-child(1) {
.logo {
background: url(https://webapp-pub.ezijing.com/project_online/paa/tab1_active.png);
background-size: 100% 100%;
}
}
&:nth-child(2) {
.logo {
background: url(https://webapp-pub.ezijing.com/project_online/paa/tab2_active.png);
background-size: 100% 100%;
}
}
}
&:nth-child(1) {
.logo {
background: url(https://webapp-pub.ezijing.com/project_online/paa/tab1.png);
background-size: 100% 100%;
}
}
&:nth-child(2) {
.logo {
background: url(https://webapp-pub.ezijing.com/project_online/paa/tab2.png);
background-size: 100% 100%;
}
}
.logo {
width: 2.73rem;
height: 0.27rem;
}
}
}
.tab-content {
background: rgba(255, 255, 255, 1);
border-radius: 0.06rem;
margin-top: 0.34rem;
padding: 0.5rem 0.2rem 0.36rem;
h2 {
font-size: 0.24rem;
font-weight: 500;
line-height: 0.4rem;
color: #333333;
text-align: justify;
}
h1 {
font-size: 0.28rem;
font-weight: bold;
line-height: 100%;
color: #a79473;
padding-left: 0.17rem;
position: relative;
margin: 0.3rem 0 0.15rem;
&.mt7 {
margin-top: 0.7rem;
}
&::before {
content: '';
position: absolute;
top: 0.08rem;
left: 0;
min-width: 0.1rem;
height: 0.1rem;
background: rgba(193, 171, 133, 1);
transform: rotate(45deg);
}
}
h3 {
font-size: 0.24rem;
font-weight: 400;
line-height: 0.4rem;
color: #535353;
text-align: justify;
}
img {
width: 100%;
display: block;
}
.img1 {
margin: 0.24rem 0;
}
.btn-box {
display: flex;
justify-content: center;
div {
width: 2.5rem;
font-size: 0.28rem;
line-height: 0.8rem;
border-radius: 0.4rem;
text-align: center;
}
.btn1 {
border: 1px solid #c1ab85;
margin-right: 0.26rem;
color: #c1ab85;
}
.btn2 {
background: rgba(193, 171, 133, 1);
color: #ffffff;
}
}
}
.paa-box {
background: #ffffff;
border-radius: 0.12rem;
margin-top: 0.4rem;
padding: 0.3rem 0.2rem 0.4rem;
h1 {
font-size: 0.28rem;
font-weight: bold;
line-height: 100%;
color: #333333;
}
h2 {
font-size: 0.24rem;
line-height: 0.4rem;
color: #333333;
margin-top: 0.2rem;
font-weight: normal;
}
.t {
padding: 0.33rem;
margin-top: 0.25rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/paa-t-bg.png);
background-size: 100% 100%;
font-size: 0.24rem;
line-height: 0.4rem;
color: #333333;
}
}
}
</style> </style>
src/modules/home/components/ExamProcess.vue
浏览文件 @ 00fc7d34
<script setup lang="ts"></script> <script setup lang="ts">
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
</script>
<template> <template>
<div class="main" id="apply"> <div class="main" id="apply" v-if="!mobile">
<div class="main_con"> <div class="main_con">
<div class="con_tit"> <div class="con_tit">
<div class="tit_img"> <div class="tit_img">
...@@ -15,6 +18,10 @@ ...@@ -15,6 +18,10 @@
<img src="https://webapp-pub.ezijing.com/project_online/paa/exam_process.png" class="con_img" /> <img src="https://webapp-pub.ezijing.com/project_online/paa/exam_process.png" class="con_img" />
</div> </div>
</div> </div>
<div class="h5-main" v-else>
<h1>认证考试流程</h1>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/h5/paa-process.png" />
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -44,4 +51,18 @@ ...@@ -44,4 +51,18 @@
} }
} }
} }
.h5-main {
padding: 0 0.3rem 0.4rem;
h1 {
font-size: 0.32rem;
font-weight: bold;
line-height: 100%;
color: #333333;
padding: 0.3rem 0;
}
img {
width: 100%;
display: block;
}
}
</style> </style>
src/modules/home/components/Main.vue
浏览文件 @ 00fc7d34
...@@ -199,6 +199,10 @@ const mainList1: Array<{ ...@@ -199,6 +199,10 @@ const mainList1: Array<{
font-size: 0.24rem; font-size: 0.24rem;
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.item_tit{
font-size: .24rem;
margin-top: .15rem;
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论