Skip to content

P
project-online-fi
提交 20e83da2 authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 b36414f5
显示空白字符变更
内嵌 并排
正在显示 包含 420 行增加 和 4 行删除
src/assets/css/base.css
浏览文件 @ 20e83da2
...@@ -78,7 +78,7 @@ textarea:focus { ...@@ -78,7 +78,7 @@ textarea:focus {
body { body {
min-width: 375px; min-width: 375px;
font-size: 14px; font-size: 14px;
background-color: #fff; background-color: #f5f5f5;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
......
src/main.ts
浏览文件 @ 20e83da2
...@@ -4,8 +4,8 @@ import { createPinia } from 'pinia' ...@@ -4,8 +4,8 @@ import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
// import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
// 公共css // 公共css
import './assets/css/base.css' import './assets/css/base.css'
...@@ -24,6 +24,6 @@ modules({ router }) ...@@ -24,6 +24,6 @@ modules({ router })
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
// app.use(ElementPlus) app.use(ElementPlus)
app.mount('#app') app.mount('#app')
src/modules/home/components/Knowledge.vue 0 → 100644
浏览文件 @ 20e83da2
<script setup lang="ts"></script>
<template>
<div></div>
</template>
<style lang="scss" scoped></style>
src/modules/home/components/Main.vue 0 → 100644
浏览文件 @ 20e83da2
<script lang="ts" setup>
import 'swiper/css'
</script>
<template>
<div class="main">
<div class="main_con">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/main1.png" alt="" />
<div class="con_content">
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合；通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。
</div>
</div>
<div class="main_con1">
核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“格与质”、“道与术”、“欲与渔”的经营管理品格和能力，主打行业认证类、行业标准类<br />和定制专属类等三类金融职业类培育体系。
</div>
</div>
</template>
<style lang="scss" scoped>
.main {
.main_con {
width: 1200px;
margin: 95px auto;
display: flex;
justify-content: space-between;
align-items: center;
.con_content {
background: #ffffff;
position: relative;
margin-left: -143px;
z-index: 100;
font-size: 20px;
font-weight: 400;
line-height: 40px;
color: #333333;
padding: 69px 55px 62px 58px;
}
}
.main_con1 {
height: 308px;
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/main2.png') no-repeat center;
background-size: 100% 100%;
font-size: 24px;
font-weight: 400;
line-height: 40px;
color: #ffffff;
text-align: center;
padding-top: 100px;
box-sizing: border-box;
}
}
</style>
src/modules/home/components/ProjectSystem.vue 0 → 100644
浏览文件 @ 20e83da2
<script lang="ts" setup>
const authList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab1_1.png',
tit: '私人资产分析规划师(一级/二级)/ PAAP(I/II)',
list: [
{
tit: '学员属性',
desc: '包括但并不仅限于金融保险企业绩优营销员'
},
{
tit: '入学模式',
desc: '基于金融保险企业专属激励方案招生。'
}
]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab1_2.png',
tit: '高级私人资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '金融保险企业精英代理人、团队管理者'
},
{
tit: '入学模式',
desc: '基于金融保险企业特别奖励、专属激励方案招生。'
}
]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab1_3.png',
tit: '公司金融管理师（CFM）',
list: [
{
tit: '学员属性',
desc: '公司金融管理师（CFM）'
},
{
tit: '入学模式',
desc: 'CFM报名系统提交，自动审核通过，即可报名。'
}
]
}
]
const standardList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab2_1.png',
tit: '金融保险高级经理人班',
list: [
{
tit: '学员属性',
desc: '金融企业及保险公司各层级内勤管理者、外勤总监及区域总经理'
},
{
tit: '入学模式',
desc: '基于金融保险企业经理人特别奖励方案招生。'
}
]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab2_2.png',
tit: '高级私人资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '社会企业、保险中介企业、保险门店和独立代理人工作室董监高人士'
},
{
tit: '入学模式',
desc: '以高管进修班形式讲授“版权课程”。向社会和企业高管教授与传承“格与质”、“道”与“术”、“欲与渔”的经营管理品格与能力。后期通过教学深度，逐步演变为制式任职资格岗位进修班。'
}
]
}
]
const universalList: Array<{ img: string; tit: string; list: any }> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab3_1.png',
tit: '私人财富风险管理顾问 / PRP',
list: [
{
tit: '学员属性',
desc: '金融保险内外勤所有从业人员及服务于行业的相关人员'
},
{
tit: '入学模式',
desc: 'PRP报名系统提交，自动审核通过，即可报名。'
}
]
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab3_2.png',
tit: '高级私人资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '国内在职保险营销员'
},
{
tit: '入学模式',
desc: '面向紫荆教育合作保险企业的新职员，组建特别组训团队授课。依照学员职位层级，具体分为：大中型保险企业新人班（学制：100天）、中小型寿险公司新人班、主管班、经理班。'
},
{
tit: '学习内容',
desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
}
]
}
]
</script>
<template>
<div class="main_con">
<div class="con_tit">
<div class="tit_img">
<div class="img_box"></div>
</div>
<div class="tit_text">全系列产品体系</div>
<div class="tit_img">
<div class="img_box"></div>
</div>
</div>
<div class="con_content">
<el-tabs class="my-tabs">
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab1.png" class="icon" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab1_hover.png"
class="active-icon"
/>
<p>行业认证类</p>
</template>
<div class="content_tit">
联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。
</div>
<div class="content_main">
<div class="main_list" v-for="(item, index) in authList" :key="index">
<img :src="item.img" alt="" class="list_img1" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab2.png" class="icon" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab2_hover.png"
class="active-icon"
/>
<p>行业标准类</p>
</template>
<div class="content_tit">
联合业内专家、国内外权威产业研究机构，共同开发教学课程，为企业高层人士提供中国标准化的任职能力及领导力培训。
</div>
<div class="content_main">
<div class="main_list" v-for="(item, index) in standardList" :key="index">
<img :src="item.img" alt="" class="list_img2" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab3.png" class="icon" />
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/tab3_hover.png"
class="active-icon"
/>
<p>行业普及类</p>
</template>
<div class="content_tit">
联合业内领袖、资深专家学者，帮助相关从业者快速建立岗位相关的理论知识体系，加强实训教学，提高实训能力，协助从业者掌握、提升岗位所需的各种实务技能。
</div>
<div class="content_main">
<div class="main_list" v-for="(item, index) in universalList" :key="index">
<img :src="item.img" alt="" />
<div class="list_tit">{{ item.tit }}</div>
<ul>
<li class="list_desc" v-for="(it, index) in item.list" :key="index">
<div class="desc_tit">{{ it.tit }}</div>
<div class="desc_con">{{ it.desc }}</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<style lang="scss" scoped>
.main_con {
padding-top: 80px;
.con_tit {
display: flex;
justify-content: center;
align-items: center;
.tit_img {
width: 30px;
height: 30px;
border: 1px dotted #c1ab85;
display: flex;
justify-content: center;
align-items: center;
.img_box {
width: 6px;
height: 6px;
background: #aa1941;
}
}
.tit_text {
font-size: 32px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin: 0 14px 0 8px;
}
}
.con_content {
width: 1200px;
margin: 59px auto;
:deep(.my-tabs) {
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__nav {
width: 960px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e6e6e6;
}
.el-tabs__nav-scroll {
display: flex;
align-items: center;
justify-content: center;
}
.el-tabs__item {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 70px;
border-radius: 6px;
padding: 0;
border-bottom: none;
.active-icon {
display: none;
}
p {
font-size: 24px;
font-weight: 400;
line-height: 34px;
color: #535353;
margin-left: 10px;
}
&.is-active,
&:hover {
background-color: var(--main-color);
.icon {
display: none;
}
.active-icon {
display: block;
}
p {
color: #fff;
}
}
}
.content_tit {
margin-top: 40px;
font-size: 20px;
font-weight: 400;
line-height: 32px;
color: #333333;
text-align: center;
}
.content_main {
display: flex;
justify-content: space-between;
margin-top: 29px;
.main_list {
// height: 471px;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
padding: 21px 16px 16px 16px;
margin-right: 30px;
.list_img1 {
width: 350px;
height: 197px;
}
.list_img2 {
width: 555px;
height: 197px;
}
.list_tit {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #aa1941;
margin-top: 24px;
}
ul {
margin-top: 23px;
color: #c1ab85;
padding-left: 20px;
.list_desc {
list-style-type: square;
.desc_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
.desc_con {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #666666;
}
}
}
}
}
}
}
}
</style>
src/modules/home/views/Index.vue
浏览文件 @ 20e83da2
<script setup lang="ts"> <script setup lang="ts">
import Banner from '../components/Banner.vue' import Banner from '../components/Banner.vue'
import Main from '../components/Main.vue'
import ProjectSystem from '../components/ProjectSystem.vue'
import Knowledge from '../components/Knowledge.vue'
import Teacher from '../components/Teacher.vue' import Teacher from '../components/Teacher.vue'
import Course from '../components/Course.vue' import Course from '../components/Course.vue'
import Brand from '../components/Brand.vue' import Brand from '../components/Brand.vue'
...@@ -7,6 +11,9 @@ import Brand from '../components/Brand.vue' ...@@ -7,6 +11,9 @@ import Brand from '../components/Brand.vue'
<template> <template>
<Banner></Banner> <Banner></Banner>
<Main></Main>
<ProjectSystem />
<Knowledge />
<Teacher></Teacher> <Teacher></Teacher>
<Course></Course> <Course></Course>
<Brand></Brand> <Brand></Brand>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论