askbot-dragon 0.6.17 → 0.6.21

package/src/components/message/swiper/ticketSwiper.vue

@@ -1,530 +1,530 @@
-<template>
-      <div id="pnm_swiper">
-        <div
-                class="swiper"
-                @touchstart="touchStart"
-                @touchmove="touchMove"
-                @touchend="touchEnd"
-
-        >
-          <slot></slot>
-        </div>
-        <div v-if="device==='PC'&&content.multiple===true" class="clickBtn">
-          <div class="preBtn" @click="preClick" style="display: flex">
-            <i class="el-icon-arrow-left" style="font-size: 0.3rem;font-weight:800;align-self: center;margin: auto"></i>
-            </div>
-          <div class="nextBtn" @click="nextClick" style="display: flex">
-            <i class="el-icon-arrow-right" style="font-size: 0.3rem;font-weight:800;align-self: center;margin: auto" ></i></div>
-        </div>
-        <div class="bullet" :class="{isPhoneClass:isPhone===true,isPcClass:isPc===true,isAndroidClass:isAndroid===true,isIosClass:isIos===true}">
-          <div
-                  class="bullet_item"
-                  v-show="slideCount > 1&&content.multiple===true"
-                  v-for="(item, slideIndex) in slideCount"
-                  :class="setBulletActive(slideIndex)"
-                  :key="slideIndex"
-          ></div>
-        </div>
-      </div>
-
-</template>
-<script>
-export default {
-  data() {
-    return {
-      currIndex: 1,
-      swiperStyle: {}, //swiper样式
-      slideWidth: null, //一张slide的宽度
-      moveTimer: null,
-      startPos: 0,
-      distance: 0,
-      slideCount: 0,
-      device:'',
-      IsmouseOver:false,
-      IsShowArrowHead:false,
-      isPhone:false,
-      isPc:false,
-      isAndroid:false,
-      isIos:false,
-      startX:'',
-      startY:'',
-      startTime:''
-
-
-    };
-  },
-  props: {
-    moveRatio: {
-      type: Number,
-      default: 0.2
-    },
-    animDuration: {
-      type: Number,
-      default: 300
-    },
-    content:{
-      type:Object,
-      default(){
-        return {}
-      }
-    },
-    type:String
-  },
-  mounted() {
-    this.slideOn();
-    this.isIosOrIsAndroid()
-
-  },
-  methods: {
-    // 0. 启动函数
-
-    slideOn() {
-      this.initDom();
-      let swiperEls = this.$el;
-      var touchElement = {};
-      swiperEls.addEventListener('touchstart',function (e) {
-        touchElement.startX = e.touches[0].clientX;
-        touchElement.startY = e.touches[0].clientY;
-        if (this.slideCount > 1) {
-          clearInterval(this.moveTimer);
-          this.startPos = e.touches[0].pageX;
-        }
-      })
-      swiperEls.addEventListener('touchmove',function (e) {
-        var deltaX = e.touches[0].clientX - touchElement.startX;
-        var deltaY = e.touches[0].clientY - touchElement.startY;
-        if (Math.abs(Math.asin(deltaY/deltaX)) <= 15/180*Math.PI && e.cancelable) {
-          e.preventDefault();
-        }
-        if (this.slideCount > 1) {
-          let movePos = e.touches[0].pageX;
-          this.distance = movePos - this.startPos;
-          let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
-          this.setTransform(moveDistance);
-        }
-      })
-      swiperEls.addEventListener('touchend',function (e) {
-        if(e.cancelable)
-        {
-          e.preventDefault()
-        }
-        if (this.slideCount > 1) {
-          let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
-          if (this.distance == 0) {
-            return;
-          } else if (
-              this.distance > 0 &&
-              _Dis > this.slideWidth * this.moveRatio
-          ) {
-            this.currIndex--;
-            console.debug(this.currIndex)
-          } else if (
-              this.distance < 0 &&
-              _Dis > this.slideWidth * this.moveRatio
-          ) {
-            this.currIndex++;
-          }
-          //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
-          this.scrollCheck();
-          //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
-          /*this.moveAuto();*/
-        }
-
-
-
-      })
-
-  },
-
-  // 1. 初始化DOM，并获取必要的数据
-    initDom() {
-      this.isMobile()
-      let swiperEls = this.$el;
-      console.debug('swiperEls',swiperEls);
-      let swiperEl=swiperEls.querySelector('.swiper')
-
-      let slides = swiperEl.querySelectorAll(".slide");
-      this.swiperStyle = swiperEl.style;
-      this.slideCount = slides.length;
-      this.slideWidth = swiperEl.offsetWidth;
-
-
-      if (this.slideCount > 1) {
-        let firstSlide = slides[0].cloneNode(true);
-        let lastSlide = slides[this.slideCount - 1].cloneNode(true);
-        swiperEl.appendChild(firstSlide);
-        swiperEl.insertBefore(lastSlide, slides[0]);
-        //设置开头位置
-        this.setTransform(-this.slideWidth);
-      }
-      console.debug(swiperEl)
-
-    },
-
-    // 2. 自动滚动
-  /*  moveAuto() {
-      this.moveTimer = setInterval(() => {
-        this.currIndex++;
-        //每次滚动都需要先进行检测，真正滚动也会在检测里完成
-        this.scrollCheck();
-      }, 1000);
-    },*/
-
-    // 3. 滚动检测（检测是第一张还是最后一张，让其回滚到正确的位置）
-    scrollCheck() {
-      // 开启过渡动画并开始滚动
-      this.swiperStyle.transition = "transform " + this.animDuration + "ms";
-      this.setTransform(-this.currIndex * this.slideWidth);
-
-      //设置一个定时器，等过渡动画结束后执行(判断所处位置是第几张)
-      setTimeout(() => {
-        this.swiperStyle.transition = "0ms";
-        //判断第一张，和最后一张
-        if (this.currIndex <= 0) {
-          this.currIndex = this.slideCount;
-          this.setTransform(-this.currIndex * this.slideWidth);
-        } else if (this.currIndex >= this.slideCount + 1) {
-          this.currIndex = 1;
-          this.setTransform(-this.slideWidth);
-        }
-      }, this.animDuration);
-    },
-
-    //设置swiper的transform的滚动距离
-    setTransform(pos) {
-      this.swiperStyle.transform = `translateX(${pos}px)`;
-    },
-
-    //重置子弹的active
-    setBulletActive(index) {
-      if (this.currIndex >= this.slideCount + 1) {
-        //最后一张的情况
-        return { active: index == 0 };
-      } else if (this.currIndex <= 0) {
-        //第0张的情况
-        return { active: index == this.slideCount - 1 };
-      } else {
-        //一般情况
-        return { active: index == this.currIndex - 1 };
-      }
-
-    },
-
-    /*
-    触屏事件
-    */
-
-    touchStart(e) {
-      // 记录下触发的坐标和时间
-      this.startTime = (new Date()).getTime();
-      this.startX = e.targetTouches[0].clientX;
-      this.startY = e.targetTouches[0].clientY;
-      if (this.slideCount > 1) {
-        clearInterval(this.moveTimer);
-        this.startPos = e.touches[0].pageX;
-      }
-    },
-    touchMove(e) {
-      if (this.slideCount > 1) {
-        let movePos = e.touches[0].pageX;
-        this.distance = movePos - this.startPos;
-        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
-        this.setTransform(moveDistance);
-        this.$emit('touchMove',e)
-      }
-    },
-    touchEnd(e) {
-      if(e.cancelable)
-      {
-        e.preventDefault()
-      }
-      var now = (new Date()).getTime();
-      // 小于300ms可以识别为点击事件的范围 然后判断触摸点的移动距离
-      if (now - this.startTime < 300) {
-        var x = (Math.abs(this.startX - e.changedTouches[0].clientX) < 30);
-        var y = (Math.abs(this.startY - e.changedTouches[0].clientY) < 30);
-        if (x && y) {
-          e.changedTouches[0].target.click();
-        }
-        else {
-
-          if (this.slideCount > 1) {
-            let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
-            if (this.distance == 0) {
-              return;
-            } else if (
-                    this.distance > 0 &&
-                    _Dis > this.slideWidth * this.moveRatio
-            ) {
-              this.currIndex--;
-            } else if (
-                    this.distance < 0 &&
-                    _Dis > this.slideWidth * this.moveRatio
-            ) {
-              this.currIndex++;
-            }
-            //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
-            this.scrollCheck();
-            //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
-            /*this.moveAuto();*/
-          }
-        }
-        this.$emit('touchEnd',this.currIndex)
-
-      }
-      else {
-        if (this.slideCount > 1) {
-          let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
-
-          if (this.distance == 0) {
-            return;
-          } else if (
-              this.distance > 0 &&
-              _Dis > this.slideWidth * this.moveRatio
-          ) {
-            this.currIndex--;
-            console.debug(this.currIndex)
-          } else if (
-              this.distance < 0 &&
-              _Dis > this.slideWidth * this.moveRatio
-          ) {
-            this.currIndex++;
-          }
-          //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
-          this.scrollCheck();
-          //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
-          /*this.moveAuto();*/
-        }
-      }
-    },
-
-    preClick(e){
-      if (this.slideCount > 1) {
-        let movePos = e.pageX;
-        this.distance = movePos - this.startPos;
-        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
-        this.setTransform(moveDistance);
-      }
-      this.currIndex--;
-      if (this.slideCount > 1) {
-
-        //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
-        this.scrollCheck();
-        //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
-        /*this.moveAuto();*/
-      }
-    },
-
-    nextClick(e){
-      if (this.slideCount > 1) {
-        let movePos = e.pageX;
-        this.distance = movePos - this.startPos;
-        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
-        this.setTransform(moveDistance);
-      }
-      if (this.slideCount > 1) {
-        this.currIndex++;
-
-        //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
-        this.scrollCheck();
-        //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
-        /*this.moveAuto();*/
-      }
-    },
-    //检测设备是PC端还是移动端
-    isMobile() {
-      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
-      if(flag){
-        this.isPhone=true
-        let el=this.$el
-        el.style.width='80vw'
-        let swiper=document.getElementsByClassName('swiper')
-        for (let i=0;i<swiper.length;i++)
-        {
-          swiper[i].style.width='80vw'
-          console.log(swiper[i].style.width)
-        }
-
-
-      }else{
-       this.device='PC'
-        let el=this.$el
-       this.isPc=true
-        el.style.width='300px'
-        let swiper=document.getElementsByClassName('swiper')
-
-        let pnm_swiper=document.getElementById('pnm_swiper')
-        console.log(pnm_swiper)
-        /*pnm_swiper.style.width='300px'*/
-        for (let i=0;i<swiper.length;i++)
-        {
-          swiper[i].style.width='300px'
-        }
-      }
-
-    },
-    isIosOrIsAndroid(){
-      var u = navigator.userAgent;
-      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
-      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
-      if(isAndroid){
-        this.isAndroid=true
-      }
-      if(isiOS){
-
-        this.isIos=true
-
-      }
-    },
-  }
-};
-</script>
-<style lang="less">
-
-#pnm_swiper {
-  overflow: hidden;
-  position: relative;
-  margin: 0 auto;
-  padding: 10px 0;
-  -webkit-overflow-scrolling: touch;
-}
-.swiper {
-  display: flex;
-  align-items: center;
-}
-.bullet {
-  z-index: 999;
-  display: flex;
-  position: absolute;
-  bottom: 0.1rem;
-  /* 下方2个配合起来可以达到让弹性盒子子元素真正居中 */
-  justify-content: center;
-  width: 100%;
-}
-/*.isPhoneClass{
-  .bullet_item{
-    width: 0.1rem;
-    height: 0.1rem;
-    margin: 0 0.1rem;
-  }
-}*/
-/*.isAndroidClass,.isPcClass{
-  !*.bullet_item{
-    width: 0.05rem;
-    height: 0.05rem;
-    margin: 0 0.03rem;
-  }*!
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 3px;
-    height: 3px;
-    margin: 0 2px;
-  }
-}*/
-//机器人中样式
-.isPcClass{
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 4px;
-    height: 4px;
-    margin: 0 3px;
-  }
-}
-/*.typeClassRem{
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 0.08rem;
-    height: 0.08rem;
-    margin: 0 0.03rem;
-  }
-}*/
-//企业微信的样式
-.isAndroidClass{
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 4px;
-    height: 4px;
-    margin: 0 3px;
-  }
-}
-.isIosClass{
-  .bullet_item {
-    color: white;
-    background-color: white;
-    border: 1.5px solid #AAAAAA !important;
-    border-radius: 0.2rem;
-    width: 4px;
-    height: 4px;
-    margin: 0 3px;
-  }
-}
-/*.bullet_item {
-  color: white;
-  border: 1px solid #AAAAAA !important;
-  border-radius: 0.2rem;
-}*/
-.bullet_item.active {
-  background-color: #AAAAAA;
-}
-
-.preBtn{
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  height: 36px;
-  width: 36px;
-  cursor: pointer;
-  transition: .3s;
-  border-radius: 50%;
-  background-color: rgba(31,45,61,.11);
-  color: #fff;
-  position: absolute;
-  top: 50%;
-  z-index: 10;
-  transform: translateY(-50%);
-  text-align: center;
-  font-size: 12px
-}
-.nextBtn{
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  height: 36px;
-  width: 36px;
-  cursor: pointer;
-  transition: .3s;
-  border-radius: 50%;
-  background-color: rgba(31,45,61,.11);
-  color: #fff;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  z-index: 10;
-  transform: translateY(-50%);
-  text-align: center;
-  font-size: 12px
-}
-  #pnm_swiper:hover .clickBtn{
-
-    opacity: 1;
-    transition: opacity 1s;
-  }
-#pnm_swiper .clickBtn{
-  opacity: 0;
-  transition: opacity 1s;
-}
-</style>
+<template>
+      <div id="pnm_swiper">
+        <div
+                class="swiper"
+                @touchstart="touchStart"
+                @touchmove="touchMove"
+                @touchend="touchEnd"
+
+        >
+          <slot></slot>
+        </div>
+        <div v-if="device==='PC'&&content.multiple===true" class="clickBtn">
+          <div class="preBtn" @click="preClick" style="display: flex">
+            <i class="el-icon-arrow-left" style="font-size: 0.3rem;font-weight:800;align-self: center;margin: auto"></i>
+            </div>
+          <div class="nextBtn" @click="nextClick" style="display: flex">
+            <i class="el-icon-arrow-right" style="font-size: 0.3rem;font-weight:800;align-self: center;margin: auto" ></i></div>
+        </div>
+        <div class="bullet" :class="{isPhoneClass:isPhone===true,isPcClass:isPc===true,isAndroidClass:isAndroid===true,isIosClass:isIos===true}">
+          <div
+                  class="bullet_item"
+                  v-show="slideCount > 1&&content.multiple===true"
+                  v-for="(item, slideIndex) in slideCount"
+                  :class="setBulletActive(slideIndex)"
+                  :key="slideIndex"
+          ></div>
+        </div>
+      </div>
+
+</template>
+<script>
+export default {
+  data() {
+    return {
+      currIndex: 1,
+      swiperStyle: {}, //swiper样式
+      slideWidth: null, //一张slide的宽度
+      moveTimer: null,
+      startPos: 0,
+      distance: 0,
+      slideCount: 0,
+      device:'',
+      IsmouseOver:false,
+      IsShowArrowHead:false,
+      isPhone:false,
+      isPc:false,
+      isAndroid:false,
+      isIos:false,
+      startX:'',
+      startY:'',
+      startTime:''
+
+
+    };
+  },
+  props: {
+    moveRatio: {
+      type: Number,
+      default: 0.2
+    },
+    animDuration: {
+      type: Number,
+      default: 300
+    },
+    content:{
+      type:Object,
+      default(){
+        return {}
+      }
+    },
+    type:String
+  },
+  mounted() {
+    this.slideOn();
+    this.isIosOrIsAndroid()
+
+  },
+  methods: {
+    // 0. 启动函数
+
+    slideOn() {
+      this.initDom();
+      let swiperEls = this.$el;
+      var touchElement = {};
+      swiperEls.addEventListener('touchstart',function (e) {
+        touchElement.startX = e.touches[0].clientX;
+        touchElement.startY = e.touches[0].clientY;
+        if (this.slideCount > 1) {
+          clearInterval(this.moveTimer);
+          this.startPos = e.touches[0].pageX;
+        }
+      })
+      swiperEls.addEventListener('touchmove',function (e) {
+        var deltaX = e.touches[0].clientX - touchElement.startX;
+        var deltaY = e.touches[0].clientY - touchElement.startY;
+        if (Math.abs(Math.asin(deltaY/deltaX)) <= 15/180*Math.PI && e.cancelable) {
+          e.preventDefault();
+        }
+        if (this.slideCount > 1) {
+          let movePos = e.touches[0].pageX;
+          this.distance = movePos - this.startPos;
+          let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
+          this.setTransform(moveDistance);
+        }
+      })
+      swiperEls.addEventListener('touchend',function (e) {
+        if(e.cancelable)
+        {
+          e.preventDefault()
+        }
+        if (this.slideCount > 1) {
+          let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
+          if (this.distance == 0) {
+            return;
+          } else if (
+              this.distance > 0 &&
+              _Dis > this.slideWidth * this.moveRatio
+          ) {
+            this.currIndex--;
+            console.debug(this.currIndex)
+          } else if (
+              this.distance < 0 &&
+              _Dis > this.slideWidth * this.moveRatio
+          ) {
+            this.currIndex++;
+          }
+          //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
+          this.scrollCheck();
+          //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
+          /*this.moveAuto();*/
+        }
+
+
+
+      })
+
+  },
+
+  // 1. 初始化DOM，并获取必要的数据
+    initDom() {
+      this.isMobile()
+      let swiperEls = this.$el;
+      console.debug('swiperEls',swiperEls);
+      let swiperEl=swiperEls.querySelector('.swiper')
+
+      let slides = swiperEl.querySelectorAll(".slide");
+      this.swiperStyle = swiperEl.style;
+      this.slideCount = slides.length;
+      this.slideWidth = swiperEl.offsetWidth;
+
+
+      if (this.slideCount > 1) {
+        let firstSlide = slides[0].cloneNode(true);
+        let lastSlide = slides[this.slideCount - 1].cloneNode(true);
+        swiperEl.appendChild(firstSlide);
+        swiperEl.insertBefore(lastSlide, slides[0]);
+        //设置开头位置
+        this.setTransform(-this.slideWidth);
+      }
+      console.debug(swiperEl)
+
+    },
+
+    // 2. 自动滚动
+  /*  moveAuto() {
+      this.moveTimer = setInterval(() => {
+        this.currIndex++;
+        //每次滚动都需要先进行检测，真正滚动也会在检测里完成
+        this.scrollCheck();
+      }, 1000);
+    },*/
+
+    // 3. 滚动检测（检测是第一张还是最后一张，让其回滚到正确的位置）
+    scrollCheck() {
+      // 开启过渡动画并开始滚动
+      this.swiperStyle.transition = "transform " + this.animDuration + "ms";
+      this.setTransform(-this.currIndex * this.slideWidth);
+
+      //设置一个定时器，等过渡动画结束后执行(判断所处位置是第几张)
+      setTimeout(() => {
+        this.swiperStyle.transition = "0ms";
+        //判断第一张，和最后一张
+        if (this.currIndex <= 0) {
+          this.currIndex = this.slideCount;
+          this.setTransform(-this.currIndex * this.slideWidth);
+        } else if (this.currIndex >= this.slideCount + 1) {
+          this.currIndex = 1;
+          this.setTransform(-this.slideWidth);
+        }
+      }, this.animDuration);
+    },
+
+    //设置swiper的transform的滚动距离
+    setTransform(pos) {
+      this.swiperStyle.transform = `translateX(${pos}px)`;
+    },
+
+    //重置子弹的active
+    setBulletActive(index) {
+      if (this.currIndex >= this.slideCount + 1) {
+        //最后一张的情况
+        return { active: index == 0 };
+      } else if (this.currIndex <= 0) {
+        //第0张的情况
+        return { active: index == this.slideCount - 1 };
+      } else {
+        //一般情况
+        return { active: index == this.currIndex - 1 };
+      }
+
+    },
+
+    /*
+    触屏事件
+    */
+
+    touchStart(e) {
+      // 记录下触发的坐标和时间
+      this.startTime = (new Date()).getTime();
+      this.startX = e.targetTouches[0].clientX;
+      this.startY = e.targetTouches[0].clientY;
+      if (this.slideCount > 1) {
+        clearInterval(this.moveTimer);
+        this.startPos = e.touches[0].pageX;
+      }
+    },
+    touchMove(e) {
+      if (this.slideCount > 1) {
+        let movePos = e.touches[0].pageX;
+        this.distance = movePos - this.startPos;
+        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
+        this.setTransform(moveDistance);
+        this.$emit('touchMove',e)
+      }
+    },
+    touchEnd(e) {
+      if(e.cancelable)
+      {
+        e.preventDefault()
+      }
+      var now = (new Date()).getTime();
+      // 小于300ms可以识别为点击事件的范围 然后判断触摸点的移动距离
+      if (now - this.startTime < 300) {
+        var x = (Math.abs(this.startX - e.changedTouches[0].clientX) < 30);
+        var y = (Math.abs(this.startY - e.changedTouches[0].clientY) < 30);
+        if (x && y) {
+          e.changedTouches[0].target.click();
+        }
+        else {
+
+          if (this.slideCount > 1) {
+            let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
+            if (this.distance == 0) {
+              return;
+            } else if (
+                    this.distance > 0 &&
+                    _Dis > this.slideWidth * this.moveRatio
+            ) {
+              this.currIndex--;
+            } else if (
+                    this.distance < 0 &&
+                    _Dis > this.slideWidth * this.moveRatio
+            ) {
+              this.currIndex++;
+            }
+            //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
+            this.scrollCheck();
+            //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
+            /*this.moveAuto();*/
+          }
+        }
+        this.$emit('touchEnd',this.currIndex)
+
+      }
+      else {
+        if (this.slideCount > 1) {
+          let _Dis = Math.abs(this.distance); //绝对值求出移动的距离
+
+          if (this.distance == 0) {
+            return;
+          } else if (
+              this.distance > 0 &&
+              _Dis > this.slideWidth * this.moveRatio
+          ) {
+            this.currIndex--;
+            console.debug(this.currIndex)
+          } else if (
+              this.distance < 0 &&
+              _Dis > this.slideWidth * this.moveRatio
+          ) {
+            this.currIndex++;
+          }
+          //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
+          this.scrollCheck();
+          //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
+          /*this.moveAuto();*/
+        }
+      }
+    },
+
+    preClick(e){
+      if (this.slideCount > 1) {
+        let movePos = e.pageX;
+        this.distance = movePos - this.startPos;
+        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
+        this.setTransform(moveDistance);
+      }
+      this.currIndex--;
+      if (this.slideCount > 1) {
+
+        //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
+        this.scrollCheck();
+        //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
+        /*this.moveAuto();*/
+      }
+    },
+
+    nextClick(e){
+      if (this.slideCount > 1) {
+        let movePos = e.pageX;
+        this.distance = movePos - this.startPos;
+        let moveDistance = -(this.currIndex * this.slideWidth) + this.distance;
+        this.setTransform(moveDistance);
+      }
+      if (this.slideCount > 1) {
+        this.currIndex++;
+
+        //在触碰结束时，由于会触碰第一张或者最后一张，所以需要来一个滚动检测
+        this.scrollCheck();
+        //上述检测完毕，让其在正确位置之后，在执行 自动翻滚
+        /*this.moveAuto();*/
+      }
+    },
+    //检测设备是PC端还是移动端
+    isMobile() {
+      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+      if(flag){
+        this.isPhone=true
+        let el=this.$el
+        el.style.width='80vw'
+        let swiper=document.getElementsByClassName('swiper')
+        for (let i=0;i<swiper.length;i++)
+        {
+          swiper[i].style.width='80vw'
+          console.log(swiper[i].style.width)
+        }
+
+
+      }else{
+       this.device='PC'
+        let el=this.$el
+       this.isPc=true
+        el.style.width='300px'
+        let swiper=document.getElementsByClassName('swiper')
+
+        let pnm_swiper=document.getElementById('pnm_swiper')
+        console.log(pnm_swiper)
+        /*pnm_swiper.style.width='300px'*/
+        for (let i=0;i<swiper.length;i++)
+        {
+          swiper[i].style.width='300px'
+        }
+      }
+
+    },
+    isIosOrIsAndroid(){
+      var u = navigator.userAgent;
+      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
+      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if(isAndroid){
+        this.isAndroid=true
+      }
+      if(isiOS){
+
+        this.isIos=true
+
+      }
+    },
+  }
+};
+</script>
+<style lang="less">
+
+#pnm_swiper {
+  overflow: hidden;
+  position: relative;
+  margin: 0 auto;
+  padding: 10px 0;
+  -webkit-overflow-scrolling: touch;
+}
+.swiper {
+  display: flex;
+  align-items: center;
+}
+.bullet {
+  z-index: 999;
+  display: flex;
+  position: absolute;
+  bottom: 0.1rem;
+  /* 下方2个配合起来可以达到让弹性盒子子元素真正居中 */
+  justify-content: center;
+  width: 100%;
+}
+/*.isPhoneClass{
+  .bullet_item{
+    width: 0.1rem;
+    height: 0.1rem;
+    margin: 0 0.1rem;
+  }
+}*/
+/*.isAndroidClass,.isPcClass{
+  !*.bullet_item{
+    width: 0.05rem;
+    height: 0.05rem;
+    margin: 0 0.03rem;
+  }*!
+  .bullet_item {
+    color: white;
+    background-color: white;
+    border: 1.5px solid #AAAAAA !important;
+    border-radius: 0.2rem;
+    width: 3px;
+    height: 3px;
+    margin: 0 2px;
+  }
+}*/
+//机器人中样式
+.isPcClass{
+  .bullet_item {
+    color: white;
+    background-color: white;
+    border: 1.5px solid #AAAAAA !important;
+    border-radius: 0.2rem;
+    width: 4px;
+    height: 4px;
+    margin: 0 3px;
+  }
+}
+/*.typeClassRem{
+  .bullet_item {
+    color: white;
+    background-color: white;
+    border: 1.5px solid #AAAAAA !important;
+    border-radius: 0.2rem;
+    width: 0.08rem;
+    height: 0.08rem;
+    margin: 0 0.03rem;
+  }
+}*/
+//企业微信的样式
+.isAndroidClass{
+  .bullet_item {
+    color: white;
+    background-color: white;
+    border: 1.5px solid #AAAAAA !important;
+    border-radius: 0.2rem;
+    width: 4px;
+    height: 4px;
+    margin: 0 3px;
+  }
+}
+.isIosClass{
+  .bullet_item {
+    color: white;
+    background-color: white;
+    border: 1.5px solid #AAAAAA !important;
+    border-radius: 0.2rem;
+    width: 4px;
+    height: 4px;
+    margin: 0 3px;
+  }
+}
+/*.bullet_item {
+  color: white;
+  border: 1px solid #AAAAAA !important;
+  border-radius: 0.2rem;
+}*/
+.bullet_item.active {
+  background-color: #AAAAAA;
+}
+
+.preBtn{
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  transition: .3s;
+  border-radius: 50%;
+  background-color: rgba(31,45,61,.11);
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px
+}
+.nextBtn{
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  transition: .3s;
+  border-radius: 50%;
+  background-color: rgba(31,45,61,.11);
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 10;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px
+}
+  #pnm_swiper:hover .clickBtn{
+
+    opacity: 1;
+    transition: opacity 1s;
+  }
+#pnm_swiper .clickBtn{
+  opacity: 0;
+  transition: opacity 1s;
+}
+</style>