<template>
      <div>
        <img class="jump_img" src="@/assets/img/nft_ly_nojump.png" alt="">
        <div class="dowload_box">
          <div class="download_btn" @click="downloadApple">
            <app-icon name="icon-pingguo" color="#3E47D0" size="28px" class='phone_icon'></app-icon>
            Iphone版下载
          </div>
          <div class="download_btn" @click="downloadAnzhuo">
            <app-icon name="icon-anzhuo" color="#3E47D0" size="28px" class='phone_icon'></app-icon>
            Andriod版下载
          </div>
        </div>
        <div class="open_tip" v-if="showTip">
            <div class="toast" @click="showTip = false"></div>
            <div class="tip">请在默认浏览器中打开 <img src="@/assets/img/youshangjiao.png" alt=""> </div>
        </div>
      </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
import { is_neizhi } from '@/util/common'

export default Vue.extend({
   name:'dowload',
   data(){
     return {
       showTip: false,
     }
   },
   components: {
       "app-icon": () => import("@/components/common/Icon.vue"),
   },
   methods: {
       downloadApple(){
           this.$toast('正在开发中...')
       },
       downloadAnzhuo(){
           if(is_neizhi()) {
             this.showTip = true
           }else {
              let link = document.createElement('a')
              link.style.display = 'none'
              link.href = ''
              document.body.appendChild(link)
              link.click()
              URL.revokeObjectURL(link.href)
              document.body.removeChild(link)  
           }
       }
   }
})
</script>

<style scoped lang='less'>
      .jump_img {
        height: calc(100vh);
        width: calc(100vw);
      }
      .dowload_box {
        position: fixed;
        width: 70%;
        bottom: 5%;
        left: 50%;
        z-index: 100;
        transform: translateX(-50%);
        .download_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 20px;
          background-color: #fff;
          color: #3E47D0;
          text-align: center;
          font-size: 18px;
          border-radius: 40px;
          height: 40px;
          line-height: 40px;
          margin-bottom: 23px;
          .phone_icon {
            margin-right: 10px;
          }

        }
      }
    .open_tip {
        .toast {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #333;
            opacity: 0.8;
            z-index: 1000;
        }
        .tip {
            position: fixed;
            top: 40px;
            left: 0;
            right: 0;
            z-index: 2000;
            text-align: center;
            color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            padding-left: 20px;
            img {
                width: 30%;
            }
        }
    }
    

</style>