提交 c28ccf6b authored 作者: matian's avatar matian

项目优化

上级 6d89d5da
......@@ -6,17 +6,70 @@
<router-link to="/" class="app-footer-logo">
<img src="@/assets/images/logo_white.png" />
</router-link>
<p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p>
<!-- <p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p> -->
</div>
<div class="app-footer-left__bottom">
<div>
<div class="tit">友情链接</div>
<div class="con">
<a href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html" target="_blank">
<div class="con_link">中国银行保险监督管理委员会</div>
</a>
<a href="http://www.moe.gov.cn/" target="_blank">
<div class="con_link">中国教育部</div>
</a>
<a href="https://www.pbcsf.tsinghua.edu.cn/" target="_blank">
<div class="con_link">清华大学五道口金融学院</div>
</a>
<a href="https://www.ezijing.com/" target="_blank">
<div class="con_link">紫荆教育</div>
</a>
<a href="https://paa.ezijing.com/" target="_blank">
<div class="con_link">紫荆金保</div>
</a>
</div>
</div>
<div>
<div class="tit">项目产品</div>
<div class="con">
<a href="https://prp.ezijing.com/" target="_blank">
<div class="con_link">PRP私人财务风险管理顾问</div>
</a>
<a href="https://paa.ezijing.com/" target="_blank">
<div class="con_link">PAA私人资产分析师</div>
</a>
</div>
</div>
<div>
<div class="tit">联系我们</div>
<div class="con">
<dl>
<dt>地址</dt>
<dd>
北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层<br />&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
</dd>
</dl>
<dl>
<dt>邮箱</dt>
<dd><a href="mailto:THHZJFI@ezijing.com" class="mail">THHZJFI@ezijing.com</a></dd>
</dl>
<!-- <div class="con_link">
地 址:北京市海淀区中关村东路1号院清华科技园7号楼5层
<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
</div>
<div class="con_link">邮箱:THHZJFI@ezijing.com</div> -->
</div>
</div>
</div>
<!-- pc -->
<div class="app-footer-link app-footer-link-pc">
<!-- <div class="app-footer-link app-footer-link-pc">
<ul class="app-footer-link-item">
<li>清控紫荆金融保险学院</li>
<li>清控紫荆金融保险研究院</li>
</ul>
</div> -->
</div>
</div>
<div class="app-footer-contact">
<!-- <div class="app-footer-contact">
<h2>联系我们</h2>
<dl>
<dt>地址</dt>
......@@ -26,7 +79,7 @@
<dt>邮箱</dt>
<dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd>
</dl>
</div>
</div> -->
<div class="app-footer-qrcode">
<img src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" width="120" />
<div class="app-footer-qrcode-content">
......@@ -90,6 +143,46 @@
}
}
}
.app-footer-left__bottom {
display: flex;
justify-content: space-between;
.tit {
font-size: 16px;
color: #ffffff;
font-weight: 500;
}
.con {
margin-top: 20px;
.con_link {
font-size: 14px;
line-height: 32px;
color: #ffffff;
font-weight: 300;
}
dl {
display: flex;
line-height: 30px;
font-size: 14px;
line-height: 32px;
color: #ffffff;
font-weight: 300;
}
dt {
width: 60px;
text-align-last: justify;
white-space: nowrap;
font-size: 14px;
line-height: 32px;
color: #ffffff;
font-weight: 300;
}
dd {
&::before {
content: ':';
}
}
}
}
.app-footer-link {
display: flex;
}
......@@ -124,7 +217,8 @@
}
}
.app-footer-qrcode {
margin-left: 10px;
margin-left: 99px;
margin-top: 72px;
}
.app-footer-qrcode-content {
display: flex;
......
......@@ -22,6 +22,7 @@
<style lang="scss">
.banner {
width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg') no-repeat center;
background-size: 100% 100%;
height: 700px;
......
......@@ -24,18 +24,26 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
<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" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon_1.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" />
<img src="https://webapp-pub.ezijing.com/project_online/paa/course_tit_icon_1.png" class="tit_icon icon2" />
</div>
<el-tabs class="my-tabs">
<el-tab-pane>
<template #label>
<div class="tab_con con1">
<div class="con_cn">私人资产分析规划师</div>
<div class="con_en">Private Assets Analysis Planner</div>
<div class="h"></div>
<!-- <div class="con_cn">私人资产分析规划师</div>
<div class="con_en">Private Assets Analysis Planner</div> -->
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/tab1_active.png"
class="con_img"
/>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/tab1.png"
class="con_img_active"
/>
</div>
<div class="h"></div>
</template>
<div class="con_content">
<div class="content_desc">
......@@ -58,10 +66,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
<el-tab-pane>
<template #label>
<div class="tab_con con2">
<div class="con_cn">高级私人资产分析管理师</div>
<div class="con_en">Senior Private Asset Analysis Manager</div>
<div class="h"></div>
<!-- <div class="con_cn">高级私人资产分析管理师</div>
<div class="con_en">Senior Private Asset Analysis Manager</div> -->
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/tab2_active.png"
class="con_img"
/>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/paa/tab2.png"
class="con_img_active"
/>
</div>
<div class="h"></div>
</template>
<div class="con_content">
<div class="content_desc">
......@@ -77,7 +93,9 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
</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">
......@@ -94,18 +112,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.main {
width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/course_bg.png') no-repeat center;
background-size: 100% 100%;
// background: url('https://webapp-pub.ezijing.com/project_online/paa/course_bg.png') no-repeat center;
// background-size: 100% 100%;
background: #f5f5f5;
.main_con {
width: 1200px;
margin: auto;
padding: 71px 0 126px 0;
padding: 71px 0 87px 0;
box-sizing: border-box;
.con_tit {
display: flex;
......@@ -126,101 +144,15 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
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;
cursor: pointer;
.con_cn {
font-size: 22px;
font-weight: bold;
line-height: 34px;
color: #333;
}
.con_en {
font-size: 18px;
font-weight: 400;
line-height: 34px;
letter-spacing: 2px;
color: #666;
}
.h {
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: #c1ab85;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
&.is-active {
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%);
}
color: #393939;
}
}
// .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;
padding: 51px 75px 39px 75px;
.content_desc {
font-size: 16px;
font-weight: 400;
......@@ -230,14 +162,23 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
.con_list2 {
display: flex;
justify-content: center;
margin-top: 31px;
.item_desc,
.item_img {
margin-top: 0;
}
}
.con_list1 {
display: flex;
justify-content: space-between;
.item_desc {
margin-top: 14px;
}
.item_img {
margin-top: 26px;
}
}
.con_list {
margin-top: 35px;
.list_item {
ul {
padding-left: 20px;
......@@ -259,18 +200,21 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
font-weight: 400;
line-height: 30px;
color: #535353;
margin-top: 14px;
}
.item_img {
margin-top: 26px;
}
}
}
}
}
.main1 {
width: 1200px;
margin: auto;
padding: 70px 0 78px 0;
.con_education {
box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.16);
background: #ffffff;
border-radius: 6px;
margin-top: 40px;
padding: 69px 75px 74px 73px;
.education_tit {
font-size: 22px;
......@@ -306,7 +250,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
}
}
}
}
}
:deep(.my-tabs) {
.el-tabs__active-bar,
......@@ -318,7 +261,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
margin-top: 62px;
display: flex;
border-radius: 6px;
background: #ffffff;
}
.el-tabs__content {
overflow: inherit;
......@@ -333,9 +275,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
border-radius: 6px 0 0 6px;
}
#tab-1 {
border-radius: 0;
}
#tab-2 {
border-radius: 0 6px 6px 0;
}
.el-tabs__item {
......@@ -343,11 +282,19 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
align-items: center;
justify-content: center;
width: 600px;
height: 100%;
height: 90%;
border-radius: 6px;
padding: 0;
border-bottom: none;
background: #ffffff;
.tab_con {
.con_img {
display: block;
}
.con_img_active {
display: none;
}
.con_cn {
font-size: 22px;
font-weight: bold;
......@@ -361,9 +308,17 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
letter-spacing: 2px;
color: #666;
}
}
&.is-active {
background: #c1ab85;
position: relative;
.con_img {
display: none;
}
.con_img_active {
display: block;
}
.con_cn {
color: #ffffff;
}
......
......@@ -16,11 +16,10 @@
<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;
padding: 70px 0 71px 0;
margin: auto;
text-align: center;
.con_tit {
......@@ -46,7 +45,7 @@
}
}
.con_img {
margin-top: 83px;
margin-top: 50px;
}
}
}
......
......@@ -155,7 +155,6 @@ function next(swiper) {
@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>
......@@ -171,10 +170,11 @@ function next(swiper) {
<style lang="scss" scoped>
.section {
width: 100%;
--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;
background: url('https://webapp-pub.ezijing.com/project_online/paa/teacher_bg.jpg') no-repeat center;
background-size: 100% 100%;
}
.section-title {
......@@ -182,14 +182,15 @@ function next(swiper) {
}
.section__inner {
position: relative;
max-width: 1200px;
min-height: 1080px;
max-width: 1180px;
min-height: 906px;
margin: 0 auto;
box-sizing: border-box;
}
.con_tit {
display: flex;
justify-content: center;
padding-top: 84px;
padding-top: 70px;
.tit_icon {
width: 40px;
height: 13px;
......@@ -210,10 +211,9 @@ function next(swiper) {
}
}
.subtitle {
margin: 60px 0 30px;
margin: 50px 0 30px;
font-size: 24px;
font-weight: 500;
line-height: 34px;
color: #ffffff;
text-align: center;
}
......@@ -221,8 +221,6 @@ function next(swiper) {
--swiper-navigation-size: 34px;
--swiper-navigation-color: #fff;
position: relative;
margin-top: 20px;
margin-bottom: 60px;
:deep(.swiper-button-prev) {
left: -40px;
......
......@@ -15,9 +15,9 @@ import Teacher from '../components/Teacher.vue'
<Banner></Banner>
<Main></Main>
<ProjectSystem></ProjectSystem>
<Teacher></Teacher>
<Course></Course>
<ExamProcess></ExamProcess>
<Teacher></Teacher>
</template>
<style lang="scss">
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论