<html>
  <head>
    <title>Wormhole Projects</title>
    <meta charset="utf-8" />
    <link href="http://g.alicdn.com/mqn/cdn/0.0.9/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="//g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
    <script src="http://g.alicdn.com/mqn/cdn/0.0.10/bootstrap.min.js"></script>
    <script src="http://g.alicdn.com/mqn/cdn/0.0.10/jquery.qrcode.min.js"></script>
  </head>
  <body>
    <div class="nav">
      <div class="container">
        <div class="row row-single">
          <h2 style="text-align: center;" class="title">Developer Platform</h2>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="row">
        <div class="col-xs-9">
          <div style="margin-left: 60px;font-size: 16px;">
            {{#if(pages.length === 0)}}
              <span class="warnning">该项目未找到入口文件</span>
            {{/if}}
            <ul id="entrances">
              {{#each(pages, "value", "key")}}
                {{#if(value.length !== 0)}}
                  <li><a href="//{{host}}/{{this}}" target="_blank" class="qr">{{name}}/{{this}}</a></li>
                {{/if}}
              {{/each}}
            </ul>
          </div>
        </div>
        <div class="col-xs-3 right-zone">
          <div class="row">
            <div class="col-xs-11 col-xs-offset-1">
              <h4>Document</h3>
              <p><a class="link" target="_blank" href="https://lark.alipay.com/zebra/readme">Zebra(斑马) Developer Document</a></p>
              <p><a class="link" target="_blank" href="http://doc.weex.alibaba-inc.com/modules/">Weex Document</a></p>
              <p><a class="link" target="_blank" href="http://wh.alibaba-inc.com/usage_cdn/">Wormhole Developer Document</a></p>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-11 col-xs-offset-1">
              <h4>Technical Support</h3>
              <p>Scan Qrcode With DingTak To Join The Q&amp;A Group</p>
              <img src="https://img.alicdn.com/tfs/TB1AA1LmsLJ8KJjy0FnXXcFDpXa-877-1078.jpg" width="250px">
              <img src="https://img.alicdn.com/tfs/TB1Wnurmx6I8KJjy0FgXXXXzVXa-877-1078.jpg" width="250px">
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $('.qr').popover({
   trigger: 'manual',
   html: 'true',
   content: '<div id="qrcode" style="width: 160px; height: 160px;"></div>',
   animation: false,
   placement: 'right'
  }).on("mouseenter", function () {
    var self = this;
    $(this).popover("show");
    // 只有show之后，popover的content才出现在dom中，此时才能生成二维码
    $(".popover #qrcode").qrcode({
      width: 160,
      height: 160,
      render: 'canvas',
      // 这里实际是个动态url，把代码简化了
      text: $(this).attr('href')
    });
    $(this).siblings(".popover").on("mouseleave", function () {
      $(self).popover('hide');
    });
}).on("mouseleave", function () {
    var self = this;
    setTimeout(function () {
      if (!$(".popover:hover").length) {
        $(self).popover("hide")
      }
    }, 100);
});
    </script>
  </body>
  <style>
    h3 {
      margin: 30px 0 10px 20px;
    }
    ul {
      margin-left: 20px;
    }
    li {
      line-height: 25px;
    }
    .main {
      padding: 15px;
    }
    .right-zone {
      height: 100%;
      border-left: 1px dashed #1170bc;
    }
    .warnning {
      display: inline-block;
      border: 2px solid #eea236;
      border-radius: 5px;
      padding: 3px;
      background: #f0ad4e;
      color: #fff;
      pointer-events: initial;
      margin-left: 40px;
    }
  </style>
</html>