shop-applet/pages/index/subnvue/concat.nvue

143 lines
2.5 KiB
Plaintext
Raw Normal View History

2024-04-27 18:16:11 +08:00
<template>
2024-04-28 08:48:30 +08:00
<view class="" style="width: 750rpx;height: 100%;">
<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>
<view class="next-btn">
<text class="next-btn-text font" @click="next">下一步(3/4){{isActive}}</text>
2024-04-27 18:16:11 +08:00
</view>
</view>
</template>
<script>
export default {
2024-04-28 08:48:30 +08:00
data() {
return {
isActive: false,
left: 33,
top: 459.54547119140625,
subNVue: null,
offsetX: 0,
offsetY: 0,
}
},
methods: {
next() {
this.subNVue.hide('zoom-in', 300, )
setTimeout(() => {
uni.$emit('diverIndexSubEmit');
}, 300)
2024-04-27 18:16:11 +08:00
2024-04-28 08:48:30 +08:00
}
},
onLoad() {
this.subNVue = uni.getSubNVueById('concat')
let that = this
uni.$once('diverIndexEmit', (data) => {
console.log('data', data)
// that.left = data.left
// that.top = data.top
})
setTimeout(() => {
that.isActive = true
}, 500)
}
2024-04-27 18:16:11 +08:00
}
</script>
<style>
2024-04-28 08:48:30 +08:00
/* 定义动画效果 */
.target {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 160rpx;
background-color: white;
}
.greenLine {
width: 10rpx;
height: 100rpx;
background-color: green;
position: absolute;
left: 40px;
transform: translate(-50%, 0);
z-index: 999;
top: -40px;
}
.imgs {
width: 62px;
height: 62px;
position: absolute;
left: 40px;
top: 40px;
transform: translate(-50%, -50%);
}
.tras {
position: absolute;
z-index: 999 !important;
width: 0;
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;
}
.bgimg {
width: 200rpx;
position: absolute;
z-index: 1;
}
2024-04-27 18:16:11 +08:00
2024-04-28 08:48:30 +08:00
.img {
opacity: 0;
width: 50rpx;
height: 50rpx;
transition-property: opacity;
transition-duration: 1s;
transition-delay: 0.1s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.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;
}
2024-04-27 18:16:11 +08:00
</style>