1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <template>
<div class="detail">
<!-- 头部 -->
<app-header></app-header>
<app-person></app-person>
<!-- 报障内容 -->
<app-content></app-content>
<!-- 处理进度 -->
<app-progress></app-progress>
<!-- 底部导航栏 -->
<app-nav></app-nav>
<!-- 遮罩层 -->
<div class="home" id="moveDiv" @click="gohome" @touchstart="down" @touchmove="move" @touchend="end">
<img src="../../../../Img/img/home.png" alt="">
</div>
</div>
</template>
<script>
import AppHeader from "./vue/header.vue";
import AppPerson from "./vue/person.vue";
import AppContent from "./vue/content.vue";
import AppProgress from "./vue/progress.vue";
import AppNav from "./vue/nav.vue";
// import AppMask from './vue/mask.vue';
export default {
data() {
return {
flags: false,
position: {
x: 0,
y: 0
},
nx: '',
ny: '',
dx: '',
dy: '',
xPum: '',
yPum: '',
};
},
methods: {
gohome:function(){
//跳转home
this.$router.push({
name:'index',
// query:{engineerNum:this.engineerNum}
})
},
down(){
console.log('down');
this.flags = true;
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = moveDiv.offsetLeft;
this.dy = moveDiv.offsetTop;
},
preHandler:function(e){
e.preventDefault();
},
move(){
console.log('move');
if(this.flags){
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx+this.nx;
this.yPum = this.dy+this.ny;
moveDiv.style.left = this.xPum+"px";
moveDiv.style.top = this.yPum +"px";
//阻止页面的滑动默认事件
document.addEventListener("touchmove",this.preHandler,false);
}
},
end(){
console.log('end');
//alert(e3);
this.flags = false;
document.removeEventListener('touchmove', this.preHandler, false);
},
},
components: {
AppHeader,
AppPerson,
AppContent,
AppProgress,
AppNav
// AppMask
}
};
</script>
<style scoped lang="less">
.detail {
position: relative;
min-height:100%;
}
.home{
position:fixed;
right:.2rem;
bottom:15%;
line-height:1rem;
width:.98rem;
height:.98rem;
img{
width:.98rem;
height:.98rem;
}
}
</style>
|
