Skip to content

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

chore：update

上级 e4ce1bc6
隐藏空白字符变更
内嵌 并排
正在显示 包含 620 行增加 和 483 行删除
src/assets/images/logo.png
查看替换文件 @ e4ce1bc6 浏览文件 @ 5af3c05b
src/assets/images/logo.png

19.8 KB | W: | H:

src/assets/images/logo.png

10.8 KB | W: | H:

src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
src/assets/images/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/logo_white.png
查看替换文件 @ e4ce1bc6 浏览文件 @ 5af3c05b
src/assets/images/logo_white.png

17.0 KB | W: | H:

src/assets/images/logo_white.png

8.8 KB | W: | H:

src/assets/images/logo_white.png
src/assets/images/logo_white.png
src/assets/images/logo_white.png
src/assets/images/logo_white.png
  • 2-up
  • Swipe
  • Onion skin
src/components/layout/Header.vue
浏览文件 @ 5af3c05b
......@@ -110,7 +110,7 @@ const isScrolled = computed(() => {
}
.app-header-right {
display: flex;
color: #666;
color: #333;
.app-header-logout {
background: url('https://webapp-pub.ezijing.com/project/saas/logout.png') no-repeat left center;
......
src/modules/home/components/Banner.vue
浏览文件 @ 5af3c05b
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jpg' }]
// import { Swiper, SwiperSlide } from 'swiper/vue'
// import 'swiper/css'
// const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/paa/banner.jpg' }]
</script>
<template>
<div class="banner">
<Swiper autoplay>
<SwiperSlide v-for="(item, index) in list" :key="index">
<img :src="item.url" />
</SwiperSlide>
</Swiper>
<!-- <Swiper autoplay>
<SwiperSlide v-for="(item, index) in list" :key="index"> -->
<div class="banner_con">
<div class="banner_tit">PAA私人资产分析师</div>
<div class="banner_desc">
PAA，即私人资产分析师（Private Assets
Analyst）认证体系是由隶属于清控紫荆教育（以清华大学五道口金融学院相关知识产权创设而成）的清控紫荆金融保险研究院和清控紫荆金融保险学院，针对金融保险企业绩优营销员、保险公司TOP
AGENT、TEAM-LEADER等受众研发设计的教学培训认证体系。
</div>
</div>
<!-- </SwiperSlide>
</Swiper> -->
</div>
</template>
<style lang="scss">
.banner {
img {
width: 100%;
height: 700px;
object-fit: cover;
object-position: center;
background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg') no-repeat center;
background-size: 100% 100%;
width: 100%;
object-fit: cover;
object-position: center;
box-sizing: border-box;
.banner_con {
width: 1200px;
margin: auto;
text-align: left;
padding: 253px 0 179px 0;
.banner_tit {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #ffffff;
}
.banner_desc {
margin-top: 63px;
width: 650px;
font-size: 22px;
font-weight: 400;
line-height: 46px;
color: #ffffff;
}
}
}
</style>
src/modules/home/components/Course.vue
浏览文件 @ 5af3c05b
<script setup>
const list = [
<script lang="ts" setup>
const courseList: Array<{ tit: string; desc: string; img: string }> = [
{
title: '案例解决方案',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
tit: 'PAAP(I)',
desc: 'PAAP（Ⅰ）即通过私人权属资产全面预算的系统学习，具备完成私人资产分析所需要的系统源点知识的底层逻辑，精确盘点私人资产，建立私人资产分析的多维模型。',
img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set1.png'
},
{
title: '案例解决方案',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
},
{
title: '案例解决方案',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
},
{
title: '案例解决方案',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
tit: 'PAAP(II)',
desc: 'PAAP（Ⅱ）是学员通过深入学习资产分析的模型，并能熟练地通过模型，结合不同维度客户资产情况，准确分析形成并出具私人资产分析报告。',
img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set2.png'
}
]
</script>
<template>
<section class="section">
<div class="section-title">
<em class="section-title_dot"></em>
<h2>定制专属类课程</h2>
<em class="section-title_dot"></em>
</div>
<div class="topic">
<p>
针对不同人才类型的培养需求，采用“线上+线下”的教学模式，并提供定制化专业服务与个性化的在线学习解决方案，帮助从业者提升工作所需的业务技能，强化综合竞争力。
</p>
</div>
<div class="case-list">
<div class="case-item" v-for="(item, index) in list" :key="index">
<h3>{{ item.title }}</h3>
<div class="line"></div>
<div class="desc">{{ item.desc }}</div>
<div class="cover"><div class="inner" v-html="item.content"></div></div>
<div class="main">
<div class="main_con" id="product">
<div class="con_tit">
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon1" />
<div class="tit_txt">课程介绍</div>
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon2" />
</div>
<div class="con_tab">
<div class="tab_con con1">
<div class="con_cn">私人资产分析规划师</div>
<div class="con_en">Private Assets Analysis Planner</div>
<div class="h"></div>
</div>
<div class="tab_con con2">
<div class="con_cn">高级私人资产分析管理师</div>
<div class="con_en">Senior Private Asset Analysis Manager</div>
</div>
</div>
<div class="con_content">
<div class="content_desc">
私人资产分析规划师（Private Assets Analysis
Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。
</div>
<div class="con_list">
<div class="list_item" v-for="(item, index) in courseList" :key="index">
<ul>
<li>
<p>{{ item.tit }}</p>
</li>
</ul>
<div class="item_desc">{{ item.desc }}</div>
<img :src="item.img" class="item_img" />
</div>
</div>
</div>
<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_content">
持证人须在证书报告期内（自获得证书签发之日起，每24个月为一个报告期），完成规定的60学分，如未达到将无法进行证书再认证。
</div>
<div class="con_content">
持证人可通过线上学习、线下活动、在职学习、公开发表论文或出版著作以及担任专业组织委员等多种形式获得学分。期间由紫荆教育金融保险学院提供全方位教育科技平台支持和全流程专属导师制辅导。
</div>
</div>
</div>
</div>
<p class="more">查看更多案例</p>
</section>
</div>
</template>
<style lang="scss" scoped>
.section {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.topic {
height: 266px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/course_bg.png') no-repeat;
display: flex;
align-items: center;
justify-content: center;
p {
font-size: 24px;
font-weight: 400;
line-height: 40px;
color: #ffffff;
text-align: center;
margin: 0 40px;
}
}
.case-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.case-item {
position: relative;
margin-top: -1px;
margin-right: -1px;
height: 240px;
padding: 0 36px;
border: 1px solid #ddd;
h3 {
margin-top: 60px;
font-size: 24px;
font-weight: 400;
line-height: 1;
color: #333;
text-align: center;
}
.line {
width: 78px;
height: 2px;
background: var(--main-color);
margin: 40px auto 28px;
}
.desc {
font-size: 16px;
line-height: 24px;
color: #666;
text-align: center;
}
.cover {
display: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: var(--main-color);
}
.inner {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 38px;
color: #ffffff;
border: 1px solid #fff;
}
&:hover {
.cover {
display: block;
.main {
width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/course_bg.png') no-repeat center;
background-size: 100% 100%;
.main_con {
width: 1200px;
margin: auto;
padding: 71px 0 126px 0;
box-sizing: border-box;
.con_tit {
display: flex;
justify-content: center;
.tit_icon {
width: 40px;
height: 13px;
}
.icon1 {
padding-top: 5px;
margin-right: -7px;
}
.icon2 {
padding-top: 20px;
margin-left: -7px;
}
.tit_txt {
font-size: 28px;
font-weight: 400;
line-height: 34px;
color: #ffffff;
}
}
.con_tab {
margin-top: 62px;
height: 118px;
background: #ffffff;
border-radius: 6px;
display: flex;
.tab_con {
width: 600px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.con_cn {
font-size: 22px;
font-weight: bold;
line-height: 34px;
}
.con_en {
font-size: 18px;
font-weight: 400;
line-height: 34px;
letter-spacing: 2px;
}
}
.con1 {
background: #c1ab85;
position: relative;
.con_cn {
color: #ffffff;
}
.con_en {
color: #ffffff;
}
.h {
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: #c1ab85;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
}
.con2 {
.con_cn {
color: #333333;
}
.con_en {
color: #666666;
}
}
}
.con_content {
background: #ffffff;
border-radius: 6px;
margin-top: 34px;
padding: 85px 75px;
.content_desc {
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #333333;
}
.con_list {
margin-top: 35px;
display: flex;
justify-content: space-between;
.list_item {
ul {
padding-left: 20px;
li {
list-style-type: square;
color: #c1ab85;
p {
font-size: 18px;
font-weight: 500;
line-height: 34px;
color: #a79473;
}
}
}
.item_desc {
width: 504px;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #535353;
margin-top: 14px;
}
.item_img {
margin-top: 26px;
}
}
}
}
.con_education {
background: #ffffff;
border-radius: 6px;
margin-top: 40px;
padding: 69px 75px 74px 73px;
// box-sizing: border-box;
.education_tit {
font-size: 22px;
font-weight: bold;
line-height: 34px;
color: #333333;
}
.education_desc {
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #333333;
margin-top: 31px;
}
.education_con {
display: flex;
justify-content: space-between;
.con_content {
width: 480px;
background: url('https://webapp-pub.ezijing.com/project_online/paa/education_bg.png') no-repeat center;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
}
}
}
}
.more {
padding: 20px 0;
font-size: 14px;
line-height: 1;
color: #999;
text-align: center;
}
</style>
src/modules/home/components/ExamProcess.vue 0 → 100644
浏览文件 @ 5af3c05b
<script setup lang="ts"></script>
<template>
<div class="main" id="apply">
<div class="main_con">
<div class="con_tit">
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon1" />
<div class="tit_txt">认证考试流程</div>
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon2" />
</div>
<img src="https://webapp-pub.ezijing.com/project_online/paa/exam_process.png" class="con_img" />
</div>
</div>
</template>
<style lang="scss" scoped>
.main {
width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/exam_bg.png') no-repeat center / 100% 100%;
box-sizing: border-box;
.main_con {
padding: 84px 0 127px 0;
margin: auto;
text-align: center;
.con_tit {
display: flex;
justify-content: center;
.tit_icon {
width: 40px;
height: 13px;
}
.icon1 {
padding-top: 5px;
margin-right: -7px;
}
.icon2 {
padding-top: 20px;
margin-left: -7px;
}
.tit_txt {
font-size: 28px;
font-weight: 400;
line-height: 34px;
color: #ffffff;
}
}
.con_img {
margin-top: 83px;
}
}
}
</style>
src/modules/home/components/Main.vue
浏览文件 @ 5af3c05b
<script lang="ts" setup>
import 'swiper/css'
const mainList: Array<{ img: string; tit: string }> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main1.png',
tit: '严谨的课程体系'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main2.png',
tit: '系统的教学平台'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main1.png',
tit: '灵活的学习模式'
}
]
const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }> = [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main4_1.png',
img1: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main4_2.png',
tit: '考培分离',
desc: '灵活自如公平公正'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main5_1.png',
img1: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main5_2.png',
tit: '千人千卷',
desc: '因材施教百炼成钢'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main6_1.png',
img1: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/main6_2.png',
tit: '专属辅导',
desc: '高效学习精准施教'
}
]
</script>
<template>
<div class="main">
<div class="main_con">
<img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" />
<div class="con_content">
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合；通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。
<div class="con_tit">PAA 做私人权属资产服务的专家</div>
<div class="con_line"></div>
<div class="con_list">
<div class="list_item" v-for="(item, index) in mainList" :key="index">
<img :src="item.img" class="item_img" />
<div class="item_tit">{{ item.tit }}</div>
</div>
</div>
</div>
<div class="main_con1">
核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“格与质”、“道与术”、“欲与渔”的经营管理品格和能力，主打行业认证类、行业标准类<br />和定制专属类等三类金融职业类培育体系。
<div class="con1_list">
<div class="list_item" v-for="(item, index) in mainList1" :key="index">
<img :src="item.img" class="item_img" />
<img :src="item.img1" class="item_img1" />
<div class="item_line"></div>
<div class="item_tit">{{ item.tit }}</div>
<div class="item_desc">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main {
background: #f5f5f5;
.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;
height: 185px;
background: #ffffff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
border-radius: 16px;
margin: -70px auto;
position: relative;
z-index: 10;
box-sizing: border-box;
.con_tit {
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 50px;
color: #333333;
padding: 69px 55px 62px 58px;
padding-top: 33px;
}
.con_line {
border-bottom: 1px dashed #000000;
}
.con_list {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 19px;
.list_item {
display: flex;
align-items: center;
.item_tit {
margin-left: 15px;
font-size: 20px;
font-weight: 400;
line-height: 50px;
color: #333333;
}
}
}
}
.main_con1 {
height: 308px;
background: url('https://webapp-pub.ezijing.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;
width: 1200px;
margin: 144px auto;
padding: 0 50px;
box-sizing: border-box;
.con1_list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 85px;
.list_item {
width: 310px;
height: 367px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dadada;
padding-top: 104px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.item_img1 {
display: none;
}
.item_line {
width: 50px;
height: 2px;
background: #aa1941;
margin: 41px auto;
text-align: center;
}
.item_tit {
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.item_desc {
display: none;
font-size: 20px;
font-weight: 400;
line-height: 50px;
color: #ffffff;
}
&:hover {
background: #c1ab85;
padding-top: 84px;
.item_img {
display: none;
}
.item_img1 {
display: block;
}
.item_line {
background: #ffffff;
}
.item_tit {
color: #ffffff;
}
.item_desc {
display: block;
}
}
}
}
}
}
</style>
src/modules/home/components/ProjectSystem.vue
浏览文件 @ 5af3c05b
<script lang="ts" setup>
const authList: Array<{ img: string; tit: string; list: any }> = [
const list: Array<{ tit: string; desc: string; img: string }> = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
tit: '私人资产分析规划师(一级/二级)/ PAAP(I/II)',
list: [
{
tit: '学员属性',
desc: '包括但并不仅限于金融保险企业绩优营销员'
},
{
tit: '入学模式',
desc: '基于金融保险企业专属激励方案招生。'
}
]
tit: '专业权威',
desc: '由清华大学知名教授、清控紫荆教育专职名师和高级实战专家组成“产学研”一体化教学团队。',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/list1.png'
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png',
tit: '高级私人资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '金融保险企业精英代理人、团队管理者'
},
{
tit: '入学模式',
desc: '基于金融保险企业特别奖励、专属激励方案招生。'
}
]
},
{
img: 'https://webapp-pub.ezijing.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.ezijing.com/project_online/fi/tab2_1.png',
tit: '金融保险高级经理人班',
list: [
{
tit: '学员属性',
desc: '金融企业及保险公司各层级内勤管理者、外勤总监及区域总经理'
},
{
tit: '入学模式',
desc: '基于金融保险企业经理人特别奖励方案招生。'
}
]
tit: '行业标准',
desc: '首创专属金融保险私人权属资产分析的多维模型、私人权属资产全面预算、私人不良资产处置等研发课题和课程内容。',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/list2.png'
},
{
img: 'https://webapp-pub.ezijing.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.ezijing.com/project_online/fi/tab3_1.png',
tit: '私人财富风险管理顾问 / PRP',
list: [
{
tit: '学员属性',
desc: '金融保险内外勤所有从业人员及服务于行业的相关人员'
},
{
tit: '入学模式',
desc: 'PRP报名系统提交，自动审核通过，即可报名。'
}
]
tit: '职业认证',
desc: '现代金融保险服务业从业人员职业等级认证系列，从入门到专业、从专业到权威的规划类与管理类职业认证体系。',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/list3.png'
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png',
tit: '高级私人资产分析管理师 / PAAM',
list: [
{
tit: '学员属性',
desc: '国内在职保险营销员'
},
{
tit: '入学模式',
desc: '面向紫荆教育合作保险企业的新职员，组建特别组训团队授课。依照学员职位层级，具体分为：大中型保险企业新人班（学制：100天）、中小型寿险公司新人班、主管班、经理班。'
},
{
tit: '学习内容',
desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
}
]
tit: '普惠实战',
desc: '隶属清控紫荆金融保险战略性产品。旨在为金融保险企业打造卓越代理人、卓越经纪人以及保险门店、保险工作室独立代理人养成计划，打造终身学习型高绩效团队，成为中国保险销售冠军的人才摇篮。',
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/list4.png'
}
]
</script>
<template>
<div class="main_con" id="product">
<div class="con_tit">
<div class="tit_img">
<div class="img_box"></div>
<div class="main">
<div class="main_con">
<div class="con_list" v-for="(item, index) in list" :key="index">
<div class="list_left">
<div class="left_index">{{ '0' + (index + 1) }}</div>
<div class="left_tit">{{ item.tit }}</div>
<div class="left_desc">{{ item.desc }}</div>
</div>
<img :src="item.img" class="item_img" />
</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.ezijing.com/project_online/fi/tab1.png" class="icon" />
<img src="https://webapp-pub.ezijing.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.ezijing.com/project_online/fi/tab2.png" class="icon" />
<img src="https://webapp-pub.ezijing.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.ezijing.com/project_online/fi/tab3.png" class="icon" />
<img src="https://webapp-pub.ezijing.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 {
.main {
background: #f5f5f5;
.main_con {
width: 1200px;
margin: auto;
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 128px 0 109px 0;
.tit_img {
width: 16px;
height: 16px;
border: 1px dotted #c1ab85;
.con_list {
width: 585px;
height: 274px;
background: #ffffff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 6px;
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 {
padding: 0 20px 26px 40px;
box-sizing: border-box;
display: flex;
.list_left {
display: flex;
align-items: center;
justify-content: center;
width: 320px;
height: 70px;
border-radius: 6px;
padding: 0;
border-bottom: none;
.active-icon {
display: none;
flex-direction: column;
align-items: flex-start;
.left_index {
font-size: 60px;
font-weight: normal;
line-height: 24px;
color: #eaeaea;
padding-top: 29px;
}
p {
font-size: 24px;
font-weight: 400;
.left_tit {
font-size: 20px;
font-weight: 500;
line-height: 34px;
color: #535353;
margin-left: 10px;
color: #333333;
margin-top: -13px;
}
&.is-active {
background-color: var(--main-color);
.icon {
display: none;
}
.active-icon {
display: block;
}
p {
color: #fff;
}
.left_desc {
width: 260px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #666666;
margin-top: 20px;
}
}
.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;
}
}
}
}
.item_img {
width: 240px;
height: 150px;
padding: 62px 0 0 24px;
}
}
.con_list:nth-child(3),
.con_list:nth-child(4) {
margin-top: 35px;
}
}
}
</style>
src/modules/home/components/Teacher.vue
浏览文件 @ 5af3c05b
......@@ -83,10 +83,10 @@ function next(swiper) {
<template>
<section class="section" id="teacher">
<div class="section__inner">
<div class="section-title">
<em class="section-title_dot"></em>
<h2>师资团队</h2>
<em class="section-title_dot"></em>
<div class="con_tit">
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon1" />
<div class="tit_txt">师资团队</div>
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon.png" class="tit_icon icon2" />
</div>
<h3 class="subtitle">清华大学知名教授、博士生导师</h3>
<div class="my-swiper">
......@@ -96,7 +96,8 @@ function next(swiper) {
:slidesPerView="4"
:spaceBetween="20"
:modules="[Navigation]"
@swiper="swiper => (swiper1 = swiper)">
@swiper="swiper => (swiper1 = swiper)"
>
<SwiperSlide v-for="(item, index) in list" :key="index" class="teacher-item">
<img :src="item.avatar" />
<h3>{{ item.name }}</h3>
......@@ -116,9 +117,10 @@ function next(swiper) {
:slidesPerView="4"
:spaceBetween="20"
:modules="[Navigation]"
@swiper="swiper => (swiper2 = swiper)">
<SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item">
<img :src="item.avatar" />
@swiper="swiper => (swiper2 = swiper)"
>
<SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item1">
<!-- <img :src="item.avatar" /> -->
<h3>{{ item.name }}</h3>
<ol v-if="item.children?.length">
<li v-for="item in item.children" :key="item">{{ item }}</li>
......@@ -137,7 +139,8 @@ function next(swiper) {
--section-title-color: #fff;
--section-title-dot-bgcolor: #fff;
--section-title-dot-border-color: #fff;
background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg') no-repeat center top;
background: url('https://webapp-pub.ezijing.com/project_online/fi/teacher_bg.jpg') no-repeat center;
background-size: 100% 100%;
}
.section-title {
padding-bottom: 0;
......@@ -148,6 +151,29 @@ function next(swiper) {
min-height: 1080px;
margin: 0 auto;
}
.con_tit {
display: flex;
justify-content: center;
padding-top: 84px;
.tit_icon {
width: 40px;
height: 13px;
}
.icon1 {
padding-top: 5px;
margin-right: -7px;
}
.icon2 {
padding-top: 20px;
margin-left: -7px;
}
.tit_txt {
font-size: 28px;
font-weight: 400;
line-height: 34px;
color: #ffffff;
}
}
.subtitle {
margin: 60px 0 30px;
font-size: 24px;
......@@ -216,4 +242,45 @@ function next(swiper) {
margin-top: 10px;
}
}
.teacher-item1 {
width: 267px;
height: 208px;
background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 32px;
box-sizing: border-box;
h3 {
// margin-top: 12px;
font-size: 18px;
font-weight: 500;
line-height: 1;
color: #333;
text-align: center;
}
ol {
margin-top: 29px;
li {
position: relative;
margin: 0 29px;
font-size: 16px;
line-height: 24px;
color: #535353;
&::before {
content: '';
position: absolute;
left: -10px;
top: 9px;
width: 5px;
height: 5px;
background: #c1ab85;
}
}
}
li + li {
margin-top: 11px;
}
}
</style>
src/modules/home/views/Index.vue
浏览文件 @ 5af3c05b
......@@ -2,15 +2,21 @@
import Banner from '../components/Banner.vue'
import Main from '../components/Main.vue'
import ProjectSystem from '../components/ProjectSystem.vue'
import Teacher from '../components/Teacher.vue'
import Knowledge from '../components/Knowledge.vue'
import Course from '../components/Course.vue'
import Brand from '../components/Brand.vue'
import Contact from '../components/Contact.vue'
import ExamProcess from '../components/ExamProcess.vue'
import Teacher from '../components/Teacher.vue'
// import Knowledge from '../components/Knowledge.vue'
// import Brand from '../components/Brand.vue'
// import Contact from '../components/Contact.vue'
</script>
<template>
<Banner></Banner>
<Main></Main>
<ProjectSystem></ProjectSystem>
<Course></Course>
<ExamProcess></ExamProcess>
<Teacher></Teacher>
</template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论