<template>
  <a class="arrow_guide" @click="goBotton">
    <p>下滑有惊喜</p>
    <div style="cursor:pointer;" data-radium="true" data-reactid="145">
      <div style="cursor: pointer; transition: transform 0.5s ease; color: rgb(255, 255, 255);">
        <div class="scrollIndicatorMouse" data-reactid="147">
          <svg class="Icon" style="height:30px;width:30px;" viewBox="0 0 32 32" aria-hidden="true">
            <path d="M16 2c4.7 0 8.5 3.8 8.5 8.5v11c0 4.7-3.8 8.5-8.5 8.5s-8.5-3.8-8.5-8.5v-11c0-4.7 3.8-8.5 8.5-8.5zM16 0c-5.8 0-10.5 4.7-10.5 10.5v11c0 5.8 4.7 10.5 10.5 10.5s10.5-4.7 10.5-10.5v-11c0-5.8-4.7-10.5-10.5-10.5v0z"></path>
            <path d="M17.5 8.5c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5c0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5z"></path>
          </svg>
        </div>
        <div style="margin-top:5px;display:flex;flex-direction:column;align-items: center" class="scrollIndicatorArrows" data-radium="true">
          <svg class="Icon Icon1" viewBox="0 0 32 32" aria-hidden="true" data-reactid="152"><path d="M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z" ></path></svg>
          <svg class="Icon Icon2" viewBox="0 0 32 32" aria-hidden="true" data-reactid="154"><path d="M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z"></path></svg>
        </div>
      </div>
    </div>
  </a>
</template>
<script>
    export default {
        name: '',
        data () {
            return {}
        },
        methods: {
          /**滚到底部*/
          goBotton(){
            this.$emit("goTarget");
          },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .arrow_guide{
    position absolute
    text-align center
    right 2%
    bottom 15px
    z-index 12
    text-shadow 0 0 3px rgba(0, 0, 0, 0.38)
    p{
      margin-bottom 7px
      font-weight bold
      font-size 14px
      color #ffffff
    }
    .Icon{
      display inline-block
      width 30px
      height 10px
      line-height 1
      fill currentColor
      vertical-align middle
    }
  }
</style>
