Skip to content

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

chore：新增marywood营销推广

上级 e3e15e4f
隐藏空白字符变更
内嵌 并排
正在显示 包含 1228 行增加 和 0 行删除
components/marywood/Introduce.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div class="service-content max-width-center">
<card title="玛丽伍德大学介绍">
<div class="desc">
美国玛丽伍德大学（Marywood
University）办于1915年，有超过100年的历史。学校位于宾夕法尼亚州斯克兰顿市，占地700亩。学校地理位置优越，距离美国金融中心纽约和美国最古老城市之一的费城均约2小时车程。玛丽伍德大学是一所拥有128名全职教授、超过
3,000 名在校学生的综合性大学，大学设置超过100个本科、硕士及博士专业。
玛丽伍德大学服务来自各种学习背景的学生，并且率先通过对道德的推动来丰富人生，为学生全面发展并掌握专业技能和领导能力创建一套体系化的教育系统。
</div>
</card>
</div>
</template>
<script>
import Card from '@/components/AppCard'
import AppLink from '@/components/Link'
export default {
name: 'projectFeatures',
components: {
AppLink,
Card
},
data() {
return {
titleParams: {
name: this.$t('home.project.title')
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
},
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>
.max-width-center {
width: 1200px;
margin: 80px auto;
.desc {
font-size: 20px;
font-weight: 400;
line-height: 36px;
color: #666666;
margin-top: 48px;
}
}
</style>
components/marywood/MaryBanner.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div class="main_container">
<div class="container_item banner1">
<a href="https://marywood-plus.ezijing.com" target="_blank">
<div class="btn_detail">查看详情</div>
</a>
</div>
<div class="container_item banner2">
<a href="https://marywood.ezijing.com" target="_blank">
<div class="btn_detail">查看详情</div>
</a>
</div>
</div>
</template>
<script>
export default {}
</script>
<style scoped lang="scss">
.main_container {
width: 1200px;
margin: 88px auto;
display: flex;
justify-content: space-around;
.container_item {
width: 550px;
height: 551px;
position: relative;
// background-color: red;
.btn_detail {
width: 150px;
height: 44px;
border: 1px solid #ffffff;
line-height: 44px;
text-align: center;
font-size: 22px;
font-weight: 500;
color: #ffffff;
position: absolute;
top: 443px;
bottom: 64px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
.btn_detail:hover {
background: #ffffff;
color: #333333;
}
}
.banner1 {
background: url(https://webapp-pub.ezijing.com/www/pc/marywood/banner1.png);
margin-right: 98px;
}
.banner2 {
background: url(https://webapp-pub.ezijing.com/www/pc/marywood/banner2.png);
}
}
</style>
components/marywood/MaryHead.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div class="head-mian">
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<div class="logo-box">
<img src="https://webapp-pub.ezijing.com/www/pc/marywood/logo_head.png" />
<div class="line"></div>
<img src="https://webapp-pub.ezijing.com/project/marywood/marywood_logo.svg" />
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.head-mian {
width: 100%;
background: #fff;
.color-bar {
height: 10px;
background: #aa1941;
}
.head-top-content {
// width: 1200px;
// margin: 0 auto;
border: 1px solid #ebebeb;
padding: 23px 0 22px;
.max-width-content {
display: flex;
align-items: center;
img {
height: 55px;
cursor: pointer;
display: block;
}
.logo-box {
display: flex;
align-items: center;
justify-content: center;
img {
height: 55px;
cursor: pointer;
display: block;
}
.line {
border-right: 2px solid #aa1941;
height: 26px;
width: 0;
margin: 0 20px;
}
.title {
font-size: 30px;
font-weight: 500;
color: #aa1941;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
word-break: keep-all;
}
}
}
}
.max-width-content {
width: 1200px;
margin: 0 auto;
}
}
</style>
components/marywood/Video.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div class="video-wrapper" :class="className">
<div
v-if="!isMobile"
class="content"
@mouseenter="handleMouseEnter"
@mouseleave="showType = ''"
@mousemove="handleMouseEnter"
@click="handleClick"
ref="target"
:style="{ cursor: mouseCursor }"
>
<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>
<div v-else>
<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,
'is-pc': !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-pc {
margin-top: 46px;
.video-wrapper {
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/video_bg.png) no-repeat center center;
background-size: cover;
}
.content {
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 65px 0;
}
.video-list {
display: flex;
flex-wrap: nowrap;
height: 680px;
}
.video-item {
display: flex;
align-items: center;
position: relative;
}
.video-item + .video-item {
opacity: 0.4;
}
.video-poster {
position: relative;
width: 550px;
height: 550px;
&::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: 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: 2;
}
.video-content {
width: 490px;
padding: 20px;
box-sizing: border-box;
}
.video-title {
font-size: 40px;
font-weight: 400;
color: #ffffff;
}
.video-desc {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #ffffff;
}
.video-btn {
position: absolute;
left: -40px;
top: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png) no-repeat center center;
background-size: contain;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.video-next {
left: unset;
right: -40px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.video {
width: 80%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
.swiper-container {
height: 550px;
// .swiper-wrapper{
// }
.swiper-slide {
width: 1080px !important;
position: relative;
display: flex;
align-items: center;
// margin-left:50px;
.item-media {
width: 550px;
height: 550px;
position: relative;
img {
width: 100%;
height: 100%;
}
.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;
}
}
.item-text {
flex: 1;
color: #fff;
padding: 0 40px;
.item-text-tit {
font-size: 36px;
line-height: 60px;
}
.item-text-desc {
font-size: 20px;
}
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
// background: rgba(0, 0, 0, 0.6);
}
&.swiper-slide-active:after {
display: none;
}
}
}
}
.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>
<template>
<div class="video-wrapper" :class="className">
<div
v-if="!isMobile"
class="content"
@mouseenter="handleMouseEnter"
@mouseleave="showType = ''"
@mousemove="handleMouseEnter"
@click="handleClick"
ref="target"
:style="{ cursor: mouseCursor }"
>
<!-- <ul class="video-list">
<li class="video-item" v-for="(item, index) in list" :key="index">
<div class="video-poster">
<img :src="item.poster" />
<div class="video-play" @click="open(item)" @mouseenter.stop="handleVideoMouseEnter" @mousemove.stop="handleVideoMouseEnter" v-if="isMobile || index === 0"></div>
</div>
<div class="video-content">
<div class="video-title">{{ item.title }}</div>
<div class="video-desc">{{ item.desc }}</div>
</div>
</li>
</ul> -->
<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 v-if="showType === 'left' && showIndex > 0" class="video-btn video-prev" @click="handlePrev"></div>
<div v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> -->
</div>
<div v-else>
<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,
'is-pc': !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-pc {
margin-top: 56px;
.video-wrapper {
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/video_bg.png) no-repeat center center;
background-size: cover;
}
.content {
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 65px 0;
}
.video-list {
display: flex;
flex-wrap: nowrap;
height: 680px;
}
.video-item {
display: flex;
align-items: center;
position: relative;
}
.video-item + .video-item {
opacity: 0.4;
}
.video-poster {
position: relative;
width: 550px;
height: 550px;
&::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: 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: 2;
}
.video-content {
width: 490px;
padding: 20px;
box-sizing: border-box;
}
.video-title {
font-size: 40px;
font-weight: 400;
color: #ffffff;
}
.video-desc {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #ffffff;
}
.video-btn {
position: absolute;
left: -40px;
top: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play-big-l.png) no-repeat center center;
background-size: contain;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.video-next {
left: unset;
right: -40px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.video {
width: 80%;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
.swiper-container {
height: 550px;
// .swiper-wrapper{
// }
.swiper-slide {
width: 1080px !important;
position: relative;
display: flex;
align-items: center;
// margin-left:50px;
.item-media {
width: 550px;
height: 550px;
position: relative;
img {
width: 100%;
height: 100%;
}
.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;
}
}
.item-text {
flex: 1;
color: #fff;
padding: 0 40px;
.item-text-tit {
font-size: 36px;
line-height: 60px;
}
.item-text-desc {
font-size: 20px;
}
}
&:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
// background: rgba(0, 0, 0, 0.6);
}
&.swiper-slide-active:after {
display: none;
}
}
}
}
.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>
layouts/empty.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div class="is-pc">
<Nuxt />
</div>
</template>
pages/project/marywood.vue 0 → 100644
浏览文件 @ 130ed05a
<template>
<div>
<MaryHead />
<MaryBanner />
<Introduce />
<Video />
<Foot />
<!-- <RightAside /> -->
</div>
</template>
<script>
import MaryBanner from '@/components/marywood/MaryBanner.vue'
import MaryHead from '@/components/marywood/MaryHead.vue'
import Introduce from '@/components/marywood/Introduce.vue'
import Video from '@/components/marywood/Video.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, Introduce, Video }
}
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论