<template>
  <a class="openapp-btn hover-opacity" href="javascript:;" @click="toDownloadPage">
        <span class="avatar-block">
          <div class="avatar"></div>
        </span>
    打开有货App
    <i class="iconfont mg">&#xe7b0;</i>
  </a>
</template>

<script>
export default {
  methods: {
    toDownloadPage() {
      this.$openApp().then(() => {
        this.$links.toDownloadApp();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .openapp-btn {
    width: 320px;
    height: 80px;
    border-radius: 10px;
    font-size: 30px;
    color: #fff;
    background: #d0021b;
    position: absolute;
    bottom: 120px;
    left: calc(50% - 160px);
    z-index: 100;
    display: flex;
    align-items: center;
    transition: all 600ms ease-in-out;

    &.scroll-opacity {
      opacity: 0.3;
    }

    .avatar-block {
      width: 60px;
      height: 60px;
      margin: 10px 25px 10px 10px;
      overflow: hidden;
    }

    .avatar {
      display: block;
      width: 100%;
      height: 100%;
      background-image: url("~statics/image/common/app.png");
      background-size: 100% 100%;
    }

    .mg {
      margin-left: 10px;
      font-size: 30px;
    }
  }
</style>