Task：指引页

components/FunctionGuide.vue

@@ -1,14 +1,27 @@
 <template>
 	<view v-if="show" class="guide-remark white">
+		<view class="guid-wrap">
+			<image 
+				v-for="(img, index) in functionGuideData.imgs" 
+				:key="index" 
+				:style="[img.style]" 
+				:src="img.url" 
+				@click.stop="handleImg(img)"
+				mode="aspectFit|aspectFill|widthFix" 
+				lazy-load="true" >
+			</image>
 			<view class="box" :style="[functionGuideData.position]">
 				<!-- <view class="tips flex" :style="{top: functionGuideData.tipsPosition || '-110rpx'}">
 					{{ functionGuideData.tips }}
 				</view> -->
-			<view class="btn-group flex_center" :style="{bottom: functionGuideData.btnGroupPosition || '-150rpx'}">
+				
+			</view>
+			<!-- <view class="btn-wrap flex_center" :style="[functionGuideData.btnGroupPosition]">
 				<view class="btn flex_center" @click="jump">跳过</view>
 				<view class="next-btn v12-primary flex_center" @click="next">{{ functionGuideData.step==maxStep ? '知道了' : '下一步' }}</view>
+			</view> -->
 		</view>
-		</view>
+		
 	</view>
 </template>
 
