Skip to content

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

页面修改

上级 0e52cedc
隐藏空白字符变更
内嵌 并排
正在显示 包含 250 行增加 和 51 行删除
src/components/layout/Footer.vue
浏览文件 @ fc7cfc99
......@@ -43,7 +43,8 @@
<a
target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
style="margin: 0 60px">
style="margin: 0 60px"
>
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
京公网安备 11010802023681号
</a>
......@@ -79,14 +80,13 @@
.app-footer-left__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
p {
a {
font-size: 16px;
font-weight: 500;
color: #fff;
margin: 0 20px;
margin: 0 18px;
}
}
}
......
src/modules/home/components/Course.vue
浏览文件 @ fc7cfc99
......@@ -11,6 +11,13 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set2.png'
}
]
const courseList1: Array<{ tit: string; desc: string; img: string }> = [
{
tit: '',
desc: '',
img: 'https://webapp-pub.ezijing.com/project_online/paa/course_set3.png'
}
]
</script>
<template>
......@@ -21,34 +28,56 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
<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" />
<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>
</template>
<div class="con_content">
<div class="content_desc">
私人资产分析规划师（Private Assets Analysis
Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。
</div>
<div class="con_list con_list1">
<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>
</div>
</el-tab-pane>
<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>
</template>
<div class="con_content">
<div class="content_desc">
高级私人资产分析管理师（Senior Private Asset Analysis
Manager，简称PAAM）系统，即通过学习资产配置管理的通识课程，运用私人资产分析的多维模型系统解读和规划，构建私人权属资产管理体系，对不良资产进行处置，对权属资产进行最优化配置，实现私人资产全面增值。
</div>
<div class="con_list con_list2">
<div class="list_item" v-for="(item, index) in courseList1" :key="index">
<div class="item_desc">{{ item.desc }}</div>
<img :src="item.img" class="item_img" />
</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="con_education">
<div class="education_tit">PAA持续教育</div>
<div class="education_desc">
......@@ -113,26 +142,19 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
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;
}
}
.con1 {
background: #c1ab85;
position: relative;
.con_cn {
color: #ffffff;
}
.con_en {
color: #ffffff;
color: #666;
}
.h {
width: 0px;
......@@ -144,15 +166,55 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
left: 50%;
transform: translateX(-50%);
}
}
.con2 {
.con_cn {
color: #333333;
}
.con_en {
color: #666666;
&.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 {
background: #ffffff;
......@@ -165,10 +227,17 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
line-height: 30px;
color: #333333;
}
.con_list {
margin-top: 35px;
.con_list2 {
display: flex;
justify-content: center;
}
.con_list1 {
display: flex;
justify-content: space-between;
}
.con_list {
margin-top: 35px;
.list_item {
ul {
padding-left: 20px;
......@@ -239,4 +308,134 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
}
}
}
:deep(.my-tabs) {
.el-tabs__active-bar,
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__nav {
height: 118px;
margin-top: 62px;
display: flex;
border-radius: 6px;
background: #ffffff;
}
.el-tabs__content {
overflow: inherit;
}
.el-tabs__nav-scroll {
display: flex;
align-items: center;
justify-content: center;
}
#tab-0 {
border-radius: 6px 0 0 6px;
}
#tab-1 {
border-radius: 0;
}
#tab-2 {
border-radius: 0 6px 6px 0;
}
.el-tabs__item {
display: flex;
align-items: center;
justify-content: center;
width: 600px;
height: 100%;
border-radius: 6px;
padding: 0;
border-bottom: none;
.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;
}
&.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%);
}
}
}
.content_tit {
margin-top: 40px;
font-size: 20px;
font-weight: 400;
line-height: 32px;
color: #333333;
text-align: center;
}
.content_main {
margin-top: 29px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
.main_list {
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
padding: 21px 16px 16px 16px;
.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;
white-space: nowrap;
}
ul {
margin-top: 23px;
color: #c1ab85;
padding-left: 20px;
.list_desc {
list-style-type: square;
.desc_tit {
font-size: 16px;
font-weight: 500;
line-height: 34px;
color: #333333;
}
.desc_con {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #666666;
}
}
}
}
}
}
</style>
src/modules/home/components/Main.vue
浏览文件 @ fc7cfc99
......@@ -100,8 +100,8 @@ const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }>
}
.main_con1 {
width: 1200px;
margin: 144px auto;
padding: 0 50px;
margin: auto;
padding: 144px 10px 50px 0;
box-sizing: border-box;
.con1_list {
display: grid;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论