<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-03 18:50:33
 * @LastEditors: 无尘
 * @LastEditTime: 2019-09-25 17:08:18
 -->
<template>
  <div class="login-wrap">
    <header class="header-wrap">
      <div class="login-wrap-header">
        <img class="login-wrap-inline" src="../../assets/login/logo.png" alt="logo" />
        <span class="login-wrap-inline p-l-15">好办 App</span>
      </div>
      <div class="login-wrap-header_body">
        <div class="flex flex-space-between">
          <div class="header-body-left">
            <div class="header-body-left_h1">好办，您身边的智能办公助理</div>
            <p class="header-body-left_h2">打造企业统一专属办公平台</p>
            <div class="qrcode-content">
              <div class="qrcode-wrap">
                <div class="qrcode-wrap-border">
                  <!-- <div id="qrcode" title=""></div> -->
                  <img id="qrcode" src="../../assets/login/qrcode.png" alt="" />
                </div>
              </div>
              <p class="font-16 color-fff text-center m-t-10">- 扫码下载好办App -</p>
            </div>
          </div>
          <div class="header-body-right">
            <div class="header-body-right_bg"></div>
          </div>
        </div>
      </div>
    </header>
    <section>
      <div class="login-wrap-body">
        <ul class="flex flex-space-between">
          <li class="flex-1">
            <img src="../../assets/login/icon1.png" alt="" />
            <p classs="font-18">工作消息，一目了然</p>
          </li>
          <li class="flex-1">
            <img src="../../assets/login/icon2.png" alt="" />
            <p classs="font-18">营销应用，赋能商家</p>
          </li>
          <li class="flex-1">
            <img src="../../assets/login/icon3.png" alt="" />
            <p classs="font-18">企业信息，快捷管理</p>
          </li>
        </ul>
      </div>
    </section>
    <!--  <footer class="p-t-35">
      <vue-gic-footer></vue-gic-footer>
    </footer> -->
  </div>
</template>
<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'download',
  data() {
    return {
      qrcodeCase: '', // 二维码实例
      qrcodeNum: '', // 二维码数据
      ajaxTime: null
    };
  },
  methods: {
    /**
     * 处理路由跳转
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /*{
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },

    /**
     *  生成二维码
     */
    qrcode(text) {
      const that = this;
      let qrObj = {
        type: 'web-login',
        data: text || '123456'
      };
      that.qrcodeCase = new QRCode('qrcode', {
        width: 146,
        height: 146, // 高度
        text: JSON.stringify(qrObj) // 二维码内容 //
        //render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas） //
        //background: '#f0f',
        //foreground: '#ff0'
      });

      document.getElementById('qrcode').title = '';
    }
  },
  mounted() {
    // const that = this;
    // that.qrcode();
    document.querySelector('html').style.backgroundColor = '#ffffff';
    document.querySelector('body').style.backgroundColor = '#ffffff';
  },
  beforeDestroy() {
    document.querySelector('html').style.backgroundColor = '#f0f2f5';
    document.querySelector('body').style.backgroundColor = '#f0f2f5';
  }
};
</script>
<style lang="less" scoped>
.login-wrap {
  position: relative;
  background: #fff;
  header {
    width: 100%;
    height: 632px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 1);
    &.header-wrap {
      background: url('../../assets/login/bg.png') no-repeat center center;
      background-size: auto 632px;
    }

    .login-wrap-header_body {
      position: relative;
      width: 926px;
      margin: 0 auto;
      padding: 13px;
      .header-body-left {
        margin-top: 140px;
        .header-body-left_h1 {
          position: relative;
          margin-bottom: 20px;
          font-size: 32px;
          color: #fff;
          &::before {
            content: '';
            position: absolute;
            top: -26px;
            left: -49px;
            width: 52px;
            height: 52px;
            background: url('../../assets/login/title-icon.png') no-repeat left top;
            background-size: 100%;
          }
        }
        .header-body-left_h2 {
          margin-bottom: 45px;
          font-size: 18px;
          color: #fff;
        }
        .qrcode-content {
          width: 176px;
        }
        .qrcode-wrap {
          padding: 10px;
          background: rgba(0, 26, 74, 0.3);
          .qrcode-wrap-border {
            padding: 5px;
            background: #fff;
          }
        }
        #qrcode {
          width: 146px;
          height: 146px;
          margin: 0 auto;
        }
      }
      .header-body-right {
        width: 229px;
        height: 554px;
        &_bg {
          height: 100%;
          background: url('../../assets/login/app.gif') no-repeat center center;
          background-size: auto 554px;
        }
      }
    }
  }

  &-header {
    width: 1400px;
    height: 64px;
    line-height: 64px;
    padding: 0 0 0 48px;
    margin: 0 auto;
    font-size: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      -moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
  }

  &-inline {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #fff;
  }

  &-body {
    width: 1400px;
    margin: 0 auto;
    padding: 58px 0;
    li {
      text-align: center;
      img {
        width: 105px;
        height: 105px;
      }
      p {
        margin-top: 23px;
        font-size: 18px;
        color: #5b5b5b;
      }
    }
  }

  &-out {
    position: relative;
    width: 1400px;
    height: 640px;
    margin: 0 auto;
    /*background: rgba(0,0,0,1);*/
  }
}
</style>
