monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 8b308c95690afc9b8833082fec3359eab294b521 2 parents 1bccfdd6 bcc3a5b5

Merge branch 'wangfeng' into 'master' 

2D机房静态页面



See merge request !1120
Inline Side-by-side
Showing 7 changed files with 787 additions and 99 deletions
... ... @@ -32,8 +32,6 @@ body
color: #bbb;
position: relative;
display: list-item;
}
.outlinediv span {
/*color: rgba(0, 0, 0, 0.89);*/
... ... @@ -137,3 +135,32 @@ tr.zaibeione{
color: white;
}
/* 王凤增加 0416 start */
.cabinet_col{
height: 100%;
width: 9%;
float: left;
}
.img_wd{
background:url(../img/cabinet_small.png) top center no-repeat;
background-size: contain;
line-height:30px;
text-align:center;
color: #fff;
font-size: 12px;
margin-bottom: 5px;
cursor: pointer;
}
.img_light{
background:url(../img/cabinet_small_light.png) top center no-repeat;
background-size: contain;
}
.small{
height: 800px !important;
}
.empty{
height: 35px;
}
/* 王凤增加 0416 end */
... ...
... ... @@ -9,106 +9,326 @@
<link type='text/css' href='css/machineroom.css' rel="stylesheet"/>
</head>
<body>
<div class="outlinediv">
<div class="outlinediv small">
<!-- <span>3号机房平面图</span>-->
<div class="xiaoshanthird-topcabinet">
<table>
<tr>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E1</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>
<td><img/></td>
<td><img/></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>
<td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>
<td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>
</tr>
<tr></tr>
<tr>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D1</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D4</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D7</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D8</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D9</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D11</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D12</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D15</span></a></td>
</tr>
<!-- <div class="xiaoshanthird-topcabinet">-->
<!--<table>-->
<!-- <tr>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E1</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E2</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E3</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E5</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E6</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>-->
<!-- <td><img/></td>-->
<!-- <td><img/></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>-->
<!-- <td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>-->
<!-- <td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>-->
<!-- </tr>-->
<!-- <tr></tr>-->
<!-- <tr>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D1</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D2</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D3</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D4</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D5</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D6</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D7</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D8</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D9</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D10</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">D11</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D12</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D13</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D14</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">D15</span></a></td>-->
<!-- </tr>-->
<tr></tr>
<tr>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C1</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C4</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C7</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C8</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C9</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C11</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C12</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C15</span></a></td>
</tr>
<tr></tr>
<tr>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B1</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B4</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B7</span></a></td>
<td><img/></td>
<td><img/></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B11</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B12</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B15</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B16</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B17</span></a></td>
<!-- <tr></tr>-->
<!-- <tr>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C1</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C2</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C3</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C4</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C5</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C6</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C7</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C8</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C9</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C10</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">C11</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C12</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C13</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C14</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">C15</span></a></td>-->
<!-- </tr>-->
<!-- <tr></tr>-->
<!-- <tr>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B1</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B2</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B3</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B4</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B5</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B6</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B7</span></a></td>-->
<!-- <td><img/></td>-->
<!-- <td><img/></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B10</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B11</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B12</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B13</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B14</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B15</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">B16</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">B17</span></a></td>-->
</tr>
<tr></tr>
<tr>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A1</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A4</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A7</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A8</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A9</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A10</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A11</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A12</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A13</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A14</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A15</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A16</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A17</span></a></td>
</tr>
</table>
<!-- </tr>-->
<!-- <tr></tr>-->
<!-- <tr>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A1</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A2</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A3</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A4</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A5</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A6</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A7</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A8</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A9</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A10</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A11</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A12</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A13</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A14</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A15</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">A16</span></a></td>-->
<!-- <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">A17</span></a></td>-->
<!-- </tr>-->
<!--</table>-->
<!--<div>-->
<div class="xiaoshanthird-topcabinet1">
<div class="cabinet_col">
<div class="img_wd">K22</div>
<div class="img_wd">K21</div>
<div class="img_wd">K20</div>
<div class="img_wd">K19</div>
<div class="img_wd">K18</div>
<div class="img_wd">K17</div>
<div class="img_wd">K16</div>
<div class="img_wd">K15</div>
<div class="img_wd">K14</div>
<div class="img_wd">K13</div>
<div class="img_wd">K12</div>
<div class="img_wd">K11</div>
<div class="img_wd">K10</div>
<div class="img_wd">K9</div>
<div class="img_wd">K8</div>
</div>
<div class="cabinet_col">
<div class="img_wd">J22</div>
<div class="img_wd">J21</div>
<div class="img_wd">J20</div>
<div class="img_wd">J19</div>
<div class="img_wd">J18</div>
<div class="img_wd">J17</div>
<div class="img_wd">J16</div>
<div class="img_wd">J15</div>
<div class="img_wd">J14</div>
<div class="img_wd">J13</div>
<div class="img_wd">J12</div>
<div class="img_wd">J11</div>
<div class="img_wd">J10</div>
<div class="img_wd">J9</div>
<div class="img_wd">J8</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">I20</div>
<div class="img_wd">I19</div>
<div class="img_wd">I18</div>
<div class="img_wd">I17</div>
<div class="img_wd">I16</div>
<div class="img_wd">I15</div>
<div class="img_wd">I14</div>
<div class="img_wd">I13</div>
<div class="img_wd">I12</div>
<div class="img_wd">I11</div>
<div class="img_wd">I10</div>
<div class="img_wd">I9</div>
<div class="img_wd">I8</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">H20</div>
<div class="img_wd">H19</div>
<div class="img_wd">H18</div>
<div class="img_wd">H17</div>
<div class="img_wd">H16</div>
<div class="img_wd">H15</div>
<div class="img_wd">H14</div>
<div class="img_wd">H13</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">H10</div>
<div class="img_wd">H9</div>
<div class="img_wd">H8</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">G20</div>
<div class="img_wd">G19</div>
<div class="img_wd">G18</div>
<div class="img_wd">G17</div>
<div class="img_wd">G16</div>
<div class="img_wd">G15</div>
<div class="img_wd">G14</div>
<div class="img_wd">G13</div>
<div class="img_wd">G12</div>
<div class="img_wd">G11</div>
<div class="img_wd">G10</div>
<div class="img_wd">G9</div>
<div class="img_wd">G8</div>
<div class="img_wd">G7</div>
<div class="img_wd">G6</div>
<div class="img_wd">G5</div>
<div class="img_wd">G4</div>
<div class="img_wd">G3</div>
<div class="img_wd">G2</div>
<div class="img_wd">G1</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">F20</div>
<div class="img_wd">F19</div>
<div class="img_wd">F18</div>
<div class="img_wd">F17</div>
<div class="img_wd">F16</div>
<div class="img_wd">F15</div>
<div class="img_wd">F14</div>
<div class="img_wd">F13</div>
<div class="img_wd">F12</div>
<div class="img_wd">F11</div>
<div class="img_wd">F10</div>
<div class="img_wd">F9</div>
<div class="img_wd">F8</div>
<div class="img_wd">F7</div>
<div class="img_wd">F6</div>
<div class="img_wd">F5</div>
<div class="img_wd">F4</div>
<div class="img_wd">F3</div>
<div class="img_wd">F2</div>
<div class="img_wd">F1</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">E15</div>
<div class="img_wd">E14</div>
<div class="img_wd">E13</div>
<div class="img_wd">E12</div>
<div class="img_wd">E11</div>
<div class="img_wd">E10</div>
<div class="img_wd">E9</div>
<div class="img_wd">E8</div>
<div class="empty"></div>
<div class="img_wd">E7</div>
<div class="img_wd">E6</div>
<div class="img_wd">E5</div>
<div class="img_wd">E4</div>
<div class="img_wd">E3</div>
<div class="img_wd">E2</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">D15</div>
<div class="img_wd">D14</div>
<div class="img_wd">D13</div>
<div class="img_wd">D12</div>
<div class="img_wd">D11</div>
<div class="img_wd">D10</div>
<div class="img_wd">D9</div>
<div class="img_wd">D8</div>
<div class="img_wd">D7</div>
<div class="img_wd">D6</div>
<div class="img_wd">D5</div>
<div class="img_wd">D4</div>
<div class="img_wd">D3</div>
<div class="img_wd">D2</div>
<div class="img_wd">D1</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">C15</div>
<div class="img_wd">C14</div>
<div class="img_wd">C13</div>
<div class="img_wd">C12</div>
<div class="img_wd">C11</div>
<div class="img_wd">C10</div>
<div class="img_wd">C9</div>
<div class="img_wd">C8</div>
<div class="img_wd">C7</div>
<div class="img_wd">C6</div>
<div class="img_wd">C5</div>
<div class="img_wd">C4</div>
<div class="img_wd">C3</div>
<div class="img_wd">C2</div>
<div class="img_wd">C1</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">B17</div>
<div class="img_wd">B16</div>
<div class="img_wd">B15</div>
<div class="img_wd">B14</div>
<div class="img_wd">B13</div>
<div class="img_wd">B12</div>
<div class="img_wd">B11</div>
<div class="img_wd">B10</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">B7</div>
<div class="img_wd">B6</div>
<div class="img_wd">B5</div>
<div class="img_wd img_light">B4</div>
<div class="img_wd">B3</div>
<div class="img_wd">B2</div>
<div class="img_wd">B1</div>
</div>
<div class="cabinet_col">
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="img_wd">A17</div>
<div class="img_wd">A16</div>
<div class="img_wd">A15</div>
<div class="img_wd">A14</div>
<div class="img_wd">A13</div>
<div class="img_wd">A12</div>
<div class="img_wd">A11</div>
<div class="img_wd">A10</div>
<div class="img_wd">A9</div>
<div class="img_wd">A8</div>
<div class="img_wd">A7</div>
<div class="img_wd">A6</div>
<div class="img_wd">A5</div>
<div class="img_wd">A4</div>
<div class="img_wd">A3</div>
<div class="img_wd">A2</div>
<div class="img_wd">A1</div>
</div>
</div>
</div>
</body>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/cabinet_detail.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个- -->
<div class='img-serve-1'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state_small'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/nocolor_1.png" alt="" class='img-empty'>
<div class='img-lamp lamp_small'>
<img src="img/nocolor_1.png" alt="">
<img src="img/nocolor_1.png" alt="">
<img src="img/nocolor_1.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='img-serve-1'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state_small'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/nocolor_1.png" alt="" class='img-empty'>
<div class='img-lamp lamp_small'>
<img src="img/nocolor_1.png" alt="">
<img src="img/nocolor_1.png" alt="">
<img src="img/nocolor_1.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第二个- -->
<div class='serve active'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第三个- -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>-</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info'>
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房：萧山7号机</p>
<p>机柜编号：E07</p>
<p>机柜容量：42U</p>
<p>设备数量：3台</p>
<p>告警量：无告警</p>
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom'>
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>品 牌：曙光</p>
<p>型 号：I840—G25</p>
<p>序 列 号：9800076500643112</p>
<p>管 理 IP：80.12.92.21</p>
<p>业 务 IP：80.12.92.31</p>
<p>用 途：发票系统使用</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
... ...
body{
background-image: url(../img/img-bg-1.png);
background-size: 100%;
}
li{
list-style: none
}
.all{
display:flex;
overflow: hidden;
}
/* 左侧机柜样式 */
.contain{
width:413px;
height:710px;
/*margin-left:3%;*/
/*margin-top:5%;*/
/* background-color: red; */
background-image: url(../img/img-no-machine.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.contain-server{
display: flex;
justify-content: space-between;
flex-direction:column;
align-items: center;
margin-bottom: 15px;
}
.serve{
width:370px;
height:70px;
margin-left:-3px;
background-image: url(../img/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve-8{
background-image: url(../img/img-8Uservice.png);
height:127px;
width:383px;
margin-bottom: 10px;
}
.img-serve-1{
background-image: url(../img/img-1Uservice.png);
height:35px;
width:370px;
margin-left: -3px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.lamp{
display:flex;
width:58%;
}
.server-flex{
display: flex;
justify-content: space-around;
width:42%;
}
.img-lamp{
/*margin-left:15px;*/
margin-top:10px
}
.lamp_small{
margin-top:-3px;
}
/* 服务器状态图片样式 */
.state{
width:35px;
height:35px;
margin-top:8px;
margin-left:4px;
}
.state_small{
width:16px;
height:16px;
margin-top:0px;
margin-left:4px;
}
.img-serve-text{
color:#fff;
line-height: 50px;
/*margin-left:10px;*/
}
.img-weblog{
margin-left:50px;
margin-top:15px;
width:30px;
height:20px;
}
.img-empty{
margin-left:50px;
margin-top:15px;
width:30px;
height:5px;
}
/* 右侧机柜详细信息样式 */
.info{
width:500px;
height:700px;
margin-right:8%;
/*margin-top:5%;*/
/* background-color: red; */
display: flex;
flex-flow: column;
justify-content: center;
}
.info-top{
height:340px;
/*margin-top:-10px;*/
background-image: url(../img/img-machineInfo-bg.png);
}
.info-bottom{
height:340px;
margin-top:20px;
background-image: url(../img/img-deviceInfo-bg.png);
}
.contain{
display: flex;
justify-content: center;
align-items: end;
margin-right: 30px;
}
.info-contain{
width:90%;
display:inline-block;
height:250px;
margin-top:60px;
margin-left: 40px;
}
.info-text{
height:40px;
font-weight: bolder;
font-size: 20px;
color:#fff
/* background-color: rgb(59, 185, 8); */
}
.info-text-bot{
margin-top:-15px;
height:200px;
font-size: 16px;
letter-spacing: 2px;
color:#fff
/* background-color: rgb(93, 15, 196); */
}
.img-serve{
cursor: pointer;
}
.info-bottom{
}
body::-webkit-scrollbar{
width:15px;
}
/* 垂直滚动条的滑动块 */
body::-webkit-scrollbar-thumb:vertical {
border-radius: 4px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:#169db2;
}
/*修改滚动条的下面的样式*/
body::-webkit-scrollbar-track{
background-color:#05235c;
-webkit-borderd-radius:2em;
-moz-borderd-radius:2em;
borderd-radius:2em;
}
.active{
background: #5686a9;
opacity: 0.6;
}
... ...