gem-tanzanite.github.io/power_detail.html at main · clear-code/gem-tanzanite.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>Power Detail</title>
  </head>
  <body>
    <div class="detail power_detail">
      <div class="container_detail">
        <header class="detail_header">
          <div class="legend_bar">
            <div class="now"><span></span>今年（2016）</div>
            <div class="last_year"><span></span>前年（2015）</div>
          </div>

          <div class="detail_tit">9,262<span>kWh</span></div>

          <div class="close-button-wrapper">
            <div class="close_btn icon-button">
              <i class="fa fa-times" aria-hidden="true"></i>
            </div>
          </div>
        </header>

        <div class="chart_area">
          <div class="chart_area_content">
            <ul class="touch12monthes">
              <li id="m1" class="m1 touchmonth_li"></li>
              <li id="m2" class="m2 touchmonth_li"></li>
              <li id="m3" class="m3 touchmonth_li"></li>
              <li id="m4" class="m4 touchmonth_li"></li>
              <li id="m5" class="m5 touchmonth_li"></li>
              <li id="m6" class="m6 touchmonth_li"></li>
              <li id="m7" class="m7 touchmonth_li"></li>
              <li id="m8" class="m8 touchmonth_li"></li>
              <li id="m9" class="m9 touchmonth_li"></li>
              <li id="m10" class="m10 touchmonth_li"></li>
              <li id="m11" class="m11 touchmonth_li"></li>
              <!-- <li class="m12"></li> -->
            </ul>
          </div>

          <div class="tooltip">
            <div class="tooltip_inner">
              <div class="times">
                2016年<span class="start_month">5</span>月〜<span
                  class="end_month"
                  >6</span
                >月
              </div>
              <div class="used_power">
                使用量 <span class="used_power_num">362</span>kWh
              </div>
              <div class="comparison_last_year">
                前年比
                <span class="comp_num">+69</span
                >kWh<!-- （<span class="comp_per">13</span>%） -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>