<template>
<div class="authorization">
<div class="main">
<div class="login-logo">
<img :src="http://t.zoukankan.com/logo" alt="">
<div class="text-item">快乐论文</div>
</div>
</div>
<div class="outter">
<div class="main-footer">
<div class="txt-item-title">
微信收款验证成功，请按如下步骤操作：
</div>
<div class="txt-item-title">
请点击“领红包首页”，填写订单号获得返现
</div>
<v-touch tag="div" v-bind: v-on:tap="onTap">
确认登录
</v-touch>
<div @touchstart="gtouchstart(v)" @touchmove="gtouchmove()" @touchend="gtouchend(v)" class="hahah">12345</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'authorization',
data () {
return {
logo: require('./../assets/login_logo.jpg'),
redbug: false,
timeOutEvent: 0,
v:'test'
};
},
methods: {
onTap: function() {
this.redbug = !this.redbug;
let url = decodeURIComponent(location.href.split('?url=')[1]);
location.href = url;
},
//开始按
gtouchstart:function gtouchstart(item){
this.timeOutEvent = setTimeout(function(){
},500);//这里设置定时器，定义长按500毫秒触发长按事件，时间可以自己改，个人感觉500毫秒非常合适
return false;
},
//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gtouchend:function gtouchend(item){
clearTimeout(this.timeOutEvent);//清除定时器
if(this.timeOutEvent!=0){
//这里写要执行的内容（尤如onclick事件）
alert(123);
}
return false;
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
gtouchmove:function gtouchmove(){
clearTimeout(this.timeOutEvent);//清除定时器
this.timeOutEvent = 0;
},
//真正长按后应该执行的内容
longPress:function longPress(item){
this.timeOutEvent = 0;
//执行长按要执行的内容，如弹出菜单
alert(1223);
}
}
}
</script>
<style lang="scss">
$browser-default-font-size: 50px !default;
@function pxTorem($px) {
@return $px / $browser-default-font-size * 1rem;
}
$background:#FFFFFF;
#app {
background:$background;
}
.main {
background:$background;
font-size:pxTorem(16px);
100%;
height:pxTorem(178px);
}
.login-logo {
80%;
margin:0 auto;
box-sizing:border-box;
}
.login-logo img {
pxTorem(80px);
height:pxTorem(80px);
margin:0 auto;
margin-left:50%;
position:relative;
left:pxTorem(-40px);
top:pxTorem(35px);
}
.text-item {
margin-left:50%;
position:relative;
left:pxTorem(-40px);
top:pxTorem(48px);
color:black;
font-size:pxTorem(20px);
}
.outter {
100%;
height:pxTorem(424px);
background:$background;
}
.main-footer {
85%;
height:100%;
border-top:pxTorem(0.9px) solid #E7E7E7;
margin:0 auto;
}
.main-footer div:first-child {
font-size:pxTorem(16px);
margin-top:pxTorem(36px);
color:black;
}
.main-footer div:nth-child(2) {
margin-top:pxTorem(20px);
font-size:pxTorem(14px);
color:grey;
}
.main-footer div:nth-child(2)::before {
content:'●';
color:#858585;
font-size:pxTorem(10px);
padding-right:pxTorem(10px);
}
.f-primary-btn {
100%;
background:#07BE02;
margin:0 auto;
margin-top:pxTorem(33px);
text-align:center;
height:pxTorem(40px);
border-radius:pxTorem(5px);
line-height:pxTorem(40px);
color:white;
font-size:pxTorem(20px);
}
.red {
background:#039702;
color:#51B441;
}
.hahah {
pxTorem(100px);
height:pxTorem(100px);
background:red;
}
</style>