Skip to content

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

项目优化

上级 6d89d5da
显示空白字符变更
内嵌 并排
正在显示 包含 180 行增加 和 133 行删除
src/components/layout/Footer.vue
浏览文件 @ c28ccf6b
...@@ -6,17 +6,70 @@ ...@@ -6,17 +6,70 @@
<router-link to="/" class="app-footer-logo"> <router-link to="/" class="app-footer-logo">
<img src="@/assets/images/logo_white.png" /> <img src="@/assets/images/logo_white.png" />
</router-link> </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> </div>
<!-- pc --> <!-- 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"> <ul class="app-footer-link-item">
<li>清控紫荆金融保险学院</li> <li>清控紫荆金融保险学院</li>
<li>清控紫荆金融保险研究院</li> <li>清控紫荆金融保险研究院</li>
</ul> </ul>
</div> -->
</div> </div>
</div> <!-- <div class="app-footer-contact">
<div class="app-footer-contact">
<h2>联系我们</h2> <h2>联系我们</h2>
<dl> <dl>
<dt>地址</dt> <dt>地址</dt>
...@@ -26,7 +79,7 @@ ...@@ -26,7 +79,7 @@
<dt>邮箱</dt> <dt>邮箱</dt>
<dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd> <dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd>
</dl> </dl>
</div> </div> -->
<div class="app-footer-qrcode"> <div class="app-footer-qrcode">
<img src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" width="120" /> <img src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" width="120" />
<div class="app-footer-qrcode-content"> <div class="app-footer-qrcode-content">
...@@ -90,6 +143,46 @@ ...@@ -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 { .app-footer-link {
display: flex; display: flex;
} }
...@@ -124,7 +217,8 @@ ...@@ -124,7 +217,8 @@
} }
} }
.app-footer-qrcode { .app-footer-qrcode {
margin-left: 10px; margin-left: 99px;
margin-top: 72px;
} }
.app-footer-qrcode-content { .app-footer-qrcode-content {
display: flex; display: flex;
......
src/modules/home/components/Banner.vue
浏览文件 @ c28ccf6b
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<style lang="scss"> <style lang="scss">
.banner { .banner {
width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg') no-repeat center; background: url('https://webapp-pub.ezijing.com/project_online/paa/banner.jpg') no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
height: 700px; height: 700px;
......
src/modules/home/components/Course.vue
浏览文件 @ c28ccf6b
...@@ -24,18 +24,26 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -24,18 +24,26 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
<div class="main"> <div class="main">
<div class="main_con" id="product"> <div class="main_con" id="product">
<div class="con_tit"> <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> <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> </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">
<div class="con_cn">私人资产分析规划师</div> <!-- <div class="con_cn">私人资产分析规划师</div>
<div class="con_en">Private Assets Analysis Planner</div> <div class="con_en">Private Assets Analysis Planner</div> -->
<div class="h"></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>
<div class="h"></div>
</template> </template>
<div class="con_content"> <div class="con_content">
<div class="content_desc"> <div class="content_desc">
...@@ -58,10 +66,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -58,10 +66,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
<el-tab-pane> <el-tab-pane>
<template #label> <template #label>
<div class="tab_con con2"> <div class="tab_con con2">
<div class="con_cn">高级私人资产分析管理师</div> <!-- <div class="con_cn">高级私人资产分析管理师</div>
<div class="con_en">Senior Private Asset Analysis Manager</div> <div class="con_en">Senior Private Asset Analysis Manager</div> -->
<div class="h"></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>
<div class="h"></div>
</template> </template>
<div class="con_content"> <div class="con_content">
<div class="content_desc"> <div class="content_desc">
...@@ -77,7 +93,9 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -77,7 +93,9 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div>
</div>
<div class="main1">
<div class="con_education"> <div class="con_education">
<div class="education_tit">PAA持续教育</div> <div class="education_tit">PAA持续教育</div>
<div class="education_desc"> <div class="education_desc">
...@@ -94,18 +112,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -94,18 +112,18 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
width: 100%; width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/course_bg.png') no-repeat center; // background: url('https://webapp-pub.ezijing.com/project_online/paa/course_bg.png') no-repeat center;
background-size: 100% 100%; // background-size: 100% 100%;
background: #f5f5f5;
.main_con { .main_con {
width: 1200px; width: 1200px;
margin: auto; margin: auto;
padding: 71px 0 126px 0; padding: 71px 0 87px 0;
box-sizing: border-box; box-sizing: border-box;
.con_tit { .con_tit {
display: flex; display: flex;
...@@ -126,101 +144,15 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -126,101 +144,15 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
line-height: 34px; line-height: 34px;
color: #ffffff; color: #393939;
}
}
.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%);
}
} }
} }
// .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 { .con_content {
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
margin-top: 34px; margin-top: 34px;
padding: 85px 75px; padding: 51px 75px 39px 75px;
.content_desc { .content_desc {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -230,14 +162,23 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -230,14 +162,23 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
.con_list2 { .con_list2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 31px;
.item_desc,
.item_img {
margin-top: 0;
}
} }
.con_list1 { .con_list1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.item_desc {
margin-top: 14px;
}
.item_img {
margin-top: 26px;
}
} }
.con_list { .con_list {
margin-top: 35px;
.list_item { .list_item {
ul { ul {
padding-left: 20px; padding-left: 20px;
...@@ -259,18 +200,21 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -259,18 +200,21 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
color: #535353; color: #535353;
margin-top: 14px;
} }
.item_img {
margin-top: 26px;
} }
} }
} }
} }
}
.main1 {
width: 1200px;
margin: auto;
padding: 70px 0 78px 0;
.con_education { .con_education {
box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.16);
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
margin-top: 40px;
padding: 69px 75px 74px 73px; padding: 69px 75px 74px 73px;
.education_tit { .education_tit {
font-size: 22px; font-size: 22px;
...@@ -306,7 +250,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -306,7 +250,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
} }
} }
} }
}
} }
:deep(.my-tabs) { :deep(.my-tabs) {
.el-tabs__active-bar, .el-tabs__active-bar,
...@@ -318,7 +261,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -318,7 +261,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
margin-top: 62px; margin-top: 62px;
display: flex; display: flex;
border-radius: 6px; border-radius: 6px;
background: #ffffff;
} }
.el-tabs__content { .el-tabs__content {
overflow: inherit; overflow: inherit;
...@@ -333,9 +275,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -333,9 +275,6 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} }
#tab-1 { #tab-1 {
border-radius: 0;
}
#tab-2 {
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
} }
.el-tabs__item { .el-tabs__item {
...@@ -343,11 +282,19 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -343,11 +282,19 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 600px; width: 600px;
height: 100%; height: 90%;
border-radius: 6px; border-radius: 6px;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
background: #ffffff;
.tab_con {
.con_img {
display: block;
}
.con_img_active {
display: none;
}
.con_cn { .con_cn {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
...@@ -361,9 +308,17 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -361,9 +308,17 @@ const courseList1: Array<{ tit: string; desc: string; img: string }> = [
letter-spacing: 2px; letter-spacing: 2px;
color: #666; color: #666;
} }
}
&.is-active { &.is-active {
background: #c1ab85; background: #c1ab85;
position: relative; position: relative;
.con_img {
display: none;
}
.con_img_active {
display: block;
}
.con_cn { .con_cn {
color: #ffffff; color: #ffffff;
} }
......
src/modules/home/components/ExamProcess.vue
浏览文件 @ c28ccf6b
...@@ -16,11 +16,10 @@ ...@@ -16,11 +16,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
width: 100%; width: 100%;
background: url('https://webapp-pub.ezijing.com/project_online/paa/exam_bg.png') no-repeat center / 100% 100%; background: url('https://webapp-pub.ezijing.com/project_online/paa/exam_bg.png') no-repeat center / 100% 100%;
box-sizing: border-box; box-sizing: border-box;
.main_con { .main_con {
padding: 84px 0 127px 0; padding: 70px 0 71px 0;
margin: auto; margin: auto;
text-align: center; text-align: center;
.con_tit { .con_tit {
...@@ -46,7 +45,7 @@ ...@@ -46,7 +45,7 @@
} }
} }
.con_img { .con_img {
margin-top: 83px; margin-top: 50px;
} }
} }
} }
......
src/modules/home/components/Teacher.vue
浏览文件 @ c28ccf6b
...@@ -155,7 +155,6 @@ function next(swiper) { ...@@ -155,7 +155,6 @@ function next(swiper) {
@swiper="swiper => (swiper2 = swiper)" @swiper="swiper => (swiper2 = swiper)"
> >
<SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item1"> <SwiperSlide v-for="(item, index) in list2" :key="index" class="teacher-item1">
<!-- <img :src="item.avatar" /> -->
<h3>{{ item.name }}</h3> <h3>{{ item.name }}</h3>
<ol v-if="item.children?.length"> <ol v-if="item.children?.length">
<li v-for="item in item.children" :key="item">{{ item }}</li> <li v-for="item in item.children" :key="item">{{ item }}</li>
...@@ -171,10 +170,11 @@ function next(swiper) { ...@@ -171,10 +170,11 @@ function next(swiper) {
<style lang="scss" scoped> <style lang="scss" scoped>
.section { .section {
width: 100%;
--section-title-color: #fff; --section-title-color: #fff;
--section-title-dot-bgcolor: #fff; --section-title-dot-bgcolor: #fff;
--section-title-dot-border-color: #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%; background-size: 100% 100%;
} }
.section-title { .section-title {
...@@ -182,14 +182,15 @@ function next(swiper) { ...@@ -182,14 +182,15 @@ function next(swiper) {
} }
.section__inner { .section__inner {
position: relative; position: relative;
max-width: 1200px; max-width: 1180px;
min-height: 1080px; min-height: 906px;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box;
} }
.con_tit { .con_tit {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 84px; padding-top: 70px;
.tit_icon { .tit_icon {
width: 40px; width: 40px;
height: 13px; height: 13px;
...@@ -210,10 +211,9 @@ function next(swiper) { ...@@ -210,10 +211,9 @@ function next(swiper) {
} }
} }
.subtitle { .subtitle {
margin: 60px 0 30px; margin: 50px 0 30px;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
line-height: 34px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
} }
...@@ -221,8 +221,6 @@ function next(swiper) { ...@@ -221,8 +221,6 @@ function next(swiper) {
--swiper-navigation-size: 34px; --swiper-navigation-size: 34px;
--swiper-navigation-color: #fff; --swiper-navigation-color: #fff;
position: relative; position: relative;
margin-top: 20px;
margin-bottom: 60px;
:deep(.swiper-button-prev) { :deep(.swiper-button-prev) {
left: -40px; left: -40px;
......
src/modules/home/views/Index.vue
浏览文件 @ c28ccf6b
...@@ -15,9 +15,9 @@ import Teacher from '../components/Teacher.vue' ...@@ -15,9 +15,9 @@ import Teacher from '../components/Teacher.vue'
<Banner></Banner> <Banner></Banner>
<Main></Main> <Main></Main>
<ProjectSystem></ProjectSystem> <ProjectSystem></ProjectSystem>
<Teacher></Teacher>
<Course></Course> <Course></Course>
<ExamProcess></ExamProcess> <ExamProcess></ExamProcess>
<Teacher></Teacher>
</template> </template>
<style lang="scss"> <style lang="scss">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论