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

components/home/Video.vue

 <template>
-  <div :class="isMobile ? 'is-h5' : 'is-pc'">
-    <div class="banner-content">
-      <img class="img" src="https://webapp-pub.ezijing.com/project/marywood/video.png" />
-      <img class="img1" src="https://webapp-pub.ezijing.com/project/marywood/video_logo.png" @click="open" />
+  <div class="video-wrapper" :class="className">
+    <div class="content">
+      <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)" 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
       v-if="isShow === true"
       class="video"
-        src="https://webapp-pub.ezijing.com/project/marywood/marywood.mp4"
+      :src="playVideo.src"
       controls="controls"
       preload="auto"
       autoplay="autoplay"
@@ -17,23 +29,50 @@
     ></video>
     <div class="overlay" v-if="isShow === true" @click="close"></div>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
   data() {
     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: {
     isMobile() {
       return this.$store.state.isMobile
+    },
+    className() {
+      return {
+        'is-h5': this.isMobile,
+        'is-pc': !this.isMobile
+      }
     }
   },
   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.$nextTick(() => {
         this.$refs.video.play()
@@ -52,31 +91,94 @@ export default {
 
 <style lang="scss" scoped>
 .is-pc {
-  .overlay {
-    position: fixed;
+  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;
+  }
+  .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;
-    top: 0;
       right: 0;
       bottom: 0;
-    z-index: 1999;
-    background: rgba(0, 0, 0, 0.5);
+      top: 0;
+      background: rgba(0, 0, 0, 0.3);
+      z-index: 1;
     }
-
-  .banner-content {
-    position: relative;
-    width: 100%;
-    margin: 0 auto;
-    margin-top: 56px;
-    .img1 {
+  }
+  .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;
   }
-    .img {
-      width: 100%;
-      height: 100%;
+  .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-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 {
     width: 80%;
     position: fixed;
@@ -85,7 +187,6 @@ export default {
     transform: translate(-50%, -50%);
     z-index: 10000;
   }
-  }
 }
 .is-h5 {
   .overlay {
@@ -97,21 +198,61 @@ export default {
     z-index: 1999;
     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;
+    width: 3.25rem;
+    height: 2.04rem;
+    img {
       width: 100%;
-    margin: 0 auto;
-    .img1 {
-      width: 0.42rem;
-      height: 0.42rem;
+      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;
   }
-    .img {
-      width: 100%;
-      height: 100%;
+  .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%;
@@ -120,6 +261,5 @@ export default {
     transform: translateY(-50%);
     z-index: 10000;
   }
-  }
 }
 </style>

pages/school/school3.vue

@@ -81,6 +81,10 @@
             <p>M.S. in Management Information Systems</p>
           </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 class="content_tit">
         <div class="line"></div>
@@ -141,13 +145,20 @@
               <p>M.S. in Management Information Systems</p>
             </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-curriculum2.png"
               style="margin-top: 0.43rem"
             />
           </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 class="h5-title m-t-10">校园风光</div>
         <div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">