@@ -25,7 +38,7 @@
 				type: Object,
 				default: ()=> {
 					return {
-						step: 0,
+						step: 2,
 						tips: '', // 介绍
 						tipsPosition: '', // 介绍 显示位置
 						btnGroupPosition: '', // 按钮组显示位置
@@ -50,6 +63,17 @@
 			}
 		},
 		methods: {
+			handleImg(img) {
+				if(!img.isBtn) return
+				if(img.isBtn === 'next') {
+					this.next()
+					return
+				}
+				if(img.isBtn === 'jump') {
+					this.jump()
+					return
+				}
+			},
 			init() {
 				if (this.show) return
 				setTimeout(() => {
@@ -97,6 +121,15 @@
 </script>
 
 <style lang="scss" scoped>
+.btn-wrap{
+	position: absolute;
+	z-index: 99;
+}
+.guid-wrap{
+	position: relative;
+	height: inherit;
+	width: inherit;
+}
 .next-btn {
 	color: #fff;
 	padding: 2rpx 10rpx;

components/xdd-product-item/index.vue

@@ -2,9 +2,25 @@
   <view class="xdd-product-item" @click="viewHandle(item)">
     <view class="focus-img">
       <image
+        v-if="!item.isFarmerShop"
         :src="item[imageKey]"
         class="img"
       />
+      <image 
+        :src="item.farmerShopCover" 
+        v-if="item.farmerShopCoverType === 1 && item.isFarmerShop" 
+        class="img" 
+        mode="heightFix|widthFix">
+      </image>
+      <video 
+        :src="item.farmerShopCover" 
+        v-if="item.farmerShopCoverType !== 1 && item.isFarmerShop" 
+        :show-center-play-btn="false" 
+        :show-fullscreen-btn="false" 
+        :show-play-btn="false" 
+        class="img"  
+        :poster="item.farmerShopCover + '?vframe/jpg/offset/1'">
+      </video>
       <image
         v-if="item.isOldBrand"
         :src="webUrl + '/home/old-mark.png'"
@@ -20,8 +36,14 @@
         :src="webUrl + '/home/qixian-mark.png'"
         class="mark-img"
       />
+      <image
+        v-if="item.isFarmerShop"
+        :src="webUrl + '/orderIcon/nm.png'"
+        class="mark-img-nm"
+      />
     </view>
-    <view class="info-wrap">
+    <view v-if="item.isFarmerShop" class="more-t v12-pt-2 v12-font-bold  v12-font-28 v12-px-2" >{{ item.farmerShopContent }}</view>
+    <view class="info-wrap" v-if="!item.isFarmerShop">
       <view class="name more-t">
         {{ item[nameKey] }}
       </view>
@@ -44,6 +66,14 @@
         </view>
       </view>
     </view>
+    <view 
+      v-if="item.isFarmerShop" 
+      class="v12-justify-start v12-align-center v12-pt-2 v12-px-2 v12-pb-2">
+      <view class="btn v12-mr-2">
+        <image :src="item.farmerShopLogo" class="nm-img-logo v12-radius-100"></image>
+      </view>
+      <view class="one-t v12-font-24 v12-dark1-text" style="width:230rpx">{{ item.farmerShopName }}/{{ item.farmerShopCityName || '-' }}</view>
+    </view>
   </view>
 </template>
 
@@ -89,6 +119,21 @@ export default {
 </script>
 
 <style lang="less">
+.nm-img-logo {
+  display: block;
+  width: 48rpx;
+  height: 48rpx;
+}
+.mark-img-nm{
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 0 25rpx 0 0;
+}
 .xdd-product-item {
   border-radius: 20rpx;
   background-color: #fff;

components/xdd-tabbar/index.vue

@@ -25,6 +25,7 @@
           v-for="(item, index) in tabbarItem"
           :key="index"
           :class="currIndex === item.index ? 'curr' : ''"
+          :id="'icon' + index"
           class="item"
           @click="gotoPage(item.url, item.type, item.index)"
         >
@@ -97,6 +98,7 @@ export default {
   },
   mounted() {
     this.getElementData('#quweiIcon')
+    this.getIconData('#icon1')
   },
   methods: {
     getElementData(el) {
@@ -107,6 +109,14 @@ export default {
         }
       })
     },
+    getIconData(el) {
+      const query = uni.createSelectorQuery().in(this)
+      query.select(el).boundingClientRect().exec((res)=> {
+        if(res[0]) {
+          this.$emit('getIcon', res[0])
+        }
+      })
+    },
     /**
      * 跳转至目标页面
      * type: 1-tabbar页面，2-非tabbar页面

pages/home/index.vue

@@ -22,7 +22,7 @@
         />
       </view>
     </view>
-    <view class="slider-banner">
+    <view class="slider-banner" id="slider-banner-id">
       <swiper
         v-if="banner.length > 0"
         indicatorDots="true"
@@ -55,7 +55,7 @@
               :key="index"
               class="item flex flex-col ai-center"
               @click="$global.commonJump(item.uniapp_url)"
-              :id="'box-item' + (index + 2)"
+              :id="'box-item' + (index)"
             >
               <image
                 :src="item.pic"
@@ -74,7 +74,7 @@
         v-if="landmarkGoodsImage.image || countyFamousImage.image"
         class="land-famous-wrap"
       >
-        <view v-if="countyFamousImage.image" class="pic-wrap">
+        <view v-if="countyFamousImage.image" id="qianxian" class="pic-wrap">
           <image
             :src="countyFamousImage.image"
             mode="heightFix"
@@ -82,7 +82,7 @@
             @click="landAndFamousItemClickHandle(countyFamousImage)"
           />
         </view>
-        <view v-if="landmarkGoodsImage.image" class="pic-wrap">
+        <view v-if="landmarkGoodsImage.image" id="dibiao" class="pic-wrap">
           <image
             :src="landmarkGoodsImage.image"
             mode="heightFix"
@@ -169,7 +169,7 @@
             </swiper-item>
           </swiper> -->
           <view class="new-zone-wrap">
-            <view class="kd" >
+            <view class="kd" id="xkd">
               <view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
                 <image  style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
               </view>
@@ -181,7 +181,7 @@
                 <view class="enter-btn" >点击进入</view>
               </view>
             </view>
-            <view class="xpsx">
+            <view class="xpsx" id="xpsx">
               <view class="img-wrap">
                 <image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
               </view>
@@ -339,7 +339,7 @@
       paddingBottom="200rpx"
     />
     <FunctionGuide :maxStep="15" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
-    <xdd-tabbar :curr-index="0" @getElementData="elementData" />
+    <xdd-tabbar :curr-index="0" @getElementData="elementData" @getIcon="getIcon"/>
   </view>
 </template>
 
@@ -408,7 +408,8 @@ export default {
       lotteryCanDraw: false,
       videoContext: null,
       isPlay: true,
-      tabIconPostion: {}
+      tabIconPostion: {},
+      messageIcon: {}
     }
   },
   onLoad() {
@@ -445,12 +446,15 @@ export default {
     elementData(e) {
       this.tabIconPostion = e
     },
+    getIcon(e) {
+      this.messageIcon = e
+    },
     onscroll(e) {
-      console.log(e);
       this.scrollViewWidth = e.detail.scrollWidth
-      this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
+      const imgs = []
+      this.getElementData(`#${scrollView}`, res=>{
         this.setFunctionGuideData({
-          tips: '介绍模块2，简述一下模块功能',
+          imgs: imgs,
           btnGroupPosition: '20rpx',
           tipsPosition: '',
           position: {
@@ -466,26 +470,529 @@ export default {
       if(this._step == this.functionGuideData.step) return
       this._step = this.functionGuideData.step
       if(this.functionGuideData.step == 1) {
+        const imgs = [
+          {
+            url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-1.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '474rpx',
+              top: '100rpx',
+              left: '-110rpx',
+              right: 0,
+              margin: 'auto',
+              height: '289rpx',
+              /* px: ; */
+            },
+            isBtn: false
+          },
+          {
+            url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-2.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '186rpx',
+              top: '350rpx',
+              left: '240rpx',
+              right: 0,
+              margin: 'auto',
+              height: '46rpx',
+            },
+            isBtn: 'next'
+          },
+          {
+            url: this.webUrl + '/引导页素材/首页引导/Group1/Group 1-3.png',
+            style: {
+              position: 'absolute',
+              zIndex: 99,
+              width: '173rpx',
+              top: '180rpx',
+              right: '100rpx',
+              height: '248rpx',
+            },
+            isBtn: false
+          },
+        ]
         this.getElementData('#step1', res=>{
           this.screenWidth = res.width - 20
           this.setFunctionGuideData({
-            tips: '介绍模块1，简述一下模块功能',
+            imgs: imgs,
-            btnGroupPosition: '-120rpx',
+            btnGroupPosition: {
+              top: 510 - 100 + 'rpx',
+            },
             tipsPosition: '420rpx',
             position: {
-              top: 265 + 'px',
+              top: 510 - 100 + 'rpx',
               left: res.left + 10 + 'px',
               width:  `${res.width - 20}px`,
-              height:  `${80 + 114 + 8 + 252 + 8}px`,
+              height:  `${160 + 228 + 16 + 514 + 16}rpx`,
             }
           })
         })
-        
       }else {
-        if(this.functionGuideData.step == 15) {
+        const menusUrl = this.menus.map(item => item.uniapp_url)
-          console.log(this.functionGuideData.step, 'quweiIcon');
+        const urls = {
+          2: '/pages/chose-city/chose-city?type=0',
+          3: '/pages/chose-city/chose-city?type=1',
+          4: '/pkg_product/views/healthList',
+          5: '/pkg_product/views/giftList',
+          6: '/pkg_product/views/heritage',
+          13: '/pkg_join/views/index',
+          14: '/v4/views/attract/attract'
+        }
+        if(this.functionGuideData.step == 2) {
+          if(menusUrl.indexOf(urls[2]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[2]) > -1) {
+            const index = menusUrl.indexOf(urls[2])
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '454rpx',
+                  top: '140rpx',
+                  left: '-130rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '258rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: '-110rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group2/Group 2-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: '200rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        if(this.functionGuideData.step == 3) {
+          if(menusUrl.indexOf(urls[3]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[3]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '620rpx',
+                  top: '540rpx',
+                  left: '-50rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '254rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: '530rpx',
+                  left: '110rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group3/Group 3-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: '530rpx',
+                  left: '410rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[3])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        if(this.functionGuideData.step == 4) {
+          if(menusUrl.indexOf(urls[4]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[4]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '578rpx',
+                  top: '140rpx',
+                  left: '150rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '226rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: '340rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group4/Group 4-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: '610rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[4])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        if(this.functionGuideData.step == 5) {
+          if(menusUrl.indexOf(urls[5]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[5]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '495rpx',
+                  top: '540rpx',
+                  left: '230rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '267rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 265*2+'rpx',
+                  left: -120*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group5/Group 5-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 265*2+'rpx',
+                  left: 20*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[5])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        if(this.functionGuideData.step == 6) {
+          if(menusUrl.indexOf(urls[6]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[6]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '534rpx',
+                  top: '140rpx',
+                  left: '230rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '280rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: -20*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group6/Group 6-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: 140*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[6])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        if (this.functionGuideData.step == 7) {
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group7/Group 7-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '438rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '336rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group7/Group 7-2.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '129rpx',
+                top: 315*2+'rpx',
+                left: 0+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            },
+          ]
+          this.toEle('qianxian', imgs)
+          return
+        }
+        if (this.functionGuideData.step == 8) {
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '574rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '238rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-2.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 0+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'jump'
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group8/Group 8-3.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 140*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            }
+          ]
+          this.toEle('dibiao', imgs)
+          return
+        }
+        if (this.functionGuideData.step == 9) {
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '574rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '238rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-2.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 0+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'jump'
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group9/Group 9-3.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 140*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            }
+          ]
+          this.toEle('xkd', imgs)
+          return
+        }
+         // top 140, buttom: 540
+         if(this.functionGuideData.step == 10) {
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '574rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '238rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-2.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 0+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'jump'
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group10/Group 10-3.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 140*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            }
+          ]
           this.setFunctionGuideData({
-            tips: '介绍模块2，简述一下模块功能',
+            imgs: imgs,
             btnGroupPosition: '',
             tipsPosition: '',
             position: {
@@ -497,16 +1004,172 @@ export default {
           })
           return
         }
-        this.getElementData(`#box-item${this.functionGuideData.step}`, res=>{
+        if (this.functionGuideData.step == 11) {
-          this.totalWidth += res.width
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '574rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '238rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-2.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 0+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'jump'
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group11/Group 11-3.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '118rpx',
+                top: 315*2+'rpx',
+                left: 140*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            }
+          ]
+          this.toEle('xpsx', imgs)
+          return
+        }
+       
+        if (this.functionGuideData.step == 12) {
+          const imgs = [
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-1.png',
+              style:{
+                position: 'absolute',
+                zIndex: 99,
+                width: '574rpx',
+                top: 170*2+'rpx',
+                left: -164*2+'rpx',
+                right: 0,
+                margin: 'auto',
+                height: '238rpx',
+              },
+              isBtn: false
+            },
+            {
+              url: this.webUrl + '/引导页素材/首页引导/Group12/Group 12-2.png',
+              style:{
+                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',
+                right: 0,
+                margin: 'auto',
+                height: '46rpx',
+              },
+              isBtn: 'next'
+            }
+          ]
+          this.toEle('xpsx', imgs)
+          return
+        }
+        if(this.functionGuideData.step == 13) {
+          if(menusUrl.indexOf(urls[13]) < 0) {
+            this.$refs.FunctionGuide.next()
+            return
+          }
+          if(menusUrl.indexOf(urls[13]) > -1) {
+            const imgs = [
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-1.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '534rpx',
+                  top: '140rpx',
+                  left: '230rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '280rpx',
+                },
+                isBtn: false
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-2.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: -20*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'jump'
+              },
+              {
+                url: this.webUrl + '/引导页素材/首页引导/Group13/Group 13-3.png',
+                style:{
+                  position: 'absolute',
+                  zIndex: 99,
+                  width: '117rpx',
+                  top: 213*2+'rpx',
+                  left: 140*2+'rpx',
+                  right: 0,
+                  margin: 'auto',
+                  height: '46rpx',
+                },
+                isBtn: 'next'
+              },
+            ]
+            const index = menusUrl.indexOf(urls[13])
+            this.toEle('box-item' + index, imgs)
+          }
+          return
+        }
+        
+        
+      }
+    },
+    toEle(id, imgs) {
+      this.getElementData(`#${id}`, res=>{
         if(res.left + res.width / 2 > this.screenWidth) {
           this.$nextTick(()=> {
-              this.scrollView = `box-item${this.functionGuideData.step}`
+            this.scrollView = id
           })
           return
         }
         this.setFunctionGuideData({
-            tips: '介绍模块2，简述一下模块功能',
+          imgs: imgs,
           btnGroupPosition: '',
           tipsPosition: '',
           position: {
@@ -516,40 +1179,7 @@ export default {
             height: `${res.height}px`,
           }
         })
-          
       })
-      }
-
-      // if(this.functionGuideData.step == 2) {
-      //   this.getElementData('#box-item0', res=>{
-      //     this.setFunctionGuideData({
-      //       tips: '介绍模块2，简述一下模块功能',
-      //       btnGroupPosition: '',
-      //       tipsPosition: '',
-      //       position: {
-      //         top: res.top + 'px',
-      //         left: res.left - 10 + 'px',
-      //         width:  `${res.height}px`,
-      //         height: `${res.height}px`
-      //       }
-      //     })
-      //   })
-      // }else if(this.functionGuideData.step == 3) {
-      //   this.getElementData('#box-item1', res=>{
-      //     this.setFunctionGuideData({
-      //       tips: '介绍模块6，模块处于底部，需滚动页面',
-      //       tipsPosition: '',
-      //       position: {
-      //         top: res.top + 'px',
-      //         left: res.left - 10 + 'px',
-      //         width:  `${res.height}px`,
-      //         height: `${res.height}px`
-      //       }
-      //     })
-      //   })
-      // }else if(this.functionGuideData.step == 'jump') {
-      //   this.intoView = 'top'
-      // }
     },
     played() {
       this.isPlay = !this.isPlay
@@ -884,6 +1514,7 @@ export default {
 .scroll-view{
   background: #fff;
   border-radius: 16rpx;
+  margin: -120rpx 0 0 0;
 }
 .menus-wrap {
   position: relative;