Kaynağa Gözat

新增一些操作提示

任一存 2 yıl önce
ebeveyn
işleme
2205886f08
3 değiştirilmiş dosya ile 80 ekleme ve 9 silme
  1. 21 9
      src/exhibitionData.js
  2. 4 0
      src/views/Chart.vue
  3. 55 0
      src/views/TreeSelection.vue

+ 21 - 9
src/exhibitionData.js

@@ -305,7 +305,7 @@ export default {
       time: '2015年5月18日—6月24日',
       arrowDown: false,
       id: "a",
-      imageNumber: 0,
+      imageNumber: 9,
       video: [
         {
           cover: 'video.jpg',
@@ -321,7 +321,7 @@ export default {
       time: '2017年5月16日—8月16日',
       arrowDown: false,
       id: "b",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video9.jpg',
@@ -339,6 +339,10 @@ export default {
       id: "c",
       imageNumber: 5,
       video: [
+        {
+          cover: '4.jpg',
+          video: '呼吸.mp4',
+        }
       ],
       link: [],
     },
@@ -391,7 +395,7 @@ export default {
       time: '2014年5月18日—10月15日',
       arrowDown: false,
       id: "f",
-      imageNumber: 0,
+      imageNumber: 5,
       video: [
         {
           cover: 'video.jpg',
@@ -412,6 +416,10 @@ export default {
       id: "oa",
       imageNumber: 16,
       video: [
+        {
+          cover: '4.jpg',
+          video: '南腔北调.mp4',
+        }
       ],
       link: [],
     },
@@ -423,7 +431,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "o",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video12.jpg',
@@ -440,7 +448,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "p",
-      imageNumber: 0,
+      imageNumber: 9,
       video: [
         {
           cover: 'video4-1.jpg',
@@ -522,7 +530,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "t",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video8.jpg',
@@ -539,7 +547,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "u",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video6.jpg',
@@ -600,7 +608,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "x",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video11.jpg',
@@ -639,7 +647,7 @@ export default {
       arrowDown: false,
       theme: "green",
       id: "z",
-      imageNumber: 0,
+      imageNumber: 8,
       video: [
         {
           cover: 'video10.jpg',
@@ -658,6 +666,10 @@ export default {
       id: "za",
       imageNumber: 9,
       video: [
+        {
+          cover: 'cover.jpg',
+          video: '回家过年.mp4',
+        }
       ],
       link: [],
     },

+ 4 - 0
src/views/Chart.vue

@@ -164,8 +164,12 @@
         />
       </div>
     </figure>
+    <SlideTip
+      style="bottom: 17rem;"
+    />
     <div
       ref="hammer-target"
+      style="z-index: 1;"
       class="slide-to-nav-mask"
     />
   </div>

+ 55 - 0
src/views/TreeSelection.vue

@@ -21,6 +21,24 @@
           >
         </div>
       </div>
+      <img
+        class="button-tip button-tip-1"
+        src="@/assets/image/gest-tap.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="button-tip button-tip-2"
+        src="@/assets/image/gest-tap.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="button-tip button-tip-3"
+        src="@/assets/image/gest-tap.png"
+        alt=""
+        draggable="false"
+      >
     </div>
     <div
       class="tree-swiper"
@@ -78,6 +96,7 @@
           :text="item.title"
           :theme="item.theme"
           :link-to="`/ExhibitionDetailAnimation?exhibitionType=theme&exhibitionId=${item.id}`"
+          draggable="false"
         />
       </div>
       <div
@@ -109,6 +128,7 @@
           :theme="item.theme"
           :class="item.id"
           :link-to="`/ExhibitionDetailAnimation${item.id === 'aa' ? 'ForJiaguo' : ''}?exhibitionType=wuyiba&exhibitionId=${item.id}`"
+          draggable="false"
         />
       </div>
       <div
@@ -137,9 +157,13 @@
           :theme="item.theme"
           :class="item.id"
           :link-to="`/ExhibitionDetailAnimation?exhibitionType=traditionModern&exhibitionId=${item.id}`"
+          draggable="false"
         />
       </div>
     </div>
+    <SlideTip
+      style="z-index: 1;"
+    />
     <nav>
       <button
         class="theme"
@@ -346,6 +370,22 @@ export default {
         }
       }
     }
+    .button-tip {
+      animation: twinkle 2s infinite;
+      position: absolute;
+      bottom: 0.5rem;
+      left: 50%;
+      height: 2.48rem;
+    }
+    .button-tip-1 {
+      transform: translateX(calc(-50% - 6rem));
+    }
+    .button-tip-2 {
+      transform: translateX(-50%);
+    }
+    .button-tip-3 {
+      transform: translateX(calc(-50% + 6rem));
+    }
   }
   .tree-swiper {
     position: absolute;
@@ -597,4 +637,19 @@ export default {
     transform: translateX(-50%);
   }
 }
+
+@keyframes twinkle {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
 </style>