Task：指引页/ 图片定位完成

pkg_product/views/healthList.vue

@@ -72,7 +72,7 @@
           @click="changeTab(1)"
         />
       </view> -->
-      <view class="v12-justify-start v12-align-center news-wrap v12-radius-100">
+      <view class="v12-justify-start v12-align-center news-wrap v12-radius-100" id="news-wrap">
         <view class="v12-font-bold v12-primary v12-white-text v12-mr-2 v12-pa-2 v12-radius-100 news-title">最新展会</view>
         <swiper vertical class="text-swpier " autoplay circular duration="500" interval="3000" >
           <swiper-item v-for="(item, index) in sanctum" :key="index" class="v12-align-center" @click="toExpo(item.id)">
@@ -161,6 +161,7 @@
         </view>
       </view>
     </view>
+    <FunctionGuide :maxStep="1" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
   </view>
 </template>
 
@@ -171,9 +172,14 @@ import { wellnessFood, wellnessPlaceList } from '@/api/product'
 import { getWellnessPlace, getWellnessExhibition, getBanner } from '@/api/health'
 import { getProducts } from '@/api/store'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import FunctionGuide from '@/components/FunctionGuide'
+import GuideMixins from '@/mixins/GuideMixins'
 export default {
   name: 'HealthList',
-  mixins: [pageListenMixins],
+  components: {
+    FunctionGuide
+  },
+  mixins: [pageListenMixins, GuideMixins],
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -194,6 +200,73 @@ export default {
     this.init()
   },
   methods: {
+    showFunctionGuide() {
+      if(this._step == this.functionGuideData.step) return
+      if(this.functionGuideData.step == 1) {
+        this._step = this.functionGuideData.step
+        const imgs = [
+          {
+            url: this.webUrl + '/引导页素材/康养旅居/Group 1-1.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '356rpx',
+              top: 140*2+'rpx',
+              left: 50*2+'rpx',
+              right: 0,
+              margin: 'auto',
+              height: '207rpx',
+              /* px: ; */
+            },
+            isBtn: false
+          },
+          {
+            url: this.webUrl + '/引导页素材/康养旅居/Group 1-2.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '117rpx',
+              top: 110*2+'rpx',
+              left: 0*2+'rpx',
+              right: 0,
+              margin: 'auto',
+              height: '46rpx',
+            },
+            isBtn: 'jump'
+          },
+          {
+            url: this.webUrl + '/引导页素材/康养旅居/Group 1-3.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '117rpx',
+              top: 110*2+'rpx',
+              left: 240*2+'rpx',
+              height: '46rpx',
+            },
+            isBtn: 'next'
+          },
+        ]
+        this.getElementData('#news-wrap', res=>{
+          
+          this.setFunctionGuideData({
+            imgs: imgs,
+            tipsPosition: '420rpx',
+            btnGroupPosition: '',
+            position: {
+              top: res.top*2 - 10 + 'rpx',
+              left: res.left*2 - 20 + 'rpx',
+              width:  `${res.width*2}rpx`,
+              height:  `${res.height*2}rpx`,
+              padding: '10rpx 20rpx'
+            }
+          })
+        })
+        return
+      } else {
+        return
+      }
+    },
     init() {
       getBanner().then(({data}) => {
         this.bannerList = data