165 lines
3.1 KiB
Plaintext
165 lines
3.1 KiB
Plaintext
<template>
|
|
<view class="">
|
|
<view class="jump" @click="jump">
|
|
<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">下一步(1/2)</text>
|
|
</view>
|
|
<view class="target" :style="{left:screenWidth/4*3,top:screenHeight-68}">
|
|
<image src="/static/images/fabu.png" class="target-icon"></image>
|
|
<text class="target-text">我的</text>
|
|
</view>
|
|
<view :style="{left:screenWidth/4*3,top:screenHeight-130}">
|
|
<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;"></image>
|
|
</view>
|
|
<view class="tips-box" :style="{right:20,top:screenHeight-220}">
|
|
<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:screenWidth/4*3+15,top:screenHeight-120}" mode=""></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
screenHeight: 800,
|
|
screenWidth: 375,
|
|
isAct: false
|
|
}
|
|
},
|
|
methods: {
|
|
jump() {
|
|
uni.$emit('offSubnvue');
|
|
uni.setStorageSync("is_new_user", 0)
|
|
},
|
|
next() {
|
|
uni.$emit('offSubnvue');
|
|
}
|
|
},
|
|
onLoad() {
|
|
let that = this
|
|
const res = uni.getSystemInfo({
|
|
success: (res => {
|
|
this.screenHeight = res.screenHeight
|
|
this.screenWidth = res.screenWidth
|
|
})
|
|
});
|
|
setTimeout(() => {
|
|
that.isAct = true
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.act {
|
|
width: 462rpx;
|
|
}
|
|
|
|
.greenLine {
|
|
width: 35px;
|
|
height: 60px;
|
|
position: absolute;
|
|
}
|
|
</style> |