<template>
  <div>
    <canvas id="myCanvas" width="750" height="1334"></canvas>
    <div class="banner-block">
      <img :src="logoUrl">
    </div>
    <div class="form-block">
      <div class="input-block">
        <div class="tips">Mobile Phone</div>
        <input placeholder="请输入手机号"/>
      </div>
      <div class="input-block">
        <div class="tips">Picture Verification</div>
        <input placeholder="请输入图片验证码"/>
      </div>
      <div class="input-block">
        <div class="tips">Verification Code</div>
        <input placeholder="请输入短信验证码"/>
      </div>
    </div>
    <div class="btn-block">
      <div class="btn">
        注册并绑定微信
      </div>
    </div>
  </div>
</template>

<script>
  import logoUrl from '../assets/logo.png'
  export default {
    name: "bindMobile",
    mounted(){
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      var particles = [];
      for(var i = 0; i < 10; i++){
        particles.push({ //雪花在x y 上的位置和速度，以及雪花的大小和颜色
          x: Math.random()*750,
          y: Math.random()*1334,
          vx: (Math.random()*5),
          vy: (Math.random()*5),
          size: 1+Math.random()*20,
          // color: "#FFF"
          color:'#'+('0000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6)
        });
      }

      function timeUpdata(e){
        /*清楚画布区域*/
        context.clearRect(0,0,750,1334);
        /*逐一绘制500片雪花*/
        var len = particles.length;
        var particle;
        for(var i = 0; i < 10; i++){
          particle = particles[i];
          particle.x += particle.vx;
          particle.y += particle.vy;

          if(particle.x<=0 || particle.x>=750){
            particle.vx *= -1;
          }
          if(particle.y<=0 || particle.y>=1334){
            particle.vy *= -1;
          }
          context.fillStyle = particle.color; //设置雪花的颜色
          context.beginPath();
          context.arc(particle.x,particle.y,particle.size,0,Math.PI*2,true);
          context.closePath();
          context.fill();// 填充颜色
        }
      }

      setInterval(timeUpdata, 40);//每40ms执行一次timeUpdate函数
    },
    data(){
      return {
        logoUrl:logoUrl
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../util/public";
  .banner-block{
    text-align: center;
    margin: 40 * @toVw auto;
    img{
      width: 142 * @toVw;
    }
  }
  .form-block{
    padding: 20 * @toVw;
    .input-block{
      height: 60 * @toVw;
      border-bottom: 1px solid #cccccc;
      margin-bottom: 20 * @toVw;
      input{
        padding: 10 * @toVw 0;
        font-size:14px;
        background: transparent;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(0,0,0,1);
        line-height:20px;
        outline: none;
        border: none;
        &::-webkit-input-placeholder{
          font-size:14px;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20px;
        }    /* 使用webkit内核的浏览器 */
        &:-moz-placeholder{
          font-size:14px;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20px;
        }                  /* Firefox版本4-18 */
        &::-moz-placeholder{
          font-size:14px;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20px;
        }                  /* Firefox版本19+ */
        &:-ms-input-placeholder{
          font-size:14px;
          font-family:PingFangSC-Semibold;
          font-weight:600;
          color:rgba(204,204,204,1);
          line-height:20px;
        }
      }
      .tips{
        height:17px;
        font-size:12px;
        font-family:PingFangSC-Semibold;
        font-weight:600;
        color:rgba(200,206,211,1);
        line-height:17px;
      }
    }
  }
  .btn-block{
    text-align: center;
    .btn{
      width: 236 * @toVw;
      height: 37 * @toVw;
      line-height: 37 * @toVw;
      background:rgba(96,173,240,1);
      border-radius:4px;font-size:14px;
      font-family:PingFangSC-Semibold;
      font-weight:600;
      color:rgba(255,255,255,1);
    }
  }
  #myCanvas{
    position: absolute;
    z-index: -1;
    opacity: 0.2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 375 * @toVw;
  }
</style>
