Helmet.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  9. <meta http-equiv="pragma" content="no-cache">
  10. <meta http-equiv="Cache" content="no-cache">
  11. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  12. <meta http-equiv="expires" content="0">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  14. <!--引入 element-ui 的样式,-->
  15. <link rel="stylesheet" href="../css/element.css">
  16. <link rel="stylesheet" href="../css/style.css">
  17. <link rel="stylesheet" href="../css/base.css">
  18. <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  19. <script type="text/javascript">
  20. document.write('<script src="../js/yz/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  21. document.write('<script src="../js/yz/shipLi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  22. </script>
  23. <script>
  24. checkLogin();
  25. </script>
  26. </head>
  27. <style type="text/css">
  28. *{
  29. margin: 0;
  30. padding: 0;
  31. box-sizing: border-box;
  32. }
  33. body{
  34. height: 100vh;
  35. color:#000;
  36. overflow: hidden;
  37. }
  38. li{
  39. list-style: none;
  40. }
  41. ul li .act{
  42. color: #20a6ff !important;
  43. }
  44. .yz_main #_View{
  45. position: relative;
  46. overflow: hidden;
  47. border: 1px solid #00adad;
  48. }
  49. #_View .noBg{
  50. position: relative;
  51. height: 100%;
  52. width: 100%;
  53. background-color: #00131b;
  54. }
  55. #_View .noBg img{
  56. position: absolute;
  57. top:50%;
  58. left:50%;
  59. transform: translate(-50%,-50%);
  60. width: 50%;
  61. }
  62. @-webkit-keyframes rotation{
  63. from { -webkit-transform: rotate(0deg);}
  64. to { -webkit-transform: rotate(360deg); }
  65. }
  66. #_View .loadImg{
  67. position: absolute;
  68. top: calc(50% - 20px);
  69. left: calc(50% - 20px);
  70. width: 40px;
  71. height:40px;
  72. z-index: 4444;
  73. margin-bottom: 20px;
  74. -webkit- transform: rotate (360deg);
  75. animation: rotation 2s linear infinite;
  76. - moz -animation: rotation 2s linear infinite;
  77. -webkit - animation: rotation 2s linear infinite ;
  78. -o-animation: rotation 2s linear infinite;
  79. }
  80. ._helme{
  81. position: absolute;
  82. left: 0;
  83. top: 0;
  84. height: calc(100% - 2px);
  85. width: calc(100% - 2px);
  86. margin: 1px;
  87. display: none;
  88. background-color:#000;
  89. }
  90. #helmeVi{
  91. height:100%;
  92. width:100%;
  93. }
  94. .tool{
  95. display: flex;
  96. align-items: center;
  97. justify-content: space-between;
  98. height: 40px;
  99. margin-top: 5px;
  100. color: #fff;
  101. background-color: #06162d;
  102. }
  103. .tool .iconfont{
  104. cursor: pointer;
  105. font-size:24px;
  106. padding: 0 10px;
  107. }
  108. .tool>div{
  109. display: flex;
  110. align-items: center;
  111. }
  112. .tool .playStop{
  113. display: none;
  114. }
  115. .text-rgb{
  116. color: rgba(255,255,255,0.6);
  117. }
  118. ._Call{
  119. position: absolute;
  120. left: 80px;
  121. bottom: 100px;
  122. width: 200px;
  123. display: none;
  124. background-color: #fff;
  125. }
  126. </style>
  127. <body>
  128. <div class="yz_container">
  129. <div class="yz_aside">
  130. <div class="padding-sm" style="height: 100%;">
  131. <div class="padding-bottom-sm text-bold" style="color: #5793f3;">安全帽列表</div>
  132. <ul id="html_view" style="height: calc(100% - 40px);overflow-y: auto;">
  133. </ul>
  134. </div>
  135. </div>
  136. <div class="yz_main">
  137. <div style="height: calc(100% - 45px);position: relative;">
  138. <div style="height: 100%;" id="_View">
  139. <div class="noBg"><img src="../imgs/maozi.png" ></div>
  140. </div>
  141. <div class="_helme">
  142. <video id="helmeVi" muted controls></video>
  143. </div>
  144. </div>
  145. <div class="tool">
  146. <div>
  147. <div class="iconfont icon-yuyin" style="color: #55aaff;font-size: 28px;"></div>
  148. </div>
  149. <div>
  150. <div class="iconfont icon-tuichu text-red"></div>
  151. <div class="iconfont icon-fullScreen"></div>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="_Call text-sm">
  156. <div class="flex justify-between padding-lr-sm padding-tb-xs align-center bg-gray">
  157. <div>语音对讲</div>
  158. <div class="iconfont icon-cha yz_cursor"></div>
  159. </div>
  160. <div class="padding-sm text-center">
  161. <img src="../imgs/voice.yz4975.png" style="width: 100px;cursor: pointer;">
  162. <div class="margin-top-sm">未连接</div>
  163. <div class="text-lg text-bold">00:00:00</div>
  164. </div>
  165. </div>
  166. </div>
  167. </body>
  168. <!-- <script src="../js/yz/TcPlayer-2.3.1.js" type="text/javascript" charset="utf-8"></script> -->
  169. <script src="../js/yz/jswebrtc_v1.js" type="text/javascript" charset="utf-8"></script>
  170. <!-- <script src="../js/yz/ZLMRTCClient.js" type="text/javascript" charset="utf-8"></script> -->
  171. <script src="../js/yz/sip-0.13.6.min.js" type="text/javascript" charset="utf-8"></script>
  172. <script type="text/javascript">
  173. document.write('<script src="../js/yz/helmetPc.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  174. </script>
  175. </html>