引导页面bug修复
This commit is contained in:
parent
ec548c021c
commit
2792269537
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<button @click="openDiver">anniu</button>
|
||||
<view class="content-top">
|
||||
<view class="content-tops">
|
||||
<view class="content-top_img" v-if="Object.keys(userInfoData).length>0">
|
||||
|
|
@ -855,7 +856,7 @@
|
|||
this.$u.sleep(5000).then(() => {
|
||||
this.loadEndFlag = true;
|
||||
});
|
||||
uni.$once('diverIndexSubEmit', () => {
|
||||
uni.$on('diverIndexSubEmit', () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/product/list/index'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<template>
|
||||
<view class="" style="width: 750rpx;height: 100%;">
|
||||
<view class="jump" @click="jump">
|
||||
<text class="font">跳过</text>
|
||||
</view>
|
||||
<view class="target" :style="{left:(left-9)+'px',top:(top-9)+'px'}">
|
||||
<image src="/static/images/index7.png" class="imgs"></image>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 462rpx;height: 106rpx;">
|
||||
<view class="tras" :class="{'act':isActive}">
|
||||
<text class="font">点击商品管理，发布商品</text>
|
||||
</view>
|
||||
<image src="/static/images/bg2.png" style="width: 762rpx;height: 106rpx;z-index: -1;"></image>
|
||||
<view class="" class="pointe" :style="{ left:(left-10)+'px',top:(top)+'px'}">
|
||||
<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
|
||||
</view>
|
||||
<view class="tips" :style="{ left:left+'px',top:(top-200)+'px'}">
|
||||
<view class="tras" :class="{act:isActive}">
|
||||
<text class="font" style="line-height: 106rpx;">点击商品管理，发布商品</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center" :style="{left:(left+35)+'px', top:(top-60)+'px'}">
|
||||
<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="next-btn">
|
||||
<text class="next-btn-text font" @click="next">下一步(3/4){{isActive}}</text>
|
||||
<text class="next-btn-text font" @click="next">下一步(3/4){{isActive}} </text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -24,14 +29,20 @@
|
|||
return {
|
||||
isActive: false,
|
||||
left: 33,
|
||||
top: 459.54547119140625,
|
||||
top: 0,
|
||||
subNVue: null,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump() {
|
||||
|
||||
this.subNVue.hide('zoom-in', 300, )
|
||||
|
||||
},
|
||||
next() {
|
||||
this.subNVue = uni.getSubNVueById('concat')
|
||||
this.subNVue.hide('zoom-in', 300, )
|
||||
setTimeout(() => {
|
||||
uni.$emit('diverIndexSubEmit');
|
||||
|
|
@ -42,20 +53,19 @@
|
|||
onLoad() {
|
||||
this.subNVue = uni.getSubNVueById('concat')
|
||||
let that = this
|
||||
uni.$once('diverIndexEmit', (data) => {
|
||||
uni.$on('diverIndexEmit', (data) => {
|
||||
console.log('data', data)
|
||||
// that.left = data.left
|
||||
// that.top = data.top
|
||||
that.left = data.left
|
||||
that.top = data.top
|
||||
})
|
||||
setTimeout(() => {
|
||||
that.isActive = true
|
||||
}, 500)
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 定义动画效果 */
|
||||
.target {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
|
|
@ -124,6 +134,96 @@
|
|||
}
|
||||
|
||||
|
||||
.next-btn {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
left: 375rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 240rpx;
|
||||
height: 76rpx;
|
||||
border: 1px solid white;
|
||||
border-radius: 38rpx;
|
||||
}
|
||||
|
||||
.next-btn-text {
|
||||
line-height: 76rpx;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.jump {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
border: 1px solid white;
|
||||
padding: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 462rpx;
|
||||
height: 106rpx;
|
||||
background-color: #5BE157;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
left: 375rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
width: 136rpx;
|
||||
height: 136rpx;
|
||||
background-color: white;
|
||||
border-radius: 136rpx;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
position: absolute;
|
||||
left: 68rpx;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 68rpx;
|
||||
}
|
||||
|
||||
.te {
|
||||
font-size: 20rpx;
|
||||
position: absolute;
|
||||
left: 68rpx;
|
||||
transform: translate(-50%, 0);
|
||||
top: 100rpx;
|
||||
}
|
||||
|
||||
.pointe {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.tras {
|
||||
padding-left: 20rpx;
|
||||
position: absolute;
|
||||
z-index: 999 !important;
|
||||
width: 20px;
|
||||
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;
|
||||
}
|
||||
|
||||
.font {
|
||||
font-size: 28rpx;
|
||||
color: white;
|
||||
lines: 1;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,26 @@
|
|||
<template>
|
||||
<view class="" style="width: 750rpx;height: 100%;">
|
||||
<view class="jump" @click="jump">
|
||||
<text class="font">跳过</text>
|
||||
</view>
|
||||
<view class="target" :style="{left:left+'px',top:top+'px'}" v-if="top">
|
||||
<text style="color:white;text-align: center;font-size: 32rpx;line-height: 32px;">发布商品</text>
|
||||
</view>
|
||||
<view class="next-btn" :style="{top:bottomBtn +'px'}">
|
||||
<view class="next-btn" :style="{top:(bottomBtn-100) +'px'}">
|
||||
<text class="next-btn-text font" @click="next">我知道了</text>
|
||||
</view>
|
||||
<view class="" :style="{left:(left+10)+'px',top:bottomBtn+50+'px'}">
|
||||
<image src="/static/images/pointer.png" style="width: 254rpx;height: 254rpx;" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="tips" :style="{ left:(left-100)+'px',top:(top-260)+'px'}">
|
||||
<view class="tras" :class="{act:isActive}">
|
||||
<text class="font" style="line-height: 106rpx;">点击发布商品，开启赚钱之旅</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="position: absolute;" :style="{left:left+50+'px',top:(top-50)+'px'}">
|
||||
<image src="/static/images/greenLine.png" style="width:35px;height: 60px;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -14,13 +29,18 @@
|
|||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
left: 0,
|
||||
top: 0,
|
||||
left: -100,
|
||||
top: -100,
|
||||
// left: 227.82386779785156,
|
||||
// top: 777.7727661132812,
|
||||
subNVue: null,
|
||||
bottomBtn: 800,
|
||||
bottomBtn: -100,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump() {
|
||||
this.subNVue.hide('zoom-in', 300, )
|
||||
},
|
||||
test() {
|
||||
this.subNVue.hide()
|
||||
},
|
||||
|
|
@ -32,16 +52,18 @@
|
|||
let that = this
|
||||
this.subNVue = uni.getSubNVueById('concatpro')
|
||||
uni.$on('diverProductEmit', (data) => {
|
||||
console.log('data', data)
|
||||
that.left = data.left
|
||||
that.top = data.top
|
||||
})
|
||||
const res = uni.getSystemInfo({
|
||||
success: (res => {
|
||||
that.bottomBtn = res.screenHeight - 150
|
||||
// this.clientHeight = res.windowHeight-uni.upx2px(80)
|
||||
})
|
||||
});
|
||||
that.left = data.left
|
||||
that.top = data.top
|
||||
const res = uni.getSystemInfo({
|
||||
success: (res => {
|
||||
that.bottomBtn = res.screenHeight - 150
|
||||
})
|
||||
});
|
||||
}),
|
||||
setTimeout(() => {
|
||||
that.isActive = true
|
||||
}, 1000)
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -60,6 +82,14 @@
|
|||
|
||||
}
|
||||
|
||||
.tips {
|
||||
width: 462rpx;
|
||||
height: 106rpx;
|
||||
background-color: #5BE157;
|
||||
border-radius: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
|
|
@ -115,11 +145,22 @@
|
|||
height: 76rpx;
|
||||
border: 1px solid white;
|
||||
border-radius: 38rpx;
|
||||
background-color: #939394;
|
||||
}
|
||||
|
||||
.next-btn-text {
|
||||
line-height: 76rpx;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.jump {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 80rpx;
|
||||
border: 1px solid white;
|
||||
padding: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Loading…
Reference in New Issue