<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>首页</title>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="styles/common.css" />
  </head>

  <body>
    <div class="container">
      <div class="main">
        <div id="js-close" class="close"></div>
        <div class="tab">
          <div id="js-navbar" class="navbar">
              <span class="navbar-item active">阵容天梯</span>
              <span class="navbar-item">阵容克制</span>
            <span class="navbar-item">装备合成</span>
            <span class="navbar-item">英雄起源</span>
            <span class="navbar-item">英雄职业</span>
            <span class="navbar-item">等级效果</span>
          </div>
          <div id="js-tab-content" class="tab-content">
            <div class="tab-panel active"></div>
            <div class="tab-panel">
                <div id="js-sidebar" class="sidebar-wrapper"></div>
                <div id="js-sidebar-main" class="sidebar-main"></div>
              </div>
            <div class="tab-panel"></div>
            <div class="tab-panel"></div>
            <div class="tab-panel"></div>
            <div class="tab-panel"></div>
          </div>
        </div>
      </div>
    </div>
    <script id="tpl-content" type="text/html">
      {{each data item index}}
        {{if item.type === 'border'}}
        <div style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;;width:{{item.size_x}}px;height:{{item.size_y}}px;border:1px solid #1E2C27;"></div>
        {{else if item.type === 'image'}}
        {{if item['z-index'] === 0}}
        <div style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;width:{{item.size_x}}px;height:{{item.size_y}}px;background-image:url({{item.image_path}});background-position:{{item.image_path}}px {{item.image_path}}px;"></div>
        {{else}}
        <div style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;width:{{item.size_x}}px;height:{{item.size_y}}px;">
          <img style="width:{{item.size_x}}px;height:{{item.size_y}}px;" src="{{item.image_path}}">
        </div>
        {{/if}}
        {{else if item.type === 'text'}}
          {{if item.name === 'text_footer'}}
            <div style="position:fixed;left:{{item.pos_x}}px;top:{{item.pos_y}}px;;width:{{item.size_x}}px;height:{{item.size_y}}px;text-align:{{item.off_set}}">
              {{@item.content}}
            </div>
          {{else}}
          <div style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;;width:{{item.size_x}}px;height:{{item.size_y}}px;text-align:{{item.off_set}}">
              {{@item.content}}
            </div>
          {{/if}}
        {{/if}}
      {{/each}}
    </script>
    <script id="tpl-sidebar" type="text/html">
      <div class="sidebar">
      {{each data item index}}
        {{if item.type === 'button'}}
        <div class="sidebar-item sidebar-btn {{!index?'active':''}}" data-link="{{item.link}}" style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;;width:{{item.size_x}}px;height:{{item.size_y}}px;"></div>
        {{else if item.type === 'text'}}
        <div class="sidebar-item {{!index?'active':''}}" style="position:absolute;left:{{item.pos_x}}px;top:{{item.pos_y}}px;;width:{{item.size_x}}px;height:{{item.size_y}}px;text-align:{{item.off_set}}">
          {{@item.name}}
        </div>
        {{/if}}
      {{/each}}
      </div>
    </script>
    <script src="scripts/libs/jquery-1.11.3.min.js"></script>
    <script src="scripts/common.js"></script>
    <script src="scripts/ui/index.js"></script>
  </body>
</html>
