|
@@ -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;
|