Skip to content

P
project-www-h5
提交 70ee58f4 authored 作者: matian's avatar matian
浏览文件
操作

marywood推广营销页面

上级 cf33d0b1
隐藏空白字符变更
内嵌 并排
正在显示 包含 447 行增加 和 14 行删除
components/Header.vue
浏览文件 @ 70ee58f4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div> <div>
<header class="main-header"> <header class="main-header">
<template v-if="!searchVisible"> <template v-if="!searchVisible">
<nuxt-link to="/" :class="$store.state.locale == 'en-US' ? 'logo-en' : 'logo'"></nuxt-link> <a href="https://h5.ezijing.com/" :class="$nuxt.$route.path !== '/project/marywood' ? 'logo1' : 'logo2'"></a>
<div class="search" @click="toggleSearch"></div> <div class="search" @click="toggleSearch"></div>
<div class="menu" :class="menuClasses" @click="toggleMenu"></div> <div class="menu" :class="menuClasses" @click="toggleMenu"></div>
</template> </template>
...@@ -76,7 +76,7 @@ export default { ...@@ -76,7 +76,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.main-header { .main-header {
position: relative; position: relative;
display: flex; display: flex;
...@@ -85,12 +85,18 @@ export default { ...@@ -85,12 +85,18 @@ export default {
background-color: #fff; background-color: #fff;
border-top: 0.05rem solid #aa1941; border-top: 0.05rem solid #aa1941;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
.logo { .logo1 {
flex: 1; flex: 1;
background: url('~/assets/images/logo.png') no-repeat; background: url('~/assets/images/logo.png') no-repeat;
height: 0.26rem; height: 0.26rem;
background-size: contain; background-size: contain;
} }
.logo2 {
flex: 1;
background: url('https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/marywood/logo_head.png') no-repeat;
height: 0.26rem;
background-size: contain;
}
.logo-en { .logo-en {
flex: 1; flex: 1;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/en-logo.png) no-repeat; background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/en-logo.png) no-repeat;
...@@ -155,24 +161,24 @@ export default { ...@@ -155,24 +161,24 @@ export default {
} }
} }
} }
.tool-box{ .tool-box {
padding: .85rem 0; padding: 0.85rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
background: #fff; background: #fff;
.item{ .item {
.icon{ .icon {
width: .5rem; width: 0.5rem;
height: .5rem; height: 0.5rem;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/change-lang.png); background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/h5/images/change-lang.png);
background-size: 100% 100%; background-size: 100% 100%;
margin: 0 auto; margin: 0 auto;
} }
.text{ .text {
font-size: .14rem; font-size: 0.14rem;
line-height: 100%; line-height: 100%;
color: #999999; color: #999999;
margin-top: .1rem; margin-top: 0.1rem;
text-align: center; text-align: center;
} }
} }
......
components/RightAside.vue
浏览文件 @ 70ee58f4
<template> <template>
<div> <div v-if="$nuxt.$route.path !== '/project/marywood'">
<div class="rigth-aside"> <div class="rigth-aside">
<ul class="right-aside-btns"> <ul class="right-aside-btns">
<li @click="showApplyForm"> <li @click="showApplyForm">
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
} }
} }
.dialog-box { .dialog-box {
padding: .1rem; padding: 0.1rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
......
components/marywood/MaryBanner.vue 0 → 100644
浏览文件 @ 70ee58f4
<template>
<div class="main_content">
<a href="https://marywood-plus.ezijing.com" target="_blank">
<img src="https://webapp-pub.ezijing.com/www/h5/marywood/mary_banner1.png" alt="" />
</a>
<a href="https://marywood.ezijing.com" target="_blank">
<img src="https://webapp-pub.ezijing.com/www/h5/marywood/mary_banner2.png" alt=""/>
</a>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
.main_content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
img{
width: 2.75rem;
height: 2.75rem;
margin-top: .37rem;
}</style>
</template>
components/marywood/MaryVideo.vue 0 → 100644
浏览文件 @ 70ee58f4
<template>
<div class="video-wrapper" :class="className">
<div>
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list" :key="index">
<div class="item-media">
<img :src="item.poster" />
<div
class="video-play"
@click.stop="open(item)"
@mouseenter.stop="handleVideoMouseEnter"
@mousemove.stop="handleVideoMouseEnter"
></div>
</div>
<div class="item-text">
<div class="item-text-tit">{{ item.title }}</div>
<div class="item-text-desc">{{ item.desc }}</div>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</div>
<video
v-if="isShow === true"
class="video"
:src="playVideo.src"
controls="controls"
preload="auto"
autoplay="autoplay"
x5-playsinline=""
playsinline
webkit-playsinline="true"
ref="video"
></video>
<div class="overlay" v-if="isShow === true" @click="close"></div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
list: [
{
title: '玛丽伍德大学校长致词',
desc: 'Address from the President of Marywood University',
src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster1.png'
},
{
title: '玛丽伍德大学介绍',
desc: 'The Introduction of Marywood University',
src: 'https://webapp-pub.ezijing.com/project/marywood/marywood.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
}
],
// 当前播放的视频
playVideo: {},
showType: '',
showIndex: 0,
mouseCursor: 'pointer',
swiperOption: {
speed: 400,
autoplay: false,
delay: 3000,
loop: false,
height: 500,
slidesPerView: 'auto',
centeredSlides: true
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
},
className() {
return {
'is-h5': this.isMobile
}
}
},
methods: {
handleMouseEnter(e) {
const target = this.$refs.target.getBoundingClientRect()
if (e.clientX - target.left < (target.right - target.left) / 2) {
if (this.showIndex > 0) {
this.mouseCursor =
'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-left-dark.svg) 30 30, e-resize'
this.showType = 'left'
} else {
this.mouseCursor = 'default'
this.showType = ''
}
} else {
if (this.showIndex < this.list.length - 1) {
this.mouseCursor =
'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-right-dark.svg) 30 30, e-resize'
this.showType = 'right'
} else {
this.mouseCursor = 'default'
this.showType = ''
}
}
},
handleVideoMouseEnter() {},
handleClick() {
console.log(this.showIndex)
if (this.showType === 'left') {
this.handlePrev()
} else if (this.showType === 'right') {
this.handleNext()
}
},
handlePrev() {
// 末尾的视频放到前面
// const deleteVideo = this.list.splice(this.list.length - 1, 1)
// this.list.unshift(deleteVideo[0])
this.showIndex--
if (this.showIndex <= 0) {
this.mouseCursor = 'default'
this.showType = ''
this.showIndex = 0
}
this.$refs.mySwiper.swiper.slideTo(this.showIndex)
},
handleNext() {
// 第一个视频放到最后
// const deleteVideo = this.list.splice(0, 1)
// this.list = this.list.concat(deleteVideo)
this.showIndex++
if (this.showIndex >= this.list.length - 1) {
this.mouseCursor = 'default'
this.showType = ''
this.showIndex = this.list.length - 1
}
this.$refs.mySwiper.swiper.slideTo(this.showIndex)
},
open(item) {
this.playVideo = item
this.isShow = true
this.$nextTick(() => {
this.$refs.video.play()
})
document.getElementsByTagName('body')[0].style.height = '100%'
document.getElementsByTagName('body')[0].style.overflow = 'hidden'
},
close() {
this.isShow = false
document.getElementsByTagName('body')[0].style.height = ''
document.getElementsByTagName('body')[0].style.overflow = ''
}
}
}
</script>
<style lang="scss" scoped>
.is-h5 {
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.video-list {
display: flex;
padding: 0 0.3rem;
overflow-x: auto;
}
.video-item {
width: 3.25rem;
}
.video-item + .video-item {
margin-left: 0.1rem;
}
.video-poster {
position: relative;
width: 3.25rem;
height: 2.04rem;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
width: 0.39rem;
height: 0.39rem;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
background-size: contain;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
.video-content {
padding: 0.1rem 0;
}
.video-title {
text-align: center;
font-size: 0.12rem;
color: #484848;
}
.video-desc {
text-align: center;
font-size: 0.12rem;
color: #484848;
}
.video {
width: 100%;
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
}
.swiper-container {
// height: 4.5rem;
// .swiper-wrapper{
// }
.swiper-slide {
width: 3.2rem;
position: relative;
padding: 0 0.1rem;
.item-media {
width: 3rem;
position: relative;
img {
width: 100%;
height: 3rem;
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
background-size: contain;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2200;
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
}
.item-text {
flex: 1;
color: #454545;
padding: 0.1rem 0.2rem 0;
.item-text-tit {
font-size: 0.22rem;
line-height: 0.5rem;
}
.item-text-desc {
font-size: 0.16rem;
}
}
&.swiper-slide-active .item-media:after {
display: none;
}
}
}
}
</style>
components/marywood/Maryintro.vue 0 → 100644
浏览文件 @ 70ee58f4
<template>
<div class="service-content max-width-center">
<card title="玛丽伍德大学介绍">
<div class="desc">
<p>
美国玛丽伍德大学（Marywood University）办于1915年，有超过100年的历史。学校位于宾夕法尼亚州斯克兰顿市，占地700亩。学校地理位置优越，距离美国金融中心纽约和美国最古老城市之一的费城均约2小时车程。玛丽伍德大学是一所拥有128名全职教授、超过3,000名在校学生的综合性大学，大学设置超过100个本科、硕士及博士专业。
</p>
<p>
玛丽伍德大学服务来自各种学习背景的学生，并且率先通过对道德的推动来丰富人生，为学生全面发展并掌握专业技能和领导能力创建一套体系化的教育系统。
</p>
</div>
</card>
</div>
</template>
<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
AppLink,
Card
}
}
</script>
<style lang="scss" scoped>
.is-pc {
.max-width-center {
width: 1212px;
margin: 0 auto;
padding-top: 168px;
.desc {
// text-align: left;
// white-space: pre-line;
padding-top: 15px;
font-size: 20px;
line-height: 30px;
font-weight: 400;
color: #666666;
// padding: 48px 30px 0 30px;
}
}
}
.is-h5 {
.max-width-center {
// margin: 0.39rem auto;
padding: 0.2rem 0.3rem 0.2rem 0.3rem;
}
.tit {
font-size: 0.14rem;
font-weight: bold;
line-height: 0.28rem;
color: #424242;
}
.desc {
text-align: justify;
white-space: pre-line;
font-size: 0.12rem;
font-weight: 400;
line-height: 0.2rem;
color: #666666;
}
}
</style>
pages/project/marywood.vue 0 → 100644
浏览文件 @ 70ee58f4
<template>
<div>
<!-- <MaryHead /> -->
<MaryBanner />
<Maryintro />
<MaryVideo />
</div>
</template>
<script>
// import MaryHead from '@/components/marywood/MaryHead.vue'
import MaryBanner from '@/components/marywood/MaryBanner.vue'
import Maryintro from '@/components/marywood/Maryintro.vue'
import MaryVideo from '@/components/marywood/MaryVideo.vue'
export default {
layout: 'empty',
head: {
title: '紫荆教育-美国玛丽伍德大学-在线学位-国际留学',
meta: [
{
hid: 'keywords',
name: 'keywords',
content:
'工商管理硕士,MBA硕士,免联考MBA,国际MBA,通用MBA,在职MBA,在线MBA,MBA,商学院,管理学,玛丽伍德大学,玛丽伍德,Marywood，美国玛丽伍德大学留学,国际留学,美国留学,硕士留学,留学1+1项目,留学项目,国际硕士'
},
{
hid: 'description',
name: 'description',
content:
'美国玛丽伍德大学（Marywood University）办于1915年，有超过100年的历史。学校位于宾夕法尼亚州斯克兰顿市，占地700亩。学校地理位置优越，距离美国金融中心纽约和美国最古老城市之一的费城均约2小时车程。玛丽伍德大学是一所拥有128名全职教授、超过 3,000 名在校学生的综合性大学，大学设置超过100个本科、硕士及博士专业。'
}
]
},
components: {
// MaryHead,
MaryBanner,
Maryintro,
MaryVideo
}
}
</script>
<style scoped></style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论