Просмотр исходного кода

更换前景人物序列帧图片,修复前景人物样式bug

任一存 3 лет назад
Родитель
Сommit
0b5decf30f
2 измененных файлов с 9 добавлено и 7 удалено
  1. BIN
      src/assets/people-near-serial-frame-400-600-60.png
  2. 9 7
      src/views/HomeView.vue

BIN
src/assets/people-near-serial-frame-400-600-60.png


+ 9 - 7
src/views/HomeView.vue

@@ -33,9 +33,9 @@
       }"
     >
       <img
-        class="peopleNearSerialFrames"
+        class="people-near-serial-frames"
         :class="peopleNearColorStatus"
-        src="@/assets/people-near-serial-frame.png"
+        src="@/assets/people-near-serial-frame-400-600-60.png"
         alt=""
         @dragstart.prevent
       >
@@ -63,6 +63,8 @@ export default {
   },
   data() {
     return {
+      tourState: 0, // 0: 第一次镜头右移;1:宝物展示;2:第二次镜头右移
+
       landscapePositionRight: '-50%',
       peopleFarPositionRight: '0px',
       peopleNearPositionRight: '-30%',
@@ -119,6 +121,7 @@ export default {
     onMouseMove(e) {
       if (this.isMouseDown) {
         if (this.lastMoveEventTimeStamp) {
+          // 更新speed
           const currentMoveSpeed = e.movementX / (e.timeStamp - this.lastMoveEventTimeStamp)
           this.moveSpeed = this.moveSpeed * 0.9 + currentMoveSpeed * 0.1
         }
@@ -194,17 +197,16 @@ export default {
   .people-near {
     position: absolute;
     bottom: 0;
-    width: 600px;
-    height: 800px;
-    transform: scale(calc(90vh / 800px));
+    height: 90vh;
+    width: calc(90vh * 400 / 600);
     overflow: hidden;
     > .hot-spot {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 15%;
+      top: 17%;
     }
-    > .peopleNearSerialFrames {
+    > .people-near-serial-frames {
       position: absolute;
       height: 100%;
       transition-property: left;