Merge branch 'master' into local-deploy

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 1234",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/exhibitionData.js

@@ -187,7 +187,7 @@ export default {
       imageNumber: 0,
       video: [
         {
-          cover: 'video9.jgp',
+          cover: 'video9.jpg',
           video: '缀白裘展览视频.mp4'
         }
       ]

src/main.js

@@ -1,4 +1,4 @@
-console.log('v0.12')
+console.log('v1.1')
 
 import Vue from 'vue'
 import App from './App.vue'

src/views/End.vue

@@ -8,18 +8,6 @@
       autoplay
       playsinline
     />
-    <!-- @canplaythrough="onCanPlayThrough"
-      @play="onPlay" -->
-    <!-- <button
-      v-if="showPlayBtn"
-      class="play-btn"
-      @click="onClickPlay"
-    >
-      <img
-        :src="require('@/assets/image/play.png')"
-        alt=""
-      >
-    </button> -->
   </div>
 </template>
 
@@ -55,20 +43,12 @@ export default {
   height: 100%;
   width: 100%;
   background: #000;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  // .video不能通过绝对定位+transform的方式实现居中，否则在ios 15.0上会只有声音没有画面！
   .video {
-    position: absolute;
     width: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-  .play-btn {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    background: transparent;
-    border: none;
-    border-radius: 50%;
   }
 }
 </style>

src/views/ExhibitionDetail.vue

@@ -5,11 +5,14 @@
       @click.native="onClickPageBack"
     />
     <div
-      v-if="showMask"
+      v-show="showMask"
       class="mask"
-      @click.self="onClickClose"
+      @click.self="onClickCloseMask"
     >
-      <div class="video-wrapper">
+      <div
+        v-show="videoSrc"
+        class="video-wrapper"
+      >
         <video
           :src="videoSrc"
           controls
@@ -20,7 +23,23 @@
           src="@/assets/image/close.png"
           alt=""
           class="close"
-          @click="onClickClose"
+          @click="onClickCloseMask"
+        >
+      </div>
+      <div
+        v-show="imageSrc"
+        class="image-wrapper"
+      >
+        <img
+          class="large-image"
+          :src="imageSrc"
+          alt=""
+        >
+        <img
+          src="@/assets/image/close.png"
+          alt=""
+          class="close"
+          @click="onClickCloseMask"
         >
       </div>
     </div>
@@ -94,6 +113,7 @@ export default {
     return {
       showMask: false,
       videoSrc: null,
+      imageSrc: null,
       linkSrc: null,
 
       showIframe: false,
@@ -159,7 +179,7 @@ export default {
     onClickPageBack() {
       this.$router.go(-2)
     },
-    onClickClose() {
+    onClickCloseMask() {
       this.showMask = false
       this.videoSrc = null
     },
@@ -175,11 +195,8 @@ export default {
         this.showIframe = true
         this.linkSrc = value.linkSrc
       } else if (value.type === 'image') {
-        e.path[0].requestFullscreen()
-        e.path[0].addEventListener('click', function me() {
-          document.exitFullscreen()
-          e.path[0].removeEventListener('click', me)
-        })
+        this.showMask = true
+        this.imageSrc = value.src
       }
     },
     onClickTopExhibitionImage(e) {
@@ -191,7 +208,6 @@ export default {
 
 <style lang="less" scoped>
 .exhibition-list-page {
-  width: calc(100% - 1rem);
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
@@ -214,13 +230,29 @@ export default {
         position: absolute;
         top: 0.31rem;
         right: 0.31rem;
-        height: 0.94rem;
-        width: 0.94rem;
+        height: 1.5rem;
+        width: 1.5rem;
       }
       video {
         width: 100%;
       }
     }
+    .image-wrapper {
+      position: relative;
+      .close {
+        position: absolute;
+        top: 0.31rem;
+        right: 0.31rem;
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+      img {
+        width: 100%;
+      }
+    }
+    .large-image {
+      width: 100%;
+    }
     h2 {
       font-size: 0.91rem;
       font-family: Microsoft YaHei;