monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 张凯
Commit e120383fc836457d51599ecb19b3b4879ee82be5 2 parents 89778cad 8b308c95

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-joke

Inline Side-by-side
Showing 7 changed files with 788 additions and 100 deletions
@@ -32,8 +32,6 @@ body @@ -32,8 +32,6 @@ body
32 color: #bbb; 32 color: #bbb;
33 position: relative; 33 position: relative;
34 display: list-item; 34 display: list-item;
35 -  
36 -  
37 } 35 }
38 .outlinediv span { 36 .outlinediv span {
39 /*color: rgba(0, 0, 0, 0.89);*/ 37 /*color: rgba(0, 0, 0, 0.89);*/
@@ -136,4 +134,33 @@ tr.zaibeione{ @@ -136,4 +134,33 @@ tr.zaibeione{
136 font-size: 8px; 134 font-size: 8px;
137 135
138 color: white; 136 color: white;
139 -}  
  137 +}
  138 +
  139 +/* 王凤增加 0416 start */
  140 +.cabinet_col{
  141 + height: 100%;
  142 + width: 9%;
  143 + float: left;
  144 +}
  145 +.img_wd{
  146 + background:url(../img/cabinet_small.png) top center no-repeat;
  147 + background-size: contain;
  148 + line-height:30px;
  149 + text-align:center;
  150 + color: #fff;
  151 + font-size: 12px;
  152 + margin-bottom: 5px;
  153 + cursor: pointer;
  154 +}
  155 +.img_light{
  156 + background:url(../img/cabinet_small_light.png) top center no-repeat;
  157 + background-size: contain;
  158 +}
  159 +.small{
  160 + height: 800px !important;
  161 +}
  162 +.empty{
  163 + height: 35px;
  164 +}
  165 +
  166 +/* 王凤增加 0416 end */
@@ -9,106 +9,326 @@ @@ -9,106 +9,326 @@
9 <link type='text/css' href='css/machineroom.css' rel="stylesheet"/> 9 <link type='text/css' href='css/machineroom.css' rel="stylesheet"/>
10 </head> 10 </head>
11 <body> 11 <body>
12 -<div class="outlinediv"> 12 +<div class="outlinediv small">
13 <!-- <span>3号机房平面图</span>--> 13 <!-- <span>3号机房平面图</span>-->
14 - <div class="xiaoshanthird-topcabinet">  
15 - <table>  
16 - <tr>  
17 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E1</span></a></td>  
18 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E2</span></a></td>  
19 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E3</span></a></td>  
20 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>  
21 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E5</span></a></td>  
22 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E6</span></a></td>  
23 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>  
24 - <td><img/></td>  
25 - <td><img/></td>  
26 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>  
27 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>  
28 - <td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>  
29 - <td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>  
30 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>  
31 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>  
32 - </tr>  
33 - <tr></tr>  
34 - <tr>  
35 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D1</span></a></td>  
36 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D2</span></a></td>  
37 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D3</span></a></td>  
38 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D4</span></a></td>  
39 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D5</span></a></td>  
40 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D6</span></a></td>  
41 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D7</span></a></td>  
42 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D8</span></a></td>  
43 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D9</span></a></td>  
44 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D10</span></a></td>  
45 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D11</span></a></td>  
46 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D12</span></a></td>  
47 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D13</span></a></td>  
48 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D14</span></a></td>  
49 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D15</span></a></td>  
50 - </tr> 14 +<!-- <div class="xiaoshanthird-topcabinet">-->
  15 + <!--<table>-->
  16 + <!-- <tr>-->
  17 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E1</span></a></td>-->
  18 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E2</span></a></td>-->
  19 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E3</span></a></td>-->
  20 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>-->
  21 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E5</span></a></td>-->
  22 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E6</span></a></td>-->
  23 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>-->
  24 + <!-- <td><img/></td>-->
  25 + <!-- <td><img/></td>-->
  26 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>-->
  27 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>-->
  28 + <!-- <td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>-->
  29 + <!-- <td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>-->
  30 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>-->
  31 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>-->
  32 + <!-- </tr>-->
  33 + <!-- <tr></tr>-->
  34 + <!-- <tr>-->
  35 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D1</span></a></td>-->
  36 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D2</span></a></td>-->
  37 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D3</span></a></td>-->
  38 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D4</span></a></td>-->
  39 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D5</span></a></td>-->
  40 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D6</span></a></td>-->
  41 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D7</span></a></td>-->
  42 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D8</span></a></td>-->
  43 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D9</span></a></td>-->
  44 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D10</span></a></td>-->
  45 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D11</span></a></td>-->
  46 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D12</span></a></td>-->
  47 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D13</span></a></td>-->
  48 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D14</span></a></td>-->
  49 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D15</span></a></td>-->
  50 + <!-- </tr>-->
51 51
52 - <tr></tr>  
53 - <tr>  
54 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C1</span></a></td>  
55 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C2</span></a></td>  
56 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C3</span></a></td>  
57 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C4</span></a></td>  
58 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C5</span></a></td>  
59 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C6</span></a></td>  
60 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C7</span></a></td>  
61 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C8</span></a></td>  
62 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C9</span></a></td>  
63 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C10</span></a></td>  
64 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C11</span></a></td>  
65 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C12</span></a></td>  
66 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C13</span></a></td>  
67 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C14</span></a></td>  
68 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C15</span></a></td>  
69 - </tr>  
70 - <tr></tr>  
71 - <tr>  
72 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B1</span></a></td>  
73 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B2</span></a></td>  
74 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B3</span></a></td>  
75 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B4</span></a></td>  
76 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B5</span></a></td>  
77 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B6</span></a></td>  
78 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B7</span></a></td>  
79 - <td><img/></td>  
80 - <td><img/></td>  
81 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B10</span></a></td>  
82 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B11</span></a></td>  
83 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B12</span></a></td>  
84 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B13</span></a></td>  
85 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B14</span></a></td>  
86 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B15</span></a></td>  
87 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B16</span></a></td>  
88 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B17</span></a></td> 52 + <!-- <tr></tr>-->
  53 + <!-- <tr>-->
  54 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C1</span></a></td>-->
  55 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C2</span></a></td>-->
  56 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C3</span></a></td>-->
  57 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C4</span></a></td>-->
  58 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C5</span></a></td>-->
  59 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C6</span></a></td>-->
  60 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C7</span></a></td>-->
  61 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C8</span></a></td>-->
  62 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C9</span></a></td>-->
  63 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C10</span></a></td>-->
  64 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C11</span></a></td>-->
  65 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C12</span></a></td>-->
  66 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C13</span></a></td>-->
  67 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C14</span></a></td>-->
  68 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C15</span></a></td>-->
  69 + <!-- </tr>-->
  70 + <!-- <tr></tr>-->
  71 + <!-- <tr>-->
  72 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B1</span></a></td>-->
  73 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B2</span></a></td>-->
  74 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B3</span></a></td>-->
  75 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B4</span></a></td>-->
  76 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B5</span></a></td>-->
  77 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B6</span></a></td>-->
  78 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B7</span></a></td>-->
  79 + <!-- <td><img/></td>-->
  80 + <!-- <td><img/></td>-->
  81 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B10</span></a></td>-->
  82 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B11</span></a></td>-->
  83 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B12</span></a></td>-->
  84 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B13</span></a></td>-->
  85 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B14</span></a></td>-->
  86 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B15</span></a></td>-->
  87 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B16</span></a></td>-->
  88 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B17</span></a></td>-->
89 89
90 - </tr>  
91 - <tr></tr>  
92 - <tr>  
93 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A1</span></a></td>  
94 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A2</span></a></td>  
95 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A3</span></a></td>  
96 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A4</span></a></td>  
97 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A5</span></a></td>  
98 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A6</span></a></td>  
99 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A7</span></a></td>  
100 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A8</span></a></td>  
101 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A9</span></a></td>  
102 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A10</span></a></td>  
103 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A11</span></a></td>  
104 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A12</span></a></td>  
105 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A13</span></a></td>  
106 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A14</span></a></td>  
107 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A15</span></a></td>  
108 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A16</span></a></td>  
109 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A17</span></a></td>  
110 - </tr>  
111 - </table> 90 + <!-- </tr>-->
  91 + <!-- <tr></tr>-->
  92 + <!-- <tr>-->
  93 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A1</span></a></td>-->
  94 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A2</span></a></td>-->
  95 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A3</span></a></td>-->
  96 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A4</span></a></td>-->
  97 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A5</span></a></td>-->
  98 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A6</span></a></td>-->
  99 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A7</span></a></td>-->
  100 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A8</span></a></td>-->
  101 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A9</span></a></td>-->
  102 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A10</span></a></td>-->
  103 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A11</span></a></td>-->
  104 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A12</span></a></td>-->
  105 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A13</span></a></td>-->
  106 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A14</span></a></td>-->
  107 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A15</span></a></td>-->
  108 + <!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A16</span></a></td>-->
  109 + <!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A17</span></a></td>-->
  110 + <!-- </tr>-->
  111 + <!--</table>-->
  112 + <!--<div>-->
  113 + <div class="xiaoshanthird-topcabinet1">
  114 + <div class="cabinet_col">
  115 + <div class="img_wd">K22</div>
  116 + <div class="img_wd">K21</div>
  117 + <div class="img_wd">K20</div>
  118 + <div class="img_wd">K19</div>
  119 + <div class="img_wd">K18</div>
  120 + <div class="img_wd">K17</div>
  121 + <div class="img_wd">K16</div>
  122 + <div class="img_wd">K15</div>
  123 + <div class="img_wd">K14</div>
  124 + <div class="img_wd">K13</div>
  125 + <div class="img_wd">K12</div>
  126 + <div class="img_wd">K11</div>
  127 + <div class="img_wd">K10</div>
  128 + <div class="img_wd">K9</div>
  129 + <div class="img_wd">K8</div>
  130 + </div>
  131 + <div class="cabinet_col">
  132 + <div class="img_wd">J22</div>
  133 + <div class="img_wd">J21</div>
  134 + <div class="img_wd">J20</div>
  135 + <div class="img_wd">J19</div>
  136 + <div class="img_wd">J18</div>
  137 + <div class="img_wd">J17</div>
  138 + <div class="img_wd">J16</div>
  139 + <div class="img_wd">J15</div>
  140 + <div class="img_wd">J14</div>
  141 + <div class="img_wd">J13</div>
  142 + <div class="img_wd">J12</div>
  143 + <div class="img_wd">J11</div>
  144 + <div class="img_wd">J10</div>
  145 + <div class="img_wd">J9</div>
  146 + <div class="img_wd">J8</div>
  147 + </div>
  148 +
  149 + <div class="cabinet_col">
  150 + <div class="empty"></div>
  151 + <div class="empty"></div>
  152 + <div class="img_wd">I20</div>
  153 + <div class="img_wd">I19</div>
  154 + <div class="img_wd">I18</div>
  155 + <div class="img_wd">I17</div>
  156 + <div class="img_wd">I16</div>
  157 + <div class="img_wd">I15</div>
  158 + <div class="img_wd">I14</div>
  159 + <div class="img_wd">I13</div>
  160 + <div class="img_wd">I12</div>
  161 + <div class="img_wd">I11</div>
  162 + <div class="img_wd">I10</div>
  163 + <div class="img_wd">I9</div>
  164 + <div class="img_wd">I8</div>
  165 + </div>
  166 + <div class="cabinet_col">
  167 + <div class="empty"></div>
  168 + <div class="empty"></div>
  169 + <div class="img_wd">H20</div>
  170 + <div class="img_wd">H19</div>
  171 + <div class="img_wd">H18</div>
  172 + <div class="img_wd">H17</div>
  173 + <div class="img_wd">H16</div>
  174 + <div class="img_wd">H15</div>
  175 + <div class="img_wd">H14</div>
  176 + <div class="img_wd">H13</div>
  177 + <div class="empty"></div>
  178 + <div class="empty"></div>
  179 + <div class="img_wd">H10</div>
  180 + <div class="img_wd">H9</div>
  181 + <div class="img_wd">H8</div>
  182 + </div>
  183 + <div class="cabinet_col">
  184 + <div class="empty"></div>
  185 + <div class="empty"></div>
  186 + <div class="img_wd">G20</div>
  187 + <div class="img_wd">G19</div>
  188 + <div class="img_wd">G18</div>
  189 + <div class="img_wd">G17</div>
  190 + <div class="img_wd">G16</div>
  191 + <div class="img_wd">G15</div>
  192 + <div class="img_wd">G14</div>
  193 + <div class="img_wd">G13</div>
  194 + <div class="img_wd">G12</div>
  195 + <div class="img_wd">G11</div>
  196 + <div class="img_wd">G10</div>
  197 + <div class="img_wd">G9</div>
  198 + <div class="img_wd">G8</div>
  199 + <div class="img_wd">G7</div>
  200 + <div class="img_wd">G6</div>
  201 + <div class="img_wd">G5</div>
  202 + <div class="img_wd">G4</div>
  203 + <div class="img_wd">G3</div>
  204 + <div class="img_wd">G2</div>
  205 + <div class="img_wd">G1</div>
  206 + </div>
  207 + <div class="cabinet_col">
  208 + <div class="empty"></div>
  209 + <div class="empty"></div>
  210 + <div class="img_wd">F20</div>
  211 + <div class="img_wd">F19</div>
  212 + <div class="img_wd">F18</div>
  213 + <div class="img_wd">F17</div>
  214 + <div class="img_wd">F16</div>
  215 + <div class="img_wd">F15</div>
  216 + <div class="img_wd">F14</div>
  217 + <div class="img_wd">F13</div>
  218 + <div class="img_wd">F12</div>
  219 + <div class="img_wd">F11</div>
  220 + <div class="img_wd">F10</div>
  221 + <div class="img_wd">F9</div>
  222 + <div class="img_wd">F8</div>
  223 + <div class="img_wd">F7</div>
  224 + <div class="img_wd">F6</div>
  225 + <div class="img_wd">F5</div>
  226 + <div class="img_wd">F4</div>
  227 + <div class="img_wd">F3</div>
  228 + <div class="img_wd">F2</div>
  229 + <div class="img_wd">F1</div>
  230 + </div>
  231 + <div class="cabinet_col">
  232 + <div class="empty"></div>
  233 + <div class="empty"></div>
  234 + <div class="img_wd">E15</div>
  235 + <div class="img_wd">E14</div>
  236 + <div class="img_wd">E13</div>
  237 + <div class="img_wd">E12</div>
  238 + <div class="img_wd">E11</div>
  239 + <div class="img_wd">E10</div>
  240 + <div class="img_wd">E9</div>
  241 + <div class="img_wd">E8</div>
  242 + <div class="empty"></div>
  243 + <div class="img_wd">E7</div>
  244 + <div class="img_wd">E6</div>
  245 + <div class="img_wd">E5</div>
  246 + <div class="img_wd">E4</div>
  247 + <div class="img_wd">E3</div>
  248 + <div class="img_wd">E2</div>
  249 + </div>
  250 + <div class="cabinet_col">
  251 + <div class="empty"></div>
  252 + <div class="empty"></div>
  253 + <div class="img_wd">D15</div>
  254 + <div class="img_wd">D14</div>
  255 + <div class="img_wd">D13</div>
  256 + <div class="img_wd">D12</div>
  257 + <div class="img_wd">D11</div>
  258 + <div class="img_wd">D10</div>
  259 + <div class="img_wd">D9</div>
  260 + <div class="img_wd">D8</div>
  261 + <div class="img_wd">D7</div>
  262 + <div class="img_wd">D6</div>
  263 + <div class="img_wd">D5</div>
  264 + <div class="img_wd">D4</div>
  265 + <div class="img_wd">D3</div>
  266 + <div class="img_wd">D2</div>
  267 + <div class="img_wd">D1</div>
  268 + </div>
  269 + <div class="cabinet_col">
  270 + <div class="empty"></div>
  271 + <div class="empty"></div>
  272 + <div class="img_wd">C15</div>
  273 + <div class="img_wd">C14</div>
  274 + <div class="img_wd">C13</div>
  275 + <div class="img_wd">C12</div>
  276 + <div class="img_wd">C11</div>
  277 + <div class="img_wd">C10</div>
  278 + <div class="img_wd">C9</div>
  279 + <div class="img_wd">C8</div>
  280 + <div class="img_wd">C7</div>
  281 + <div class="img_wd">C6</div>
  282 + <div class="img_wd">C5</div>
  283 + <div class="img_wd">C4</div>
  284 + <div class="img_wd">C3</div>
  285 + <div class="img_wd">C2</div>
  286 + <div class="img_wd">C1</div>
  287 + </div>
  288 + <div class="cabinet_col">
  289 + <div class="empty"></div>
  290 + <div class="empty"></div>
  291 + <div class="empty"></div>
  292 + <div class="img_wd">B17</div>
  293 + <div class="img_wd">B16</div>
  294 + <div class="img_wd">B15</div>
  295 + <div class="img_wd">B14</div>
  296 + <div class="img_wd">B13</div>
  297 + <div class="img_wd">B12</div>
  298 + <div class="img_wd">B11</div>
  299 + <div class="img_wd">B10</div>
  300 + <div class="empty"></div>
  301 + <div class="empty"></div>
  302 + <div class="img_wd">B7</div>
  303 + <div class="img_wd">B6</div>
  304 + <div class="img_wd">B5</div>
  305 + <div class="img_wd img_light">B4</div>
  306 + <div class="img_wd">B3</div>
  307 + <div class="img_wd">B2</div>
  308 + <div class="img_wd">B1</div>
  309 + </div>
  310 + <div class="cabinet_col">
  311 + <div class="empty"></div>
  312 + <div class="empty"></div>
  313 + <div class="empty"></div>
  314 + <div class="img_wd">A17</div>
  315 + <div class="img_wd">A16</div>
  316 + <div class="img_wd">A15</div>
  317 + <div class="img_wd">A14</div>
  318 + <div class="img_wd">A13</div>
  319 + <div class="img_wd">A12</div>
  320 + <div class="img_wd">A11</div>
  321 + <div class="img_wd">A10</div>
  322 + <div class="img_wd">A9</div>
  323 + <div class="img_wd">A8</div>
  324 + <div class="img_wd">A7</div>
  325 + <div class="img_wd">A6</div>
  326 + <div class="img_wd">A5</div>
  327 + <div class="img_wd">A4</div>
  328 + <div class="img_wd">A3</div>
  329 + <div class="img_wd">A2</div>
  330 + <div class="img_wd">A1</div>
  331 + </div>
112 </div> 332 </div>
113 </div> 333 </div>
114 </body> 334 </body>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/cabinet_detail.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 + <div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 + <!-- 第一个- -->
  21 + <div class='img-serve-1'>
  22 + <div class='img-serve'>
  23 + <img src="img/icon-state.png" alt="" class='state_small'>
  24 + <div class='img-serve-text'>-</div>
  25 + <div class='lamp'>
  26 + <img src="img/nocolor_1.png" alt="" class='img-empty'>
  27 + <div class='img-lamp lamp_small'>
  28 + <img src="img/nocolor_1.png" alt="">
  29 + <img src="img/nocolor_1.png" alt="">
  30 + <img src="img/nocolor_1.png" alt="">
  31 + <img src="img/greenColor.png" alt="">
  32 + </div>
  33 + </div>
  34 + </div>
  35 + </div>
  36 + <div class='img-serve-1'>
  37 + <div class='img-serve'>
  38 + <img src="img/icon-state.png" alt="" class='state_small'>
  39 + <div class='img-serve-text'>-</div>
  40 + <div class='lamp'>
  41 + <img src="img/nocolor_1.png" alt="" class='img-empty'>
  42 + <div class='img-lamp lamp_small'>
  43 + <img src="img/nocolor_1.png" alt="">
  44 + <img src="img/nocolor_1.png" alt="">
  45 + <img src="img/nocolor_1.png" alt="">
  46 + <img src="img/greenColor.png" alt="">
  47 + </div>
  48 + </div>
  49 + </div>
  50 + </div>
  51 +
  52 + <div class='serve'>
  53 + <div class='img-serve'>
  54 +
  55 + <img src="img/icon-state.png" alt="" class='state'>
  56 + <div class='img-serve-text'>-</div>
  57 + <div class='lamp'>
  58 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  59 + <div class='img-lamp'>
  60 + <img src="img/nocolor.png" alt="">
  61 + <img src="img/nocolor.png" alt="">
  62 + <img src="img/nocolor.png" alt="">
  63 + <img src="img/greenColor.png" alt="">
  64 + </div>
  65 + </div>
  66 +
  67 + </div>
  68 + </div>
  69 + <div class='serve'>
  70 + <div class='img-serve'>
  71 +
  72 + <img src="img/icon-state.png" alt="" class='state'>
  73 + <div class='img-serve-text'>-</div>
  74 + <div class='lamp'>
  75 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  76 + <div class='img-lamp'>
  77 + <img src="img/nocolor.png" alt="">
  78 + <img src="img/nocolor.png" alt="">
  79 + <img src="img/nocolor.png" alt="">
  80 + <img src="img/greenColor.png" alt="">
  81 + </div>
  82 + </div>
  83 +
  84 + </div>
  85 + </div>
  86 +
  87 + <!-- 第二个- -->
  88 + <div class='serve active'>
  89 + <div class='img-serve'>
  90 +
  91 + <img src="img/icon-state.png" alt="" class='state'>
  92 + <div class='img-serve-text'>-</div>
  93 + <div class='lamp'>
  94 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  95 + <div class='img-lamp'>
  96 + <img src="img/nocolor.png" alt="">
  97 + <img src="img/nocolor.png" alt="">
  98 + <img src="img/nocolor.png" alt="">
  99 + <img src="img/greenColor.png" alt="">
  100 + </div>
  101 + </div>
  102 + </div>
  103 + </div>
  104 +
  105 + <!-- 第三个- -->
  106 + <div class='serve'>
  107 + <div class='img-serve'>
  108 + <img src="img/icon-state.png" alt="" class='state'>
  109 + <div class='img-serve-text'>-</div>
  110 + <div class='lamp'>
  111 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  112 + <div class='img-lamp'>
  113 + <img src="img/nocolor.png" alt="">
  114 + <img src="img/nocolor.png" alt="">
  115 + <img src="img/nocolor.png" alt="">
  116 + <img src="img/greenColor.png" alt="">
  117 + </div>
  118 + </div>
  119 + </div>
  120 + </div>
  121 + <div class='serve'>
  122 + <div class='img-serve'>
  123 + <img src="img/icon-state.png" alt="" class='state'>
  124 + <div class='img-serve-text'>-</div>
  125 + <div class='lamp'>
  126 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  127 + <div class='img-lamp'>
  128 + <img src="img/nocolor.png" alt="">
  129 + <img src="img/nocolor.png" alt="">
  130 + <img src="img/nocolor.png" alt="">
  131 + <img src="img/greenColor.png" alt="">
  132 + </div>
  133 + </div>
  134 + </div>
  135 + </div>
  136 + <div class='serve'>
  137 + <div class='img-serve'>
  138 + <img src="img/icon-state.png" alt="" class='state'>
  139 + <div class='img-serve-text'>-</div>
  140 + <div class='lamp'>
  141 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  142 + <div class='img-lamp'>
  143 + <img src="img/nocolor.png" alt="">
  144 + <img src="img/nocolor.png" alt="">
  145 + <img src="img/nocolor.png" alt="">
  146 + <img src="img/greenColor.png" alt="">
  147 + </div>
  148 + </div>
  149 + </div>
  150 + </div>
  151 + <div class='serve'>
  152 + <div class='img-serve'>
  153 + <img src="img/icon-state.png" alt="" class='state'>
  154 + <div class='img-serve-text'>-</div>
  155 + <div class='lamp'>
  156 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  157 + <div class='img-lamp'>
  158 + <img src="img/nocolor.png" alt="">
  159 + <img src="img/nocolor.png" alt="">
  160 + <img src="img/nocolor.png" alt="">
  161 + <img src="img/greenColor.png" alt="">
  162 + </div>
  163 + </div>
  164 + </div>
  165 + </div>
  166 + <div class='serve'>
  167 + <div class='img-serve'>
  168 + <img src="img/icon-state.png" alt="" class='state'>
  169 + <div class='img-serve-text'>-</div>
  170 + <div class='lamp'>
  171 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  172 + <div class='img-lamp'>
  173 + <img src="img/nocolor.png" alt="">
  174 + <img src="img/nocolor.png" alt="">
  175 + <img src="img/nocolor.png" alt="">
  176 + <img src="img/greenColor.png" alt="">
  177 + </div>
  178 + </div>
  179 + </div>
  180 + </div>
  181 +
  182 +
  183 + </div>
  184 +
  185 +
  186 + </div>
  187 +
  188 +
  189 +
  190 + <!-- 右侧机柜详细信息 -->
  191 + <div class='info'>
  192 +
  193 +<!-- 机柜信息 -->
  194 + <div class='info-top'>
  195 + <div class='info-contain'>
  196 + <div class='info-text'>机柜信息</div>
  197 + <div class='info-text-bot'>
  198 + <p>机 房：萧山7号机</p>
  199 + <p>机柜编号：E07</p>
  200 + <p>机柜容量：42U</p>
  201 + <p>设备数量：3台</p>
  202 + <p>告警量：无告警</p>
  203 + </div>
  204 + </div>
  205 + </div>
  206 +
  207 +<!-- 设备信息 -->
  208 + <div class='info-bottom'>
  209 + <div class='info-contain'>
  210 + <div class='info-text'>设备信息</div>
  211 + <div class='info-text-bot'>
  212 + <p>品 牌：曙光</p>
  213 + <p>型 号：I840—G25</p>
  214 + <p>序 列 号：9800076500643112</p>
  215 + <p>管 理 IP：80.12.92.21</p>
  216 + <p>业 务 IP：80.12.92.31</p>
  217 + <p>用 途：发票系统使用</p>
  218 + </div>
  219 + </div>
  220 + </div>
  221 +
  222 +
  223 + </div>
  224 +
  225 +
  226 + </div>
  227 +
  228 +</body>
  229 +
  230 +</html>
  1 +
  2 +body{
  3 + background-image: url(../img/img-bg-1.png);
  4 + background-size: 100%;
  5 +
  6 +}
  7 +li{
  8 + list-style: none
  9 +}
  10 +
  11 +.all{
  12 + display:flex;
  13 + overflow: hidden;
  14 +}
  15 +
  16 +
  17 +
  18 +/* 左侧机柜样式 */
  19 +
  20 +.contain{
  21 +
  22 + width:413px;
  23 + height:710px;
  24 + /*margin-left:3%;*/
  25 + /*margin-top:5%;*/
  26 + /* background-color: red; */
  27 + background-image: url(../img/img-no-machine.png);
  28 + background-size: 100%;
  29 + background-repeat: no-repeat;
  30 + position: relative;
  31 +
  32 +}
  33 +
  34 +.contain-server{
  35 + display: flex;
  36 + justify-content: space-between;
  37 + flex-direction:column;
  38 + align-items: center;
  39 + margin-bottom: 15px;
  40 +
  41 +}
  42 +
  43 +
  44 +.serve{
  45 + width:370px;
  46 + height:70px;
  47 + margin-left:-3px;
  48 + background-image: url(../img/img-4Uservice.png);
  49 + background-size: 100% 100%;
  50 + background-repeat: no-repeat;
  51 +}
  52 +.img-serve-8{
  53 + background-image: url(../img/img-8Uservice.png);
  54 + height:127px;
  55 + width:383px;
  56 + margin-bottom: 10px;
  57 +}
  58 +.img-serve-1{
  59 + background-image: url(../img/img-1Uservice.png);
  60 + height:35px;
  61 + width:370px;
  62 + margin-left: -3px;
  63 + background-size: 100% 100%;
  64 + background-repeat: no-repeat;
  65 +}
  66 +.img-serve{
  67 + display: flex;
  68 + justify-content: space-around;
  69 + align-items: center;
  70 + height: 100%;
  71 +
  72 +}
  73 +
  74 +.lamp{
  75 + display:flex;
  76 + width:58%;
  77 +}
  78 +
  79 +.server-flex{
  80 + display: flex;
  81 + justify-content: space-around;
  82 + width:42%;
  83 +}
  84 +.img-lamp{
  85 + /*margin-left:15px;*/
  86 + margin-top:10px
  87 +}
  88 +.lamp_small{
  89 + margin-top:-3px;
  90 +}
  91 +/* 服务器状态图片样式 */
  92 +.state{
  93 + width:35px;
  94 + height:35px;
  95 + margin-top:8px;
  96 + margin-left:4px;
  97 +}
  98 +.state_small{
  99 + width:16px;
  100 + height:16px;
  101 + margin-top:0px;
  102 + margin-left:4px;
  103 +}
  104 +
  105 +.img-serve-text{
  106 + color:#fff;
  107 + line-height: 50px;
  108 + /*margin-left:10px;*/
  109 +}
  110 +
  111 +
  112 +.img-weblog{
  113 + margin-left:50px;
  114 + margin-top:15px;
  115 + width:30px;
  116 + height:20px;
  117 +}
  118 +
  119 +.img-empty{
  120 + margin-left:50px;
  121 + margin-top:15px;
  122 + width:30px;
  123 + height:5px;
  124 +}
  125 +
  126 +
  127 +/* 右侧机柜详细信息样式 */
  128 +
  129 +.info{
  130 + width:500px;
  131 + height:700px;
  132 + margin-right:8%;
  133 + /*margin-top:5%;*/
  134 + /* background-color: red; */
  135 + display: flex;
  136 + flex-flow: column;
  137 + justify-content: center;
  138 +
  139 +}
  140 +
  141 +
  142 +.info-top{
  143 + height:340px;
  144 + /*margin-top:-10px;*/
  145 + background-image: url(../img/img-machineInfo-bg.png);
  146 +
  147 +}
  148 +
  149 +.info-bottom{
  150 + height:340px;
  151 + margin-top:20px;
  152 + background-image: url(../img/img-deviceInfo-bg.png);
  153 +}
  154 +.contain{
  155 + display: flex;
  156 + justify-content: center;
  157 + align-items: end;
  158 + margin-right: 30px;
  159 +}
  160 +.info-contain{
  161 + width:90%;
  162 + display:inline-block;
  163 + height:250px;
  164 + margin-top:60px;
  165 + margin-left: 40px;
  166 +
  167 +}
  168 +
  169 +
  170 +.info-text{
  171 + height:40px;
  172 + font-weight: bolder;
  173 + font-size: 20px;
  174 + color:#fff
  175 + /* background-color: rgb(59, 185, 8); */
  176 +}
  177 +
  178 +.info-text-bot{
  179 + margin-top:-15px;
  180 + height:200px;
  181 + font-size: 16px;
  182 + letter-spacing: 2px;
  183 + color:#fff
  184 + /* background-color: rgb(93, 15, 196); */
  185 +}
  186 +.img-serve{
  187 + cursor: pointer;
  188 +}
  189 +.info-bottom{
  190 +}
  191 +body::-webkit-scrollbar{
  192 + width:15px;
  193 +}
  194 +/* 垂直滚动条的滑动块 */
  195 +body::-webkit-scrollbar-thumb:vertical {
  196 + border-radius: 4px;
  197 + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  198 + background-color:#169db2;
  199 +}
  200 +/*修改滚动条的下面的样式*/
  201 +body::-webkit-scrollbar-track{
  202 + background-color:#05235c;
  203 + -webkit-borderd-radius:2em;
  204 + -moz-borderd-radius:2em;
  205 + borderd-radius:2em;
  206 +}
  207 +
  208 +.active{
  209 + background: #5686a9;
  210 + opacity: 0.6;
  211 +}