Skip to content

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

Merge remote-tracking branch 'origin/marywood-plus' into marywood-plus

上级 db62a5b0 6864684e
显示空白字符变更
内嵌 并排
正在显示 包含 185 行增加 和 34 行删除
components/home/Video.vue
浏览文件 @ c4aaab05
<template> <template>
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div class="video-wrapper" :class="className">
<div class="banner-content"> <div class="content">
<img class="img" src="https://webapp-pub.ezijing.com/project/marywood/video.png" /> <ul class="video-list">
<img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/video_logo.png" @click="open" /> <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)" 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 class="video-next" @click="handleNext"></div>
</div>
<video <video
v-if="isShow === true" v-if="isShow === true"
class="video" class="video"
src="https://webapp-pub.ezijing.com/project/marywood/marywood.mp4" :src="playVideo.src"
controls="controls" controls="controls"
preload="auto" preload="auto"
autoplay="autoplay" autoplay="autoplay"
...@@ -17,23 +29,50 @@ ...@@ -17,23 +29,50 @@
></video> ></video>
<div class="overlay" v-if="isShow === true" @click="close"></div> <div class="overlay" v-if="isShow === true" @click="close"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
isShow: false 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_poster.png'
},
{
title: '玛丽伍德介绍',
desc: 'The Introduction of Marywood Univeristy',
src: 'https://webapp-pub.ezijing.com/project/marywood/marywood.mp4',
poster: 'https://webapp-pub.ezijing.com/project/marywood-plus/video_poster.png'
}
],
// 当前播放的视频
playVideo: {}
} }
}, },
computed: { computed: {
isMobile() { isMobile() {
return this.$store.state.isMobile return this.$store.state.isMobile
},
className() {
return {
'is-h5': this.isMobile,
'is-pc': !this.isMobile
}
} }
}, },
methods: { methods: {
open() { handleNext() {
// 第一个视频放到最后
const deleteVideo = this.list.splice(0, 1)
this.list = this.list.concat(deleteVideo)
},
open(item) {
this.playVideo = item
this.isShow = true this.isShow = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.video.play() this.$refs.video.play()
...@@ -52,31 +91,94 @@ export default { ...@@ -52,31 +91,94 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .is-pc {
.overlay { margin-top: 56px;
position: fixed; .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;
}
.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; left: 0;
top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 1999; top: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.3);
z-index: 1;
} }
}
.banner-content { .video-play {
position: relative;
width: 100%;
margin: 0 auto;
margin-top: 56px;
.img1 {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 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%); transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
} }
.img { .video-content {
width: 100%; width: 490px;
height: 100%; 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-next {
position: absolute;
right: -40px;
top: 50%;
width: 79px;
height: 79px;
background: url(https://webapp-pub.ezijing.com/project/marywood-plus/icon_next.png) no-repeat center center;
background-size: contain;
transform: translateY(-50%);
cursor: pointer;
z-index: 10;
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1999;
background: rgba(0, 0, 0, 0.5);
}
.video { .video {
width: 80%; width: 80%;
position: fixed; position: fixed;
...@@ -85,7 +187,6 @@ export default { ...@@ -85,7 +187,6 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 10000; z-index: 10000;
} }
}
} }
.is-h5 { .is-h5 {
.overlay { .overlay {
...@@ -97,21 +198,61 @@ export default { ...@@ -97,21 +198,61 @@ export default {
z-index: 1999; z-index: 1999;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.banner-content { .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; position: relative;
width: 3.25rem;
height: 2.04rem;
img {
width: 100%; width: 100%;
margin: 0 auto; height: 100%;
.img1 { object-fit: cover;
width: 0.42rem; }
height: 0.42rem; &::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; position: absolute;
top: 50%; top: 50%;
left: 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%); transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
} }
.img { .video-content {
width: 100%; padding: 0.1rem 0;
height: 100%; }
.video-title {
text-align: center;
font-size: 0.12rem;
color: #484848;
}
.video-desc {
text-align: center;
font-size: 0.12rem;
color: #484848;
} }
.video { .video {
width: 100%; width: 100%;
...@@ -120,6 +261,5 @@ export default { ...@@ -120,6 +261,5 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
z-index: 10000; z-index: 10000;
} }
}
} }
</style> </style>
pages/school/school3.vue
浏览文件 @ c4aaab05
...@@ -81,6 +81,10 @@ ...@@ -81,6 +81,10 @@
<p>M.S. in Management Information Systems</p> <p>M.S. in Management Information Systems</p>
</div> </div>
</div> </div>
<div style="padding: 40px">
<img v-if="!courseSetTab" src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-curriculum.png" />
<img v-else src="https://webapp-pub.ezijing.com/project/marywood-plus/pc-curriculum2.png" />
</div>
</div> </div>
<div class="content_tit"> <div class="content_tit">
<div class="line"></div> <div class="line"></div>
...@@ -141,13 +145,20 @@ ...@@ -141,13 +145,20 @@
<p>M.S. in Management Information Systems</p> <p>M.S. in Management Information Systems</p>
</div> </div>
</div> </div>
<div style="padding: 0.35rem 0.1rem"> <div v-if="!courseSetTab" style="padding: 0.35rem 0.1rem">
<img src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum1.png" /> <img src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum1.png" />
<img <img
src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum2.png" src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum2.png"
style="margin-top: 0.43rem" style="margin-top: 0.43rem"
/> />
</div> </div>
<div v-else style="padding: 0.35rem 0.1rem">
<img src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum3.png" />
<img
src="https://webapp-pub.ezijing.com/project/marywood-plus/h5-curriculum4.png"
style="margin-top: 0.43rem"
/>
</div>
</div> </div>
<div class="h5-title m-t-10">校园风光</div> <div class="h5-title m-t-10">校园风光</div>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论