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