179 lines
3.5 KiB
Plaintext
179 lines
3.5 KiB
Plaintext
<template>
|
|
<view class="">
|
|
<view class="jump" @click="next">
|
|
<text class="font">跳过</text>
|
|
</view>
|
|
<view class="next-btn center" :style="{ left:screenWidth/2,top:(screenHeight-96)}">
|
|
<text class="next-btn-text font" style="line-height: 76rpx;" @click="next">我知道了</text>
|
|
</view>
|
|
<view class="target" :style="{left:left-20,top:top-13.5}">
|
|
<image src="http://lihai001.oss-cn-chengdu.aliyuncs.com/def/6202d269b6163b9ec7a4383559fc67a8.png"
|
|
class="target-icon"></image>
|
|
<text class="target-text">商家入驻</text>
|
|
</view>
|
|
<view :style="{left:left-20+'px',top:top-70+'px'}" class="trans1">
|
|
<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;"></image>
|
|
</view>
|
|
<view class="tips-box" :style="{left:left-13.5,top:top-154}">
|
|
<view class="tips" style="position: absolute;padding-left: 20px;">
|
|
<view class="tras" :class="{act:isAct}">
|
|
<text style="font-size: 28rpx;line-height: 100rpx;color: white;">点击我的页面，进行商户入驻</text>
|
|
</view>
|
|
</view>
|
|
<image src="/static/images/starpng.png" class="start" mode="">
|
|
</image>
|
|
</view>
|
|
<image src="/static/images/greenLine.png" class="greenLine" :style="{left:left-3.5,top:top-70}" mode="">
|
|
</image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
screenHeight: 0,
|
|
screenWidth: 0,
|
|
isAct: false,
|
|
left: -100,
|
|
top: -100,
|
|
}
|
|
},
|
|
methods: {
|
|
next() {
|
|
uni.$emit('offuserSubnvue');
|
|
uni.setStorageSync("newStore", false)
|
|
}
|
|
},
|
|
onLoad() {
|
|
let that = this
|
|
uni.$on('openUserSubnvue', (data) => {
|
|
console.log('data')
|
|
console.log(data)
|
|
this.left = JSON.parse(data).left
|
|
this.top = JSON.parse(data).top
|
|
console.log(this.left, this.top)
|
|
})
|
|
const res = uni.getSystemInfo({
|
|
success: (res => {
|
|
this.screenHeight = res.screenHeight
|
|
this.screenWidth = res.screenWidth
|
|
|
|
})
|
|
});
|
|
setTimeout(() => {
|
|
that.isAct = true
|
|
}, 500)
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.jump {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
top: 80rpx;
|
|
border: 1px solid white;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.font {
|
|
font-size: 28rpx;
|
|
color: white;
|
|
lines: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.center {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.next-btn {
|
|
position: absolute;
|
|
width: 240rpx;
|
|
height: 76rpx;
|
|
border: 1px solid white;
|
|
border-radius: 38rpx;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
.target {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
background-color: white;
|
|
border-radius: 136rpx;
|
|
}
|
|
|
|
.target-icon {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
position: absolute;
|
|
left: 68rpx;
|
|
transform: translate(-50%, -50%);
|
|
top: 68rpx;
|
|
}
|
|
|
|
.target-text {
|
|
font-size: 20rpx;
|
|
position: absolute;
|
|
left: 68rpx;
|
|
transform: translate(-50%, 0);
|
|
top: 100rpx;
|
|
}
|
|
|
|
.pointer {
|
|
position: absolute;
|
|
}
|
|
|
|
.tips-box {
|
|
width: 462rpx;
|
|
height: 178rpx;
|
|
position: absolute;
|
|
padding-top: 72rpx;
|
|
position: absolute;
|
|
}
|
|
|
|
.start {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 20px;
|
|
}
|
|
|
|
.tips {
|
|
width: 462rpx;
|
|
height: 106rpx;
|
|
background-color: #5BE157;
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
|
|
.tras {
|
|
width: 0px;
|
|
transition-property: width;
|
|
transition-duration: 3s;
|
|
transition-delay: 0.1s;
|
|
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
|
|
}
|
|
|
|
.trans1 {
|
|
/* transition-property: left, top;
|
|
transition-duration: 3s;
|
|
transition-delay: 0.1s;
|
|
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); */
|
|
}
|
|
|
|
.act {
|
|
width: 462rpx;
|
|
}
|
|
|
|
.greenLine {
|
|
width: 35px;
|
|
height: 60px;
|
|
position: absolute;
|
|
}
|
|
</style> |