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 @@ ...@@ -43,7 +43,8 @@
<a <a
target="_blank" target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681" 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" /> <img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
京公网安备 11010802023681号 京公网安备 11010802023681号
</a> </a>
...@@ -79,14 +80,13 @@ ...@@ -79,14 +80,13 @@
.app-footer-left__top { .app-footer-left__top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-bottom: 30px; margin-bottom: 30px;
p { p {
a { a {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #fff; 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 }> = [ ...@@ -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' 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> </script>
<template> <template>
...@@ -21,34 +28,56 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -21,34 +28,56 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
<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.png" class="tit_icon icon2" />
</div> </div>
<div class="con_tab"> <el-tabs class="my-tabs">
<div class="tab_con con1"> <el-tab-pane>
<div class="con_cn">私人资产分析规划师</div> <template #label>
<div class="con_en">Private Assets Analysis Planner</div> <div class="tab_con con1">
<div class="h"></div> <div class="con_cn">私人资产分析规划师</div>
</div> <div class="con_en">Private Assets Analysis Planner</div>
<div class="tab_con con2"> <div class="h"></div>
<div class="con_cn">高级私人资产分析管理师</div> </div>
<div class="con_en">Senior Private Asset Analysis Manager</div> </template>
</div> <div class="con_content">
</div> <div class="content_desc">
<div class="con_content"> 私人资产分析规划师（Private Assets Analysis
<div class="content_desc"> Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。
私人资产分析规划师（Private Assets Analysis </div>
Planner，简称PAAP）认证系列，目前包括私人资产分析规划师（一级）/PAAP（Ⅰ）和私人资产分析规划师（二级）/PAAP（Ⅱ）。 <div class="con_list con_list1">
</div> <div class="list_item" v-for="(item, index) in courseList" :key="index">
<div class="con_list"> <ul>
<div class="list_item" v-for="(item, index) in courseList" :key="index"> <li>
<ul> <p>{{ item.tit }}</p>
<li> </li>
<p>{{ item.tit }}</p> </ul>
</li> <div class="item_desc">{{ item.desc }}</div>
</ul> <img :src="item.img" class="item_img" />
<div class="item_desc">{{ item.desc }}</div> </div>
<img :src="item.img" class="item_img" /> </div>
</div> </div>
</div> </el-tab-pane>
</div> <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="con_education">
<div class="education_tit">PAA持续教育</div> <div class="education_tit">PAA持续教育</div>
<div class="education_desc"> <div class="education_desc">
...@@ -113,26 +142,19 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -113,26 +142,19 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
cursor: pointer;
.con_cn { .con_cn {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
line-height: 34px; line-height: 34px;
color: #333;
} }
.con_en { .con_en {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 34px; line-height: 34px;
letter-spacing: 2px; letter-spacing: 2px;
} color: #666;
}
.con1 {
background: #c1ab85;
position: relative;
.con_cn {
color: #ffffff;
}
.con_en {
color: #ffffff;
} }
.h { .h {
width: 0px; width: 0px;
...@@ -144,15 +166,55 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -144,15 +166,55 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
} &.is-active {
.con2 { background: #c1ab85;
.con_cn { position: relative;
color: #333333; .con_cn {
} color: #ffffff;
.con_en { }
color: #666666; .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;
...@@ -165,10 +227,17 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -165,10 +227,17 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [
line-height: 30px; line-height: 30px;
color: #333333; color: #333333;
} }
.con_list { .con_list2 {
margin-top: 35px; display: flex;
justify-content: center;
}
.con_list1 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.con_list {
margin-top: 35px;
.list_item { .list_item {
ul { ul {
padding-left: 20px; padding-left: 20px;
...@@ -239,4 +308,134 @@ const courseList: Array<{ tit: string; desc: string; img: string }> = [ ...@@ -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> </style>
src/modules/home/components/Main.vue
浏览文件 @ fc7cfc99
...@@ -100,8 +100,8 @@ const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }> ...@@ -100,8 +100,8 @@ const mainList1: Array<{ img: string; img1: string; tit: string; desc: string }>
} }
.main_con1 { .main_con1 {
width: 1200px; width: 1200px;
margin: 144px auto; margin: auto;
padding: 0 50px; padding: 144px 10px 50px 0;
box-sizing: border-box; box-sizing: border-box;
.con1_list { .con1_list {
display: grid; display: grid;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论