Skip to content

P
project-www-pc
提交 f9b28f65 authored 作者: matian's avatar matian
浏览文件
操作

官网留学中心页面优化

上级 448db112
隐藏空白字符变更
内嵌 并排
正在显示 包含 170 行增加 和 103 行删除
assets/css/studyAbroad.scss
浏览文件 @ f9b28f65
......@@ -2,12 +2,48 @@
max-width: 1200px;
margin: 0 auto;
}
// .banner {
// height: 650px;
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
.banner {
height: 650px;
img {
position: relative;
height: 614px;
.swiper-wrapper {
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
.swiper-slide {
img {
width: 100%;
display: block;
}
}
}
.prev-button {
position: absolute;
top: 50%;
left: 30px;
width: 20px;
height: 35px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/beb733466e5ab0168b459a55d198b084.png);
background-size: 100% 100%;
z-index: 999;
cursor: pointer;
}
.next-button {
position: absolute;
top: 50%;
right: 30px;
width: 20px;
height: 35px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e97f45b23a3e5ec4913f0069cc714baf.png);
background-size: 100% 100%;
z-index: 999;
cursor: pointer;
}
}
.why {
......
components/FormSubmit.vue
浏览文件 @ f9b28f65
......@@ -128,7 +128,7 @@ export default {
<style lang="scss">
.form-submit {
min-height: 356px;
padding: 80px 0 60px;
padding: 78px 0 60px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -136,7 +136,7 @@ export default {
background: url(https://webapp-pub.ezijing.com/www/pc/form/form_bg.png) no-repeat center top;
background-size: cover;
h2 {
font-size: 40px;
font-size: 36px;
font-weight: 400;
line-height: 1;
color: #010101;
......
components/ProjectCard.vue
浏览文件 @ f9b28f65
......@@ -4,13 +4,14 @@
<div class="project-list">
<div class="project-item" v-for="(item, index) in list" :key="index">
<!-- <AppLink :data="item"><img :src="item.imgUrl"/></AppLink> -->
<div class="project-item-pic">
<img :src="item.imgUrl" />
<div class="project-item-pic" :style="`background:url(${item.imgUrl}) no-repeat center`">
<!-- <img :src="item.imgUrl" /> -->
<ul class="tools">
<li @click="handleSubmit(item)">我要报名</li>
<li><AppLink :data="item">了解详情</AppLink></li>
</ul>
</div>
<ul class="tools">
<li @click="handleSubmit(item)">我要报名</li>
<li><AppLink :data="item">了解详情</AppLink></li>
</ul>
<!-- <div class="tools">
<el-button type="primary" @click="handleSubmit(item)">我要报名</el-button>
<AppLink :data="item" style="margin-left:20px;">
......@@ -59,8 +60,9 @@ export default {
.project-item {
background-color: #fff;
.project-item-pic {
height: 345px;
height: 390px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
......@@ -68,34 +70,31 @@ export default {
&:hover {
box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.11);
}
}
.tools {
position: relative;
// margin-top: -20px;
padding: 25px 0;
display: flex;
justify-content: center;
border-top: 1px dashed #e1e1e1;
z-index: 1;
.tools {
position: absolute;
bottom: 23px;
display: flex;
justify-content: center;
width: 100%;
li {
flex: 1;
font-size: 16px;
font-weight: 400;
line-height: 25px;
color: #777;
text-align: center;
cursor: pointer;
&:hover {
font-weight: 500;
color: #333333;
li {
flex: 1;
font-size: 16px;
font-weight: 400;
color: #777;
text-align: center;
cursor: pointer;
&:hover {
font-weight: 500;
color: #333333;
}
}
li:first-child {
color: #a81840;
}
li + li {
border-left: 1px solid #e1e1e1;
}
}
li:first-child {
color: #a81840;
}
li + li {
border-left: 1px solid #e1e1e1;
}
}
</style>
components/TeacherCard.vue
浏览文件 @ f9b28f65
......@@ -4,12 +4,11 @@
<swiper-slide v-for="(item, index) in list" :key="index" class="teacher-item">
<div class="teacher-item-inner">
<img :src="item.imgUrl" />
<p>{{ item.name }}</p>
</div>
<div class="teacher-item-cover">
<h3>{{ item.name }}</h3>
<p>{{ item.project }} | {{ item.title }}</p>
<div v-html="item.desc"></div>
<p>{{ item.project }}</p>
<div v-html="item.desc" class="desc"></div>
</div>
</swiper-slide>
</swiper>
......@@ -38,21 +37,26 @@ export default {
.teacher-list {
margin-bottom: 60px;
}
.teacher-item {
width: 224px;
height: 370px;
background: rgba(255, 255, 255, 0.39);
cursor: pointer;
position: relative;
width: 286px;
height: 258px;
&:hover {
.teacher-item-cover {
transform: translateY(0);
}
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
}
}
.teacher-item-inner {
position: relative;
height: 100%;
height: 200px;
padding: 13px 12px 0 12px;
img {
width: 100%;
width: 200px;
height: 100%;
object-fit: cover;
}
......@@ -70,26 +74,33 @@ export default {
}
}
.teacher-item-cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #a81840;
color: #fff;
padding: 10px;
transform: translateY(100%);
transition: all 0.3s;
text-align: center;
margin-top: 21px;
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// background: #a81840;
// color: #fff;
// padding: 10px;
// transform: translateY(100%);
// transition: all 0.3s;
h3 {
font-size: 20px;
font-size: 16px;
font-weight: 500;
line-height: 28px;
text-align: center;
color: #000000;
}
p {
margin-top: 8px;
margin-bottom: 20px;
margin-top: 4px;
text-align: center;
font-size: 14px;
color: #333333;
}
.desc {
font-size: 14px;
margin-top: 20px;
color: #575964;
}
}
</style>
pages/studyAbroad/index.vue
浏览文件 @ f9b28f65
<template>
<div>
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" />
<!-- <img src="https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner.jpg" /> -->
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in listData" :key="index">
<img :src="item.web_img_uri" />
</swiper-slide>
</swiper>
<template v-if="!isMobile">
<div class="prev-button"></div>
<div class="next-button"></div>
</template>
</div>
<FormSubmit :type="2" id="form" ref="formSubmit"></FormSubmit>
<div class="w1200">
......@@ -72,6 +81,24 @@ export default {
components: { AppCard, ProjectCard, NewsCard, TeacherCard, FormSubmit },
data() {
return {
listData: [
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner1.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner2.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner3.png' },
{ web_img_uri: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/banner4.png' }
],
swiperOption: {
speed: 400,
autoplay: true,
delay: 3000,
observer: true,
observerParent: true,
navigation: {
nextEl: '.next-button',
prevEl: '.prev-button'
},
loop: true
},
whyList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/icon_why_01.png',
......@@ -150,49 +177,51 @@ export default {
teacherList: [
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_01.jpg',
name: 'Yair Tauman',
project: '师资-SBU',
title: '教授',
desc:
'纽约石溪大学经济学系首席教授<br/>曾任斯坦福大学、伦敦政经客座教授<br/>以色列耶路撒冷希伯来大学 数学博士<br/>导师：罗伯特·奥曼（诺贝尔经济学奖得主，美国科学院院士、艺术与科学学院外籍院士，英国社科院通讯院士）'
name: 'Tim Gramling',
project: '师资-CBU | 院长',
desc: '加州浸会大学商学院院长 <br/>美国东北大学法律与公共政策博士 <br/>哈佛大学计算机科学学士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_02.jpg',
name: 'Danling Jiang',
project: '师资-SBU',
title: '副院长',
desc:
'石溪大学商学院副院长分管研究与教师发展工作<br/>石溪大学创业金融中心联合主任<br/>石溪大学区块链商业实验室主任<br/>石溪大学交易与投资实验室主任<br/>石溪大学商学院金融学教授<br/>俄亥俄州立大学金融学博士'
name: 'Dmytro Holod',
project: '师资－SBU | 副院长',
desc: '石溪大学商学院副院长 <br/>肯塔基大学博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_03.jpg',
name: 'Dmytro Holod',
project: '师资-SBU',
title: '副院长',
desc:
'石溪大学商学院副院长<br/>肯塔基大学博士<br/>Holod 博士在众多学术和实践会议上展示了他的研究成果，他的研究成果发表在金融和经济学期刊上，包括《货币、信贷和银行杂志》、《银行和金融杂志》和《金融管理》'
name: 'Danling Jiang',
project: '师资－SBU | 副院长',
desc: '石溪大学商学院金融学教授<br/>俄亥俄州立大学金融学博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_04.jpg',
name: 'Michael Alan Bernstan',
project: '师资-SBU',
title: '副校长',
desc:
'石溪大学教务长兼学术事务高级副校长<br/>美国大学学者协会杰出成员<br/>耶鲁大学经济学博士<br/>美国国家人文中心的安德鲁梅隆研究员、经济史协会论文奖竞赛联合召集人、美国学术协会美国研究项目学术咨询委员会成员，经济史杂志编辑委员会成员'
name: 'Yehia Massoud',
project: '师资-SIT | 院长',
desc: '教授、学院院长<br/>IEEE电气与电子工程师协会院士<br/>麻省理工学院博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_05.jpg',
name: 'Gokhan Torna',
project: '师资-SBU',
title: '副教授',
desc: '石溪大学金融副教授<br/>堪萨斯大学商学院金融学博士（以优异成绩）'
name: 'Kathryn Abel',
project: '师资-SIT | 副教授',
desc: '史蒂文斯理工学院博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_06.jpg',
name: 'Sandro Brusco',
project: '师资-SBU',
title: '教授',
desc: '石溪大学经济系和商学院的经济学教授<br/>斯坦福大学商学院经济分析与政策博士'
name: 'Steven Hoffenson',
project: '师资-SIT | 讲师',
desc: '密歇根大学博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_07.jpg',
name: 'Young Shin Kim',
project: '师资－SBU | 副教授',
desc: '石溪大学金融副教授<br/>Sogang大学博士'
},
{
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/studyAbroad/yxsz_08.jpg',
name: 'Gokhan Torna',
project: '师资－SBU | 副教授',
desc: '石溪大学金融副教授<br/>堪萨斯大学商学院金融学博士'
}
],
qaList2: [
......@@ -201,8 +230,8 @@ export default {
answer: '是的，申请者必须要求本科学历或本科在读。但是对专业没有限制。'
},
{
question: '入学全流程是怎样的？',
answer: '①按项目要求提交资料；②面试；③发放录取通知书；④签订入学协议并缴纳学费；⑤注册入学。'
question: '英语基础不好会影响学习吗?',
answer: '紫荆教育提供了英语强化课程，课程测试结果得到美国大学的官方认可。'
},
{
question: '签证是自己办理吗？拒签了怎么办?',
......@@ -228,14 +257,6 @@ export default {
{
question: '在美国留学期间的住宿费和生活费大概预估是多少钱？',
answer: '留美一年住宿费和生活费预计15-20W人民币。'
},
{
question: '英语基础不好会影响学习吗?',
answer: '紫荆教育提供了英语强化课程，课程测试结果得到美国大学的官方认可。'
},
{
question: '硕士1+1项目有没有奖学金？',
answer: '最高16,000美元奖学金，学生入学后可以申请。'
}
]
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论