Skip to content

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

石溪底部和banner修改

上级 eb19c1d4
显示空白字符变更
内嵌 并排
正在显示 包含 103 行增加 和 117 行删除
components/home/Video.vue
浏览文件 @ 059db35e
<template> <template>
<div class="video-wrapper" :class="className"> <div class="video-wrapper" :class="className">
<div <div v-if="!isMobile" class="content" ref="target">
v-if="!isMobile"
class="content"
@mouseenter="handleMouseEnter"
@mouseleave="showType = ''"
@mousemove="handleMouseEnter"
@click="handleClick"
ref="target"
:style="{ cursor: mouseCursor }"
>
<!-- <ul class="video-list"> <!-- <ul class="video-list">
<li class="video-item" v-for="(item, index) in list" :key="index"> <li class="video-item" v-for="(item, index) in list" :key="index">
<div class="video-poster"> <div class="video-poster">
...@@ -27,17 +18,17 @@ ...@@ -27,17 +18,17 @@
<div class="swiper-slide" v-for="(item, index) in list" :key="index"> <div class="swiper-slide" v-for="(item, index) in list" :key="index">
<div class="item-media"> <div class="item-media">
<img :src="item.poster" /> <img :src="item.poster" />
<div <!-- <div
class="video-play" class="video-play"
@click.stop="open(item)" @click.stop="open(item)"
@mouseenter.stop="handleVideoMouseEnter" @mouseenter.stop="handleVideoMouseEnter"
@mousemove.stop="handleVideoMouseEnter" @mousemove.stop="handleVideoMouseEnter"
></div> ></div> -->
</div> </div>
<div class="item-text"> <!-- <div class="item-text">
<div class="item-text-tit">{{ item.title }}</div> <div class="item-text-tit">{{ item.title }}</div>
<div class="item-text-desc">{{ item.desc }}</div> <div class="item-text-desc">{{ item.desc }}</div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="swiper-pagination swiper-pagination-bullets"></div> <div class="swiper-pagination swiper-pagination-bullets"></div>
...@@ -46,40 +37,17 @@ ...@@ -46,40 +37,17 @@
<div v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> --> <div v-if="showType === 'right' && showIndex < list.length - 1" class="video-btn video-next" @click="handleNext"></div> -->
</div> </div>
<div v-else> <div v-else>
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption1" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in list" :key="index"> <div class="swiper-slide" v-for="(item, index) in list" :key="index">
<div class="item-media"> <div class="item-media">
<img :src="item.poster" /> <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>
</div> </div>
<div class="swiper-pagination swiper-pagination-bullets"></div> <div class="swiper-pagination swiper-pagination-bullets"></div>
</div> </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> </div>
</template> </template>
...@@ -90,16 +58,22 @@ export default { ...@@ -90,16 +58,22 @@ export default {
isShow: false, isShow: false,
list: [ list: [
{ {
title: '纽约大学石溪分校校长致辞', poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster1.png'
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'
}, },
{ {
title: '纽约大学石溪分校介绍', poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster2.png'
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_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'
},
{
poster: 'https://webapp-pub.ezijing.com/project_online_pc/sub_plus/video_poster6.png'
} }
], ],
// 当前播放的视频 // 当前播放的视频
...@@ -108,13 +82,34 @@ export default { ...@@ -108,13 +82,34 @@ export default {
showIndex: 0, showIndex: 0,
mouseCursor: 'pointer', mouseCursor: 'pointer',
swiperOption: { swiperOption: {
speed: 400, autoplay: {
autoplay: false, delay: 1000
delay: 3000, },
loop: false, speed: 1000,
loop: true,
height: 500,
slidesPerView: 2,
centeredSlides: true,
rewind: true,
disableOnInteraction: false,
on: {
slideChangeTransitionEnd: function() {
this.autoplay.start() //就加这个玩意儿
}
}
},
swiperOption1: {
loop: true,
height: 500, height: 500,
slidesPerView: 'auto', slidesPerView: 1.3,
centeredSlides: true centeredSlides: true,
rewind: true
// disableOnInteraction: false,
// on: {
// slideChangeTransitionEnd: function() {
// this.autoplay.start() //就加这个玩意儿
// }
// }
} }
} }
}, },
...@@ -131,26 +126,26 @@ export default { ...@@ -131,26 +126,26 @@ export default {
}, },
methods: { methods: {
handleMouseEnter(e) { handleMouseEnter(e) {
const target = this.$refs.target.getBoundingClientRect() // const target = this.$refs.target.getBoundingClientRect()
if (e.clientX - target.left < (target.right - target.left) / 2) { // if (e.clientX - target.left < (target.right - target.left) / 2) {
if (this.showIndex > 0) { // if (this.showIndex > 0) {
this.mouseCursor = // this.mouseCursor = ''
'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-left-dark.svg) 30 30, e-resize' // // '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' // this.showType = 'left'
} else { // } else {
this.mouseCursor = 'default' // this.mouseCursor = 'default'
this.showType = '' // this.showType = ''
} // }
} else { // } else {
if (this.showIndex < this.list.length - 1) { // if (this.showIndex < this.list.length - 1) {
this.mouseCursor = // this.mouseCursor = ''
'url(https://www.harvard.edu/wp-content/themes/core/assets/img/theme/featured-stories/arrow-right-dark.svg) 30 30, e-resize' // // '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' // this.showType = 'right'
} else { // } else {
this.mouseCursor = 'default' // this.mouseCursor = 'default'
this.showType = '' // this.showType = ''
} // }
} // }
}, },
handleVideoMouseEnter() {}, handleVideoMouseEnter() {},
handleClick() { handleClick() {
...@@ -250,7 +245,7 @@ export default { ...@@ -250,7 +245,7 @@ export default {
left: 50%; left: 50%;
width: 79px; width: 79px;
height: 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; background-size: contain;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
cursor: pointer; cursor: pointer;
...@@ -312,7 +307,7 @@ export default { ...@@ -312,7 +307,7 @@ export default {
// .swiper-wrapper{ // .swiper-wrapper{
// } // }
.swiper-slide { .swiper-slide {
width: 1080px !important; width: 560px !important;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -369,15 +364,6 @@ export default { ...@@ -369,15 +364,6 @@ export default {
.is-h5 { .is-h5 {
margin-top: 0.56rem; 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 { .video-list {
display: flex; display: flex;
padding: 0 0.3rem; padding: 0 0.3rem;
...@@ -398,29 +384,29 @@ export default { ...@@ -398,29 +384,29 @@ export default {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
&::after { // &::after {
content: ''; // content: '';
position: absolute; // position: absolute;
left: 0; // left: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
top: 0; // top: 0;
background: rgba(0, 0, 0, 0.3); // background: rgba(0, 0, 0, 0.3);
z-index: 1; // 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-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 { .video-content {
padding: 0.1rem 0; padding: 0.1rem 0;
} }
...@@ -448,9 +434,9 @@ export default { ...@@ -448,9 +434,9 @@ export default {
.swiper-slide { .swiper-slide {
width: 3.2rem; width: 3.2rem;
position: relative; position: relative;
padding: 0 0.1rem; // padding: 0 0.1rem;
.item-media { .item-media {
width: 3rem; width: 2.75rem;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
...@@ -468,16 +454,16 @@ export default { ...@@ -468,16 +454,16 @@ export default {
cursor: pointer; cursor: pointer;
z-index: 2200; z-index: 2200;
} }
&:after { // &:after {
content: ''; // content: '';
display: block; // display: block;
width: 100%; // width: 100%;
height: 100%; // height: 100%;
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
background: rgba(0, 0, 0, 0.7); // background: rgba(0, 0, 0, 0.7);
} // }
} }
.item-text { .item-text {
flex: 1; flex: 1;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论