提交 94af3457 authored 作者: matian's avatar matian

1+1国际项目优化

上级 3707f813
<template>
<div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/banner.png" alt="" />
<div class="banner_navList">
<div class="banner_nav" v-for="(item, index) in navList" :key="index" @click="navClick(item)">
<div class="nav_top">
<img class="nav_img" :src="item.img" alt="" />
</div>
<div class="nav_tit">{{ item.tit }}</div>
</div>
</div>
<!-- 我要咨询弹框 -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
</div>
</template>
<script>
import consultingForm from '../consultingForm.vue'
export default {
components: { consultingForm },
data() {
return {
popupVisible: false,
navList: [
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon1.png',
tit: '报名申请',
tag: '1'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon2.png',
tit: '招生简章',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon3.png',
tit: '项目介绍',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon4.png',
tit: '资料下载',
tag: '2'
},
{
img: 'https://webapp-pub.ezijing.com/project/marywood/icon5.png',
tit: '常见问题',
tag: '2'
}
]
}
},
methods: {
showApplyForm() {
this.popupVisible = true
document.getElementsByTagName('body')[0].style.height = '100%'
document.getElementsByTagName('body')[0].style.overflow = 'hidden'
},
close() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
},
hideApplyForm() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
},
navClick(item) {
if (item.tag === '1') {
// this.showApplyForm()
this.$router.push('/my/account')
} else if (item.tag === '2') {
this.$router.push('/project-intro/introduce')
} else if (item.tag === '3') {
this.$router.push('/project-intro/introduce')
} else if (item.tag === '4') {
this.$router.push('/dataDownload/dataDownload')
} else if (item.tag === '5') {
this.$router.push('/question/question')
}
}
}
}
</script>
<style lang="scss" scoped>
.banner-content {
position: relative;
width: 100%;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.banner_navList {
position: absolute;
bottom: -76px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
margin: 0;
padding: 0;
.banner_nav {
width: 239px;
height: 144px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #be0927;
// border-right: 1px solid #e64b77;
padding-right: 0;
opacity: 0.71;
.nav_top {
width: 100%;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
border-right: 0.5px solid rgba(255, 255, 255, 0.30196078431372547);
&:hover {
border: none;
}
}
.banner_nav:last-child {
border: none;
}
.nav_tit {
width: 100%;
height: 56px;
font-size: 14px;
line-height: 18px;
text-align: center;
color: #fefffe;
padding-bottom: 15px;
border-right: 1px solid #be0927;
}
&:hover {
height: 160px;
background-color: #aa1941;
opacity: 0.78;
}
}
}
}
</style>
......@@ -79,7 +79,7 @@ export default {
<style lang="scss" scoped>
.is-pc {
.service-content {
padding-top: 168px;
padding-top: 64px;
.nav-content {
display: flex;
justify-content: flex-start;
......@@ -119,11 +119,11 @@ export default {
}
}
.text {
font-size: 14px;
line-height: 18px;
font-size: 18px;
color: #666666;
margin-top: 20px;
text-align: center;
font-weight: 400;
}
}
}
......
<template>
<div class="service-content max-width-center">
<card title="项目定位">
<p class="desc">
紫荆教育与玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目,针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系,志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
</card>
</div>
</template>
<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
AppLink,
Card
},
data() {
return {
titleParams: {
name: this.$t('home.project.title')
}
// data: [
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img12.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img11.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT5')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img22.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img21.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT6')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img32.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img31.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT1') : this.$t('home.project.pc.itemT7')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img42.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img411.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT2') : this.$t('home.project.pc.itemT8')
// },
// {
// icon: 'https://webapp-pub.ezijing.com/project/marywood/img52.png',
// iconActive: 'https://webapp-pub.ezijing.com/project/marywood/img51.png',
// text: this.$store.state.isMobile ? this.$t('home.project.h5.itemT3') : this.$t('home.project.pc.itemT9')
// }
// ]
}
},
methods: {
goPage(path) {
if (path === '') {
// this.$message('暂未开通,尽请期待。')
return
}
window.open(path)
}
},
mounted() {
console.log(this.isMobile)
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
// .service-content {
// padding-top: 168px;
// .nav-content {
// display: flex;
// justify-content: flex-start;
// padding-top: 15px;
// li {
// width: 224px;
// height: 230px;
// padding-top: 53px;
// margin-right: 20px;
// box-sizing: border-box;
// background: #f9f8f8;
// // background: #fff;
// // box-shadow: 0px 4px 38px rgba(142, 30, 34, 0.41);
// cursor: pointer;
// transition: all 0.3s;
// img {
// width: 80px;
// height: 80px;
// display: block;
// margin: 0 auto;
// }
// .icon-active {
// display: none;
// }
// &:hover {
// background: #aa1941;
// box-shadow: 0px 4px 20px rgba(142, 30, 34, 0.41);
// .text {
// color: #fff;
// }
// .icon {
// display: none;
// }
// .icon-active {
// display: block;
// }
// }
// .text {
// font-size: 14px;
// line-height: 18px;
// color: #666666;
// margin-top: 20px;
// text-align: center;
// }
// }
// }
// }
.max-width-center {
width: 1212px;
margin: 0 auto;
padding-top: 168px;
.desc {
text-align: center;
padding-top: 15px;
font-size: 20px;
font-weight: 400;
color: #666666;
padding: 48px 85px 0 78px;
}
}
</style>
......@@ -7,16 +7,16 @@
<div class="line2"></div>
</div>
<div class="part">
<img
<!-- <img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery1.png"
alt=""
@click="$router.push('/school/school2')"
/>
<img
/> -->
<!-- <img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery2.png"
alt=""
@click="$router.push('/school/school1')"
/>
/> -->
<img
src="https://webapp-pub.ezijing.com/project/marywood/marwood_senery3.png"
alt=""
......@@ -68,17 +68,11 @@ export default {}
}
}
.part {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
bottom: 226px;
top: 256px;
left: 50%;
transform: translateX(-50%);
img {
margin-right: 39px;
}
}
}
</style>
......@@ -9,8 +9,11 @@
<nuxt-link to="/">
<div class="logo-box">
<img src="http://zws-imgs-pub.ezijing.com/static/ezijing/logo/ezijing-logo.svg" />
<div style="font-weight: 400;font-size: 28px;color: #AF1941;margin-top:10px;margin-left:20px">
1+1 国际硕士
<div
style="font-size: 30px;color: #AF1941;padding-top:5px;margin-left:28px;
margin-bottom:12px;font-weight:500"
>
国际硕士1+1
</div>
<!-- <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" /> -->
</div>
......
......@@ -72,8 +72,8 @@ export default {
name: this.$t('menu.school'),
path: '/school/school1',
childern: [
{ name: this.$t('menu.schoolChild.school1'), path: '/school/school1' },
{ name: this.$t('menu.schoolChild.school2'), path: '/school/school2' },
// { name: this.$t('menu.schoolChild.school1'), path: '/school/school1' },
// { name: this.$t('menu.schoolChild.school2'), path: '/school/school2' },
{ name: this.$t('menu.schoolChild.school3'), path: '/school/school3' }
]
},
......
<template>
<div class="right_bar">
<div class="right_bar" id="right_bar">
<ul class="tab_btns">
<a href="/my/account">
<li class="service">
......@@ -20,6 +20,14 @@
>
<p>{{ $t('aside.follow') }}</p>
</li>
<li
:class="{ top: true, active: tabBtnActive && tabBtnTarget === 'top' }"
@mouseenter="handleMsOver('top')"
@mouseleave="handleMsOut"
@click="backToTop"
>
<p>^</p>
</li>
</ul>
<transition
name="custom-classes-transition"
......@@ -97,7 +105,28 @@ export default {
]
}
},
mounted() {
// this.isShow = false
window.onscroll = function() {
undefined
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
var node = document.getElementById('right_bar')
if (top > 100) {
//500就是滚动条滚动到的位置,大于100(500指500px)才显示
node.style.display = 'block'
} else {
node.style.display = 'none'
}
}
},
methods: {
backToTop() {
window.scrollTo({
left: 0,
top: 0,
behavior: 'smooth'
})
},
handleMsOver(type) {
this.tabBtnActive = true
if (type !== '') {
......@@ -233,6 +262,9 @@ export default {
}
</script>
<style lang="scss" scoped>
#right_bar {
display: none;
}
.right_bar {
position: fixed;
top: 50%;
......@@ -240,14 +272,14 @@ export default {
z-index: 2000;
transform: translateY(-50%);
.tab_btns {
width: 100px;
width: 50px;
// height: 136px;
font-size: 12px;
border-radius: 4px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
li {
padding: 70px 0 18px;
padding: 60px 0 18px;
color: #999;
background-position: center 18px;
background-repeat: no-repeat;
......@@ -396,24 +428,3 @@ export default {
}
}
</style>
<style>
/* .right_bar .enroll_cont .el-input__inner {
border: 1px solid #ccc;
line-height: 44px;
height: 44px;
}
.right_bar .sendcode .el-input {
width: 170px;
}
.right_bar .el-button{
background: #ff8e1a;
border:#ff8e1a 1px solid;
color:rgba(255,255,255,.9);
}
.sendcode .el-button {
width: 94px;
margin-right: 2px;
padding: 12px 0;
text-align: center;
} */
</style>
......@@ -2,8 +2,8 @@
<app-frame :data="frameParams">
<img src="https://webapp-pub.ezijing.com/project/marywood/academic1.png" alt="" />
<div class="main_content">
<el-image :src="url1"> </el-image>
<el-image :src="url2"> </el-image>
<!-- <el-image :src="url1"> </el-image>
<el-image :src="url2"> </el-image> -->
<el-image :src="url3"> </el-image>
</div>
</app-frame>
......@@ -15,8 +15,8 @@ export default {
components: { appFrame },
data() {
return {
url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png',
url2: 'https://webapp-pub.ezijing.com/project/marywood/academic31.png',
// url1: 'https://webapp-pub.ezijing.com/project/marywood/academic21.png',
// url2: 'https://webapp-pub.ezijing.com/project/marywood/academic31.png',
url3: 'https://webapp-pub.ezijing.com/project/marywood/academic4.png',
frameParams: {
......@@ -35,11 +35,11 @@ export default {
.main_content {
padding: 103px 64px 120px 48px;
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
}
::v-deep .el-image {
display: block;
margin-right: 20px;
// margin-right: 20px;
}
</style>
......@@ -26,7 +26,7 @@
<div class="admissionList">
<div class="list_tit">录取条件</div>
<div class="admission_desc">
<div class="admission_part">
<!-- <div class="admission_part">
<div class="part_tit"><div class="tit1">纽约州立大学石溪分校 金融硕士</div></div>
<div class="part_desc">
<div class="item_desc">本科GPA成绩≥3.0;</div>
......@@ -34,9 +34,9 @@
<div class="item_desc">通过初审资料审核(详见申请材料)</div>
<div class="item_desc">通过项目中英文面试</div>
</div>
</div>
</div> -->
<div class="admission_part">
<!-- <div class="admission_part">
<div class="part_tit">
<div class="tit2">
斯蒂文斯理工学院学院<br />
......@@ -48,11 +48,11 @@
<div class="item_desc">通过初审资料审核(详见申请材料)</div>
<div class="item_desc">通过项目中英文面试</div>
</div>
</div>
</div> -->
<div class="admission_part">
<div class="part_tit"><div class="tit1">玛丽伍德大学 工商管理硕士</div></div>
<div class="part_desc">
<div class="item_desc">本科GPA成绩≥3.0</div>
<div class="item_desc">本科GPA成绩≥2.8</div>
<div class="item_desc">通过初审资料审核(详见申请材料)</div>
<div class="item_desc">通过项目中英文面试</div>
</div>
......@@ -220,13 +220,13 @@ export default {
}
.admission_desc {
display: flex;
justify-content: space-around;
align-items: flex-start;
justify-content: center;
align-items: center;
.admission_part {
padding-right: 10px;
.part_tit {
width: 286px;
width: 369px;
height: 75px;
background: #880126;
box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
......@@ -243,7 +243,7 @@ export default {
}
}
.part_desc {
width: 286px;
width: 369px;
.item_desc {
font-size: 16px;
font-weight: 300;
......
<template>
<app-frame :data="frameParams">
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_banner.png" alt="" />
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_content.png" alt="" class="img_bottom" />
<img src="https://webapp-pub.ezijing.com/project/marywood/sign_content1.png" alt="" class="img_bottom" />
</app-frame>
</template>
<script>
......
<template>
<div class="container">
<div class="banner-content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/banner11.png" alt="" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/project-intro/introduce')">项目介绍</el-button>
<el-button class="btn1" @click="showApplyForm">报名咨询</el-button>
</div>
</div>
<p class="desc">
紫荆教育与纽约州立大学石溪分校、斯蒂文斯理工学院、玛丽伍德大学等美国知名院校联合推出国际硕士1+1项目,针对当下数字经济时代最需要的商业分析大数据、金融和数字领导力等方向打造国际领先的人才培养体系,志在培养立足中国本土实践、兼具国际视野的复合型新时代人才。
</p>
<!-- 我要咨询弹框 -->
<consultingForm :visible.sync="popupVisible" @success="hideApplyForm" @close="close" />
<!-- banner图 -->
<banners />
<!-- 项目定位 -->
<project-position />
<!-- 项目特色 -->
<project-features />
<!-- 校园风光 -->
......@@ -26,7 +18,8 @@
</template>
<script>
import consultingForm from '../components/consultingForm.vue'
import banners from '../components/home/banners.vue'
import projectPosition from '../components/home/projectPosition.vue'
import projectFeatures from '../components/home/projectFeatures'
import schoolSenery from '../components/home/schoolSenery.vue'
import news from '../components/home/news'
......@@ -35,11 +28,13 @@ import commonProblem from '../components/home/commonProblem'
import openClass from '../components/home/openClass'
import rightAside from '../components/rightAside'
import Video from '../components/home/Video.vue'
import Banners from '../components/home/banners.vue'
export default {
layout: 'normal',
components: {
consultingForm,
banners,
projectPosition,
projectFeatures,
schoolSenery,
news,
......@@ -47,31 +42,14 @@ export default {
commonProblem,
openClass,
rightAside,
Video
Video,
Banners
},
data() {
return {
isScale: false,
popupVisible: false
}
},
methods: {
showApplyForm() {
this.popupVisible = true
document.getElementsByTagName('body')[0].style.height = '100%'
document.getElementsByTagName('body')[0].style.overflow = 'hidden'
},
close() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
},
hideApplyForm() {
this.popupVisible = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
}
}
}
</script>
......@@ -79,47 +57,5 @@ export default {
.container {
width: 100%;
position: relative;
.banner-content {
position: relative;
width: 100%;
.img {
width: 100%;
height: 100%;
z-index: 1000;
}
.btn {
display: flex;
justify-content: center;
position: absolute;
bottom: 109px;
left: 50%;
transform: translateX(-50%);
}
.btn1 {
width: 104px;
height: 32px;
border: 1px solid #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 8px;
background: none;
color: #fff;
}
.btn1:hover {
background-color: #aa1941;
opacity: 1;
}
}
.desc {
width: 1200px;
font-size: 16px;
font-weight: 400;
color: #666666;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top: 79px;
text-align: center;
}
}
</style>
......@@ -23,7 +23,7 @@
</div>
<div class="content_tit">
<div class="line"></div>
<div class="tit_desc">项目设置</div>
<div class="tit_desc">学制安排</div>
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school1611.png" />
<div class="content">
......
......@@ -22,7 +22,7 @@
</div>
<div class="content_tit">
<div class="line"></div>
<h1 class="tit_desc">项目设置</h1>
<h1 class="tit_desc">学制安排</h1>
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/school2611.png" />
<div class="content">
......
<template>
<div>
<div class="banner">
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner111.png" />
<img class="img_banner" src="https://webapp-pub.ezijing.com/project/marywood/marywood_banner.png" />
<div class="btn">
<el-button class="btn1" @click="$router.push('/my/account')">报名申请</el-button>
</div>
......@@ -15,17 +15,54 @@
</div>
<img class="img22" src="https://webapp-pub.ezijing.com/project/marywood/marywood322.png" />
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3311.png" />
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood33.png" />
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood34.png" />
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood341.png" />
</div>
<div class="content_tit">
<div class="line"></div>
<div class="tit_desc">项目设置</div>
<div class="tit_desc">学制安排</div>
</div>
<img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" />
<!-- <img class="img4" src="https://webapp-pub.ezijing.com/project/marywood/marywood3611.png" alt="" /> -->
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood37.png" />
<div class="img5 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">16</span><span class="fen">个月</span></div>
<div class="desc_tit">学制安排</div>
</div>
</div>
<div class="img6 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail"><span class="num">36</span><span class="fen">学分</span></div>
<div class="desc_tit">学分设置</div>
</div>
</div>
<div class="img7 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail">
<span class="num">4</span><span class="fen fen1">门课</span><span class="num">12</span
><span class="fen">学分</span>
</div>
<div class="desc_tit">国内授课</div>
</div>
</div>
<div class="img8 img55">
<div class="mask"></div>
<div class="desc">
<div class="desc_detail">
<span class="num">8</span><span class="fen fen1">门课</span><span class="num">24</span
><span class="fen">学分</span>
</div>
<div class="desc_tit">国外授课</div>
</div>
</div>
</div>
<div class="content">
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood36.png" />
</div>
<div class="content_tit">
<div class="line"></div>
......@@ -150,6 +187,84 @@ export default {
width: 540px;
margin-top: 65px;
}
.img55 {
width: 292px;
height: 345px;
margin-right: 11px;
cursor: pointer;
position: relative;
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.16862745098039217);
color: #ffffff;
opacity: 0.7;
top: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.desc {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 137px;
transition: all 0.15s ease-in;
.desc_tit {
font-size: 20px;
font-weight: 500;
color: #ffffff;
margin-top: -10px;
}
.desc_detail {
color: #ffffff;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
visibility: hidden;
.num {
font-size: 55px;
font-weight: bold;
}
.fen {
font-size: 20px;
font-weight: 400;
padding-top: 20px;
}
.fen1 {
padding-right: 5px;
}
}
}
}
.img55:hover .mask {
opacity: 1;
background: rgba(0, 0, 0, 0.41568627450980394);
}
.img55:hover .desc {
transform: translateY(-30px);
}
.img55:hover .desc .desc_detail {
visibility: visible;
}
.img5 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational1.png');
}
.img6 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational2.png');
}
.img7 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational3.png');
}
.img8 {
background: url('https://webapp-pub.ezijing.com/project/marywood/educational4.png');
}
}
.img4 {
width: 100%;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论