|
|
@@ -1,13 +1,13 @@
|
|
|
<template>
|
|
|
<view class="guide-wrapper">
|
|
|
<view v-if="currentType == 'level-button-tip'" class="guide-container position-relative"
|
|
|
- @click="buttonMessage('confirm',$event)">
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
<!-- top: 55px; 相当于 上间隔 -->
|
|
|
- <view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
|
|
|
+ <view class="mask-bg-07"style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
|
|
|
<!-- 中心位置 225 -->
|
|
|
- <view style="width: 750rpx;height: 231px;">
|
|
|
- <view style="height: 200px;" class="mask-bg-07">
|
|
|
- <view class="position-absolute-center" style="top: 0;left:100rpx;">
|
|
|
+ <view style="width: 750rpx;height: 231px; overflow:hidden">
|
|
|
+ <view style="height: 200px; background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07">
|
|
|
+ <view class="position-absolute-center" style="top: 0;left:100rpx;right: 0;">
|
|
|
<image style="width: 488rpx;height: 366rpx;"
|
|
|
src="../../../static/modal/level-tip/level-tip-box@2x.png">
|
|
|
</image>
|
|
|
@@ -37,7 +37,7 @@
|
|
|
<view class="flex-sub mask-bg-07"></view>
|
|
|
</view> -->
|
|
|
<view style="width: 750rpx;height: 82rpx;" class="flex flex-direction-row">
|
|
|
- <view class="flex-sub mask-bg-07"></view>
|
|
|
+ <view class="flex-sub mask-bg-07" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
<view class="position-relative align-center"
|
|
|
style="width: 248rpx;height: 104rpx; background-color: rgba(0,0,0,0.7);">
|
|
|
<image class="position-absolute-center" style="width: 248rpx;height: 104rpx; top: 18rpx;"
|
|
|
@@ -46,15 +46,14 @@
|
|
|
style="margin-top: 38rpx; width: 72rpx; height: 12rpx; background-color: #FFFFFF; border-radius: 18px;">
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flex-sub mask-bg-07"></view>
|
|
|
+ <view class="flex-sub mask-bg-07"style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 计算剩余空白 -->
|
|
|
- <view class="mask-bg-07 flex-sub"></view>
|
|
|
+ <view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
</view>
|
|
|
- <view v-if="currentType == 'device-tip'"
|
|
|
- class="guide-container justify-center align-center position-relative mask-bg-07"
|
|
|
- @click="buttonMessage('confirm',$event)">
|
|
|
+ <view v-if="currentType == 'device-tip'"class="guide-container justify-center align-center position-relative mask-bg-07"
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
<view class="mid">
|
|
|
<image class="bind-tip-image" src="../../../static/modal/tip/bind-tip-bg.png"></image>
|
|
|
<text class="text-16px text-center text-white"
|
|
|
@@ -69,40 +68,45 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="currentType == 'plan'" class="guide-container position-relative" @click="buttonMessage('confirm',$event)">
|
|
|
+ <view v-if="currentType == 'plan'" class="guide-container position-relative"
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
|
|
|
<!-- top: 55px; 相当于 上间隔 -->
|
|
|
- <view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
|
|
|
+ <view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
|
|
|
<!-- 中心位置 225 -->
|
|
|
- <view style="width: 750rpx;height: 284px;">
|
|
|
- <view style="height: 220px;" class="mask-bg-07">
|
|
|
- <view class="position-absolute-center-bottom">
|
|
|
- <image style="width: 488rpx;height: 366rpx;"
|
|
|
- src="../../../static/common/subNVue/guide/guide-plan@3x.png">
|
|
|
+ <view style="width: 750rpx;height: 284px;overflow:hidden">
|
|
|
+ <view style="height: 220px;width: 750rpx;background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07 position-relative">
|
|
|
+ <view class="position-absolute-center-bottom " style="left: 0;right: 0;">
|
|
|
+ <image style="width: 488rpx;height: 366rpx;" src="../../../static/common/subNVue/guide/guide-plan@3x.png">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view class="position-absolute-center">
|
|
|
<!-- left:40rpx; -->
|
|
|
<text class="text-white text-14px text-lines2"
|
|
|
- style="top: 20rpx; left:40rpx; width: 300rpx;">请先定制属于您的专属计划</text>
|
|
|
+ style="left:40rpx; width: 300rpx;" :style="{top:planTextTop+'px'}">请先定制属于您的专属计划</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view style="width: 750rpx;height: 100px;" class="flex flex-direction-row">
|
|
|
+ <view style="width: 750rpx;height: 100px;" class="flex flex-direction-row position-relative">
|
|
|
<!-- 32+ 60/2 原本长度62px，去除游戏和视频长度 + 72 左右，设置 134 px-->
|
|
|
-
|
|
|
- <view :style="{width: guideRectLeft+'px'}" class="mask-bg-07"></view>
|
|
|
- <image style="width: 90px;height: 100px; opacity: 0.7;"
|
|
|
- src="../../../static/common/subNVue/guide/guide-rect-mask.png"></image>
|
|
|
- <view class="mask-bg-07 flex-sub"></view>
|
|
|
+ <view :style="{width: guideRectLeft+'px'}" class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
+ <image style="width: 90px;height: 100px; opacity: 0.7;" src="../../../static/common/subNVue/guide/guide-rect-mask.png"></image>
|
|
|
+ <view style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
+ <!-- 用于获取节点适配left -->
|
|
|
+ <view class="position-absolute-center-around flex flex-direction-row" style="width: 750rpx;" >
|
|
|
+ <block v-for="(item,index) in tabbarList" :key="index">
|
|
|
+ <view :ref="'tabbar'+index"
|
|
|
+ style="width: 90px;height: 100px; opacity: 0.1;">{{index}}</view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 计算剩余空白 -->
|
|
|
- <view class="mask-bg-07 flex-sub"></view>
|
|
|
+ <view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view v-if="currentType == 'actionJumpPlay'" class="guide-container position-relative"
|
|
|
- @click="buttonMessage('confirm',$event)">
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
<!-- top: 55px; 相当于 上间隔 -->
|
|
|
<view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
|
|
|
<!-- 中心位置 275 -->
|
|
|
@@ -128,13 +132,13 @@
|
|
|
<view class="mask-bg-07 flex-sub"></view>
|
|
|
</view>
|
|
|
<view v-if="currentType == 'bluetoothConnect'" class="guide-container position-relative"
|
|
|
- @click="buttonMessage('confirm',$event)">
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
<!-- top: 55px; 相当于 上间隔 -->
|
|
|
- <view class="mask-bg-07" :style="{height:guideHeight+'px'}"></view>
|
|
|
- <!-- 中心位置 225 -->
|
|
|
- <view style="width: 750rpx;height: 764rpx;">
|
|
|
- <view style="height: 596rpx;" class="mask-bg-07">
|
|
|
- <view class="position-absolute-center-bottom" style="left:31rpx;">
|
|
|
+ <view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);" :style="{height:guideHeight+'px'}"></view>
|
|
|
+ <!-- 中心位置 225 :class="true?'border-1rpx-bottom-black':''"-->
|
|
|
+ <view style="width: 750rpx;height: 382px;">
|
|
|
+ <view style="height: 298px;background-color: rgba(0, 0, 0, 0.7);" class="mask-bg-07">
|
|
|
+ <view class="position-absolute-center-bottom" style="left:31rpx;right: 0;">
|
|
|
<image style="width: 442rpx;height: 372rpx;"
|
|
|
src="../../../static/common/subNVue/guide/guide-bluetooth@3x.png">
|
|
|
</image>
|
|
|
@@ -150,21 +154,20 @@
|
|
|
-->
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view style="width: 750rpx;height: 168rpx;" class="flex flex-direction-row">
|
|
|
+ <view style="width: 750rpx;height: 336px;" class="flex flex-direction-row">
|
|
|
<!-- 这里width 当做 left -->
|
|
|
- <view class="mask-bg-07" :style="{width:guideLeft+'px'}"></view>
|
|
|
+ <view class="mask-bg-07" style="background-color: rgba(0, 0, 0, 0.7);":style="{width:guideLeft+'px'}"></view>
|
|
|
<image style="width: 100px;height: 100px; opacity: 0.7;top: -12px;"
|
|
|
src="../../../static/common/subNVue/guide/guide-circle-mask.png"></image>
|
|
|
- <view class="mask-bg-07 flex-sub"></view>
|
|
|
+ <view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 计算剩余空白 -->
|
|
|
- <view class="mask-bg-07 flex-sub"></view>
|
|
|
+ <view class="mask-bg-07 flex-sub" style="flex: 1;background-color: rgba(0, 0, 0, 0.7);"></view>
|
|
|
</view>
|
|
|
|
|
|
- <view v-if="currentType == 'level-game-tip'"
|
|
|
- class="guide-container justify-center align-center position-relative mask-bg-07"
|
|
|
- @click="buttonMessage('confirm',$event)">
|
|
|
+ <view v-if="currentType == 'level-game-tip'"class="guide-container justify-center align-center position-relative mask-bg-07"
|
|
|
+ style="width: 750rpx;flex: 1;" @click="buttonMessage('confirm',$event)">
|
|
|
<view class="game-mid">
|
|
|
<view style="height: 278rpx;width: 750rpx;" class="position-relative">
|
|
|
<view class="position-absolute-center" style="top: 0;left:0rpx;">
|
|
|
@@ -208,6 +211,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ // 注意平台差异
|
|
|
+ // #ifdef APP-NVUE
|
|
|
+ const dom = weex.requireModule('dom')
|
|
|
+ // #endif
|
|
|
import {
|
|
|
mapState,
|
|
|
mapMutations
|
|
|
@@ -292,11 +299,12 @@
|
|
|
secondHidden: false
|
|
|
},
|
|
|
|
|
|
- guideRectLeft:62
|
|
|
+ guideRectLeft:62,
|
|
|
+ tabbarList:3,
|
|
|
+ planTextTop:10
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- console.error('*********一个guide created')
|
|
|
const vm = this;
|
|
|
uni.$on('guide-popup', (data) => {
|
|
|
vm.bShowComplete = true;
|
|
|
@@ -310,14 +318,6 @@
|
|
|
vm.currentType = data.type || 'none';
|
|
|
vm.operationItem = data.operationItem;
|
|
|
let _viewData = data.item;
|
|
|
- if(vm.versionCodeState.showGame&&vm.versionCodeState.showVideo){
|
|
|
- vm.guideRectLeft = 62;
|
|
|
- }else if(vm.versionCodeState.showGame||vm.versionCodeState.showVideo){
|
|
|
- vm.guideRectLeft = 89;
|
|
|
- }else {
|
|
|
- vm.guideRectLeft = 134;
|
|
|
- }
|
|
|
-
|
|
|
//获取类型
|
|
|
vm.hiddenType = (_viewData && _viewData.hiddenType) || 'none';
|
|
|
console.log("初始化时候hidden类型:", vm.hiddenType);
|
|
|
@@ -326,15 +326,38 @@
|
|
|
vm.guideHeight = _viewData.top + _viewData.height - _viewData.height / 4 - vm.systemInfo
|
|
|
.statusBarHeight - 275;
|
|
|
} else if (vm.currentType == "bluetoothConnect") {
|
|
|
- //+ _viewData.height - _viewData.height / 4 - vm.systemInfo.statusBarHeight
|
|
|
- vm.guideHeight = _viewData.top - 298;
|
|
|
+ //+ _viewData.height - _viewData.height / 4
|
|
|
+ vm.guideHeight = _viewData.top - 382 + 55 + 15;//- 298
|
|
|
vm.guideLeft = _viewData.left - _viewData.width / 2 + 5;
|
|
|
} else if (vm.currentType == "plan") {
|
|
|
- vm.guideHeight = vm.systemInfo.screenHeight - 284 - 32;
|
|
|
+ vm.guideHeight = vm.systemInfo.safeArea.bottom - 284 - 32;
|
|
|
// vm.guideLeft = 55;
|
|
|
+ if(vm.versionCodeState.showGame&&vm.versionCodeState.showVideo){
|
|
|
+ //显示5个栏目
|
|
|
+ vm.tabbarList = 5;
|
|
|
+ }else if(vm.versionCodeState.showGame||vm.versionCodeState.showVideo){
|
|
|
+ //显示4个栏目
|
|
|
+ vm.tabbarList = 4;
|
|
|
+ }else {
|
|
|
+ //默认3个
|
|
|
+ vm.tabbarList = 3;
|
|
|
+ }
|
|
|
+ setTimeout(()=>{
|
|
|
+ dom.getComponentRect(vm.$refs[`tabbar${1}`][0], option => {
|
|
|
+ console.log('getComponentRect:', option)
|
|
|
+ vm.guideRectLeft= option.size.left;
|
|
|
+ if(vm.tabbarList == 5)
|
|
|
+ {
|
|
|
+ vm.guideRectLeft -= 7;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },200)
|
|
|
+
|
|
|
+ vm.planTextTop = vm.systemInfo.platform.indexOf("ios") != -1?0:10;
|
|
|
} else if (vm.currentType == "level-button-tip") {
|
|
|
//首页提示选择关卡
|
|
|
- vm.guideHeight = vm.systemInfo.screenHeight - 284 - 32 + 3 + 6;
|
|
|
+ let _iosHeight = vm.systemInfo.platform.indexOf("ios") != -1?1:0;
|
|
|
+ vm.guideHeight = vm.systemInfo.safeArea.bottom - 284 - 32 + 3 + 6 ;
|
|
|
const value = uni.getStorageSync('levelButtonPrompt');
|
|
|
if (value) {
|
|
|
vm.isSelected = value.isSelected;
|
apple