Skip to content

P
project-online-pc
提交 059db35e authored 作者: matian's avatar matian
浏览文件
操作

石溪底部和banner修改

上级 eb19c1d4
隐藏空白字符变更
内嵌 并排
正在显示 包含 103 行增加 和 117 行删除
components/home/Video.vue
浏览文件 @ 059db35e
<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-if="!isMobile" class="content" ref="target">
<!-- <ul class="video-list">
<li class="video-item" v-for="(item, index) in list" :key="index">
<div class="video-poster">
......@@ -27,17 +18,17 @@
<div class="swiper-slide" v-for="(item, index) in list" :key="index">
<div class="item-media">
<img :src="item.poster" />
<div
<!-- <div
class="video-play"
@click.stop="open(item)"
@mouseenter.stop="handleVideoMouseEnter"
@mousemove.stop="handleVideoMouseEnter"
></div>
></div> -->
</div>
<div class="item-text">
<!-- <div class="item-text">
<div class="item-text-tit">{{ item.title }}</div>
<div class="item-text-desc">{{ item.desc }}</div>
</div>
</div> -->
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
......@@ -46,40 +37,17 @@
<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 v-swiper:mySwiper="swiperOption1" 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>
......@@ -90,16 +58,22 @@ export default {
isShow: false,
list: [
{
title: '纽约大学石溪分校校长致辞',
desc: 'Address from the Prisident of SBU',
src: 'https://webapp-pub.ezijing.com/project/marywood-plus/video2.mp4',
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster1.png?v=2'
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster1.png'
},
{
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster2.png'
},
{
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster3.png'
},
{
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster4.png'
},
{
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster5.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?v=1'
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster6.png'
}
],
// 当前播放的视频
......@@ -108,13 +82,34 @@ export default {
showIndex: 0,
mouseCursor: 'pointer',
swiperOption: {
speed: 400,
autoplay: false,
delay: 3000,
loop: false,
autoplay: {
delay: 1000
},
speed: 1000,
loop: true,
height: 500,
slidesPerView: 'auto',
centeredSlides: true
slidesPerView: 2,
centeredSlides: true,
rewind: true,
disableOnInteraction: false,
on: {
slideChangeTransitionEnd: function() {
this.autoplay.start() //就加这个玩意儿
}
}
},
swiperOption1: {
loop: true,
height: 500,
slidesPerView: 1.3,
centeredSlides: true,
rewind: true
// disableOnInteraction: false,
// on: {
// slideChangeTransitionEnd: function() {
// this.autoplay.start() //就加这个玩意儿
// }
// }
}
}
},
......@@ -131,26 +126,26 @@ export default {
},
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 = ''
}
}
// 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() {
......@@ -250,7 +245,7 @@ export default {
left: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_play.png) no-repeat center center;
// 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;
......@@ -312,7 +307,7 @@ export default {
// .swiper-wrapper{
// }
.swiper-slide {
width: 1080px !important;
width: 560px !important;
position: relative;
display: flex;
align-items: center;
......@@ -369,15 +364,6 @@ export default {
.is-h5 {
margin-top: 0.56rem;
.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;
......@@ -398,29 +384,29 @@ export default {
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;
// &::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;
}
......@@ -448,9 +434,9 @@ export default {
.swiper-slide {
width: 3.2rem;
position: relative;
padding: 0 0.1rem;
// padding: 0 0.1rem;
.item-media {
width: 3rem;
width: 2.75rem;
position: relative;
img {
width: 100%;
......@@ -468,16 +454,16 @@ export default {
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);
}
// &: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;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论