<template>
<div class="load-container">
   <div class='load-model' :class='pageClass'></div>
   <div class="load-bg"></div>
</div>
</template>

<script>
  function isAndroid(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    return isAndroid;
  }
  export default {
    name:'mu-loading',
    props: {
      pagetype:String,
    },
    computed: {
      pageClass(){
        if(isAndroid && this.pagetype =='card'){
          return this.pagetype + 'android_page_loading';
        }else{
          return this.pagetype + 'page_loading';  
        }
        
      }
    }
  }
</script>

<style lang='less'>
@keyframes ListLoad {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

.load-container {
    position: absolute;
    width: 100%;
    height: 100%;
    flex: auto;
    .load-model {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
    }
    .workpage_loading {
      background: url('./workpage_loading.png') no-repeat;
      background-size: cover;
    }
    .detailepage_loading {
      background: url('./detailepage_loading.png') no-repeat;
      background-size: cover;
    }
    .homepage_loading {
      background: url('./homepage_loading.png') no-repeat;
      background-size: cover;
    }
    .userpage_loading {
      background: url('./userpage_loading.png') no-repeat;
      background-size: cover;
    }
    .cardpage_loading {
      background: url('./cardpage_loading.png') no-repeat;
      background-size: cover;
    }
    .cardandroid_page_loading {
      background: url('./cardpage_loading.png') 0 -51px no-repeat;
      background-size: cover;
    }
    .load-bg {
      position: absolute;
      left: -100%;
      top: 0;
      width: 200%;
      height: 100%;
      background-image: -webkit-linear-gradient(left,#FAFAFA,#F2F4F5,#FAFAFA);
      //animation: 2s ListLoad linear infinite;
    }
}
</style>
