Skip to content

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

项目优化

上级 6c25d61d
显示空白字符变更
内嵌 并排
正在显示 包含 112 行增加 和 116 行删除
src/assets/css/base.css
浏览文件 @ 81cd1985
...@@ -79,6 +79,10 @@ body { ...@@ -79,6 +79,10 @@ body {
min-width: 375px; min-width: 375px;
font-size: 14px; font-size: 14px;
background-color: #fff; background-color: #fff;
font-family: 'Source Han Sans CN', 'PingFang SC', -apple-system, 'Microsoft YaHei', 'Helvetica', 'Arial', Verdana,
'Hiragino Sans GB', 'Wenquanyi Micro Hei', sans-serif;
padding: 0;
margin: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
......
src/modules/home/components/Banner.vue
浏览文件 @ 81cd1985
...@@ -17,7 +17,6 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp ...@@ -17,7 +17,6 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp
.banner { .banner {
img { img {
width: 100%; width: 100%;
height: 700px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
......
src/modules/home/components/Brand.vue
浏览文件 @ 81cd1985
...@@ -10,9 +10,13 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png ...@@ -10,9 +10,13 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
<template> <template>
<section class="section"> <section class="section">
<div class="section-title"> <div class="section-title">
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
<h2>合作机构</h2> <h2>合作机构</h2>
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
</div> </div>
<Swiper autoplay navigation loop :modules="[Navigation]" class="swiper"> <Swiper autoplay navigation loop :modules="[Navigation]" class="swiper">
<SwiperSlide v-for="(item, index) in list" :key="index"> <SwiperSlide v-for="(item, index) in list" :key="index">
...@@ -26,13 +30,17 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png ...@@ -26,13 +30,17 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/brand.png
.section { .section {
position: relative; position: relative;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; height: 497px;
margin-top: 60px; margin: 60px auto;
margin-bottom: -45px;
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.22);
overflow: hidden; overflow: hidden;
.section-title {
h2 {
margin: 0 10px;
}
}
} }
.swiper { .swiper {
--swiper-navigation-size: 34px; --swiper-navigation-size: 34px;
......
src/modules/home/components/Contact.vue
浏览文件 @ 81cd1985
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="main" id="contact"> <div class="main" id="contact">
<div class="con_tit"> <div class="con_tit">
<div class="tit_img"> <div class="tit_img">
<div class="img_box"></div> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div> </div>
<div class="tit_text">联系我们</div> <div class="tit_text">联系我们</div>
<div class="tit_img"> <div class="tit_img">
<div class="img_box"></div> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div> </div>
</div> </div>
<div class="con_part"> <div class="con_part">
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.main { .main {
margin-top: 71px;
width: 100%; width: 100%;
height: 310px; height: 310px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/contact.png') no-repeat center; background: url('https://webapp-pub.ezijing.com/project_online/fi/contact.png') no-repeat center;
...@@ -36,38 +37,26 @@ ...@@ -36,38 +37,26 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-top: 81px; padding-top: 50px;
.tit_img {
width: 16px;
height: 16px;
border: 1px dotted #ffffff;
display: flex;
justify-content: center;
align-items: center;
.img_box {
width: 6px;
height: 6px;
background: #ffffff;
}
}
.tit_text { .tit_text {
font-size: 32px; font-size: 32px;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #ffffff;
color: #333333;
margin: 0 14px 0 8px; margin: 0 14px 0 8px;
} }
} }
.con_part { .con_part {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 67px; margin-top: 73px;
.txt { .txt {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 40px;
color: #ffffff; color: #333333;
} }
.part2_txt { .part2_txt {
margin-left: 88px; margin-left: 88px;
......
src/modules/home/components/Course.vue
浏览文件 @ 81cd1985
<script setup> <script setup>
const list = [ const list = [
{ {
title: '案例解决方案', img: 'https://webapp-pub.ezijing.com/project_online/fi/course1.png',
desc: '某某某某某某某某某某某某某某某莫某某某某…', content: '教学与教务服务<br/>技术平台支持'
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》'
}, },
{ {
title: '案例解决方案', img: 'https://webapp-pub.ezijing.com/project_online/fi/course2.png',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》' content: '内部核心人才金融素养培育<br/>全套长期的解决服务方案'
}, },
{ {
title: '案例解决方案', img: 'https://webapp-pub.ezijing.com/project_online/fi/course3.png',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》' content: '提供业务人才培养性方案<br/>提供管理人才突破性培育'
}, },
{ {
title: '案例解决方案', img: 'https://webapp-pub.ezijing.com/project_online/fi/course4.png',
desc: '某某某某某某某某某某某某某某某莫某某某某…',
content: '《企业风险管理》<br/>《企业风险管理》<br/>公司金融顾问与销售<br/>《企业风险管理》' content: '教学与教务服务<br/>技术平台支持'
} }
] ]
</script> </script>
...@@ -26,21 +25,24 @@ const list = [ ...@@ -26,21 +25,24 @@ const list = [
<template> <template>
<section class="section"> <section class="section">
<div class="section-title"> <div class="section-title">
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
<h2>定制专属类课程</h2> <h2>定制专属类课程</h2>
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
</div> </div>
<div class="topic"> <div class="topic">
<p> <p>
针对不同人才类型的培养需求，采用“线上+线下”的教学模式，并提供定制化专业服务与个性化的在线学习解决方案，帮助从业者提升工作所需的业务技能，强化综合竞争力。 针对不同人才类型的培养需求，采用“线上+线下”的教学模<br />式，并提供定制化专业服务与个性化的在线学习解决方案，<br />帮助从业者提升工作所需的业务技能，强化综合竞争力。
</p> </p>
</div> </div>
<div class="case-list"> <div class="case-list">
<div class="case-item" v-for="(item, index) in list" :key="index"> <div class="case-item" v-for="(item, index) in list" :key="index">
<h3>{{ item.title }}</h3> <img :src="item.img" alt="" />
<div class="line"></div> <div class="line"></div>
<div class="desc">{{ item.desc }}</div> <div class="inner" v-html="item.content"></div>
<div class="cover"><div class="inner" v-html="item.content"></div></div>
</div> </div>
</div> </div>
<!-- <p class="more">查看更多案例</p> --> <!-- <p class="more">查看更多案例</p> -->
...@@ -52,83 +54,72 @@ const list = [ ...@@ -52,83 +54,72 @@ const list = [
position: relative; position: relative;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
.section-title {
h2 {
margin: 0 10px;
}
}
} }
.topic { .topic {
position: relative;
z-index: 10;
height: 266px; height: 266px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/course_bg.png') no-repeat; background: url('https://webapp-pub.ezijing.com/project_online/fi/course_bg.png') no-repeat;
display: flex;
align-items: center;
justify-content: center;
p { p {
font-size: 24px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 32px;
color: #ffffff; color: #886426;
text-align: center; text-align: left;
margin: 0 40px; padding: 85px 0 65px 80px;
box-sizing: border-box;
} }
} }
.case-list { .case-list {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.case-item { .case-item {
position: relative; width: 300px;
margin-top: -1px;
margin-right: -1px;
height: 240px; height: 240px;
padding: 0 36px; padding: 36px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border: 1px solid #ddd; border: 1px solid #ddd;
h3 { img {
margin-top: 60px; width: 220px;
font-size: 24px; height: 60px;
font-weight: 400;
line-height: 1;
color: #333;
text-align: center;
} }
.line { .line {
width: 78px; width: 78px;
height: 2px; height: 2px;
background: var(--main-color); background: var(--main-color);
margin: 40px auto 28px; margin-top: 25px;
}
.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 { .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; font-size: 18px;
line-height: 38px; font-weight: 400;
color: #ffffff; line-height: 32px;
border: 1px solid #fff; color: #414141;
text-align: center;
margin-top: 24px;
} }
&:hover { &:hover {
.cover { transform: scale(1.05);
display: block; box-shadow: 3px 3px 26px rgba(0, 0, 0, 0.16);
} position: relative;
z-index: 100;
border-right: 1px solid #ffffff !important;
background: #ffffff;
border: none;
} }
} }
.more { .more {
padding: 20px 0; padding: 20px 0;
font-size: 14px; font-size: 14px;
......
src/modules/home/components/Main.vue
浏览文件 @ 81cd1985
...@@ -10,7 +10,7 @@ import 'swiper/css' ...@@ -10,7 +10,7 @@ import 'swiper/css'
</div> </div>
</div> </div>
<div class="main_con1"> <div class="main_con1">
核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“格与质”、“道与术”、“欲与渔”的经营管理品格和能力，主打行业认证类、行业标准类<br />和定制专属类等三类金融职业类培育体系。 核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。
</div> </div>
</div> </div>
</template> </template>
...@@ -23,17 +23,20 @@ import 'swiper/css' ...@@ -23,17 +23,20 @@ import 'swiper/css'
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
img {
height: 511px;
}
.con_content { .con_content {
background: #ffffff; background: #ffffff;
position: relative; position: relative;
margin-left: -143px; margin-left: -511px;
z-index: 100; z-index: 100;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 40px; line-height: 40px;
color: #333333; color: #333333;
padding: 69px 55px 62px 58px; padding: 89px 51px 88px 52px;
} }
} }
.main_con1 { .main_con1 {
...@@ -45,8 +48,12 @@ import 'swiper/css' ...@@ -45,8 +48,12 @@ import 'swiper/css'
line-height: 40px; line-height: 40px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
padding-top: 100px; padding-top: 98px;
box-sizing: border-box; box-sizing: border-box;
span {
font-size: 30px;
font-weight: bold;
}
} }
} }
</style> </style>
src/modules/home/components/ProjectSystem.vue
浏览文件 @ 81cd1985
...@@ -113,11 +113,11 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -113,11 +113,11 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
<div class="main_con" id="product"> <div class="main_con" id="product">
<div class="con_tit"> <div class="con_tit">
<div class="tit_img"> <div class="tit_img">
<div class="img_box"></div> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div> </div>
<div class="tit_text">全系列产品体系</div> <div class="tit_text">全系列产品体系</div>
<div class="tit_img"> <div class="tit_img">
<div class="img_box"></div> <img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div> </div>
</div> </div>
<div class="con_content"> <div class="con_content">
...@@ -201,25 +201,12 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [ ...@@ -201,25 +201,12 @@ const universalList: Array<{ img: string; tit: string; list: any }> = [
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.tit_img {
width: 16px;
height: 16px;
border: 1px dotted #c1ab85;
display: flex;
justify-content: center;
align-items: center;
.img_box {
width: 6px;
height: 6px;
background: #aa1941;
}
}
.tit_text { .tit_text {
font-size: 32px; font-size: 32px;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #333333; color: #333333;
margin: 0 14px 0 8px; margin: 0 10px;
} }
} }
.con_content { .con_content {
......
src/modules/home/components/Teacher.vue
浏览文件 @ 81cd1985
...@@ -119,9 +119,13 @@ function next(swiper) { ...@@ -119,9 +119,13 @@ function next(swiper) {
<section class="section" id="teacher"> <section class="section" id="teacher">
<div class="section__inner"> <div class="section__inner">
<div class="section-title"> <div class="section-title">
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
<h2>师资团队</h2> <h2>师资团队</h2>
<em class="section-title_dot"></em> <div class="tit_img">
<img src="https://webapp-pub.ezijing.com/project_online/fi/tit_icon.png" class="img_box" />
</div>
</div> </div>
<h3 class="subtitle">清华大学知名教授、博士生导师</h3> <h3 class="subtitle">清华大学知名教授、博士生导师</h3>
<div class="my-swiper"> <div class="my-swiper">
...@@ -178,6 +182,13 @@ function next(swiper) { ...@@ -178,6 +182,13 @@ function next(swiper) {
} }
.section-title { .section-title {
padding-bottom: 0; padding-bottom: 0;
h2 {
font-size: 32px;
font-weight: 500;
line-height: 34px;
color: #333333;
margin: 0 10px;
}
} }
.section__inner { .section__inner {
position: relative; position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论