Task:指引功能

This commit is contained in:
modendeveloper
2025-01-18 12:32:13 +08:00
parent f3be581278
commit ec33f6f4c0
5 changed files with 272 additions and 64 deletions
+109 -58
View File
@@ -452,9 +452,9 @@ export default {
onscroll(e) {
this.scrollViewWidth = e.detail.scrollWidth
const imgs = []
this.getElementData(`#${scrollView}`, res=>{
this.getElementData(`#${this.scrollView}`, res=>{
this.setFunctionGuideData({
imgs: imgs,
imgs: this.imgs,
btnGroupPosition: '20rpx',
tipsPosition: '',
position: {
@@ -663,7 +663,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '578rpx',
top: '140rpx',
top: '180rpx',
left: '150rpx',
right: 0,
margin: 'auto',
@@ -823,7 +823,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '438rpx',
top: 170*2+'rpx',
top: 140*2+'rpx',
left: -164*2+'rpx',
right: 0,
margin: 'auto',
@@ -858,7 +858,7 @@ export default {
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
left: -0+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
@@ -872,7 +872,7 @@ export default {
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
left: -290*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -886,7 +886,7 @@ export default {
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
left: -(290-130)*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -904,12 +904,12 @@ export default {
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
width: '444rpx',
top: 310*2+'rpx',
left: 144*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
height: '252rpx',
},
isBtn: false
},
@@ -919,8 +919,8 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
top: 435*2+'rpx',
left: -235*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -933,8 +933,8 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
top: 435*2+'rpx',
left: -90*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -953,12 +953,12 @@ export default {
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
width: '489rpx',
top: 580*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
height: '267rpx',
},
isBtn: false
},
@@ -968,7 +968,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
top: 555*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
@@ -982,7 +982,7 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
top: 555*2+'rpx',
left: 140*2+'rpx',
right: 0,
margin: 'auto',
@@ -1011,12 +1011,12 @@ export default {
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
width: '450rpx',
top: 465*2+'rpx',
left: 120*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
height: '218rpx',
},
isBtn: false
},
@@ -1026,8 +1026,8 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
top: 575*2+'rpx',
left: -210*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -1040,8 +1040,8 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
top: 575*2+'rpx',
left: -70*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -1060,12 +1060,12 @@ export default {
style:{
position: 'absolute',
zIndex: 99,
width: '574rpx',
top: 170*2+'rpx',
left: -164*2+'rpx',
width: '479rpx',
top: 665*2+'rpx',
left: 40*2+'rpx',
right: 0,
margin: 'auto',
height: '238rpx',
height: '180rpx',
},
isBtn: false
},
@@ -1075,22 +1075,8 @@ export default {
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 0+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '118rpx',
top: 315*2+'rpx',
left: 140*2+'rpx',
top: 750*2+'rpx',
left: 40*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -1098,7 +1084,17 @@ export default {
isBtn: 'next'
}
]
this.toEle('xpsx', imgs)
this.setFunctionGuideData({
imgs: imgs,
btnGroupPosition: '',
tipsPosition: '',
position: {
top: this.messageIcon.top + 'px',
left: this.messageIcon.left + 'px',
width: `${this.messageIcon.width}px`,
height: `${this.messageIcon.height}px`,
}
})
return
}
if(this.functionGuideData.step == 13) {
@@ -1113,12 +1109,12 @@ export default {
style:{
position: 'absolute',
zIndex: 99,
width: '534rpx',
top: '140rpx',
left: '230rpx',
width: 291.5*2+'rpx',
top: 280*2+'rpx',
left: 10*2+'rpx',
right: 0,
margin: 'auto',
height: '280rpx',
height: 116.5*2+'rpx',
},
isBtn: false
},
@@ -1129,7 +1125,7 @@ export default {
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: -20*2+'rpx',
left: -280*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -1143,7 +1139,7 @@ export default {
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: 140*2+'rpx',
left: -150*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
@@ -1156,7 +1152,61 @@ export default {
}
return
}
if(this.functionGuideData.step == 14) {
if(menusUrl.indexOf(urls[14]) < 0) {
this.$refs.FunctionGuide.next()
return
}
if(menusUrl.indexOf(urls[14]) > -1) {
const imgs = [
{
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-1.png',
style:{
position: 'absolute',
zIndex: 99,
width: '539rpx',
top: 80*2+'rpx',
left: 100*2+'rpx',
right: 0,
margin: 'auto',
height: '265rpx',
},
isBtn: false
},
{
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-2.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: 150*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'jump'
},
{
url: this.webUrl + '/引导页素材/首页引导/Group14/Group 14-3.png',
style:{
position: 'absolute',
zIndex: 99,
width: '117rpx',
top: 213*2+'rpx',
left: 10*2+'rpx',
right: 0,
margin: 'auto',
height: '46rpx',
},
isBtn: 'next'
},
]
const index = menusUrl.indexOf(urls[14])
this.toEle('box-item' + index, imgs)
}
return
}
}
},
@@ -1165,6 +1215,7 @@ export default {
if(res.left + res.width / 2 > this.screenWidth) {
this.$nextTick(()=> {
this.scrollView = id
this.imgs = imgs
})
return
}
@@ -1548,7 +1599,7 @@ export default {
position: absolute;
top: 0;
left: -21rpx;
z-index: 2;
z-index: -1;
width: calc(100% + 40rpx);
height: 180rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F0F0 40%, #F0F0F0 100%);